Skip to content

Commit 5e5008b

Browse files
adi-worksadi-works
committed
optimize code
1 parent d23ba31 commit 5e5008b

File tree

24 files changed

+974
-130
lines changed

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;

0 commit comments

Comments
 (0)