Merge pull request #428 from davidjerleke/feature/gatsby-update

Migrate to the latest Gatsby version

.github/workflows/cd.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup node for npmjs.org as registry
         uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install 🔧

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - name: Checkout 🛎️

.nvmrc

@@ -0,0 +1 @@
+v18.13.0

.yarnrc.yml

@@ -1,9 +1,11 @@
+nodeLinker: node-modules
+
+npmAuthToken: "${NODE_AUTH_TOKEN:-fallback}"
+
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: '@yarnpkg/plugin-version'
+    spec: "@yarnpkg/plugin-version"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-berry.cjs
-nodeLinker: 'node-modules'
-npmAuthToken: ${NODE_AUTH_TOKEN:-fallback}
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

package.json

@@ -63,5 +63,6 @@
     "hooks": {
       "pre-push": "npm-run-all test lint"
     }
-  }
+  },
+  "packageManager": "yarn@3.3.1"
 }

packages/embla-carousel-docs/gatsby-browser.js

@@ -1,14 +1,5 @@
 import 'inter-ui/inter.css'
 
-export const onClientEntry = async () => {
-  if (typeof window.IntersectionObserver === 'undefined') {
-    await import('intersection-observer')
-  }
-  if (!Object.assign) {
-    await import('core-js/features/object/assign')
-  }
-}
-
 export const onRouteUpdate = ({ location }) => {
   const { hash } = location
   if (!hash) return

packages/embla-carousel-docs/gatsby-config.js

@@ -11,8 +11,6 @@ const siteMetadata = {
 module.exports = {
   siteMetadata,
   plugins: [
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-typescript',
     'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-plugin-sitemap',
@@ -70,23 +68,6 @@ module.exports = {
               icon: `<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill="currentColor" /></svg>`,
             },
           },
-          {
-            resolve: 'gatsby-remark-prismjs',
-            options: {
-              inlineCodeMarker: '±',
-              languageExtensions: [
-                {
-                  language: 'css-with-json',
-                  extend: 'css',
-                  definition: {
-                    boolean: /\b(true|false)\b/g,
-                    number: /\d/g,
-                    singlequote: /'/g,
-                  },
-                },
-              ],
-            },
-          },
         ],
       },
     },

packages/embla-carousel-docs/gatsby-node.js

@@ -7,6 +7,12 @@ const PAGE_TEMPLATES = {
   NOT_FOUND: `404`,
 }
 
