feat: Gatsby v3

BREAKING CHANGE: upgrade to Gatsby v3.

See https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.

.gitignore

@@ -2,4 +2,12 @@ node_modules/
 /lib/
 .cache/
 public/
-dist/
+dist/
+
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.nvmrc

@@ -0,0 +1 @@
+15

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: ".yarn/releases/yarn-berry.cjs"
+nodeLinker: node-modules

package.json

@@ -2,7 +2,6 @@
   "private": true,
   "workspaces": [
     "smooth-doc",
-    "example",
     "website"
   ],
   "scripts": {
@@ -25,5 +24,11 @@
     "eslint-plugin-react-hooks": "^4.0.5",
     "prettier": "^2.0.5",
     "standard-version": "^9.0.0"
+  },
+  "resolutions": {
+    "gatsby": "^v3.0.0",
+    "graphql": "^15.4.0",
+    "graphql-compose": "^7.25.0",
+    "webpack": "^5.24.2"
   }
 }

smooth-doc/gatsby-config.js

@@ -15,7 +15,7 @@ function getLogoPath() {
  * @param {string} [options.siteUrl]
  * @param {string} [options.shortName]
  * @param {string[]} [options.sections]
- * @param {{ title: string, url: string }[]} [options.nav]
+ * @param {{ title: string, url: string }[]} [options.navItems]
  * @param {string} [options.baseDirectory]
  * @param {string} [options.twitterAccount]
  * @param {string} [options.githubRepositoryURL]

smooth-doc/gatsby-node.js

@@ -215,9 +215,39 @@ async function createPages({ graphql, actions, reporter }) {
   })
 }
 
+const pluginOptionsSchema = (/** @type {{ Joi: import('joi') }} */ { Joi }) => {
+  return Joi.object({
+    // Validate that the anonymize option is defined by the user and is a boolean
+    name: Joi.string().required(),
+    description: Joi.string().required(),
+    siteUrl: Joi.string(),
+    shortName: Joi.string(),
+    sections: Joi.array().items(Joi.string()),
+    navItems: Joi.array().items(
+      Joi.object({
+        title: Joi.string().required(),
+        url: Joi.string().required(),
+      }),
+    ),
+    baseDirectory: Joi.string(),
+    twitterAccount: Joi.string(),
+    githubRepositoryURL: Joi.string(),
+    githubDocRepositoryURL: Joi.string(),
+    githubDefaultBranch: Joi.string(),
+    author: Joi.string(),
+    carbonAdsURL: Joi.string(),
+    docSearch: Joi.object({
+      apiKey: Joi.string().required(),
+      indexName: Joi.string().required(),
+    }),
+    sitemap: Joi.object(),
+  })
+}
+
 module.exports = {
   createSchemaCustomization,
   onPreBootstrap,
   onCreateNode,
   createPages,
+  pluginOptionsSchema,
 }

smooth-doc/package.json

@@ -29,35 +29,33 @@
     "release": "standard-version && conventional-github-releaser --preset angular"
   },
   "peerDependencies": {
-    "gatsby": "^2.15.0",
-    "react": "^16.9.0 | ^17.0.0",
-    "react-dom": "^16.9.0 | ^17.0.0"
+    "gatsby": "^3.0.0",
+    "react": "*",
+    "react-dom": "*"
   },
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.22",
     "@docsearch/react": "^1.0.0-alpha.14",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@reach/router": "^1.3.4",
     "@xstyled/styled-components": "^2.2.3",
     "babel-plugin-styled-components": "^1.12.0",
     "fs-extra": "^9.1.0",
-    "gatsby-image": "^2.11.0",
-    "gatsby-plugin-catch-links": "^2.10.0",
+    "gatsby-plugin-catch-links": "^3.1.0",
     "gatsby-plugin-compile-es6-packages": "^2.1.0",
-    "gatsby-plugin-manifest": "^2.12.0",
-    "gatsby-plugin-mdx": "^1.10.0",
+    "gatsby-plugin-image": "^1.1.1",
+    "gatsby-plugin-manifest": "^3.1.0",
+    "gatsby-plugin-mdx": "^2.1.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-react-helmet": "^4.1.0",
     "gatsby-plugin-robots-txt": "^1.5.5",
-    "gatsby-plugin-sharp": "^2.14.1",
-    "gatsby-plugin-sitemap": "^2.12.0",
-    "gatsby-plugin-styled-components": "^3.10.0",
-    "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-remark-images": "^3.11.0",
-    "gatsby-source-filesystem": "^2.11.0",
-    "gatsby-transformer-sharp": "^2.12.0",
-    "github-slugger": "^1.2.1",
+    "gatsby-plugin-sharp": "^3.1.1",
+    "gatsby-plugin-sitemap": "^3.1.0",
+    "gatsby-plugin-styled-components": "^4.1.0",
+    "gatsby-remark-images": "^4.1.0",
+    "gatsby-source-filesystem": "^3.1.0",
+    "gatsby-transformer-sharp": "^3.1.0",
+    "github-slugger": "^1.3.0",
     "mdast-util-to-string": "^2.0.0",
     "polished": "^4.1.0",
     "prism-react-renderer": "^1.0.2",

smooth-doc/src/components/SEO.js

@@ -9,9 +9,7 @@ const SEOQuery = graphql`
       name: { eq: "social" }
     ) {
       childImageSharp {
-        fixed(width: 1280, height: 640) {
-          ...GatsbyImageSharpFixed_noBase64
-        }
+        gatsbyImageData(layout: FIXED, width: 1280, height: 640)
       }
     }
 
@@ -20,9 +18,7 @@ const SEOQuery = graphql`
       name: { eq: "social" }
     ) {
       childImageSharp {
-        fixed(width: 1280, height: 640) {
-          ...GatsbyImageSharpFixed_noBase64
-        }
+        gatsbyImageData(layout: FIXED, width: 1280, height: 640)
       }
     }
 
@@ -43,7 +39,9 @@ export function SEO({ title }) {
   const metaTitle = title || data.site.siteMetadata.title
   const url = data.site.siteMetadata.siteUrl
   const socialImage = data.defaultSocialImage || data.socialImage
-  const image = socialImage ? url + socialImage.childImageSharp.fixed.src : null
+  const image = socialImage
+    ? url + socialImage.childImageSharp.gatsbyImageData.images.fallback.src
+    : null
   return (
     <Helmet
       htmlAttributes={{ lang: 'en' }}

smooth-doc/src/components/SideNav.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useStaticQuery, graphql, Link } from 'gatsby'
 import styled from '@xstyled/styled-components'
+// eslint-disable-next-line import/no-unresolved
 import { useLocation } from '@reach/router'
 
 const SideNavQuery = graphql`

smooth-doc/src/components/TableOfContents.js

@@ -1,4 +1,5 @@
 import React from 'react'
+// eslint-disable-next-line import/no-unresolved
 import { useLocation } from '@reach/router'
 import styled, { th } from '@xstyled/styled-components'
 

website/package.json

@@ -8,9 +8,9 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@xstyled/styled-components": "^2.2.1",
-    "gatsby": "^2.15.18",
-    "gatsby-plugin-google-analytics": "^2.3.13",
+    "@xstyled/styled-components": "^2.2.3",
+    "gatsby": "^3.1.1",
+    "gatsby-plugin-google-analytics": "^3.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",