Tabatha/gatsby v5

.github/workflows/fetch-related-content.yml

@@ -21,7 +21,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: 17
+          node-version: 18
           cache: 'yarn'
 
       - name: Install Dependencies
@@ -119,7 +119,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           # semantic-release requires >= 14
-          node-version: 17
+          node-version: 18
 
       # deletes node_modules, install dependencies, does NOT update lockfile
       - name: Install Dependencies

.github/workflows/validate-pr.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 17
+          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: 17
+          node-version: 18
 
       - name: Cache dependencies
         id: yarn-cache

.nvmrc

@@ -1 +1 @@
-17
+18

gatsby-config.js

@@ -137,24 +137,24 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-mdx',
       options: {
-        gatsbyRemarkPlugins: [
-          {
-            resolve: 'gatsby-remark-images',
-            options: {
-              maxHeight: 400,
-              maxWidth: 1200,
-              fit: 'inside',
-              linkImagesToOriginal: false,
+        mdxOptions: {
+          gatsbyRemarkPlugins: [
+            {
+              resolve: 'gatsby-remark-images',
+              options: {
+                maxWidth: 1200,
+                linkImagesToOriginal: false,
+              },
             },
-          },
-          {
-            resolve: `gatsby-remark-autolink-headers`,
-            options: {
-              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>',
+            {
+              resolve: `gatsby-remark-autolink-headers`,
+              options: {
+                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>',
+              },
             },
-          },
-        ],
+          ],
+        },
       },
     },
     {

gatsby-node.js → gatsby-node.mjs

@@ -1,8 +1,11 @@
-const path = require(`path`);
-const { execSync } = require('child_process');
-const { createFilePath } = require('gatsby-source-filesystem');
-const resolveQuickstartSlug = require('./src/utils/resolveQuickstartSlug.js');
-const externalRedirects = require('./src/data/external-redirects.json');
+import path from 'path';
+import { execSync } from 'child_process';
+import { createFilePath } from 'gatsby-source-filesystem';
+import resolveQuickstartSlug from './src/utils/resolveQuickstartSlug.js';
+import externalRedirects from './src/data/external-redirects.json' assert {type: 'json'};
+import { getFileRelativePath } from './gatsby/fs.js';
+
+const MDX_NODE_TYPES = new Set(['Mdx', 'MarkdownRemark']);
 
 const kebabCase = (string) =>
   string
@@ -19,7 +22,7 @@ const kebabCase = (string) =>
 //
 // This patch can be safely removed when removing the deprecation warning in
 // createPages.
-exports.createSchemaCustomization = ({ actions }) => {
+export const createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
 
   const typeDefs = `
@@ -31,46 +34,47 @@ exports.createSchemaCustomization = ({ actions }) => {
   createTypes(typeDefs);
 };
 
-exports.createPages = async ({ actions, graphql, reporter }) => {
+export const createPages = async ({ actions, graphql, reporter }) => {
   const { createPage, createRedirect } = actions;
 
   const result = await graphql(`
     query {
-      allMdx(filter: { fileAbsolutePath: { regex: "/src/markdown-pages/" } }) {
-        edges {
-          node {
-            fields {
-              fileRelativePath
-              slug
-            }
-            frontmatter {
-              path
-              template
-              redirects
-              resources {
-                url
-              }
+      allMdx(
+        filter: {
+          internal: { contentFilePath: { regex: "/src/markdown-pages/" } }
+        }
+      ) {
+        nodes {
+          fields {
+            fileRelativePath
+            slug
+          }
+          frontmatter {
+            path
+            template
+            redirects
+            resources {
+              url
             }
           }
+          internal {
+            contentFilePath
+          }
         }
       }
 
       allNewRelicSdkComponent {
-        edges {
-          node {
-            fields {
-              slug
-            }
+        nodes {
+          fields {
+            slug
           }
         }
       }
 
       allNewRelicSdkApi {
-        edges {
-          node {
-            fields {
-              slug
-            }
+        nodes {
+          fields {
+            slug
           }
         }
       }
@@ -169,10 +173,11 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     isPermanent: true,
   });
 
-  allMdx.edges.forEach(({ node }) => {
+  allMdx.forEach(({ node }) => {
     const {
       frontmatter,
       fields: { fileRelativePath, slug },
+      internal: { contentFilePath },
     } = node;
 
     if (frontmatter.redirects) {
@@ -210,7 +215,9 @@ The 'path' property on frontmatter is deprecated and has no effect. URLs are now
 
     createPage({
       path: path.join(slug, '/'),
-      component: path.resolve(`src/templates/${frontmatter.template}.js`),
+      component: `${path.resolve(
+        `src/templates/${frontmatter.template}.js`
+      )}.?__contentFilePath=${contentFilePath}`,
       context: {
         slug,
         fileRelativePath,
@@ -223,49 +230,81 @@ The 'path' property on frontmatter is deprecated and has no effect. URLs are now
     });
   });
 
-  allNewRelicSdkComponent.edges.forEach(({ node }) => {
+  allNewRelicSdkComponent.forEach(({ node }) => {
     const {
       fields: { slug },
+      internal: { contentFilePath },
     } = node;
 
     createPage({
       path: path.join(slug, '/'),
-      component: path.resolve('./src/templates/ComponentReferenceTemplate.js'),
+      component: `${path.resolve(
+        './src/templates/ComponentReferenceTemplate.js'
+      )}.?__contentFilePath=${contentFilePath}`,
       context: {
         slug,
       },
     });
   });
 
-  allNewRelicSdkApi.edges.forEach(({ node }) => {
+  allNewRelicSdkApi.forEach(({ node }) => {
     const {
       fields: { slug },
+      internal: { contentFilePath },
     } = node;
 
     createPage({
       path: path.join(slug, '/'),
-      component: path.resolve('./src/templates/ApiReferenceTemplate.js'),
+      component: `${path.resolve(
+        './src/templates/ApiReferenceTemplate.js'
+      )}.?__contentFilePath=${contentFilePath}`,
       context: {
         slug,
       },
     });
   });
 };
 
-exports.onCreatePage = async ({ page, actions }) => {
+export const onCreatePage = async ({ page, actions }) => {
   const { createPage, deletePage } = actions;
   const oldPage = { ...page };
 
   deletePage(oldPage);
   createPage(page);
 };
 
-exports.onCreateNode = ({ node, getNode, actions }) => {
+export const onCreateNode = ({ node, getNode, actions, store }) => {
   const { createNodeField } = actions;
+  const { program } = store.getState();
+
+  const slugify = (str) => str.replace('src/content/', '').replace('.mdx', '');
+
+  if (MDX_NODE_TYPES.has(node.internal.type)) {
+    const absolutePath =
+      node.internal.type === 'MarkdownRemark'
+        ? node.fileAbsolutePath
+        : node.internal.contentFilePath;
+    const fileRelativePath = getFileRelativePath(
+      absolutePath,
+      program.directory
+    );
+
+    createNodeField({
+      node,
+      name: 'fileRelativePath',
+      value: fileRelativePath,
+    });
+
+    createNodeField({
+      node,
+      name: 'slug',
+      value: slugify(fileRelativePath),
+    });
+  }
 
-  if (node.internal.type === 'Mdx' && node.fileAbsolutePath) {
+  if (node.internal.type === 'Mdx' && node.internal.contentFilePath) {
     const gitAuthorTime = execSync(
-      `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`
+      `git log -1 --pretty=format:%aI ${node.internal.contentFilePath}`
     ).toString();
     actions.createNodeField({
       node,
@@ -305,7 +344,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
   }
 };
 
-exports.onCreateWebpackConfig = ({ actions, plugins }) => {
+export const onCreateWebpackConfig = ({ actions, plugins }) => {
   actions.setWebpackConfig({
     // The `debug` library is causing issues when building the site by including
     // invalid JS. This ensures the module resolves to the browser-capatible

gatsby/fs.js

@@ -0,0 +1,4 @@
+const getFileRelativePath = (absolutePath, rootDir) =>
+  absolutePath.replace(`${rootDir}/`, '');
+
+module.exports = { getFileRelativePath };