+const resolveComponentPath = (template, node) =>
+  `${template}?__contentFilePath=${node.internal.contentFilePath}`
+
+const resolveFilePath = (node) =>
+  node.internal.contentFilePath.replace(/.+?embla-carousel-docs\//, '')
+
 const addPageChildren = (parent, pages) =>
   pages
     .filter((page) => new RegExp(`^${parent.slug}`).test(page.slug))
@@ -31,19 +37,21 @@ exports.createPages = async ({
   reporter,
 }) => {
   const { errors, data } = await graphql(`
-    query {
-      allMdx(sort: { fields: [frontmatter___order], order: ASC }) {
+    {
+      allMdx(sort: { frontmatter: { order: ASC } }) {
         edges {
           node {
             id
-            fileAbsolutePath
             fields {
               slug
             }
             frontmatter {
               title
               order
             }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -71,36 +79,49 @@ exports.createPages = async ({
   const exclude = [startPage.node.fields.slug, notFoundPage.node.fields.slug]
   const pages = edges.filter(({ node }) => !exclude.includes(node.fields.slug))
 
+  const startPageTemplate = path.resolve(
+    `./src/templates/${PAGE_TEMPLATES.HOME}.tsx`,
+  )
   createPage({
     path: startPage.node.fields.slug,
-    component: path.resolve(`./src/templates/${PAGE_TEMPLATES.HOME}.tsx`),
+    component: resolveComponentPath(startPageTemplate, startPage.node),
     context: {
       id: startPage.node.id,
       layout: PAGE_TEMPLATES.HOME,
+      slug: startPage.node.fields.slug,
+      filePath: resolveFilePath(startPage.node),
     },
   })
 
+  const notFoundPageTemplate = path.resolve(
+    path.resolve(`./src/templates/${PAGE_TEMPLATES.NOT_FOUND}.tsx`),
+  )
   createPage({
     path: notFoundPage.node.fields.slug,
-    component: path.resolve(`./src/templates/${PAGE_TEMPLATES.NOT_FOUND}.tsx`),
+    component: resolveComponentPath(notFoundPageTemplate, notFoundPage.node),
     context: {
       id: notFoundPage.node.id,
       layout: PAGE_TEMPLATES.NOT_FOUND,
+      slug: notFoundPage.node.fields.slug,
+      filePath: resolveFilePath(notFoundPage.node),
     },
   })
 
   pages.forEach(({ node }) => {
-    const { id, fields, fileAbsolutePath: filePath } = node
+    const { id, fields } = node
     const index = pageListWithChildren.findIndex((page) => page.id === id)
 
+    const pageTemplate = path.resolve(
+      path.resolve(`./src/templates/${PAGE_TEMPLATES.PAGE}.tsx`),
+    )
     createPage({
       path: fields.slug,
-      component: path.resolve(`./src/templates/${PAGE_TEMPLATES.PAGE}.tsx`),
+      component: resolveComponentPath(pageTemplate, node),
       context: {
         id,
         layout: PAGE_TEMPLATES.PAGE,
         slug: fields.slug,
-        filePath: filePath.substring(filePath.indexOf('src'), filePath.length),
+        filePath: resolveFilePath(node),
         next: pageListWithChildren[index + 1],
         previous: pageListWithChildren[index - 1],
       },

packages/embla-carousel-docs/gatsby-ssr.js

@@ -28,12 +28,14 @@ export const onRenderBody = ({
       content={THEME_COLORS[THEME_KEYS.LIGHT].BACKGROUND_SITE}
     />,
     <style
+      id="theme-styles"
       key="theme-style"
       dangerouslySetInnerHTML={{
         __html: `${themeStyles.join('')}`,
       }}
     />,
     <script
+      id="theme-script"
       key="theme-script"
       dangerouslySetInnerHTML={{
         __html: `

packages/embla-carousel-docs/package.json

@@ -35,32 +35,29 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^2.2.1",
+    "@mdx-js/react": "^2.2.1",
     "babel-plugin-styled-components": "^2.0.2",
     "codesandbox": "^2.2.3",
     "embla-carousel-autoplay": "7.0.9",
     "embla-carousel-class-names": "7.0.9",
     "embla-carousel-react": "7.0.9",
     "focus-trap-react": "^8.10.0",
-    "gatsby": "^4.13.0",
-    "gatsby-plugin-layout": "^3.6.0",
-    "gatsby-plugin-manifest": "^4.6.0",
-    "gatsby-plugin-mdx": "^3.13.0",
-    "gatsby-plugin-react-helmet": "^5.13.0",
-    "gatsby-plugin-react-svg": "^3.1.0",
-    "gatsby-plugin-sitemap": "^5.6.0",
-    "gatsby-plugin-styled-components": "^5.6.0",
-    "gatsby-remark-autolink-headers": "^5.6.0",
-    "gatsby-remark-prismjs": "^6.6.0",
-    "gatsby-source-filesystem": "^4.6.0",
+    "gatsby": "^5.5.0",
+    "gatsby-plugin-layout": "^4.4.0",
+    "gatsby-plugin-manifest": "^5.4.0",
+    "gatsby-plugin-mdx": "^5.4.0",
+    "gatsby-plugin-react-svg": "^3.3.0",
+    "gatsby-plugin-sitemap": "^6.4.0",
+    "gatsby-plugin-styled-components": "^6.4.0",
+    "gatsby-remark-autolink-headers": "^6.4.0",
+    "gatsby-source-filesystem": "^5.4.0",
     "inter-ui": "^3.19.3",
-    "intersection-observer": "^0.12.0",
     "lodash": "^4.17.21",
+    "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.26.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.33.1",
     "styled-components": "^5.3.3",
     "ts-node": "^10.9.1"
@@ -71,7 +68,6 @@
     "@types/node": "^17.0.15",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.0",
-    "@types/react-helmet": "^6.1.5",
     "@types/styled-components": "^5.1.22",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",

packages/embla-carousel-docs/src/components/Layout/Layout.tsx

@@ -5,15 +5,13 @@ import { NavigationProvider } from 'components/Navigation/Context'
 import { TabAccessProvider } from 'components/TabAccess/Context'
 import { SkipToContent } from 'components/TabAccess/SkipToContent'
 import { GlobalStyles } from 'components/Layout/GlobalStyles/GlobalStyles'
-import { PageTemplateType, PAGE_TEMPLATES } from 'consts/pageTemplates'
+import { PageTemplatePropType, PAGE_TEMPLATES } from 'consts/pageTemplates'
 import { Grid } from 'components/SiteLayout/Grid'
 import { RoutesLoading } from 'components/Routes/RoutesLoading'
 import { Header } from 'components/Header/Header'
 import { Footer } from 'components/Footer/Footer'
 
-type PropType = PropsWithChildren<{
-  pageContext: { layout: PageTemplateType; id: string }
-}>
+type PropType = PropsWithChildren<Pick<PageTemplatePropType, 'pageContext'>>
 
 export const Layout = (props: PropType) => {
   const { children, pageContext } = props

packages/embla-carousel-docs/src/components/Mdx/Components/Code.tsx

@@ -1,16 +1,10 @@
-import React, { PropsWithChildren } from 'react'
+import React, { HTMLAttributes } from 'react'
 
-type PropType = PropsWithChildren<{
-  className: string
-}>
+type PropType = HTMLAttributes<HTMLElement>
 
 export const Code = (props: PropType) => {
-  if (props.className !== 'language-text') return <code {...props} />
-  const { children, ...restProps } = props
+  const { children, className = '' } = props
 
-  return (
-    <code {...restProps}>
-      <span>{children}</span>
-    </code>
-  )
+  if (className) return <code {...props} />
+  return <code className="language-text">{children}</code>
 }

packages/embla-carousel-docs/src/components/Mdx/Components/Link.tsx

@@ -1,14 +1,12 @@
-import React from 'react'
+import React, { AnchorHTMLAttributes } from 'react'
 import { ContentLink } from 'components/Link/ContentLink'
 import { PlainLink } from 'components/Link/PlainLink'
 
-type PropType = {
-  href: string
-  className: string
-}
+type PropType = AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const Link = (props: PropType) => {
-  const classList = props.className?.split(' ') || []
+  const { className, href = '' } = props
+  const classList = className?.split(' ') || []
   const Link = classList.indexOf('anchor') > -1 ? PlainLink : ContentLink
-  return <Link to={props.href} {...props} />
+  return <Link to={href} {...props} />
 }