@primer/gatsby-theme-doctocat 2.0.0 → 3.1.0

package/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended",
+    "plugin:primer-react/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "eslint-comments/no-use": "off",
+    "no-shadow": "off"
+  }
+}

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @primer/gatsby-theme-doctocat
 
+## 3.1.0
+
+### Minor Changes
+
+- [`3767651`](https://github.com/primer/doctocat/commit/37676515f1d7485ca7b5e932e115d96e3ef0285b) [#318](https://github.com/primer/doctocat/pull/318) Thanks [@colebemis](https://github.com/colebemis)! - Add a step to build process that will output a static `components.json` file with component status info if the site that its building has markdown files containing `componentId` frontmatter.
+
+## 3.0.1
+
+### Patch Changes
+
+- [`ff74ece`](https://github.com/primer/doctocat/commit/ff74ecea1b373469034c2122d94a54ca3e964158) [#301](https://github.com/primer/doctocat/pull/301) Thanks [@jfuchs](https://github.com/jfuchs)! - Removed styled system prop usage on Primer React components.
+
+## 3.0.0
+
+### Major Changes
+
+- [`c2037d8`](https://github.com/primer/doctocat/commit/c2037d8352fca4ce3055e801b365d4ff1b5eefe9) [#295](https://github.com/primer/doctocat/pull/295) Thanks [@colebemis](https://github.com/colebemis)! - Remove checklist feature
+
+### Minor Changes
+
+- [`a94e0a9`](https://github.com/primer/doctocat/commit/a94e0a962e8013901e4285c7a3cabc3a0b691a92) [#294](https://github.com/primer/doctocat/pull/294) Thanks [@colebemis](https://github.com/colebemis)! - You can now make custom React components globally available (no import required) to all markdown files in your site.
+
+### Patch Changes
+
+- [`31a62df`](https://github.com/primer/doctocat/commit/31a62dfb7eb7a467a4e03a991adad995564ae4d1) [#262](https://github.com/primer/doctocat/pull/262) Thanks [@SferaDev](https://github.com/SferaDev)! - Fix scroll flickering of table of contents
+
+* [`9972de8`](https://github.com/primer/doctocat/commit/9972de88224e1b868dad051abe62a92daf8796ef) [#291](https://github.com/primer/doctocat/pull/291) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix release
+
+## 2.1.0
+
+### Minor Changes
+
+- [`9ddaa08`](https://github.com/primer/doctocat/commit/9ddaa08395a5d08fc0cd6f7dc0de4d1e19252fa7) [#267](https://github.com/primer/doctocat/pull/267) Thanks [@colebemis](https://github.com/colebemis)! - Add support for checklists. See the [checklists](https://primer.style/doctocat/usage/checklists) documentation for more details.
+
+### Patch Changes
+
+- [`43a78eb`](https://github.com/primer/doctocat/commit/43a78eb93e453f9659488c125f7e5889633b3540) [#254](https://github.com/primer/doctocat/pull/254) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump axios from 0.19.2 to 0.21.2
+
+* [`a730972`](https://github.com/primer/doctocat/commit/a7309725faa1636d7e53a5d63c65007bbe340e53) [#258](https://github.com/primer/doctocat/pull/258) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump tmpl from 1.0.4 to 1.0.5
+
+- [`5efe933`](https://github.com/primer/doctocat/commit/5efe93324e3b078cac84c41cbec7de4ee9c2c800) [#216](https://github.com/primer/doctocat/pull/216) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump socket.io from 2.3.0 to 2.4.1
+
+* [`6dcddf2`](https://github.com/primer/doctocat/commit/6dcddf2bd77019251b058c5e3081d815f7eaafed) [#256](https://github.com/primer/doctocat/pull/256) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump prismjs from 1.22.0 to 1.25.0
+
 ## 2.0.0
 
 ### Major Changes

package/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: ['@babel/preset-env', '@babel/preset-react']
 }

package/gatsby-config.js

@@ -6,8 +6,7 @@ module.exports = themeOptions => {
       title: 'Doctocat',
       shortName: 'Doctocat',
       description: 'A Gatsby theme for creating Primer documentation sites',
-      imageUrl:
-        'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png',
+      imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png'
     },
     plugins: [
       'gatsby-plugin-styled-components',
@@ -20,25 +19,23 @@ module.exports = themeOptions => {
         options: {
           extensions: ['.mdx', '.md'],
           defaultLayouts: {
-            default: require.resolve('./src/components/layout.js'),
-          },
-        },
+            default: require.resolve('./src/components/layout.js')
+          }
+        }
       },
       {
         resolve: 'gatsby-source-filesystem',
         options: {
           name: 'content',
-          path: path.resolve('./content'),
-        },
+          path: path.resolve('./content')
+        }
       },
       {
         resolve: 'gatsby-plugin-manifest',
         options: {
-          icon: themeOptions.icon
-            ? path.resolve(themeOptions.icon)
-            : require.resolve('./src/images/favicon.png'),
-        },
-      },
-    ],
+          icon: themeOptions.icon ? path.resolve(themeOptions.icon) : require.resolve('./src/images/favicon.png')
+        }
+      }
+    ]
   }
 }

package/gatsby-node.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const fs = require('fs')
 const readPkgUp = require('read-pkg-up')
 const getPkgRepo = require('get-pkg-repo')
 const axios = require('axios')
@@ -12,7 +13,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
   const repo = getPkgRepo(readPkgUp.sync().package)
 
   const {data} = await graphql(`
-    {
+    query {
       allMdx {
         nodes {
           fileAbsolutePath
@@ -29,49 +30,26 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
     }
   `)
 
-  if (
-    !process.env.GITHUB_TOKEN &&
-    !process.env.NOW_GITHUB_DEPLOYMENT &&
-    !process.env.VERCEL_GITHUB_DEPLOYMENT
-  ) {
-    console.error(
-      `Non-deploy build and no GITHUB_TOKEN environment variable set; skipping GitHub API calls`,
-    )
+  if (!process.env.GITHUB_TOKEN && !process.env.NOW_GITHUB_DEPLOYMENT && !process.env.VERCEL_GITHUB_DEPLOYMENT) {
+    console.error(`Non-deploy build and no GITHUB_TOKEN environment variable set; skipping GitHub API calls`)
   }
 
   // Turn every MDX file into a page.
-  return Promise.all(
+  await Promise.all(
     data.allMdx.nodes.map(async node => {
       const pagePath = path
-        .join(
-          node.parent.relativeDirectory,
-          node.parent.name === 'index' ? '/' : node.parent.name,
-        )
+        .join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name)
         .replace(/\\/g, '/') // Convert Windows backslash paths to forward slash paths: foo\\bar → foo/bar
 
-      const rootAbsolutePath = path.resolve(
-        process.cwd(),
-        themeOptions.repoRootPath || '.',
-      )
+      const rootAbsolutePath = path.resolve(process.cwd(), themeOptions.repoRootPath || '.')
 
-      const fileRelativePath = path.relative(
-        rootAbsolutePath,
-        node.fileAbsolutePath,
-      )
+      const fileRelativePath = path.relative(rootAbsolutePath, node.fileAbsolutePath)
       const defaultBranch = themeOptions.defaultBranch || 'master'
       const editUrl = getEditUrl(repo, fileRelativePath, defaultBranch)
 
       let contributors = []
-      if (
-        process.env.GITHUB_TOKEN ||
-        process.env.NOW_GITHUB_DEPLOYMENT ||
-        process.env.VERCEL_GITHUB_DEPLOYMENT
-      ) {
-        contributors = await fetchContributors(
-          repo,
-          fileRelativePath,
-          process.env.GITHUB_TOKEN,
-        )
+      if (process.env.GITHUB_TOKEN || process.env.NOW_GITHUB_DEPLOYMENT || process.env.VERCEL_GITHUB_DEPLOYMENT) {
+        contributors = await fetchContributors(repo, fileRelativePath, process.env.GITHUB_TOKEN)
       }
 
       // Copied from gatsby-plugin-mdx (https://git.io/JUs3H)
@@ -90,13 +68,47 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
           // for us here, and does on the first build,
           // but when HMR kicks in the frontmatter is lost.
           // The solution is to include it here explicitly.
-          frontmatter,
-        },
+          frontmatter
+        }
       })
-    }),
+    })
   )
 }
 
