Skip to content

Commit cc548c0

Browse files
marvinjudeLekoArts
andauthoredJul 27, 2022
chore(starters): Migrate starters to Head API (#36234)
Co-authored-by: Lennart <lekoarts@gmail.com>

29 files changed

+110
-276
lines changed
 

‎starters/blog/gatsby-config.js

-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ module.exports = {
124124
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
125125
},
126126
},
127-
`gatsby-plugin-react-helmet`,
128127
// this (optional) plugin enables Progressive Web App + Offline functionality
129128
// To learn more, visit: https://gatsby.dev/offline
130129
// `gatsby-plugin-offline`,

‎starters/blog/gatsby-ssr.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3+
*
4+
* See: https://www.gatsbyjs.com/docs/ssr-apis/
5+
*/
6+
7+
exports.onRenderBody = ({ setHtmlAttributes }) => {
8+
setHtmlAttributes({ lang: `en` })
9+
}

‎starters/blog/package-lock.json

-29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starters/blog/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
"gatsby-plugin-image": "^2.19.0",
1616
"gatsby-plugin-manifest": "^4.19.0",
1717
"gatsby-plugin-offline": "^5.19.0",
18-
"gatsby-plugin-react-helmet": "^5.19.0",
1918
"gatsby-plugin-sharp": "^4.19.0",
2019
"gatsby-remark-copy-linked-files": "^5.19.0",
2120
"gatsby-remark-images": "^6.19.0",
@@ -28,7 +27,6 @@
2827
"prismjs": "^1.28.0",
2928
"react": "^18.1.0",
3029
"react-dom": "^18.1.0",
31-
"react-helmet": "^6.1.0",
3230
"typeface-merriweather": "0.0.72",
3331
"typeface-montserrat": "0.0.75"
3432
},

‎starters/blog/src/components/seo.js

+16-47
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77

88
import * as React from "react"
99
import PropTypes from "prop-types"
10-
import { Helmet } from "react-helmet"
1110
import { useStaticQuery, graphql } from "gatsby"
1211

