Skip to content

Commit 5e5008b

Browse files
adi518adi518
committed
optimize code
1 parent d23ba31 commit 5e5008b

24 files changed

+974
-130
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@
1111
"@testing-library/react": "^9.3.2",
1212
"@testing-library/user-event": "^7.1.2",
1313
"animate.css": "^3.7.2",
14+
"classnames": "^2.2.6",
15+
"node-sass": "^4.13.1",
1416
"prism-themes": "^1.3.0",
1517
"prismjs": "^1.19.0",
1618
"react": "^16.12.0",
1719
"react-dom": "^16.12.0",
1820
"react-markdown": "^4.3.1",
21+
"react-router-dom": "^5.1.2",
1922
"react-scripts": "3.3.1",
2023
"react-scroll": "^1.7.16",
2124
"react-use": "^13.24.0",

‎src/App.js

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,21 @@
11
import React from 'react';
2-
import * as Scroll from 'react-scroll';
2+
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
33

4-
import Nav from 'components/Nav';
5-
import Page from 'components/Page';
6-
import Logo from 'components/Logo';
7-
import Title from 'components/Title';
8-
import Motto from 'components/Motto';
9-
import Footer from 'components/Footer';
10-
import Social from 'components/Social';
11-
import Markdown from 'components/Markdown';
12-
import HeroBanner from 'components/HeroBanner';
13-
import { InlineEmoji } from 'components/Emoji';
14-
import GetStarted from 'components/GetStarted';
15-
import GitHubAnchor from 'components/GitHubAnchor';
16-
import FacebookAnchor from 'components/FacebookAnchor';
4+
import Root from 'routes/Root';
5+
import Quiz from 'routes/Quiz';
6+
import isDev from 'utils/is-dev';
177

188
import 'animate.css/animate.min.css';
199

2010
function App() {
2111
return (
2212
<div className="App">
23-
{/* eslint-disable jsx-a11y/accessible-emoji */}
24-
<HeroBanner className="animated fadeIn">
25-
<Nav>
26-
<Title />
27-
<Social>
28-
<FacebookAnchor />
29-
<GitHubAnchor />
30-
</Social>
31-
</Nav>
32-
<Logo />
33-
<Motto />
34-
<GetStarted />
35-
</HeroBanner>
36-
<Scroll.Element name="Page-Markdown">
37-
<Page>
38-
<h1>Getting started</h1>
39-
<p>
40-
JS Snippets is all about staying updated with the latest JavaScript
41-
APIs. The following snippets consist of new and old APIs, so you get
42-
to see how things changed over time. JavaScript's undisputed nature
43-
makes it one of the fastest evolving languages. So go ahead, check
44-
out some of those snippets and who knows, you might be surprised
45-
with a feature or API you never knew existed!
46-
<InlineEmoji>👌</InlineEmoji>
47-
</p>
48-
<Markdown />
49-
</Page>
50-
</Scroll.Element>
51-
<Footer />
13+
<Router>
14+
<Switch>
15+
<Route path="/" component={Root} exact />
16+
{isDev && <Route path="/quiz" component={Quiz} />}
17+
</Switch>
18+
</Router>
5219
</div>
5320
);
5421
}

‎src/components/Ad.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from 'styled-components';
2+
3+
const Ad = styled.div`
4+
width: 100%;
5+
display: flex;
6+
padding: 0.5rem;
7+
background-color: gainsboro;
8+
9+
img {
10+
margin: auto;
11+
width: inherit;
12+
max-width: 1024px;
13+
}
14+
`;
15+
16+
export default Ad;

‎src/components/Button.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import styled from 'styled-components';
22