+exports.onPostBuild = async ({graphql}) => {
+  try {
+    const {data} = await graphql(`
+      query {
+        allSitePage(filter: {context: {frontmatter: {componentId: {ne: null}}}}) {
+          nodes {
+            path
+            context {
+              frontmatter {
+                componentId
+                status
+              }
+            }
+          }
+        }
+      }
+    `)
+
+    const components = data.allSitePage.nodes.map(node => {
+      return {
+        id: node.context.frontmatter.componentId,
+        path: node.path,
+        status: node.context.frontmatter.status.toLowerCase()
+      }
+    })
+
+    fs.writeFileSync(path.resolve(process.cwd(), 'public/components.json'), JSON.stringify(components))
+  } catch (error) {
+    // This is not necessarily an error, so we just log a warning instead of failing the build.
+    // Some sites won't have any markdown files with `componentId` frontmatter and that's okay.
+    console.warn('Unable to build components.json')
+  }
+}
+
 function getEditUrl(repo, filePath, defaultBranch) {
   return `https://github.com/${repo.user}/${repo.project}/edit/${defaultBranch}/${filePath}`
 }
@@ -112,12 +124,12 @@ async function fetchContributors(repo, filePath, accessToken = '') {
     const req = {
       method: 'get',
       baseURL: 'https://api.github.com/',
-      url: `/repos/${repo.user}/${repo.project}/commits?path=${filePath}&per_page=100`,
+      url: `/repos/${repo.user}/${repo.project}/commits?path=${filePath}&per_page=100`
     }
 
     if (accessToken && accessToken.length) {
       req.headers = {
-        Authorization: `token ${accessToken}`,
+        Authorization: `token ${accessToken}`
       }
     }
 
@@ -128,8 +140,8 @@ async function fetchContributors(repo, filePath, accessToken = '') {
         login: commit.author && commit.author.login,
         latestCommit: {
           date: commit.commit.author.date,
-          url: commit.html_url,
-        },
+          url: commit.html_url
+        }
       }))
       .filter(contributor => Boolean(contributor.login))
 
