Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4565c9a

Browse files
Style Patterns List and individual Pattern component
1 parent f69c4fc commit 4565c9a

File tree

7 files changed

+95
-21
lines changed

7 files changed

+95
-21
lines changed

‎src/components/Code.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ const Code = props => {
1313
return (
1414
<Fragment>
1515
{js === 'es5' && (
16-
<SyntaxHighlighter language="javascript" style={style}>
16+
<SyntaxHighlighter language="javascript" style={style}className="fixed">
1717
{current.codeES5}
1818
</SyntaxHighlighter>
1919
)}
2020

2121
{js === 'es6' && (
22-
<SyntaxHighlighter language="javascript" style={style}>
22+
<SyntaxHighlighter language="javascript" style={style}className="fixed">
2323
{current.codeES6}
2424
</SyntaxHighlighter>
2525
)}

‎src/components/Header.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@ const Header = props => {
5959
page: 'Game'
6060
},
6161
{
62-
path: '/about',
63-
page: 'About'
62+
path: '/patterns',
63+
page: 'Pattern Reference'
6464
},
6565
{
66-
path: '/patterns',
67-
page: 'Patterns'
66+
path: '/about',
67+
page: 'About'
6868
}
6969
];
7070

‎src/components/Pattern.jsx‎

Lines changed: 77 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,88 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { connect } from 'react-redux';
24
import styled from 'styled-components';
35
import { Link } from 'react-router-dom';
6+
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
7+
import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
8+
import styleLight from '../styles/hljs/hljs.light';
9+
import styleDark from '../styles/hljs/hljs.dark';
10+
import { patterns } from '../static/patterns';
11+
import { getMode } from '../selectors';
412

5-
const StyledPattern = styled.div``;
13+
SyntaxHighlighter.registerLanguage('javascript', js);
14+
15+
const StyledPattern = styled.div`
16+
color: ${props => props.theme.text};
17+
18+
h2,
19+
h3 {
20+
color: ${props => props.theme.header};
21+
margin-top: 2.5rem;
22+
}
23+
`;
24+
25+
const Memo = styled.span`
26+
color: ${props => props.theme.ATLANTIS};
27+
display: block;
28+
`;
29+
30+
const StyledLink = styled(Link)`
31+
border-bottom: 1px solid ${props => props.theme.CRIMSON};
32+
color: ${props => props.theme.CRIMSON};
33+
display: inline-block;
34+
margin-top: 2rem;
35+
text-decoration: none;
36+
37+
&:hover {
38+
border-bottom: 1px solid transparent;
39+
}
40+
`;
41+
42+
const Pattern = ({ match, mode }) => {
43+
const {
44+
params: { id }
45+
} = match;
46+
47+
const pattern = patterns.filter(item => item.id === id)[0];
48+
49+
const style = mode === 'dark' ? styleDark : styleLight;
650

7-
const Pattern = props => {
851
return (
952
<StyledPattern>
10-
<Link to="/patterns">Back to Patterns List</Link>
11-
<h1>{props.match.params.id}</h1>
53+
<StyledLink to="/patterns">&larr; Back to Patterns List</StyledLink>
54+
{pattern && (
55+
<React.Fragment>
56+
<h2>{pattern.name}</h2>
57+
<p>
58+
<Memo>Type:</Memo>
59+
{pattern.type} pattern
60+
</p>
61+
<p>
62+
<Memo>Description:</Memo>
63+
{`This pattern ${pattern.hint}.`}
64+
</p>
65+
66+
<h3>ES5</h3>
67+
<SyntaxHighlighter language="javascript" style={style}>
68+
{pattern.codeES5}
69+
</SyntaxHighlighter>
70+
71+
<h3>ES6</h3>
72+
<SyntaxHighlighter language="javascript" style={style}>
73+
{pattern.codeES6}
74+
</SyntaxHighlighter>
75+
</React.Fragment>
76+
)}
1277
</StyledPattern>
1378
);
1479
};
1580

16-
export default Pattern;
81+
Pattern.propTypes = {
82+
match: PropTypes.object.isRequired,
83+
mode: PropTypes.string.isRequired
84+
};
85+
86+
export default connect(state => ({
87+
mode: getMode(state)
88+
}))(Pattern);

‎src/components/PatternsList.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const StyledPatterns = styled.div`
1616
}
1717
}
1818
19-
h1,
20-
h2 {
19+
h2,
20+
h3 {
2121
color: ${props => props.theme.header};
2222
margin-top: 2.5rem;
2323
}
@@ -40,14 +40,14 @@ const PatternsList = () => {
4040

4141
return (
4242
<StyledPatterns>
43-
<h1>DESIGN PATTERNS</h1>
43+
<h2>Design Patterns</h2>
4444

4545
<p>
4646
In software engineering, a design pattern is a general repeatable solution to a commonly
4747
occurring problem in software design.
4848
</p>
4949

50-
<h2>Creational Design Patterns</h2>
50+
<h3>Creational Design Patterns</h3>
5151
<p>
5252
These design patterns are all about class instantiation. This pattern can be further divided
5353
into class-creation patterns and object-creational patterns. While class-creation patterns
@@ -56,15 +56,15 @@ const PatternsList = () => {
5656
</p>
5757
{lister('creational')}
5858

59-
<h2>Structural Design Patterns</h2>
59+
<h3>Structural Design Patterns</h3>
6060
<p>
6161
These design patterns are all about Class and Object composition. Structural class-creation
6262
patterns use inheritance to compose interfaces. Structural object-patterns define ways to
6363
compose objects to obtain new functionality.
6464
</p>
6565
{lister('structural')}
6666

67-
<h2>Behavioral Design Patterns</h2>
67+
<h3>Behavioral Design Patterns</h3>
6868
<p>
6969
These design patterns are all about Class's objects communication. Behavioral patterns are
7070
those patterns that are most specifically concerned with communication between objects.

‎src/styles/global.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const GlobalStyle = createGlobalStyle`
1919
padding: 0 0 3rem;
2020
}
2121
}
22+
23+
.fixed {
24+
height: 375px
25+
}
2226
`;
2327

2428
export default GlobalStyle;

‎src/styles/hljs/hljs.dark.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const styles = {
55
overflowX: 'auto',
66
padding: '1em',
77
background: '#282828',
8-
color: '#ebdbb2',
9-
height: 375
8+
color: '#ebdbb2'
109
},
1110
'hljs-subst': {
1211
color: '#ebdbb2'

‎src/styles/hljs/hljs.light.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ const styles = {
55
overflowX: 'auto',
66
padding: '1em',
77
color: '#383a42',
8-
background: '#fafafa',
9-
height: 375
8+
background: '#fafafa'
109
},
1110
'hljs-comment': {
1211
color: '#a0a1a7',

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /