chore: changes to migrate to gatsby-plugin-mdx v5

See https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#migrating-from-v3-to-v4
openedx · Dec 16, 2024 · 23247bd · 23247bd
1 parent 453554e
commit 23247bd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 63 deletions.
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
@@ -52,6 +52,13 @@ const plugins = [
       ignore: ['**/*.d.ts'],
     },
   },
+  {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      path: `${__dirname}/src/pages`,
+      name: 'pages',
+    },
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
@@ -66,33 +73,27 @@ const plugins = [
     resolve: 'gatsby-plugin-mdx',
     options: {
       extensions: ['.mdx', '.md'],
-      defaultLayouts: {
-        components: require.resolve(
-          './src/templates/component-page-template.tsx',
-        ),
-        default: require.resolve(
-          './src/templates/default-mdx-page-template.tsx',
-        ),
-      },
-      rehypePlugins: [
-        rehypeSlugPlugin,
-        [
-          rehypeAutolinkHeadingsPlugin,
-          {
-            behavior: 'append',
-            content: {
-              type: 'element',
-              tagName: 'span',
-              properties: {
-                className: 'pgn-doc__anchor',
+      mdxOptions: {
+        rehypePlugins: [
+          rehypeSlugPlugin,
+          [
+            rehypeAutolinkHeadingsPlugin,
+            {
+              behavior: 'append',
+              content: {
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  className: 'pgn-doc__anchor',
+                },
+                children: [
+                  { type: 'text', value: '#' },
+                ],
               },
-              children: [
-                { type: 'text', value: '#' },
-              ],
             },
-          },
+          ],
         ],
-      ],
+      },
     },
   },
   {

diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
@@ -3,7 +3,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { graphql, Link } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
-import { MDXRenderer } from 'gatsby-plugin-mdx';
 import classNames from 'classnames';
 import {
   Container,
@@ -45,7 +44,8 @@ export interface IPageTemplate {
     scssVariablesData: Record<string, string>,
     componentsUsageInsights: string[],
     githubEditPath: string,
-  }
+  },
+  children: React.ReactNode,
 }
 
 export type ShortCodesTypes = {
@@ -55,6 +55,7 @@ export type ShortCodesTypes = {
 export default function PageTemplate({
   data: { mdx, components: componentNodes },
   pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath },
+  children,
 }: IPageTemplate) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
   const [showMinimizedTitle, setShowMinimizedTitle] = useState(false);
@@ -161,7 +162,7 @@ export default function PageTemplate({
           </Stack>
         </Stack>
         <MDXProvider components={shortcodes}>
-          <MDXRenderer>{mdx.body}</MDXRenderer>
+          {children}
         </MDXProvider>
         {scssVariables && (
           <div className="mb-5">
@@ -205,39 +206,10 @@ export default function PageTemplate({
   );
 }
 
-PageTemplate.propTypes = {
-  data: PropTypes.shape({
-    mdx: PropTypes.shape({
-      frontmatter: PropTypes.shape({
-        title: PropTypes.string,
-        status: PropTypes.string,
-      }),
-      body: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-      tableOfContents: PropTypes.shape({
-        items: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-      }),
-    }),
-    components: PropTypes.shape({
-      nodes: PropTypes.arrayOf(PropTypes.shape({})),
-    }),
-  }).isRequired,
-  pageContext: PropTypes.shape({
-    scssVariablesData: PropTypes.shape({
-      openedx: PropTypes.string,
-      edxorg: PropTypes.string,
-    }),
-  }),
-};
-
-PageTemplate.defaultProps = {
-  pageContext: null,
-};
-
 export const pageQuery = graphql`
   query ComponentPageQuery($id: String, $components: [String]) {
     mdx(id: { eq: $id }) {
       id
-      body
       frontmatter {
         title
         status

diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -4,6 +4,8 @@ const { INSIGHTS_PAGES } = require('../src/config');
 const { getThemesSCSSVariables, processComponentSCSSVariables } = require('../theme-utils');
 const componentsUsage = require('../src/utils/componentsUsage');
 
+const componentPageTemplate = path.resolve(__dirname, '../src/templates/component-page-template.tsx');
+
 async function createPages(graphql, actions, reporter) {
   // Destructure the createPage function from the actions object
   const { createPage, createRedirect } = actions;
@@ -28,8 +30,9 @@ async function createPages(graphql, actions, reporter) {
             frontmatter {
               components
             }
-            slug
-            fileAbsolutePath
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -44,11 +47,10 @@ async function createPages(graphql, actions, reporter) {
   const themesSCSSVariables = await getThemesSCSSVariables();
 
   // you'll call `createPage` for each result
-  // eslint-disable-next-line no-restricted-syntax
   for (const { node } of components) {
-    const componentDir = node.slug.split('/')[0];
+    const componentDir = node.fields.slug.split('/')[0];
     const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`);
-    const githubEditPath = `https://github.com/openedx/paragon/edit/master/src${node.fileAbsolutePath.split('src')[1]}`;
+    const githubEditPath = `https://github.com/openedx/paragon/edit/master/src${node.internal.contentFilePath.split('src')[1]}`;
     let scssVariablesData = {};
 
     if (fs.existsSync(variablesPath)) {
@@ -60,8 +62,8 @@ async function createPages(graphql, actions, reporter) {
       // This is the slug you created before
       // (or `node.frontmatter.slug`)
       path: node.fields.slug,
-      // This component will wrap our MDX content
-      component: path.resolve(__dirname, '../src/templates/component-page-template.tsx'),
+      // This layout will wrap our MDX content
+      component: `${componentPageTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
       // You can use the values in this context in
       // our page layout component
       context: {