@@ -137,9 +149,7 @@ async function fetchContributors(repo, filePath, accessToken = '') {
     CONTRIBUTOR_CACHE.set(hash, result)
     return result
   } catch (error) {
-    console.error(
-      `[ERROR] Unable to fetch contributors for ${filePath}. ${error.message}`,
-    )
+    console.error(`[ERROR] Unable to fetch contributors for ${filePath}. ${error.message}`)
     return []
   }
 }

package/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.js']
 }

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "lint:fix": "yarn lint -- --fix"
   },
+  "prettier": "@github/prettier-config",
   "devDependencies": {
+    "@github/prettier-config": "^0.0.4",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-primer-react": "0.5",
+    "eslint-plugin-react": "^7.26.1",
     "gatsby": "^2.24.52",
+    "prettier": "^2.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
@@ -27,7 +38,7 @@
     "@styled-system/theme-get": "^5.0.12",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.3",
-    "axios": "^0.19.0",
+    "axios": "^0.21.2",
     "babel-jest": "^24.9.0",
     "copy-to-clipboard": "^3.2.0",
     "date-fns": "^2.0.1",
@@ -47,7 +58,7 @@
     "gatsby-transformer-yaml": "^2.2.0",
     "get-pkg-repo": "^4.1.0",
     "github-slugger": "^1.2.1",
-    "html-react-parser": "^0.9.1",
+    "html-react-parser": "^1.4.0",
     "jest": "^24.9.0",
     "lodash.debounce": "4.0.8",
     "lodash.uniqby": "^4.7.0",
@@ -55,7 +66,7 @@
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
     "prism-react-renderer": "^1.2.0",
-    "prismjs": "^1.22.0",
+    "prismjs": "^1.25.0",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",

package/src/components/__tests__/contributors.test.js

@@ -10,18 +10,18 @@ test('renders contributors', () => {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-15T23:40:19Z',
-          },
+            date: '2019-08-15T23:40:19Z'
+          }
         },
         {
           login: 'emplums',
           latestCommit: {
             url: '#',
-            date: '2019-08-14T00:19:54Z',
-          },
-        },
+            date: '2019-08-14T00:19:54Z'
+          }
+        }
       ]}
-    />,
+    />
   )
 
   expect(queryByText(/2 contributors/)).toBeInTheDocument()
