Skip to content

Commit

Permalink
Merge pull request bchiang7#44 from bchiang7/flicker-go-away
Browse files Browse the repository at this point in the history 
Flicker go away
  • Loading branch information
@bchiang7
bchiang7 authored Dec 17, 2019
2 parents 0a121c2 + 2bc55b0 commit cc2739a
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 111 deletions.
129 changes: 76 additions & 53 deletions src/components/footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import {
IconGitHub,
Expand Down Expand Up @@ -70,59 +70,82 @@ const StyledGitHubInfo = styled.div`
}
`;

const Footer = ({ githubInfo }) => (
<StyledContainer>
<StyledSocial>
<StyledSocialList>
{socialMedia &&
socialMedia.map(({ name, url }, i) => (
<li key={i}>
<StyledSocialLink
href={url}
target="_blank"
rel=" noopener noreferrer"
aria-label={name}>
{name === 'GitHub' ? (
<IconGitHub />
) : name === 'Linkedin' ? (
<IconLinkedin />
) : name === 'Codepen' ? (
<IconCodepen />
) : name === 'Instagram' ? (
<IconInstagram />
) : name === 'Twitter' ? (
<IconTwitter />
) : (
<IconGitHub />
)}
</StyledSocialLink>
</li>
))}
</StyledSocialList>
</StyledSocial>
<StyledMetadata tabindex="-1">
<StyledGitHubLink
href="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/bchiang7/v4"
target="_blank"
rel=" noopener noreferrer">
<div>Designed &amp; Built by Brittany Chiang</div>
const Footer = () => {
const [githubInfo, setGitHubInfo] = useState({
stars: null,
forks: null,
});

{githubInfo.stars && githubInfo.forks && (
<StyledGitHubInfo>
<span>
<IconStar />
<span>{githubInfo.stars}</span>
</span>
<span>
<IconFork />
<span>{githubInfo.forks}</span>
</span>
</StyledGitHubInfo>
)}
</StyledGitHubLink>
</StyledMetadata>
</StyledContainer>
);
useEffect(() => {
if (process.env.NODE_ENV !== 'production') {
return;
}
fetch('https://api.github.com/repos/bchiang7/v4')
.then(response => response.json())
.then(json => {
const { stargazers_count, forks_count } = json;
setGitHubInfo({
stars: stargazers_count,
forks: forks_count,
});
})
.catch(e => console.error(e));
}, []);

return (
<StyledContainer>
<StyledSocial>
<StyledSocialList>
{socialMedia &&
socialMedia.map(({ name, url }, i) => (
<li key={i}>
<StyledSocialLink
href={url}
target="_blank"
rel=" noopener noreferrer"
aria-label={name}>
{name === 'GitHub' ? (
<IconGitHub />
) : name === 'Linkedin' ? (
<IconLinkedin />
) : name === 'Codepen' ? (
<IconCodepen />
) : name === 'Instagram' ? (
<IconInstagram />
) : name === 'Twitter' ? (
<IconTwitter />
) : (
<IconGitHub />
)}
</StyledSocialLink>
</li>
))}
</StyledSocialList>
</StyledSocial>
<StyledMetadata tabindex="-1">
<StyledGitHubLink
href="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/bchiang7/v4"
target="_blank"
rel=" noopener noreferrer">
<div>Designed &amp; Built by Brittany Chiang</div>

{githubInfo.stars && githubInfo.forks && (
<StyledGitHubInfo>
<span>
<IconStar />
<span>{githubInfo.stars}</span>
</span>
<span>
<IconFork />
<span>{githubInfo.forks}</span>
</span>
</StyledGitHubInfo>
)}
</StyledGitHubLink>
</StyledMetadata>
</StyledContainer>
);
};

Footer.propTypes = {
githubInfo: PropTypes.object,
Expand Down
67 changes: 23 additions & 44 deletions src/components/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,11 @@ const StyledContent = styled.div`
`;

const Layout = ({ children, location }) => {
const [isLoading, setIsLoading] = useState(location.pathname === '/');

const [githubInfo, setGitHubInfo] = useState({
stars: null,
forks: null,
});

useEffect(() => {
fetch('https://api.github.com/repos/bchiang7/v4')
.then(response => response.json())
.then(json => {
const { stargazers_count, forks_count } = json;
setGitHubInfo({
stars: stargazers_count,
forks: forks_count,
});
})
.catch(e => console.error(e));
}, []);
const isHome = location.pathname === '/';
const [isLoading, setIsLoading] = useState(isHome);

useEffect(() => {
if (isLoading) {
if (isLoading || isHome) {
return;
}
if (location.hash) {
Expand All @@ -99,34 +82,30 @@ const Layout = ({ children, location }) => {
}
}
`}
render={({ site }) => {
const isHome = location.pathname === '/';

return (
<div id="root">
<Head metadata={site.siteMetadata} />
render={({ site }) => (
<div id="root">
<Head metadata={site.siteMetadata} />

<GlobalStyle />
<GlobalStyle />

<SkipToContent href="#content">Skip to Content</SkipToContent>
<SkipToContent href="#content">Skip to Content</SkipToContent>

{isLoading ? (
<Loader finishLoading={() => setIsLoading(false)} />
) : (
<StyledContent>
<Nav isHome={isHome} />
<Social isHome={isHome} />
<Email isHome={isHome} />
{isLoading && isHome ? (
<Loader finishLoading={() => setIsLoading(false)} />
) : (
<StyledContent>
<Nav isHome={isHome} />
<Social isHome={isHome} />
<Email isHome={isHome} />

<div id="content">
{children}
<Footer githubInfo={githubInfo} />
</div>
</StyledContent>
)}
</div>
);
}}
<div id="content">
{children}
<Footer />
</div>
</StyledContent>
)}
</div>
)}
/>
);
};
Expand Down
14 changes: 0 additions & 14 deletions src/styles/fonts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ const FontFaces = css`
url(${CalibreLightTTF}) format('truetype');
font-weight: 300;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
Expand All @@ -60,15 +59,13 @@ const FontFaces = css`
url(${CalibreLightItalicTTF}) format('truetype');
font-weight: 300;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
src: url(${CalibreRegularWOFF2}) format('woff2'), url(${CalibreRegularWOFF}) format('woff'),
url(${CalibreRegularTTF}) format('truetype');
font-weight: normal;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
Expand All @@ -77,15 +74,13 @@ const FontFaces = css`
url(${CalibreRegularItalicTTF}) format('truetype');
font-weight: normal;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
src: url(${CalibreMediumWOFF2}) format('woff2'), url(${CalibreMediumWOFF}) format('woff'),
url(${CalibreMediumTTF}) format('truetype');
font-weight: 500;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
Expand All @@ -94,15 +89,13 @@ const FontFaces = css`
url(${CalibreMediumItalicTTF}) format('truetype');
font-weight: 500;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
src: url(${CalibreSemiboldWOFF2}) format('woff2'), url(${CalibreSemiboldWOFF}) format('woff'),
url(${CalibreSemiboldTTF}) format('truetype');
font-weight: 600;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'Calibre';
Expand All @@ -111,15 +104,13 @@ const FontFaces = css`
url(${CalibreSemiboldItalicTTF}) format('truetype');
font-weight: 600;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
src: url(${SFMonoRegularWOFF2}) format('woff2'), url(${SFMonoRegularWOFF}) format('woff'),
url(${SFMonoRegularTTF}) format('truetype');
font-weight: normal;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
Expand All @@ -128,15 +119,13 @@ const FontFaces = css`
url(${SFMonoRegularItalicTTF}) format('truetype');
font-weight: normal;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
src: url(${SFMonoMediumWOFF2}) format('woff2'), url(${SFMonoMediumWOFF}) format('woff'),
url(${SFMonoMediumTTF}) format('truetype');
font-weight: 500;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
Expand All @@ -145,15 +134,13 @@ const FontFaces = css`
url(${SFMonoMediumItalicTTF}) format('truetype');
font-weight: 500;
font-style: italic;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
src: url(${SFMonoSemiboldWOFF2}) format('woff2'), url(${SFMonoSemiboldWOFF}) format('woff'),
url(${SFMonoSemiboldTTF}) format('truetype');
font-weight: 600;
font-style: normal;
font-display: auto;
}
@font-face {
font-family: 'SF Mono';
Expand All @@ -162,7 +149,6 @@ const FontFaces = css`
url(${SFMonoSemiboldItalicTTF}) format('truetype');
font-weight: 600;
font-style: italic;
font-display: auto;
}
`;

Expand Down

0 comments on commit cc2739a

Please sign in to comment.