Upgrade to Gatsby 5

.changeset/thick-dingos-mate.md

@@ -0,0 +1,6 @@
+---
+'@rocketseat/gatsby-theme-docs-core': major
+'@rocketseat/gatsby-theme-docs': major
+---
+
+Upgrade to Gatsby v5

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

@rocketseat/gatsby-theme-docs-core/gatsby-config.js

@@ -1,5 +1,7 @@
 const withDefault = require(`./util/with-default`);
 const path = require(`path`);
+const gfmPlugin = require(`remark-gfm`);
+const { rehypeMetaAsAttributes } = require(`./rehype-meta-as-attributes`);
 const camelCase = require('lodash.camelcase');
 
 const upperFirst = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -70,6 +72,10 @@ module.exports = (options) => {
         resolve: `gatsby-plugin-mdx`,
         options: {
           extensions: [`.mdx`, `.md`],
+          mdxOptions: {
+            remarkPlugins: [gfmPlugin],
+            rehypePlugins: [rehypeMetaAsAttributes],
+          },
           gatsbyRemarkPlugins: [
             `gatsby-remark-autolink-headers`,
             `gatsby-remark-embedder`,
@@ -85,7 +91,6 @@ module.exports = (options) => {
             `gatsby-remark-copy-linked-files`,
             ...gatsbyRemarkPlugins,
           ],
-          plugins: [`gatsby-remark-autolink-headers`, `gatsby-remark-images`],
         },
       },
     ].filter(Boolean),

@rocketseat/gatsby-theme-docs-core/gatsby-node.js

@@ -2,9 +2,11 @@ const path = require(`path`);
 const { createFilePath } = require(`gatsby-source-filesystem`);
 const fs = require(`fs`);
 const urljoin = require(`url-join`);
+const { compileMDXWithCustomOptions } = require(`gatsby-plugin-mdx`);
 
 const { normalizeBasePath, resolveLink } = require(`./util/url`);
 const withDefault = require(`./util/with-default`);
+const { remarkHeadingsPlugin } = require(`./remark-headings-plugin`);
 
 function generateRepositoryEditLink(themeOptions, relativePath) {
   const { baseDir, docsPath, repositoryUrl, githubUrl, branch } =
@@ -68,6 +70,9 @@ exports.createPages = (
                 fields {
                   slug
                 }
+                internal {
+                  contentFilePath
+                }
               }
             }
           }
@@ -85,6 +90,13 @@ exports.createPages = (
             }
           }
         }
+        homepage: allMdx(filter: { fields: { slug: { eq: "/" } } }) {
+          nodes {
+            internal {
+              contentFilePath
+            }
+          }
+        }
       }
     `,
   ).then((result) => {
@@ -102,9 +114,12 @@ exports.createPages = (
       );
     }
 
+    const homepage = result.data.homepage.nodes[0];
+
     createPage({
       path: basePath,
-      component: homeTemplate,
+      component: `${homeTemplate}?__contentFilePath=${homepage.internal.contentFilePath}`,
+      context: {},
     });
 
     // Generate prev/next items based on sidebar.yml file
@@ -133,6 +148,7 @@ exports.createPages = (
       const {
         childMdx: {
           fields: { slug },
+          internal: { contentFilePath },
         },
         relativePath,
       } = doc.node;
@@ -153,7 +169,7 @@ exports.createPages = (
 
       createPage({
         path: slug,
-        component: docsTemplate,
+        component: `${docsTemplate}?__contentFilePath=${contentFilePath}`,
         context: {
           slug,
           prev,
@@ -168,7 +184,16 @@ exports.createPages = (
   });
 };
 
-exports.createSchemaCustomization = ({ actions }) => {
+exports.createSchemaCustomization = async ({
+  getNode,
+  getNodesByType,
+  pathPrefix,
+  reporter,
+  cache,
+  actions,
+  schema,
+  store,
+}) => {
   const { createTypes } = actions;
 
   createTypes(`
