Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(starters): Migrate starters to Head API #36234

Merged
merged 13 commits into from
Jul 27, 2022
Merged

chore(starters): Migrate starters to Head API #36234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fa79453
migrate blog starter to Head API
marvinjude Jul 25, 2022
ee15335
migrate default starter to Head API
marvinjude Jul 25, 2022
95778d6
migrate wordpress starter to Head API
marvinjude Jul 25, 2022
cfe4349
use correct version
marvinjude Jul 25, 2022
d0570c3
Update starters/blog/src/components/seo.js
marvinjude Jul 26, 2022
4c7b6c9
Update starters/default/src/components/seo.js
marvinjude Jul 26, 2022
4cbc422
change destructuring
marvinjude Jul 26, 2022
3699497
format
marvinjude Jul 26, 2022
eb40496
use types in TS pages
marvinjude Jul 26, 2022
5c981af
update lock files
marvinjude Jul 26, 2022
52dd245
update lock file
marvinjude Jul 26, 2022
440482a
change destructuring
marvinjude Jul 26, 2022
f441562
fix variable reference
marvinjude Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion starters/blog/gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ module.exports = {
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-react-helmet`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
Expand Down
9 changes: 9 additions & 0 deletions starters/blog/gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
*
* See: https://www.gatsbyjs.com/docs/ssr-apis/
*/

exports.onRenderBody = ({ setHtmlAttributes }) => {
setHtmlAttributes({ lang: `en` })
}
29 changes: 0 additions & 29 deletions starters/blog/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions starters/blog/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
"gatsby-plugin-image": "^2.19.0",
"gatsby-plugin-manifest": "^4.19.0",
"gatsby-plugin-offline": "^5.19.0",
"gatsby-plugin-react-helmet": "^5.19.0",
"gatsby-plugin-sharp": "^4.19.0",
"gatsby-remark-copy-linked-files": "^5.19.0",
"gatsby-remark-images": "^6.19.0",
Expand All @@ -28,7 +27,6 @@
"prismjs": "^1.28.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-helmet": "^6.1.0",
"typeface-merriweather": "0.0.72",
"typeface-montserrat": "0.0.75"
},
Expand Down
63 changes: 16 additions & 47 deletions starters/blog/src/components/seo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const Seo = ({ description, lang, meta, title }) => {
const Seo = ({ description, lang, title, children }) => {
const { site } = useStaticQuery(
graphql`
query {
Expand All @@ -31,60 +30,30 @@ const Seo = ({ description, lang, meta, title }) => {
const defaultTitle = site.siteMetadata?.title

return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata?.social?.twitter || ``,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
/>
<>
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
<meta name="description" content={metaDescription} />
<meta property="og:title" content={title} />
<meta property="og:description" content={metaDescription} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta
name="twitter:creator"
content={site.siteMetadata?.social?.twitter || ``}
/>
LekoArts marked this conversation as resolved.
Show resolved Hide resolved
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={metaDescription} />
{children}
</>
)
}

Seo.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}

Seo.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}

Expand Down
3 changes: 2 additions & 1 deletion starters/blog/src/pages/404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ const NotFoundPage = ({ data, location }) => {

return (
<Layout location={location} title={siteTitle}>
<Seo title="404: Not Found" />
<h1>404: Not Found</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout>
)
}

export const Head = () => <Seo title="404: Not Found" />

export default NotFoundPage

export const pageQuery = graphql`
Expand Down
4 changes: 2 additions & 2 deletions starters/blog/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const BlogIndex = ({ data, location }) => {
if (posts.length === 0) {
return (
<Layout location={location} title={siteTitle}>
<Seo title="All posts" />
<Bio />
<p>
No blog posts found. Add markdown posts to "content/blog" (or the
Expand All @@ -25,7 +24,6 @@ const BlogIndex = ({ data, location }) => {

return (
<Layout location={location} title={siteTitle}>
<Seo title="All posts" />
<Bio />
<ol style={{ listStyle: `none` }}>
{posts.map(post => {
Expand Down Expand Up @@ -65,6 +63,8 @@ const BlogIndex = ({ data, location }) => {

export default BlogIndex

export const Head = () => <Seo title="All posts" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice and simple refactor / API here @marvinjude. Nicely done.


export const pageQuery = graphql`
query {
site {
Expand Down
5 changes: 3 additions & 2 deletions starters/blog/src/pages/using-typescript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// If you don't want to use TypeScript you can delete this file!
import * as React from "react"
import { PageProps, Link, graphql } from "gatsby"
import { PageProps, Link, graphql, HeadFC } from "gatsby"

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

export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />

export default UsingTypescript

export const query = graphql`
Expand Down
22 changes: 14 additions & 8 deletions starters/blog/src/templates/blog-post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@ import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"

const BlogPostTemplate = ({ data, location }) => {
const post = data.markdownRemark
const siteTitle = data.site.siteMetadata?.title || `Title`
const { previous, next } = data
const BlogPostTemplate = ({
data: { previous, next, site, markdownRemark: post },
location,
}) => {
const siteTitle = site.siteMetadata?.title || `Title`

return (
<Layout location={location} title={siteTitle}>
<Seo
title={post.frontmatter.title}
description={post.frontmatter.description || post.excerpt}
/>
<article
className="blog-post"
itemScope
Expand Down Expand Up @@ -64,6 +61,15 @@ const BlogPostTemplate = ({ data, location }) => {
)
}

export const Head = ({ data: { markdownRemark: post } }) => {
return (
<Seo
title={post.frontmatter.title}
description={post.frontmatter.description || post.excerpt}
/>
)
}

export default BlogPostTemplate

export const pageQuery = graphql`
Expand Down
1 change: 0 additions & 1 deletion starters/default/gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ module.exports = {
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
Expand Down
4 changes: 3 additions & 1 deletion starters/default/gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@
* See: https://www.gatsbyjs.com/docs/ssr-apis/
*/

// You can delete this file if you're not using it
exports.onRenderBody = ({ setHtmlAttributes }) => {
setHtmlAttributes({ lang: `en` })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should or have we documented this? (I've typically myself set the html attributes with the Helmet component, so it's possible that's still documented somewhere!)

The context: it's a reasonably common use case for folks, and if I recall, it's one thing that Lighthouse recommends too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/#editing-html-and-body

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

}
29 changes: 0 additions & 29 deletions starters/default/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions starters/default/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,12 @@
"gatsby-plugin-image": "^2.19.0",
"gatsby-plugin-manifest": "^4.19.0",
"gatsby-plugin-offline": "^5.19.0",
"gatsby-plugin-react-helmet": "^5.19.0",
"gatsby-plugin-sharp": "^4.19.0",
"gatsby-source-filesystem": "^4.19.0",
"gatsby-transformer-sharp": "^4.19.0",
"prop-types": "^15.8.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-helmet": "^6.1.0"
"react-dom": "^18.1.0"
},
"devDependencies": {
"prettier": "^2.7.1"
Expand Down
Loading