Gatsby 5 upgrade release

.github/workflows/pr_merged.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 17
+          node-version: 18
           cache: 'yarn'
 
       - name: Install Dependencies

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.github/workflows/validate_pr.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Cache dependencies
         id: yarn-cache
@@ -43,7 +43,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Cache dependencies
         id: yarn-cache

.nvmrc

@@ -1 +1 @@
-16
+18

THIRD_PARTY_NOTICES.md

@@ -26,7 +26,7 @@ code, the source code can be found at [https://github.com/newrelic/gatsby-theme-
 * [eslint-plugin-jsx-a11y](#eslint-plugin-jsx-a11y)
 * [eslint-plugin-react-hooks](#eslint-plugin-react-hooks)
 * [eslint](#eslint)
-* [jest-emotion](#jest-emotion)
+* [@emotion/jest](#emotion-jest)
 * [jest-localstorage-mock](#jest-localstorage-mock)
 * [jest](#jest)
 * [lerna](#lerna)
@@ -459,9 +459,9 @@ THE SOFTWARE.
 
 ```
 
-### jest-emotion
+### @emotion/jest
 
-This product includes source derived from [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) ([v10.0.32](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion/tree/v10.0.32)), distributed under the [MIT License](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion/blob/v10.0.32/LICENSE):
+This product includes source derived from [@emotion/jest](https://github.com/emotion-js/emotion/tree/main/packages/jest) ([v10.0.32](https://github.com/emotion-js/emotion/tree/%40emotion/jest%4011.11.0/packages/jest)), distributed under the [MIT License](https://github.com/emotion-js/emotion/blob/%40emotion/jest%4011.11.0/packages/jest/LICENSE):
 
 ```
 MIT License

demo/gatsby-config.js

@@ -129,11 +129,13 @@ module.exports = {
             options: {
               maxWidth: 1200,
               linkImagesToOriginal: false,
+              wrapperStyle: 'margin-bottom: var(--paragraph-spacing);',
             },
           },
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
+              className: 'header-anchor',
               icon: '<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>',
             },
           },

demo/gatsby-node.js

@@ -11,11 +11,16 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           isDefault
         }
       }
-      allMdx(filter: { fileAbsolutePath: { regex: "/src/content/" } }) {
+      allMdx(
+        filter: { internal: { contentFilePath: { regex: "/src/content/" } } }
+      ) {
         nodes {
-          slug
           fields {
             fileRelativePath
+            slug
+          }
+          internal {
+            contentFilePath
           }
         }
       }
@@ -33,15 +38,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     ({ isDefault }) => !isDefault
   );
 
+  const basicTemplate = path.resolve('src/templates/basic.js');
+
   allMdx.nodes.forEach((node) => {
     const {
-      slug,
-      fields: { fileRelativePath },
+      fields: { fileRelativePath, slug },
+      internal: { contentFilePath },
     } = node;
 
     createPage({
       path: slug,
-      component: path.resolve('src/templates/basic.js'),
+      component: `${basicTemplate}?__contentFilePath=${contentFilePath}`,
       context: {
         slug,
         fileRelativePath,
@@ -65,8 +72,10 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
+        crypto: false,
         http: false,
         https: false,
+        url: false,
         zlib: false,
       },
     },

demo/package.json

@@ -13,15 +13,15 @@
     "@mdx-js/mdx": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
     "@newrelic/gatsby-theme-newrelic": "^3.2.0",
-    "gatsby": "^4.25.2",
-    "gatsby-plugin-mdx": "^2.10.1",
-    "gatsby-plugin-sharp": "4.25.0",
+    "gatsby": "^5.0.0",
+    "gatsby-plugin-mdx": "^5.11.0",
+    "gatsby-plugin-sharp": "^5.0.0",
     "gatsby-remark-autolink-headers": "^4.7.0",
-    "gatsby-remark-images": "^5.7.0",
-    "gatsby-source-filesystem": "^4.25.0",
-    "gatsby-transformer-sharp": "4.25.0",
+    "gatsby-remark-images": "^7.12.0",
+    "gatsby-source-filesystem": "^5.0.0",
+    "gatsby-transformer-sharp": "^5.0.0",
     "github-slugger": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
-}
+}

demo/src/templates/basic.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { graphql } from 'gatsby';
 import {
   ContributingGuidelines,
@@ -15,10 +15,10 @@ import {
 import GitHubSlugger from 'github-slugger';
 import toString from 'mdast-util-to-string';
 
-const BasicTemplate = ({ data, location }) => {
+const BasicTemplate = ({ data, location, children }) => {
   const slugger = useMemo(() => new GitHubSlugger(), []);
   const {
-    mdx: { body, frontmatter, fields, relatedResources, mdxAST },
+    mdx: { frontmatter, fields, relatedResources, mdxAST },
   } = data;
 
   const headings = useMemo(() => {
@@ -39,34 +39,11 @@ const BasicTemplate = ({ data, location }) => {
   return (
     <>
       <SEO location={location} title={frontmatter.title} />
-      <Layout.Main
-        css={css`
-          display: grid;
-          grid-template-areas:
-            'page-title page-tools'
-            'content page-tools';
-          grid-template-columns: minmax(0, 1fr) 320px;
-          grid-column-gap: var(--site-content-padding);
-
-          @media screen and (max-width: 760px) {
-            grid-template-areas:
-              'page-title'
-              'content'
-              'page-tools';
-            grid-template-columns: minmax(0, 1fr);
-          }
-        `}
-      >
-        <h1
-          css={css`
-            grid-area: page-title;
-          `}
-        >
-          {frontmatter.title}
-        </h1>
+      <Main>
+        <Title>{frontmatter.title}</Title>
         <Layout.Content>
           <MarkdownContainer>
-            <MDX body={body} />
+            <MDX>{children}</MDX>
           </MarkdownContainer>
         </Layout.Content>
 
@@ -79,20 +56,41 @@ const BasicTemplate = ({ data, location }) => {
           <TableOfContents headings={headings} />
           <RelatedResources resources={relatedResources} />
         </Layout.PageTools>
-      </Layout.Main>
+      </Main>
     </>
   );
 };
 
 BasicTemplate.propTypes = {
+  children: PropTypes.node.isRequired,
   data: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
 };
 
+const Main = styled(Layout.Main)`
+  display: grid;
+  grid-template-areas:
+    'page-title page-tools'
+    'content page-tools';
+  grid-template-columns: minmax(0, 1fr) 320px;
+  grid-column-gap: var(--site-content-padding);
+
+  @media screen and (max-width: 760px) {
+    grid-template-areas:
+      'page-title'
+      'content'
+      'page-tools';
+    grid-template-columns: minmax(0, 1fr);
+  }
+`;
+
+const Title = styled.h1`
+  grid-area: page-title;
+`;
+
 export const pageQuery = graphql`
   query ($slug: String!) {
-    mdx(slug: { eq: $slug }) {
-      body
+    mdx(fields: { slug: { eq: $slug } }) {
       mdxAST
       frontmatter {
         title

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: 'jsdom',
   transform: {
     '^.+\\.js$': '<rootDir>/jest-preprocess.js',
   },
@@ -13,6 +14,5 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
   moduleNameMapper: {
     '^@reach/router(.*)': '<rootDir>/node_modules/@gatsbyjs/reach-router$1',
-    '^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1`,
   },
 };

package.json

@@ -6,6 +6,7 @@
     "packages/*"
   ],
   "scripts": {
+    "clean": "yarn workspace demo clean",
     "start": "yarn workspace demo develop",
     "release": "lerna publish --no-verify-access --conventional-commits --create-release github --no-private",
     "test": "jest",
@@ -14,21 +15,24 @@
     "extract-i18n": "yarn workspace @newrelic/gatsby-theme-newrelic extract-i18n"
   },
   "devDependencies": {
+    "@emotion/jest": "^11.11.0",
     "@newrelic/eslint-plugin-newrelic": "^0.3.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
-    "babel-jest": "^26.3.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "babel-jest": "^29.6.4",
     "babel-preset-gatsby": "^0.5.16",
     "eslint": "^7.4.0",
+    "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "jest": "^26.4.0",
-    "jest-emotion": "^10.0.32",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jest-fetch-mock": "^3.0.3",
     "jest-localstorage-mock": "^2.4.3",
     "lerna": "^5.6.2",
     "prettier": "^2.0.5",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^18.2.0"
   }
 }

packages/gatsby-theme-newrelic/gatsby-config.js

@@ -3,6 +3,7 @@ module.exports = ({ layout, newrelic, robots = {}, sitemap = true }) => {
     plugins: [
       'gatsby-plugin-emotion',
       'gatsby-plugin-react-helmet',
+      'gatsby-plugin-portal',
       sitemap && {
         resolve: 'gatsby-plugin-sitemap',
         options: {
@@ -18,13 +19,12 @@ module.exports = ({ layout, newrelic, robots = {}, sitemap = true }) => {
           defaults: {},
         },
       },
-      layout &&
-        layout.component && {
-          resolve: `gatsby-plugin-layout`,
-          options: {
-            component: layout.component,
-          },
+      layout?.component && {
+        resolve: `gatsby-plugin-layout`,
+        options: {
+          component: layout.component,
         },
+      },
       {
         resolve: 'gatsby-source-filesystem',
         options: {