Use built in gatsby head in favor of react-helmet

Author: lukekarrys

content/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: npm Documentation
+title: npm Docs
 edit_on_github: false
 ---
 

gatsby-config.js

@@ -58,13 +58,13 @@ module.exports = {
     description: 'Documentation for the npm registry, website, and command-line interface',
     lang: 'en',
     imageUrl: 'https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png',
+    repositoryUrl: 'https://github.com/npm/documentation',
   },
   flags: {
     DEV_SSR: !!process.env.DEV_SSR,
   },
   plugins: [
     'gatsby-plugin-styled-components',
-    'gatsby-plugin-react-helmet',
     'gatsby-transformer-yaml',
     {
       resolve: 'gatsby-plugin-mdx',

gatsby-node.js

@@ -1,13 +1,14 @@
-const {resolve, join, relative} = require('path')
+const {join, relative} = require('path')
 const {Octokit: CoreOctokit} = require('@octokit/rest')
 const {throttling} = require('@octokit/plugin-throttling')
 const {retry} = require('@octokit/plugin-retry')
 
 const CI = !!process.env.CI
+const CWD = process.cwd()
+const SRC = join(CWD, 'src')
 const REPO_URL = 'https://github.com/npm/documentation'
 const NWO = new URL(REPO_URL).pathname.slice(1)
 const REPO_BRANCH = 'main'
-const CWD = process.cwd()
 const TEST_CONTRIBUTORS = [
   {
     author: {login: 'mona'},
@@ -66,7 +67,7 @@ exports.onCreateWebpackConfig = ({actions}) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
-        '~': resolve(__dirname, 'src/'),
+        '~': SRC,
       },
       extensions: ['.js'],
     },
@@ -172,7 +173,6 @@ const createPage = async (
   const context = {
     mdxId: id,
     tableOfContents: getTableOfConents(tableOfContents),
-    repositoryUrl: REPO_URL,
   }
   // edit_on_github: false in frontmatter will not include editUrl and contributors
   // on the page. this is used for policy pages as well as some index pages that don't
@@ -184,7 +184,7 @@ const createPage = async (
 
   actions.createPage({
     path: pageSlug,
-    component: contentFilePath,
+    component: `${join(SRC, 'head.js')}?__contentFilePath=${contentFilePath}`,
     context,
   })
 

package-lock.json

@@ -44,7 +44,6 @@
     "gatsby-plugin-manifest": "^5.12.1",
     "gatsby-plugin-mdx": "^5.12.1",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-react-helmet": "^6.12.0",
     "gatsby-plugin-styled-components": "^6.12.0",
     "gatsby-source-filesystem": "^5.12.0",
     "gatsby-transformer-yaml": "^5.12.0",
@@ -56,7 +55,6 @@
     "react-addons-text-content": "^0.0.4",
     "react-dom": "^18.2.0",
     "react-focus-on": "^3.9.1",
-    "react-helmet": "^6.1.0",
     "styled-components": "^5.3.11",
     "styled-system": "^5.1.5"
   },

package.json

@@ -7,6 +7,7 @@ import * as getNav from '../util/get-nav'
 import VisuallyHidden from './visually-hidden'
 import headerNavItems from '../../content/header-nav.yml'
 import usePage from '../hooks/use-page'
+import useSiteMetadata from '../hooks/use-site-metadata'
 
 const NavItem = ({item, path, depth}) => {
   const href = getNav.getLocation(item.url)
@@ -53,10 +54,8 @@ const ExternalNavItem = ({title, ...props}) => (
 )
 
 const Navigation = () => {
-  const {
-    location,
-    pageContext: {repositoryUrl},
-  } = usePage()
+  const {location} = usePage()
+  const {repositoryUrl} = useSiteMetadata()
   const path = getNav.getLocation(location.pathname)
   const items = getNav.getHierarchy(null, {path, hideVariants: true})
 

src/components/nav-items.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import useSiteMetdata from './hooks/use-site-metadata'
+
+const buildTitle = (...parts) => [...new Set(parts.filter(Boolean))].join(' | ')
+
+export const Head = ({pageContext: {frontmatter = {}}}) => {
+  const siteMetadata = useSiteMetdata()
+
+  const title = buildTitle(frontmatter.title, siteMetadata.title)
+  const description = frontmatter.description || siteMetadata.description
+
+  return (
+    <>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={siteMetadata.imageUrl} />
+      <meta property="twitter:card" content="summary_large_image" />
+      <html lang={siteMetadata.lang} />
+    </>
+  )
+}
+
+const PassThrough = ({children}) => children
+
+export default PassThrough

src/head.js

@@ -10,6 +10,7 @@ function useSiteMetadata() {
           description
           lang
           imageUrl
+          repositoryUrl
         }
       }
     }

src/hooks/use-site-metadata.js

@@ -10,7 +10,7 @@ import {SKIP_NAV} from './constants'
 import useSiteMetadata from './hooks/use-site-metadata'
 import usePage from './hooks/use-page'
 
-export const HeroLayout = ({children}) => {
+const HeroLayout = ({children}) => {
   const {title, description} = useSiteMetadata()
 
   return (
@@ -32,7 +32,7 @@ export const HeroLayout = ({children}) => {
   )
 }
 
-export const DefaultLayout = ({children}) => {
+const DefaultLayout = ({children}) => {
   const {title, description} = usePage().frontmatter
   return (
     <Box
@@ -62,6 +62,6 @@ export const DefaultLayout = ({children}) => {
   )
 }
 
-const getLayout = ({path}) => ({'/': HeroLayout})[path] ?? DefaultLayout
+const Layout = ({children}) => React.createElement(usePage().path === '/' ? HeroLayout : DefaultLayout, null, children)
 
-export default getLayout
+export default Layout

src/layout.js

@@ -2,34 +2,12 @@ import React from 'react'
 import {BaseStyles, themeGet, Box} from '@primer/react'
 import styled, {createGlobalStyle} from 'styled-components'
 import {SKIP_NAV} from './constants'
-import {Helmet} from 'react-helmet'
 import Slugger from 'github-slugger'
 import Header from './components/header'
 import Sidebar from './components/sidebar'
 import Link from './components/link'
-import useSiteMetdata from './hooks/use-site-metadata'
-import usePage, {PageProvider} from './hooks/use-page'
-import getLayout from './layout'
-
-const Head = () => {
-  const {frontmatter} = usePage()
-  const siteMetadata = useSiteMetdata()
-
-  const title = [frontmatter.title, siteMetadata.title].filter(Boolean).join(' | ')
-  const description = frontmatter.description || siteMetadata.description
-
-  return (
-    <Helmet>
-      <title>{title}</title>
-      <meta name="description" content={description} />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:image" content={siteMetadata.imageUrl} />
-      <meta property="twitter:card" content="summary_large_image" />
-      <html lang={siteMetadata.lang} />
-    </Helmet>
-  )
-}
+import {PageProvider} from './hooks/use-page'
+import Layout from './layout'
 
 const SkipLinkBase = props => (
   <Link
@@ -46,6 +24,10 @@ const SkipLinkBase = props => (
   </Link>
 )
 
+// The following rules are to ensure that the element
+// is visually hidden, unless it has focus. This is the recommended
+// way to hide content from:
+// https://webaim.org/techniques/css/invisiblecontent/#techniques
 export const SkipLink = styled(SkipLinkBase)`
   z-index: 20;
   width: auto;
@@ -54,11 +36,6 @@ export const SkipLink = styled(SkipLinkBase)`
   position: absolute;
   overflow: hidden;
 
-  // The following rules are to ensure that the element
-  // is visually hidden, unless it has focus. This is the recommended
-  // way to hide content from:
-  // https://webaim.org/techniques/css/invisiblecontent/#techniques
-
   &:not(:focus) {
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -90,13 +67,12 @@ const PageElement = ({element, props}) => {
       <SkipLink />
       <PageProvider value={page}>
         <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-          <Head />
           <Header />
           <Box sx={{zIndex: 0, display: 'flex', flex: '1 1 auto', flexDirection: 'row'}} role="main">
             <Box sx={{display: ['none', null, null, 'block']}}>
               <Sidebar />
             </Box>
-            {React.createElement(getLayout(page), {key: 'layout', ...props}, element)}
+            <Layout>{element}</Layout>
           </Box>
         </Box>
       </PageProvider>