Skip to content

Commit 17c17d0

Browse files
kitoskitos
committed
fix: 🐛 fix header images flickering (layout component unmounting)
1 parent 043c396 commit 17c17d0

File tree

11 files changed

+113
-105
lines changed

11 files changed

+113
-105
lines changed

‎gatsby-config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ module.exports = {
1616
'gatsby-plugin-react-helmet',
1717
'gatsby-plugin-sitemap',
1818
'gatsby-plugin-styled-components',
19+
{
20+
resolve: 'gatsby-plugin-layout',
21+
options: {
22+
component: require.resolve('./src/components/layout.js'),
23+
},
24+
},
1925
{
2026
resolve: `gatsby-source-filesystem`,
2127
options: {

‎package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"gatsby": "^2.0.73",
1414
"gatsby-image": "^2.0.25",
1515
"gatsby-plugin-google-analytics": "^2.0.8",
16+
"gatsby-plugin-layout": "^1.0.11",
1617
"gatsby-plugin-manifest": "^2.0.12",
1718
"gatsby-plugin-offline": "^2.0.20",
1819
"gatsby-plugin-react-helmet": "^3.0.4",

‎src/components/layout.js

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react'
2-
import styled, {
3-
ThemeProvider,
4-
createGlobalStyle,
5-
} from 'styled-components/macro'
2+
import styled, { createGlobalStyle, ThemeProvider } from 'styled-components/macro'
63
import { Box } from '@rebass/grid'
74

85
import Header from './header'
96
import Footer from './footer'
10-
import SEO from './seo'
117

128
let theme = {
139
pageWidth: '800px',
@@ -49,27 +45,23 @@ let GlobalStyle = createGlobalStyle`
4945
`
5046

5147
const Layout = ({ pageTitle, schemaOrgItems, children }) => (
52-
<>
53-
<SEO title={pageTitle} schemaOrgItems={schemaOrgItems} />
48+
<ThemeProvider theme={theme}>
49+
<>
50+
<GlobalStyle />
5451

55-
<ThemeProvider theme={theme}>
56-
<>
57-
<GlobalStyle />
52+
<HeaderWrapper>
53+
<Header />
54+
</HeaderWrapper>
5855

59-
<HeaderWrapper>
60-
<Header />
61-
</HeaderWrapper>
56+
<PageWrapper as="main" px={[20, 0]}>
57+
{children}
58+
</PageWrapper>
6259

63-
<PageWrapper as="main" px={[20, 0]}>
64-
{children}
65-
</PageWrapper>
66-
67-
<FooterWrapper>
68-
<Footer />
69-
</FooterWrapper>
70-
</>
71-
</ThemeProvider>
72-
</>
60+
<FooterWrapper>
61+
<Footer />
62+
</FooterWrapper>
63+
</>
64+
</ThemeProvider>
7365
)
7466

7567
export default Layout

‎src/pages/404.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react'
2-
import Layout from '../components/layout'
32

43
const NotFoundPage = () => (
5-
<Layout>
4+
<>
65
<h1>NOT FOUND</h1>
76
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
8-
</Layout>
7+
</>
98
)
109

1110
export default NotFoundPage

‎src/pages/changelog.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from 'react'
2-
import Layout from '../components/layout'
32
import { graphql } from 'gatsby'
43

54
let ChangelogPage = ({ data: { changelog } }) => (
6-
<Layout pageTitle="Changelog">
7-
<div dangerouslySetInnerHTML={{ __html: changelog.html }} />
8-
</Layout>
5+
<div dangerouslySetInnerHTML={{ __html: changelog.html }} />
96
)
107

118
export let query = graphql`

‎src/pages/index.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react'
22
import { graphql } from 'gatsby'
33
import { Box, Flex } from '@rebass/grid'
44

5-
import Layout from '../components/layout'
65
import { Shield } from '../components/shield'
76
import Badge from '../components/badge'
7+
import SEO from '../components/seo'
88

99
const IndexPage = ({ data: { about, portfolio, talks } }) => {
1010
let projectTechnologies = portfolio.edges.reduce(
@@ -45,7 +45,9 @@ const IndexPage = ({ data: { about, portfolio, talks } }) => {
4545
)
4646

4747
return (
48-
<Layout pageTitle="About">
48+
<>
49+
<SEO title="About" />
50+
4951
<Flex my="30px" flexWrap="wrap">
5052
{about.shields.map(s => {
5153
let [label, value] = s.split('|')
@@ -78,7 +80,7 @@ const IndexPage = ({ data: { about, portfolio, talks } }) => {
7880
.childContentfulRichText.html,
7981
}}
8082
/>
81-
</Layout>
83+
</>
8284
)
8385
}
8486

‎src/pages/portfolio.js

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,59 @@ import { format } from 'date-fns/fp'
44
import { Box, Flex } from '@rebass/grid'
55
import VisuallyHidden from '@reach/visually-hidden'
66

7-
import Layout from '../components/layout'
87
import Badge from '../components/badge'
98
import Drawer from '../components/drawer'
9+
import SEO from '../components/seo'
1010

1111
let formatDate = format('MMMM, yyyy')
1212

1313
let isMobile =
1414
typeof window !== 'undefined' && typeof window.orientation !== 'undefined'
1515

16+
let buildSchemaOrg = projects => () => [
17+
{
18+
'@context': 'http://schema.org',
19+
'@type': 'CollectionPage',
20+
mainEntity: {
21+
'@type': 'ItemList',
22+
name: 'Projects',
23+
itemListOrder: 'http://schema.org/ItemListOrderDescending',
24+
itemListElement: projects.map(
25+
({ name, url, description, technologies, customer }) => {
26+
let author = {
27+
'@type': 'Person',
28+
name: 'Nikita Kirsanov',
29+
}
30+
31+
return {
32+
'@type': url ? 'WebSite' : 'CreativeWork',
33+
name,
34+
url: url || undefined,
35+
description: description || undefined,
36+
author,
37+
creator: author,
38+
keywords: technologies.join(','),
39+
funder: {
40+
'@type': 'Organization',
41+
name: customer,
42+
},
43+
}
44+
}
45+
),
46+
},
47+
},
48+
]
49+
1650
let PortfolioPage = ({
1751
data: { portfolios: { edges: projects = [] } = {} } = {},
1852
}) => {
1953
let [demo, setDemo] = useState(false)
2054
projects = projects.map(p => p.node)
2155

2256
return (
23-
<Layout
24-
pageTitle="Portfolio"
25-
schemaOrgItems={() => [
26-
{
27-
'@context': 'http://schema.org',
28-
'@type': 'CollectionPage',
29-
mainEntity: {
30-
'@type': 'ItemList',
31-
name: 'Projects',
32-
itemListOrder: 'http://schema.org/ItemListOrderDescending',
33-
itemListElement: projects.map(
34-
({ name, url, description, technologies, customer }) => {
35-
let author = {
36-
'@type': 'Person',
37-
name: 'Nikita Kirsanov',
38-
}
39-
40-
return {
41-
'@type': url ? 'WebSite' : 'CreativeWork',
42-
name,
43-
url: url || undefined,
44-
description: description || undefined,
45-
author,
46-
creator: author,
47-
keywords: technologies.join(','),
48-
funder: {
49-
'@type': 'Organization',
50-
name: customer,
51-
},
52-
}
53-
}
54-
),
55-
},
56-
},
57-
]}
58-
>
57+
<>
58+
<SEO title="Portfolio" schemaOrgItems={buildSchemaOrg(projects)} />
59+
5960
<VisuallyHidden>
6061
<h2>Portfolio</h2>
6162
</VisuallyHidden>
@@ -139,7 +140,7 @@ let PortfolioPage = ({
139140
</Flex>
140141
</article>
141142
))}
142-
</Layout>
143+
</>
143144
)
144145
}
145146

‎src/pages/public-activity.js

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,30 @@ import React from 'react'
22
import { graphql } from 'gatsby'
33
import { Box, Flex } from '@rebass/grid'
44

5-
import Layout from '../components/layout'
65
import VideoCard from '../components/video-card'
6+
import SEO from '../components/seo'
7+
8+
let buildSchemaOrg = videos => () => [
9+
{
10+
'@context': 'http://schema.org',
11+
'@type': 'CollectionPage',
12+
mainEntity: {
13+
'@type': 'ItemList',
14+
name: 'Videos',
15+
itemListOrder: 'http://schema.org/ItemListOrderDescending',
16+
itemListElement: videos.map(
17+
({ title, url, snippet, contentDetails }) => ({
18+
'@type': 'VideoObject',
19+
name: title,
20+
contentUrl: url,
21+
uploadDate: snippet.publishedAt,
22+
duration: contentDetails.duration,
23+
thumbnailUrl: snippet.thumbnails.maxres.url,
24+
})
25+
),
26+
},
27+
},
28+
]
729

830
let PublicActivityPage = ({
931
data: { resp: { edges: videos = [] } = {} } = {},
@@ -14,30 +36,9 @@ let PublicActivityPage = ({
1436
}))
1537

1638
return (
17-
<Layout
18-
pageTitle="Public activity"
19-
schemaOrgItems={() => [
20-
{
21-
'@context': 'http://schema.org',
22-
'@type': 'CollectionPage',
23-
mainEntity: {
24-
'@type': 'ItemList',
25-
name: 'Videos',
26-
itemListOrder: 'http://schema.org/ItemListOrderDescending',
27-
itemListElement: videos.map(
28-
({ title, url, snippet, contentDetails }) => ({
29-
'@type': 'VideoObject',
30-
name: title,
31-
contentUrl: url,
32-
uploadDate: snippet.publishedAt,
33-
duration: contentDetails.duration,
34-
thumbnailUrl: snippet.thumbnails.maxres.url,
35-
})
36-
),
37-
},
38-
},
39-
]}
40-
>
39+
<>
40+
<SEO title="Public activity" schemaOrgItems={buildSchemaOrg(videos)} />
41+
4142
<h2>Talks</h2>
4243

4344
<Flex as="ul" m={'0 -20px'} flexWrap="wrap" css={{ listStyle: 'none' }}>
@@ -47,7 +48,7 @@ let PublicActivityPage = ({
4748
</Box>
4849
))}
4950
</Flex>
50-
</Layout>
51+
</>
5152
)
5253
}
5354

‎src/templates/blog-post-list.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import React from 'react'
22
import { Box } from '@rebass/grid'
33
import VisuallyHidden from '@reach/visually-hidden'
44

5-
import Layout from '../components/layout'
65
import BlogPostSnippet from '../components/blog-post-snippet'
6+
import SEO from '../components/seo'
77

88
let BlogPage = ({ pageContext: { posts } }) => {
9-
posts = posts.map(p => ({
9+
posts = [] || posts.map(p => ({
1010
...p,
1111
preface: p.preface.childContentfulRichText.html,
1212
// TODO: time to read in gatsby-transformer-contentful-richtext
1313
timeToRead: 5,
1414
}))
1515

1616
return (
17-
<Layout pageTitle="Blog">
17+
<>
18+
<SEO title="Blog" />
19+
1820
<VisuallyHidden>
1921
<h2>Blog</h2>
2022
</VisuallyHidden>
@@ -28,7 +30,7 @@ let BlogPage = ({ pageContext: { posts } }) => {
2830
posts.map(post => <BlogPostSnippet key={post.slug} post={post} />)
2931
)}
3032
</Box>
31-
</Layout>
33+
</>
3234
)
3335
}
3436

0 commit comments

Comments
 (0)