@@ -31,9 +31,7 @@ test('renders contributors', () => {
 })
 
 test('does not render "last edited by" if latest contributor does not have a latest commit', () => {
-  const {queryByText} = render(
-    <Contributors contributors={[{login: 'ashygee'}]} />,
-  )
+  const {queryByText} = render(<Contributors contributors={[{login: 'ashygee'}]} />)
 
   expect(queryByText(/1 contributor/)).toBeInTheDocument()
   expect(queryByText(/Last edited by/)).toBeNull()
@@ -55,18 +53,18 @@ test('does not render duplicate contributors', () => {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-15T23:40:19Z',
-          },
+            date: '2019-08-15T23:40:19Z'
+          }
         },
         {
           login: 'colebemis',
           latestCommit: {
             url: '#',
-            date: '2019-08-14T00:19:54Z',
-          },
-        },
+            date: '2019-08-14T00:19:54Z'
+          }
+        }
       ]}
-    />,
+    />
   )
 
   expect(queryByText(/1 contributor/)).toBeInTheDocument()

package/src/components/__tests__/page-footer.test.js

@@ -3,9 +3,7 @@ import React from 'react'
 import PageFooter from '../page-footer'
 
 test('renders correctly when editUrl and contributors are defined', () => {
-  const {queryByText} = render(
-    <PageFooter editUrl="#" contributors={[{login: 'broccolini'}]} />,
-  )
+  const {queryByText} = render(<PageFooter editUrl="#" contributors={[{login: 'broccolini'}]} />)
 
   expect(queryByText(/Edit this page on GitHub/)).toBeInTheDocument()
   expect(queryByText(/contributor/)).toBeInTheDocument()
@@ -26,9 +24,7 @@ test('renders correctly when editUrl is defined but contributors is undefined',
 })
 
 test('renders correctly when contributors is defined but editUrl is undefined', () => {
-  const {queryByText} = render(
-    <PageFooter contributors={[{login: 'broccolini'}]} />,
-  )
+  const {queryByText} = render(<PageFooter contributors={[{login: 'broccolini'}]} />)
 
   expect(queryByText(/Edit this page on GitHub/)).toBeNull()
   expect(queryByText(/contributor/)).toBeInTheDocument()

package/src/components/clipboard-copy.js

@@ -24,9 +24,9 @@ function ClipboardCopy({value}) {
       sx={{px: 2}}
     >
       {copied ? (
-        <StyledOcticon icon={CheckIcon} color="success.fg" />
+        <StyledOcticon icon={CheckIcon} sx={{color: 'success.fg'}} />
       ) : (
-        <StyledOcticon icon={CopyIcon} color="fg.muted" />
+        <StyledOcticon icon={CopyIcon} sx={{color: 'fg.muted'}} />
       )}
     </Button>
   )

package/src/components/code.js

@@ -21,19 +21,13 @@ function Code({className, children, live, noinline}) {
         // https://stackoverflow.com/a/14406386
         display: 'table',
         tableLayout: 'fixed',
-        width: '100%',
+        width: '100%'
       }}
     >
-      <Absolute top={0} right={0} p={2}>
+      <Absolute sx={{top: 0, right: 0, p: 2}}>
         <ClipboardCopy value={code} />
       </Absolute>
-      <Highlight
-        {...defaultProps}
-        Prism={Prism}
-        code={code}
-        language={language}
-        theme={githubTheme}
-      >
+      <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <Box
             as="pre"
@@ -48,12 +42,7 @@ function Code({className, children, live, noinline}) {
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
-                  <Text
-                    key={key}
-                    fontFamily="mono"
-                    fontSize={1}
-                    {...getTokenProps({token, key})}
-                  />
+                  <Text key={key} fontFamily="mono" fontSize={1} {...getTokenProps({token, key})} />
                 ))}
               </div>
             ))}

package/src/components/contributors.js