@@ -192,6 +217,59 @@ exports.createSchemaCustomization = ({ actions }) => {
       link: String
     }
   `);
+
+  const headingsResolver = schema.buildObjectType({
+    name: `Mdx`,
+    fields: {
+      headings: {
+        type: `[MdxHeading]`,
+        async resolve(mdxNode) {
+          const fileNode = getNode(mdxNode.parent);
+
+          if (!fileNode) {
+            return null;
+          }
+
+          const result = await compileMDXWithCustomOptions(
+            {
+              source: mdxNode.body,
+              absolutePath: fileNode.absolutePath,
+            },
+            {
+              pluginOptions: {},
+              customOptions: {
+                mdxOptions: {
+                  remarkPlugins: [remarkHeadingsPlugin],
+                },
+              },
+              getNode,
+              getNodesByType,
+              pathPrefix,
+              reporter,
+              cache,
+              store,
+            },
+          );
+
+          if (!result) {
+            return null;
+          }
+
+          return result.metadata.headings;
+        },
+      },
+    },
+  });
+
+  createTypes([
+    `
+      type MdxHeading {
+        value: String
+        depth: Int
+      }
+    `,
+    headingsResolver,
+  ]);
 };
 
 exports.onPreBootstrap = ({ store, reporter }, themeOptions) => {

@rocketseat/gatsby-theme-docs-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketseat/gatsby-theme-docs-core",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "main": "index.js",
   "description": "Core theme for @rocketseat/gatsby-theme-docs with no additional theming or style opinions. Includes all of the data structures you need to get up and build a documentation website.",
   "author": "João Pedro Schmitz <[email protected]> (@jpedroschmitz)",
@@ -29,23 +29,26 @@
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
-    "gatsby-plugin-mdx": "^3.2.0",
-    "gatsby-plugin-sharp": "^4.2.0",
-    "gatsby-remark-autolink-headers": "^5.2.0",
-    "gatsby-remark-copy-linked-files": "^5.2.0",
-    "gatsby-remark-embedder": "^5.0.0",
-    "gatsby-remark-images": "^6.2.0",
-    "gatsby-remark-responsive-iframe": "^5.2.0",
-    "gatsby-source-filesystem": "^4.2.0",
-    "gatsby-transformer-sharp": "^4.2.0",
-    "gatsby-transformer-yaml": "^4.2.0",
+    "gatsby-plugin-mdx": "^5.9.0",
+    "gatsby-plugin-sharp": "^5.9.0",
+    "gatsby-remark-autolink-headers": "^6.9.0",
+    "gatsby-remark-copy-linked-files": "^6.9.0",
+    "gatsby-remark-embedder": "^6.0.1",
+    "gatsby-remark-images": "^7.9.0",
+    "gatsby-remark-responsive-iframe": "^6.9.0",
+    "gatsby-source-filesystem": "^5.9.0",
+    "gatsby-transformer-sharp": "^5.9.0",
+    "gatsby-transformer-yaml": "^5.9.0",
     "lodash.camelcase": "^4.3.0",
+    "mdast-util-to-string": "^2",
+    "remark-gfm": "^1",
+    "unist-util-visit": "^2",
     "url-join": "^4.0.1"
   },
   "peerDependencies": {
-    "@mdx-js/react": "^1.5.1",
-    "gatsby": "^4.0.0",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "@mdx-js/react": "^2.3.0",
+    "gatsby": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

@rocketseat/gatsby-theme-docs-core/rehype-meta-as-attributes.js

@@ -0,0 +1,24 @@
+const visit = require(`unist-util-visit`);
+
+exports.rehypeMetaAsAttributes = function rehypeMetaAsAttributes() {
+  return (tree) => {
+    // A regex that looks for a simplified attribute name, optionally followed
+    // by a double, single, or unquoted attribute value
+    const re = /\b([-\w]+)(?:=(?:"([^"]*)"|'([^']*)'|([^"'\s]+)))?/g;
+
+    // …
+    visit(tree, 'element', (node) => {
+      let match;
+
+      if (node.tagName === 'code' && node.data && node.data.meta) {
+        re.lastIndex = 0; // Reset regex.
+
+        // eslint-disable-next-line no-cond-assign
+        while ((match = re.exec(node.data.meta))) {
+          node.properties[match[1]] = match[2] || match[3] || match[4] || '';
+        }
+      }
+    });
+    // …
+  };
+};

@rocketseat/gatsby-theme-docs-core/remark-headings-plugin.js

@@ -0,0 +1,22 @@
+const visit = require(`unist-util-visit`);
+const toString = require(`mdast-util-to-string`);
+
+exports.remarkHeadingsPlugin = function remarkHeadingsPlugin() {
+  return async function transformer(tree, file) {
+    const headings = [];
+
+    visit(tree, `heading`, (heading) => {
+      headings.push({
+        value: toString(heading),
+        depth: heading.depth,
+      });
+    });
+
+    const mdxFile = file;
+    if (!mdxFile.data.meta) {
+      mdxFile.data.meta = {};
+    }
+
+    mdxFile.data.meta.headings = headings;
+  };
+};

@rocketseat/gatsby-theme-docs-core/src/templates/docs-query.js

@@ -17,7 +17,6 @@ export const query = graphql`
         image
         disableTableOfContents
       }
