fix: use the right layout for rendering .mdx pages in www/src/pages/

openedx · Dec 17, 2024 · e0a3539 · e0a3539
1 parent 1942f03
commit e0a3539
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/www/gatsby-config.mjs b/www/gatsby-config.mjs
@@ -41,6 +41,7 @@ const plugins = [
     },
   },
   'gatsby-plugin-react-helmet',
+  'gatsby-plugin-mdx-source-name',
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
@@ -108,7 +109,7 @@ const plugins = [
     resolve: 'gatsby-plugin-page-creator',
     options: {
       path: `${__dirname}/src/pages`,
-      ignore: ['insights.tsx'],
+      ignore: ['insights.tsx', '**/*.(md|mdx)'],
     },
   },
 ];

diff --git a/www/package.json b/www/package.json
@@ -16,6 +16,7 @@
     "gatsby": "^5.14",
     "gatsby-plugin-manifest": "^5.14",
     "gatsby-plugin-mdx": "^5.14",
+    "gatsby-plugin-mdx-source-name": "^1.0.1",
     "gatsby-plugin-react-axe": "^0.5.0",
     "gatsby-plugin-react-helmet": "^6.14",
     "gatsby-plugin-sass": "^6.14",

diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -5,6 +5,7 @@ const { getThemesSCSSVariables, processComponentSCSSVariables } = require('../th
 const componentsUsage = require('../src/utils/componentsUsage');
 
 const componentPageTemplate = path.resolve(__dirname, '../src/templates/component-page-template.tsx');
+const defaultMdxPageTemplate = path.resolve(__dirname, '../src/templates/default-mdx-page-template.tsx');
 
 async function createPages(graphql, actions, reporter) {
   // Destructure the createPage function from the actions object
@@ -26,6 +27,7 @@ async function createPages(graphql, actions, reporter) {
             id
             fields {
               slug
+              source
             }
             frontmatter {
               components
@@ -42,12 +44,12 @@ async function createPages(graphql, actions, reporter) {
     reporter.panicOnBuild('🚨  ERROR: Loading createPages query');
   }
   // Create component detail pages.
-  const components = result.data.allMdx.edges;
+  const pages = result.data.allMdx.edges;
 
   const themesSCSSVariables = await getThemesSCSSVariables();
 
   // you'll call `createPage` for each result
-  for (const { node } of components) {
+  for (const { node } of pages) {
     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.internal.contentFilePath.split('src')[1]}`;
@@ -58,22 +60,39 @@ async function createPages(graphql, actions, reporter) {
       scssVariablesData = await processComponentSCSSVariables(variablesPath, themesSCSSVariables);
     }
 
-    createPage({
-      // This is the slug you created before
-      // (or `node.frontmatter.slug`)
-      path: node.fields.slug,
-      // 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: {
-        id: node.id,
-        components: node.frontmatter.components || [],
-        scssVariablesData,
-        componentsUsageInsights: Object.keys(componentsUsage),
-        githubEditPath,
-      },
-    });
+    if (node.fields.source === 'components') {
+      createPage({
+        // This is the slug you created before
+        // (or `node.frontmatter.slug`)
+        path: node.fields.slug,
+        // 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: {
+          id: node.id,
+          components: node.frontmatter.components || [],
+          scssVariablesData,
+          componentsUsageInsights: Object.keys(componentsUsage),
+          githubEditPath,
+        },
+      });
+    }
+
+    if (node.fields.source === 'pages') {
+      createPage({
+        path: node.fields.slug,
+        component: `${defaultMdxPageTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
+        context: {
+          id: node.id,
+          githubEditPath,
+          scssVariablesData,
+          frontmatter: {
+            title: node.frontmatter.title,
+          },
+        },
+      });
+    }
   }
 
   INSIGHTS_PAGES.forEach(({ path: pagePath, tab }) => {