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 4 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` })
}
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>
marvinjude marked this conversation as resolved.
Show resolved Hide resolved
<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
3 changes: 2 additions & 1 deletion starters/blog/src/pages/using-typescript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => <Seo title="Using TypeScript" />
LekoArts marked this conversation as resolved.
Show resolved Hide resolved

export default UsingTypescript

export const query = graphql`
Expand Down
15 changes: 11 additions & 4 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 @@ -12,10 +12,6 @@ const BlogPostTemplate = ({ data, location }) => {

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 +60,17 @@ const BlogPostTemplate = ({ data, location }) => {
)
}

export const Head = ({ data }) => {
const post = data.markdownRemark
LekoArts marked this conversation as resolved.
Show resolved Hide resolved

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!

}
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
60 changes: 13 additions & 47 deletions starters/default/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"

function Seo({ description, lang, meta, title }) {
function Seo({ description, title, children }) {
const { site } = useStaticQuery(
graphql`
query {
Expand All @@ -29,60 +28,27 @@ function 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?.author || ``,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
/>
<>
<title> {defaultTitle ? `${title} | ${defaultTitle}` : title} </title>
marvinjude marked this conversation as resolved.
Show resolved Hide resolved
<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?.author || ``} />
<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/default/src/pages/404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import Seo from "../components/seo"

const NotFoundPage = () => (
<Layout>
<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
2 changes: 2 additions & 0 deletions starters/default/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,6 @@ const IndexPage = () => (
</Layout>
)

export const Head = () => <Seo title="Home" />

export default IndexPage
3 changes: 2 additions & 1 deletion starters/default/src/pages/page-2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ import Seo from "../components/seo"

const SecondPage = () => (
<Layout>
<Seo title="Page two" />
<h1>Hi from the second page</h1>
<p>Welcome to page 2</p>
<Link to="/">Go back to the homepage</Link>
</Layout>
)

export const Head = () => <Seo title="Page two" />

export default SecondPage
3 changes: 2 additions & 1 deletion starters/default/src/pages/using-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Seo from "../components/seo"
const UsingSSR = ({ serverData }) => {
return (
<Layout>
<Seo title="Using SSR" />
<h1>
This page is <b>rendered server-side</b>
</h1>
Expand All @@ -33,6 +32,8 @@ const UsingSSR = ({ serverData }) => {
)
}

export const Head = () => <Seo title="Using SSR" />

export default UsingSSR

export async function getServerData() {
Expand Down
3 changes: 2 additions & 1 deletion starters/default/src/pages/using-typescript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
location,
}) => (
<Layout>
<Seo title="Using TypeScript" />
<h1>
Gatsby supports <b>TypeScript by default</b>
</h1>
Expand Down Expand Up @@ -44,6 +43,8 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({
</Layout>
)

export const Head = () => <Seo title="Using TypeScript" />
LekoArts marked this conversation as resolved.
Show resolved Hide resolved

export default UsingTypescript

export const query = graphql`
Expand Down
Loading