33
const Button = styled.button`
4+
outline: none;
45
min-width: 10rem;
56
font-size: 1.25rem;
67
border-radius: 2rem;
78
padding: 0.5rem 1.5rem;
89
background-color: transparent;
10+
color: var(--color-foreground);
911
font-family: var(--font-family);
1012
transition: background-color 0.5s;
11-
color: var(--color-foreground);
1213
border: 0.125rem solid var(--color-foreground);
1314
15+
&:focus {
16+
box-shadow: 0 0 0.25rem;
17+
}
18+
1419
&:hover {
1520
color: white;
1621
background-color: var(--color-foreground);

‎src/components/Emoji.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22

3-
const Emoji = ({ children, ariaLabel = 'Emoji', ...restProps }) => (
4-
<span role="img" aria-label={ariaLabel} {...restProps}>
5-
{children}
6-
</span>
3+
const Emoji = React.forwardRef(
4+
({ children, ariaLabel = 'Emoji', ...restProps }, ref) => (
5+
<span ref={ref} role="img" aria-label={ariaLabel} {...restProps}>
6+
{children}
7+
</span>
8+
)
79
);
810

9-
export const InlineEmoji = ({ children }) => <Emoji>&nbsp;{children}</Emoji>;
10-
1111
export default Emoji;

‎src/components/FacebookAnchor.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ const FacebookLogo = () => (
1010

1111
const FacebookAnchor = () => (
1212
<SocialIcon>
13-
<a
14-
target="_blank"
15-
rel="noopener noreferrer"
16-
href="https://www.facebook.com/snippetsJS"
17-
>
13+
<a href="https://www.facebook.com/snippetsJS">
1814
<FacebookLogo />
1915
</a>
2016
</SocialIcon>

‎src/components/Footer.js

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,59 @@
1+
import React from 'react';
12
import styled from 'styled-components';
23

3-
const Footer = styled.footer`
4+
import Link from 'components/Link';
5+
6+
const StyledFooter = styled.footer`
7+
display: flex;
8+
padding: 2rem;
9+
margin-top: 4rem;
410
min-height: 10rem;
11+
text-align: center;
12+
align-items: center;
13+
word-break: break-word;
14+
justify-content: center;
15+
background-color: gainsboro;
16+
`;
17+
18+
const StyledHeart = styled.span`
19+
font-size: 0;
20+
vertical-align: middle;
21+
22+
svg {
23+
width: 1.15rem;
24+
display: inline-block;
25+
}
526
`;
627

28+
const Heart = () => (
29+
<StyledHeart>
30+
<svg
31+
fill="red"
32+
focusable="false"
33+
aria-hidden="true"
34+
viewBox="0 0 24 24"
35+
xmlns="http://www.w3.org/2000/svg"
36+
>
37+
<path fill="none" d="M0 0h24v24H0z"></path>
38+
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
39+
</svg>
40+
</StyledHeart>
41+
);
42+
43+
const Footer = () => (
44+
<StyledFooter>
45+
<div>
46+
Made with&nbsp;
47+
<Heart />
48+
{' by '}
49+
<Link href="https://github.com/roeib">@roeib</Link>,{' '}
50+
<Link href="https://www.linkedin.com/in/matan-yossef-931496111">
51+
@matany
52+
</Link>
53+
,{' and '}
54+
<Link href="https://github.com/adi518">@adi518</Link>.
55+
</div>
56+
</StyledFooter>
57+
);
58+
759
export default Footer;

‎src/components/GetStarted.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ import pjson from '../../package.json';
88

99
const StyledGetStarted = styled.div`
1010
display: flex;
11-
font-size: 1.5rem;
1211
margin-top: 3rem;
12+
font-size: 1.5rem;
1313
text-align: center;
1414
flex-direction: column;
15-
text-transform: uppercase;
1615
`;
1716

