Movatterモバイル変換

[0]ホーム
URL:

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

Commit5e5008b

Browse files
committed
optimize code
1 parentd23ba31 commit5e5008b

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
importReactfrom'react';
2-
import*asScrollfrom'react-scroll';
2+
import{HashRouterasRouter,Switch,Route}from'react-router-dom';
33

4-
importNavfrom'components/Nav';
5-
importPagefrom'components/Page';
6-
importLogofrom'components/Logo';
7-
importTitlefrom'components/Title';
8-
importMottofrom'components/Motto';
9-
importFooterfrom'components/Footer';
10-
importSocialfrom'components/Social';
11-
importMarkdownfrom'components/Markdown';
12-
importHeroBannerfrom'components/HeroBanner';
13-
import{InlineEmoji}from'components/Emoji';
14-
importGetStartedfrom'components/GetStarted';
15-
importGitHubAnchorfrom'components/GitHubAnchor';
16-
importFacebookAnchorfrom'components/FacebookAnchor';
4+
importRootfrom'routes/Root';
5+
importQuizfrom'routes/Quiz';
6+
importisDevfrom'utils/is-dev';
177

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

2010
functionApp(){
2111
return(
2212
<divclassName="App">
23-
{/* eslint-disable jsx-a11y/accessible-emoji */}
24-
<HeroBannerclassName="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.Elementname="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+
<Routepath="/"component={Root}exact/>
16+
{isDev&&<Routepath="/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+
importstyledfrom'styled-components';
2+
3+
constAd=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+
exportdefaultAd;

‎src/components/Button.js‎

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

33
constButton=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
importReactfrom'react';
22

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

9-
exportconstInlineEmoji=({ children})=><Emoji>&nbsp;{children}</Emoji>;
10-
1111
exportdefaultEmoji;

‎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
constFacebookAnchor=()=>(
1212
<SocialIcon>
13-
<a
14-
target="_blank"
15-
rel="noopener noreferrer"
16-
href="https://www.facebook.com/snippetsJS"
17-
>
13+
<ahref="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+
importReactfrom'react';
12
importstyledfrom'styled-components';
23

3-
constFooter=styled.footer`
4+
importLinkfrom'components/Link';
5+
6+
constStyledFooter=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+
constStyledHeart=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+
constHeart=()=>(
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+
<pathfill="none"d="M0 0h24v24H0z"></path>
38+
<pathd="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+
constFooter=()=>(
44+
<StyledFooter>
45+
<div>
46+
Made with&nbsp;
47+
<Heart/>
48+
{' by '}
49+
<Linkhref="https://github.com/roeib">@roeib</Link>,{' '}
50+
<Linkhref="https://www.linkedin.com/in/matan-yossef-931496111">
51+
@matany
52+
</Link>
53+
,{' and '}
54+
<Linkhref="https://github.com/adi518">@adi518</Link>.
55+
</div>
56+
</StyledFooter>
57+
);
58+
759
exportdefaultFooter;

‎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
constStyledGetStarted=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
constButtons=styled.div`
@@ -60,7 +59,7 @@ const StyledGitHubButton = styled(Button)`
6059
`;
6160

6261
constGitHubButton=()=>(
63-
<atarget="_blank"rel="noopener noreferrer"href={pjson.repository.url}>
62+
<ahref={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
constGitHubAnchor=()=>(
88
<SocialIcon>
9-
<atarget="_blank"rel="noopener noreferrer"href={pjson.repository.url}>
9+
<ahref={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
constHeroHeader=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)
[8]ページ先頭
©2009-2025 Movatter.jp