Skip to content

Commit cc548c0

Browse files
marvinjudeLekoArts
marvinjude
and
LekoArts
authored
chore(starters): Migrate starters to Head API (#36234)
Co-authored-by: Lennart <[email protected]>
1 parent 5443479 commit cc548c0

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"

0 commit comments

Comments
 (0)