1817
const Buttons = styled.div`
@@ -60,7 +59,7 @@ const StyledGitHubButton = styled(Button)`
6059
`;
6160

6261
const GitHubButton = () => (
63-
<a target="_blank" rel="noopener noreferrer" href={pjson.repository.url}>
62+
<a href={pjson.repository.url}>
6463
<StyledGitHubButton>GitHub</StyledGitHubButton>
6564
</a>
6665
);

‎src/components/GithubAnchor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import pjson from '../../package.json';
66

77
const GitHubAnchor = () => (
88
<SocialIcon>
9-
<a target="_blank" rel="noopener noreferrer" href={pjson.repository.url}>
9+
<a href={pjson.repository.url}>
1010
<svg
1111
focusable="false"
1212
aria-hidden="true"

‎src/components/HeroBanner.js renamed to ‎src/components/HeroPage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import styled from 'styled-components';
33
const HeroHeader = styled.div`
44
display: flex;
55
min-height: 100vh;
6-
padding-top: 4rem;
6+
padding-top: 6rem;
77
padding-left: 1rem;
88
padding-right: 1rem;
9-
padding-bottom: 4rem;
9+
padding-bottom: 6rem;
1010
align-items: center;
1111
flex-direction: column;
1212
justify-content: center;

‎src/components/Link.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
3+
const Link = styled.a.attrs(() => ({
4+
rel: 'noopener noreferrer'
5+
}))`
6+
color: var(--color-foreground);
7+
transition: background-color 0.5s;
8+
9+
&:hover {
10+
color: white;
11+
background-color: var(--color-foreground);
12+
}
13+
`;
14+
15+
export default Link;

‎src/components/Logo.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const StyledLogo = styled.div`
2727
transform: skew(-10deg, 0deg);
2828
padding: calc(1rem * var(--scale));
2929
transition: width 0.5s height 0.5s;
30-
background: rgb(93, 0, 165);
30+
background: var(--color-foreground-rgb);
3131
background: linear-gradient(
3232
0deg,
3333
rgba(93, 0, 165, 0.3309698879551821) 0%,

‎src/components/Markdown.js

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,54 @@
11
import Prism from 'prismjs';
2-
import styled from 'styled-components';
2+
import React, { useState } from 'react';
3+
import { useEffectOnce } from 'react-use';
34
import ReactMarkdown from 'react-markdown';
4-
import React, { useState, useEffect } from 'react';
5-
6-
import snippetsPath from 'SNIPPETS.md';
5+
import styled, { css } from 'styled-components';
76

87
import 'prism-themes/themes/prism-shades-of-purple.css';
98

10-
const StyledMarkdown = styled.div`
11-
margin: auto;
9+
const inlineStyle = css`
10+
h1:first-child {
11+
margin-top: 4rem;
12+
}
13+
`;
14+
15+
export const StyledMarkdown = styled.div`
16+
width: 100%;
1217
1318
:not(pre) > code[class*='language-'],
1419
pre[class*='language-'] {
1520
margin-top: 2rem;
16-
border-radius: 1rem;
17-
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
21+
border-radius: 0.5rem;
22+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
1823
}
1924
20-
h1 {
21-
margin-top: 6rem;
25+
code[class*='language-'],
26+
pre[class*='language-'] {
27+
line-height: 40px;
28+
}
2229
23-
&::before {
24-
content: '📝'; // FIXME: find a better looking emoji
25-
margin-right: 1ch;
26-
}
30+
${({ inline }) => inline && inlineStyle}
31+
32+
h1:not(:first-child) {
33+
margin-top: 6rem;
2734
}
2835
`;
2936

30-
const Markdown = () => {
31-
const [snippets, setSnippets] = useState(null);
37+
const Markdown = ({ pathToMarkdown, inline }) => {
38+
const [markdown, setMarkdown] = useState(null);
3239

33-
useEffect(() => {
40+
useEffectOnce(() => {
3441
(async () => {
35-
const snippets = await fetch(snippetsPath);
36-
const text = await snippets.text();
37-
setSnippets(text);
42+
const markdown = await fetch(pathToMarkdown);
43+
const text = await markdown.text();
44+
setMarkdown(text);
3845
Prism.highlightAll();
3946
})();
40-
}, []);
47+
});
4148

4249
return (
43-
<StyledMarkdown>
44-
<ReactMarkdown source={snippets} />
50+
<StyledMarkdown inline={inline}>
51+
<ReactMarkdown source={markdown} />
4552
</StyledMarkdown>
4653
);
4754
};

0 commit comments

Comments
 (0)