13-
const Seo = ({ description, lang, meta, title }) => {
12+
const Seo = ({ description, lang, title, children }) => {
1413
const { site } = useStaticQuery(
1514
graphql`
1615
query {
@@ -31,60 +30,30 @@ const Seo = ({ description, lang, meta, title }) => {
3130
const defaultTitle = site.siteMetadata?.title
3231

3332
return (
34-
<Helmet
35-
htmlAttributes={{
36-
lang,
37-
}}
38-
title={title}
39-
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
40-
meta={[
41-
{
42-
name: `description`,
43-
content: metaDescription,
44-
},
45-
{
46-
property: `og:title`,
47-
content: title,
48-
},
49-
{
50-
property: `og:description`,
51-
content: metaDescription,
52-
},
53-
{
54-
property: `og:type`,
55-
content: `website`,
56-
},
57-
{
58-
name: `twitter:card`,
59-
content: `summary`,
60-
},
61-
{
62-
name: `twitter:creator`,
63-
content: site.siteMetadata?.social?.twitter || ``,
64-
},
65-
{
66-
name: `twitter:title`,
67-
content: title,
68-
},
69-
{
70-
name: `twitter:description`,
71-
content: metaDescription,
72-
},
73-
].concat(meta)}
74-
/>
33+
<>
34+
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
35+
<meta name="description" content={metaDescription} />
36+
<meta property="og:title" content={title} />
37+
<meta property="og:description" content={metaDescription} />
38+
<meta property="og:type" content="website" />
39+
<meta name="twitter:card" content="summary" />
40+
<meta
41+
name="twitter:creator"
42+
content={site.siteMetadata?.social?.twitter || ``}
43+
/>
44+
<meta name="twitter:title" content={title} />
45+
<meta name="twitter:description" content={metaDescription} />
46+
{children}
47+
</>
7548
)
7649
}
7750

7851
Seo.defaultProps = {
79-
lang: `en`,
80-
meta: [],
8152
description: ``,
8253
}
8354

8455
Seo.propTypes = {
8556
description: PropTypes.string,
86-
lang: PropTypes.string,
87-
meta: PropTypes.arrayOf(PropTypes.object),
8857
title: PropTypes.string.isRequired,
8958
}
9059

‎starters/blog/src/pages/404.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ const NotFoundPage = ({ data, location }) => {
99

1010
return (
1111
<Layout location={location} title={siteTitle}>
12-
<Seo title="404: Not Found" />
1312
<h1>404: Not Found</h1>
1413
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
1514
</Layout>
1615
)
1716
}
1817

18+
export const Head = () => <Seo title="404: Not Found" />
19+
1920
export default NotFoundPage
2021

2122
export const pageQuery = graphql`

‎starters/blog/src/pages/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const BlogIndex = ({ data, location }) => {
1212
if (posts.length === 0) {
1313
return (
1414
<Layout location={location} title={siteTitle}>
15-
<Seo title="All posts" />
1615
<Bio />
1716
<p>
1817
No blog posts found. Add markdown posts to "content/blog" (or the
@@ -25,7 +24,6 @@ const BlogIndex = ({ data, location }) => {
2524

2625
return (
2726
<Layout location={location} title={siteTitle}>
28-
<Seo title="All posts" />
2927
<Bio />
3028
<ol style={{ listStyle: `none` }}>
3129
{posts.map(post => {
@@ -65,6 +63,8 @@ const BlogIndex = ({ data, location }) => {
6563

6664
export default BlogIndex
6765

66+
export const Head = () => <Seo title="All posts" />
67+
6868
export const pageQuery = graphql`
6969
query {
7070
site {

‎starters/blog/src/pages/using-typescript.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// If you don't want to use TypeScript you can delete this file!
22
import * as React from "react"
3-
import { PageProps, Link, graphql } from "gatsby"
3+
import { PageProps, Link, graphql, HeadFC } from "gatsby"
44

55
import Layout from "../components/layout"
66
import Seo from "../components/seo"
@@ -17,7 +17,6 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
1717
location,
1818
}) => (
1919
<Layout title="Using TypeScript" location={location}>
20-
<Seo title="Using TypeScript" />
2120
<h1>Gatsby supports TypeScript by default!</h1>
2221
<p>
2322
This means that you can create and write <em>.ts/.tsx</em> files for your
@@ -43,6 +42,8 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
4342
</Layout>
4443
)
4544

45+
export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
46+
4647
export default UsingTypescript
4748

4849
export const query = graphql`

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

+14-8
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,14 @@ import Bio from "../components/bio"
55
import Layout from "../components/layout"
66
import Seo from "../components/seo"
77

8-
const BlogPostTemplate = ({ data, location }) => {
9-
const post = data.markdownRemark
10-
const siteTitle = data.site.siteMetadata?.title || `Title`
11-
const { previous, next } = data
8+
const BlogPostTemplate = ({
9+
data: { previous, next, site, markdownRemark: post },
10+
location,
11+
}) => {
12+
const siteTitle = site.siteMetadata?.title || `Title`
1213

1314
return (
1415
<Layout location={location} title={siteTitle}>
15-
<Seo
16-
title={post.frontmatter.title}
17-
description={post.frontmatter.description || post.excerpt}
18-
/>
1916
<article
2017
className="blog-post"
2118
itemScope
@@ -64,6 +61,15 @@ const BlogPostTemplate = ({ data, location }) => {
6461
)
6562
}
6663

64+
export const Head = ({ data: { markdownRemark: post } }) => {
65+
return (
66+
<Seo
67+
title={post.frontmatter.title}
68+
description={post.frontmatter.description || post.excerpt}
69+
/>
70+
)
71+
}
72+
6773
export default BlogPostTemplate
6874

6975
export const pageQuery = graphql`

‎starters/default/gatsby-config.js

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ module.exports = {
66
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
77
},
88
plugins: [
9-
`gatsby-plugin-react-helmet`,
109
`gatsby-plugin-image`,
1110
{
1211
resolve: `gatsby-source-filesystem`,

‎starters/default/gatsby-ssr.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44
* See: https://www.gatsbyjs.com/docs/ssr-apis/
55
*/
66

7-
// You can delete this file if you're not using it
7+
exports.onRenderBody = ({ setHtmlAttributes }) => {
8+
setHtmlAttributes({ lang: `en` })
9+
}

‎starters/default/package-lock.json

-29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starters/default/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@
1010
"gatsby-plugin-image": "^2.19.0",
1111
"gatsby-plugin-manifest": "^4.19.0",
1212
"gatsby-plugin-offline": "^5.19.0",
13-
"gatsby-plugin-react-helmet": "^5.19.0",
1413
"gatsby-plugin-sharp": "^4.19.0",
1514
"gatsby-source-filesystem": "^4.19.0",
1615
"gatsby-transformer-sharp": "^4.19.0",
1716
"prop-types": "^15.8.1",
1817
"react": "^18.1.0",
19-
"react-dom": "^18.1.0",
20-
"react-helmet": "^6.1.0"
18+
"react-dom": "^18.1.0"
2119
},
2220
"devDependencies": {
2321
"prettier": "^2.7.1"

‎starters/default/src/components/seo.js

+13-47
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77

88
import * as React from "react"
99
import PropTypes from "prop-types"
10-
import { Helmet } from "react-helmet"
1110
import { useStaticQuery, graphql } from "gatsby"
1211

13-
function Seo({ description, lang, meta, title }) {
12+
function Seo({ description, title, children }) {
1413
const { site } = useStaticQuery(
1514
graphql`
1615
query {
@@ -29,60 +28,27 @@ function Seo({ description, lang, meta, title }) {
2928
const defaultTitle = site.siteMetadata?.title
3029

3130
return (
32-
<Helmet
33-
htmlAttributes={{
34-
lang,
35-
}}
36-
title={title}
37-
titleTemplate={defaultTitle ? `%s / ${defaultTitle}` : null}
38-
meta={[
39-
{
40-
name: `description`,
41-
content: metaDescription,
42-
},
43-
{
44-
property: `og:title`,
45-
content: title,
46-
},
47-
{
48-
property: `og:description`,
49-
content: metaDescription,
50-
},
51-
{
52-
property: `og:type`,
53-
content: `website`,
54-
},
55-
{
56-
name: `twitter:card`,
57-
content: `summary`,
58-
},
59-
{
60-
name: `twitter:creator`,
61-
content: site.siteMetadata?.author || ``,
62-
},
63-
{
64-
name: `twitter:title`,
65-
content: title,
66-
},
67-
{
68-
name: `twitter:description`,
69-
content: metaDescription,
70-
},
71-
].concat(meta)}
72-
/>
31+
<>
32+
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
33+
<meta name="description" content={metaDescription} />
34+
<meta property="og:title" content={title} />
35+
<meta property="og:description" content={metaDescription} />
36+
<meta property="og:type" content="website" />
37+
<meta name="twitter:card" content="summary" />
38+
<meta name="twitter:creator" content={site.siteMetadata?.author || ``} />
39+
<meta name="twitter:title" content={title} />
40+
<meta name="twitter:description" content={metaDescription} />
41+
{children}
42+
</>
7343
)
7444
}
7545

7646
Seo.defaultProps = {
77-
lang: `en`,
78-
meta: [],
7947
description: ``,
8048
}
8149

8250
Seo.propTypes = {
8351
description: PropTypes.string,
84-
lang: PropTypes.string,
85-
meta: PropTypes.arrayOf(PropTypes.object),
8652
title: PropTypes.string.isRequired,
8753
}
8854

‎starters/default/src/pages/404.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import Seo from "../components/seo"
55

66
const NotFoundPage = () => (
77
<Layout>
8-
<Seo title="404: Not found" />
98
<h1>404: Not Found</h1>
109
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
1110
</Layout>
1211
)
1312

13+
export const Head = () => <Seo title="404: Not Found" />
14+
1415
export default NotFoundPage

‎starters/default/src/pages/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,6 @@ const IndexPage = () => (
119119
</Layout>
120120
)
121121

122+
export const Head = () => <Seo title="Home" />
123+
122124
export default IndexPage

‎starters/default/src/pages/page-2.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import Seo from "../components/seo"
66

77
const SecondPage = () => (
88
<Layout>
9-
<Seo title="Page two" />
109
<h1>Hi from the second page</h1>
1110
<p>Welcome to page 2</p>
1211
<Link to="/">Go back to the homepage</Link>
1312
</Layout>
1413
)
1514

15+
export const Head = () => <Seo title="Page two" />
16+
1617
export default SecondPage

‎starters/default/src/pages/using-ssr.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Seo from "../components/seo"
77
const UsingSSR = ({ serverData }) => {
88
return (
99
<Layout>
10-
<Seo title="Using SSR" />
1110
<h1>
1211
This page is <b>rendered server-side</b>
1312
</h1>
@@ -33,6 +32,8 @@ const UsingSSR = ({ serverData }) => {
3332
)
3433
}
3534

35+
export const Head = () => <Seo title="Using SSR" />
36+
3637
export default UsingSSR
3738

3839
export async function getServerData() {

‎starters/default/src/pages/using-typescript.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// If you don't want to use TypeScript you can delete this file!
22
import * as React from "react"
3-
import { PageProps, Link, graphql } from "gatsby"
3+
import { PageProps, Link, graphql, HeadFC } from "gatsby"
44

55
import Layout from "../components/layout"
66
import Seo from "../components/seo"
@@ -16,7 +16,6 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
1616
location,
1717
}) => (
1818
<Layout>
19-
<Seo title="Using TypeScript" />
2019
<h1>
2120
Gatsby supports <b>TypeScript by default</b>
2221
</h1>
@@ -44,6 +43,8 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
4443
</Layout>
4544
)
4645

46+
export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
47+
4748
export default UsingTypescript
4849

4950
export const query = graphql`

‎starters/default/src/templates/using-dsg.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Seo from "../components/seo"
66

77
const UsingDSG = () => (
88
<Layout>
9-
<Seo title="Using DSG" />
109
<h1>
1110
Hello from a <b>DSG Page</b>
1211
</h1>
@@ -22,4 +21,6 @@ const UsingDSG = () => (
2221
</Layout>
2322
)
2423

24+
export const Head = () => <Seo title="Using DSG" />
25+
2526
export default UsingDSG

‎starters/gatsby-starter-wordpress-blog/gatsby-config.js

-3
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,6 @@ module.exports = {
5454
},
5555
},
5656

57-
// See https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/?=gatsby-plugin-react-helmet
58-
`gatsby-plugin-react-helmet`,
59-
6057
/**
6158
* this (optional) plugin enables Progressive Web App + Offline functionality
6259
* To learn more, visit: https://gatsby.dev/offline
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3+
*
4+
* See: https://www.gatsbyjs.com/docs/ssr-apis/
5+
*/
6+
7+
exports.onRenderBody = ({ setHtmlAttributes }) => {
8+
setHtmlAttributes({ lang: `en` })
9+
}

‎starters/gatsby-starter-wordpress-blog/package-lock.json

-37
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starters/gatsby-starter-wordpress-blog/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,13 @@
1414
"gatsby-plugin-image": "^2.19.0",
1515
"gatsby-plugin-manifest": "^4.19.0",
1616
"gatsby-plugin-offline": "^5.19.0",
17-
"gatsby-plugin-react-helmet": "^5.19.0",
1817
"gatsby-plugin-sharp": "^4.19.0",
1918
"gatsby-source-wordpress": "^6.19.0",
2019
"gatsby-transformer-sharp": "^4.19.0",
2120
"html-react-parser": "^0.14.3",
2221
"lodash": "^4.17.21",
2322
"react": "^16.12.0",
2423
"react-dom": "^16.12.0",
25-
"react-helmet": "^5.2.1",
2624
"typeface-merriweather": "0.0.72",
2725
"typeface-montserrat": "0.0.75"
2826
},

‎starters/gatsby-starter-wordpress-blog/src/components/seo.js

+13-47
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77

88
import React from "react"
99
import PropTypes from "prop-types"
10-
import { Helmet } from "react-helmet"
1110
import { useStaticQuery, graphql } from "gatsby"
1211

13-
const SEO = ({ description, lang, meta, title }) => {
12+
const SEO = ({ description, title, children }) => {
1413
const { wp, wpUser } = useStaticQuery(
1514
graphql`
1615
query {
@@ -33,60 +32,27 @@ const SEO = ({ description, lang, meta, title }) => {
3332
const defaultTitle = wp.generalSettings?.title
3433

3534
return (
36-
<Helmet
37-
htmlAttributes={{
38-
lang,
39-
}}
40-
title={title}
41-
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
42-
meta={[
43-
{
44-
name: `description`,
45-
content: metaDescription,
46-
},
47-
{
48-
property: `og:title`,
49-
content: title,
50-
},
51-
{
52-
property: `og:description`,
53-
content: metaDescription,
54-
},
55-
{
56-
property: `og:type`,
57-
content: `website`,
58-
},
59-
{
60-
name: `twitter:card`,
61-
content: `summary`,
62-
},
63-
{
64-
name: `twitter:creator`,
65-
content: wpUser?.twitter || ``,
66-
},
67-
{
68-
name: `twitter:title`,
69-
content: title,
70-
},
71-
{
72-
name: `twitter:description`,
73-
content: metaDescription,
74-
},
75-
].concat(meta)}
76-
/>
35+
<>
36+
<title> {defaultTitle ? `${title} | ${defaultTitle}` : title} </title>
37+
<meta name="description" content={metaDescription} />
38+
<meta property="og:title" content={title} />
39+
<meta property="og:description" content={metaDescription} />
40+
<meta property="og:type" content="website" />
41+
<meta name="twitter:card" content="summary" />
42+
<meta name="twitter:creator" content={wpUser?.twitter || ``} />
43+
<meta name="twitter:title" content={title} />
44+
<meta name="twitter:description" content={metaDescription} />
45+
{children}
46+
</>
7747
)
7848
}
7949

8050
SEO.defaultProps = {
81-
lang: `en`,
82-
meta: [],
8351
description: ``,
8452
}
8553

8654
SEO.propTypes = {
8755
description: PropTypes.string,
88-
lang: PropTypes.string,
89-
meta: PropTypes.arrayOf(PropTypes.object),
9056
title: PropTypes.string.isRequired,
9157
}
9258

‎starters/gatsby-starter-wordpress-blog/src/pages/404.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ const NotFoundPage = ({ data, location }) => {
99

1010
return (
1111
<Layout location={location} title={siteTitle}>
12-
<SEO title="404: Not Found" />
1312
<h1>404: Not Found</h1>
1413
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
1514
</Layout>
1615
)
1716
}
1817

18+
const Head = () => <SEO title="404: Not Found" />
19+
1920
export default NotFoundPage
2021

2122
export const pageQuery = graphql`

‎starters/gatsby-starter-wordpress-blog/src/templates/Page.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ const PageTemplate = ({ data: { previous, next, post } }) => {
1919

2020
return (
2121
<Layout>
22-
<SEO title={post.title} description={post.excerpt} />
23-
2422
<article
2523
className="blog-post"
2624
itemScope
@@ -83,6 +81,10 @@ const PageTemplate = ({ data: { previous, next, post } }) => {
8381
)
8482
}
8583

84+
export const Head = ({ data: { post } }) => (
85+
<SEO title={post.title} description={post.excerpt} />
86+
)
87+
8688
export default PageTemplate
8789

8890
export const pageQuery = graphql`

‎starters/gatsby-starter-wordpress-blog/src/templates/Post.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ const BlogPostTemplate = ({ data: { previous, next, post } }) => {
1919

2020
return (
2121
<Layout>
22-
<SEO title={post.title} description={post.excerpt} />
23-
2422
<article
2523
className="blog-post"
2624
itemScope
@@ -83,6 +81,10 @@ const BlogPostTemplate = ({ data: { previous, next, post } }) => {
8381
)
8482
}
8583

84+
export const Head = ({ data: { post } }) => (
85+
<SEO title={post.title} description={post.excerpt} />
86+
)
87+
8688
export default BlogPostTemplate
8789

8890
export const pageQuery = graphql`

‎starters/gatsby-starter-wordpress-blog/src/templates/blog-post-archive.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const BlogIndex = ({
1515
if (!posts.length) {
1616
return (
1717
<Layout isHomePage>
18-
<SEO title="All posts" />
1918
<Bio />
2019
<p>
2120
No blog posts found. Add posts to your WordPress site and they'll
@@ -27,8 +26,6 @@ const BlogIndex = ({
2726

2827
return (
2928
<Layout isHomePage>
30-
<SEO title="All posts" />
31-
3229
<Bio />
3330

3431
<ol style={{ listStyle: `none` }}>
@@ -68,6 +65,8 @@ const BlogIndex = ({
6865
)
6966
}
7067

68+
export const Head = () => <SEO title="All posts" />
69+
7170
export default BlogIndex
7271

7372
export const pageQuery = graphql`

0 commit comments

Comments
 (0)
Please sign in to comment.