@@ -14,21 +14,16 @@ function Contributors({contributors}) {
     <div>
       <Box display="flex" alignItems="center">
         <Text mr={2}>
-          {uniqueContributors.length}{' '}
-          {pluralize('contributor', uniqueContributors.length)}
+          {uniqueContributors.length} {pluralize('contributor', uniqueContributors.length)}
         </Text>
         {uniqueContributors.map(contributor => (
           <Link
             key={contributor.login}
             href={`https://github.com/${contributor.login}`}
-            lineHeight="condensedUltra"
-            sx={{mr: 2}}
+            sx={{mr: 2, lineHeight: 'condensedUltra'}}
           >
             <Tooltip key={contributor.login} aria-label={contributor.login}>
-              <Avatar
-                src={`https://github.com/${contributor.login}.png?size=40`}
-                alt={contributor.login}
-              />
+              <Avatar src={`https://github.com/${contributor.login}.png?size=40`} alt={contributor.login} />
             </Tooltip>
           </Link>
         ))}
@@ -36,10 +31,7 @@ function Contributors({contributors}) {
 
       {latestContributor.latestCommit ? (
         <Text fontSize={1} color="fg.muted" mt={1}>
-          Last edited by{' '}
-          <Link href={`https://github.com/${latestContributor.login}`}>
-            {latestContributor.login}
-          </Link>{' '}
+          Last edited by <Link href={`https://github.com/${latestContributor.login}`}>{latestContributor.login}</Link>{' '}
           on{' '}
           <Link href={latestContributor.latestCommit.url}>
             {format(new Date(latestContributor.latestCommit.date), 'MMMM d, y')}

package/src/components/details.js

@@ -62,7 +62,7 @@ function Details({children, overlay, render = getRenderer(children), ...rest}) {
 }
 
 Details.defaultProps = {
-  overlay: false,
+  overlay: false
 }
 
 export default Details

package/src/components/do-dont.js

@@ -4,63 +4,34 @@ import React from 'react'
 
 export function DoDontContainer({stacked, children}) {
   return (
-    <Box
-      display="grid"
-      gridTemplateColumns={['1fr', null, stacked ? '1fr' : '1fr 1fr']}
-      gridGap={4}
-      mb={4}
-    >
+    <Box display="grid" gridTemplateColumns={['1fr', null, stacked ? '1fr' : '1fr 1fr']} gridGap={4} mb={4}>
       {children}
     </Box>
   )
 }
 
 DoDontContainer.defaultProps = {
-  stacked: false,
+  stacked: false
 }
 
 export function Do(props) {
-  return (
-    <DoDontBase
-      {...props}
-      title="Do"
-      icon={CheckCircleFillIcon}
-      iconBg="success.fg"
-    />
-  )
+  return <DoDontBase {...props} title="Do" icon={CheckCircleFillIcon} iconBg="success.fg" />
 }
 
 export function Dont(props) {
-  return (
-    <DoDontBase
-      {...props}
-      title="Don't"
-      icon={XCircleFillIcon}
-      iconBg="danger.fg"
-    />
-  )
+  return <DoDontBase {...props} title="Don't" icon={XCircleFillIcon} iconBg="danger.fg" />
 }
 
 function DoDontBase({children, title, icon: Icon, iconBg}) {
   return (
     <Box display="flex" flexDirection="column">
-      <Box
-        display="flex"
-        alignSelf="start"
-        flexDirection="row"
-        alignItems="center"
-        mb="2"
-      >
-        <StyledOcticon icon={Icon} color={iconBg} />
+      <Box display="flex" alignSelf="start" flexDirection="row" alignItems="center" mb="2">
+        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
         <Text fontWeight="bold" color="fg.default" ml={2}>
           {title}
         </Text>
       </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}}}
-      >
+      <Box display="flex" flexDirection="column" sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}}}>
         {children}
       </Box>
     </Box>

package/src/components/drawer.js

@@ -7,6 +7,7 @@ function Drawer({isOpen, onDismiss, children}) {
   return (
     <AnimatePresence>
       {isOpen ? (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         <div
           // These event handlers fix a bug that caused links below the fold
           // to be unclickable in macOS Safari.
@@ -22,12 +23,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
-              top={0}
-              right={0}
-              bottom={0}
-              left={0}
-              bg="rgba(0, 0, 0, 0.5)"
               onClick={() => onDismiss()}
+              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)'}}
             />
 
             <Fixed
@@ -37,12 +34,8 @@ function Drawer({isOpen, onDismiss, children}) {
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              width={300}
-              top={0}
-              right={0}
-              bottom={0}
-              bg="gray.0"
               style={{zIndex: 1}}
+              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0'}}
             >
               {children}
             </Fixed>

package/src/components/head.js

@@ -4,9 +4,7 @@ import useSiteMetadata from '../use-site-metadata'
 
 function Head(props) {
   const siteMetadata = useSiteMetadata()
-  const title = props.title
-    ? `${props.title} | ${siteMetadata.title}`
-    : siteMetadata.title
+  const title = props.title ? `${props.title} | ${siteMetadata.title}` : siteMetadata.title
   const description = props.description || siteMetadata.description
 
   return (