temp: programmatically create mdx pages

Author: jamiehenson

src/pages/docs/chat/index.mdx renamed to content/chat/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: About Chat
+slug: /docs/chat
 meta_description: 'Learn more about Ably Chat and the features that enable you to quickly build functionality into new and existing applications.'
 redirect_from: /docs/products/chat
 ---

src/pages/docs/chat/setup.mdx renamed to content/chat/setup.mdx

@@ -70,6 +70,24 @@ interface ApiReferenceQueryResult {
   };
 }
 
+interface MdxEdge {
+  node: {
+    id: string;
+    frontmatter: {
+      slug: string;
+    };
+    internal: {
+      contentFilePath: string;
+    };
+  };
+}
+
+interface MdxQueryResult {
+  allMdx: {
+    edges: MdxEdge[];
+  };
+}
+
 export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions: { createPage, createRedirect } }) => {
   /**
    * It's not ideal to have:
@@ -104,6 +122,25 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
       }
     }
   `);
+
+  const mdxResult = await graphql<MdxQueryResult>(`
+    query {
+      allMdx {
+        edges {
+          node {
+            id
+            frontmatter {
+              slug
+            }
+            internal {
+              contentFilePath
+            }
+          }
+        }
+      }
+    }
+  `);
+
   /**
    * We could log here, the reason we don't right now is that the error should already have been caught and logged.
    * Because Gatsby spawns a bunch of async processes during the onCreateNode step, though, and errors don't prevent
@@ -207,6 +244,26 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
       return slug;
     };
 
+  const mdxCreator = async (edge: MdxEdge): Promise<string> => {
+    const slug = edge.node.frontmatter.slug;
+
+    if (!slug) {
+      return slug;
+    }
+
+    createPage({
+      path: slug,
+      component: edge.node.internal.contentFilePath,
+      context: {
+        slug,
+        mdx: true,
+        layout: { sidebar: true, searchBar: true, template: 'base' },
+      },
+    });
+
+    return slug;
+  };
+
   createRedirect({
     fromPath: '/',
     toPath: '/docs',
@@ -233,5 +290,6 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
   await Promise.all([
     ...documentResult.data.allFileHtml.edges.map(documentCreator(documentTemplate)),
     ...apiReferenceResult.data.allFileHtml.edges.map(documentCreator(apiReferenceTemplate)),
+    ...(mdxResult.data?.allMdx.edges.map(mdxCreator) ?? []),
   ]);
 };

data/createPages/index.ts

@@ -78,15 +78,14 @@ export const wrapRootElement = ({ element }) => {
   );
 };
 
-export const wrapPageElement = ({ element, props }: { element: React.ReactNode }) => {
+export const wrapPageElement = ({ element }: { element: React.ReactNode }) => {
   return (
     <MDXProvider
       components={{
         h1: (props: any) => <h1 className="text-4xl font-bold mb-4" {...props} />,
         h2: (props: any) => <h2 className="text-2xl font-semibold mb-3" {...props} />,
       }}
     >
-      <div className="max-w-md md:pr-24 md:border-r border-mid-grey">{JSON.stringify(props)}</div>
       {element}
     </MDXProvider>
   );