-      body
       headings {
         depth
         value

@rocketseat/gatsby-theme-docs-core/util/with-default.js

@@ -1,5 +1,6 @@
 module.exports = (themeOptions) => {
   const basePath = themeOptions.basePath || `/`;
+  const homePath = themeOptions.homePath || ``;
   const configPath = themeOptions.configPath || `config`;
   const docsPath = themeOptions.docsPath || `docs`;
   const yamlFilesPath = themeOptions.yamlFilesPath || `yamlFiles`;
@@ -13,6 +14,7 @@ module.exports = (themeOptions) => {
 
   return {
     basePath,
+    homePath,
     configPath,
     docsPath,
     yamlFilesPath,

@rocketseat/gatsby-theme-docs/gatsby-config.js

@@ -17,6 +17,13 @@ module.exports = (options) => {
       docsPath: themeOptions.docsPath,
     },
     plugins: [
+      {
+        resolve: `gatsby-source-filesystem`,
+        options: {
+          name: `homepage`,
+          path: themeOptions.homePath || `${__dirname}/src/text`,
+        },
+      },
       {
         resolve: `@rocketseat/gatsby-theme-docs-core`,
         options: themeOptions,

@rocketseat/gatsby-theme-docs/gatsby/wrapPageElement.js

@@ -1,10 +1,37 @@
 /* eslint-disable */
 import React from 'react';
-import { preToCodeBlock } from 'mdx-utils';
 import { MDXProvider } from '@mdx-js/react';
 
 import Code from '../src/components/Code';
 
+const preToCodeBlock = (preProps) => {
+  if (
+    // children is code element
+    preProps.children &&
+    // if children is actually a <code>
+    preProps.children.type &&
+    preProps.children.type.name &&
+    preProps.children.type.name === 'code'
+  ) {
+    // we have a <pre><code> situation
+    const {
+      children: codeString,
+      className = '',
+      ...props
+    } = preProps.children.props;
+
+    const match = className.match(/language-([\0-\uFFFF]*)/);
+
+    return {
+      codeString: codeString.trim(),
+      className,
+      language: match != null ? match[1] : '',
+      ...props,
+    };
+  }
+  return undefined;
+};
+
 const components = {
   pre: (preProps) => {
     const props = preToCodeBlock(preProps);
@@ -15,7 +42,7 @@ const components = {
 
     return <pre {...preProps} />;
   },
-  inlineCode: (props) => <code className="inline-code" {...props} />,
+  code: (props) => <code className="inline-code" {...props} />,
   table: ({ children, ...rest }) => (
     <div style={{ overflowX: `auto` }}>
       <table {...rest}>{children}</table>