convert mdx post processing to actual plugins

Author: feedthejim

package.json

@@ -40,7 +40,8 @@
     "react-collapsed": "4.0.4",
     "react-dom": "^19.0.0",
     "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "unist-builder": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/utils/compileMDX.tsx

@@ -6,12 +6,140 @@ import * as runtime from 'react/jsx-runtime';
 import {remarkPlugins} from '../../plugins/markdownToHtml';
 import remarkGfm from 'remark-gfm';
 import remarkFrontmatter from 'remark-frontmatter';
-import {prepareMDX} from './prepareMDX'; // Assuming prepareMDX is modularized
 import {MDXComponents} from '../components/MDX/MDXComponents'; // Assuming MDXComponents is modularized
 import visit from 'unist-util-visit';
+import {u} from 'unist-builder';
 
 const DISK_CACHE_BREAKER = 11;
 
+export function remarkTOCExtractor({maxDepth = Infinity} = {}) {
+  return (tree, file) => {
+    const toc = [];
+
+    visit(tree, (node) => {
+      // Standard markdown headings
+      if (node.type === 'heading') {
+        if (node.depth > maxDepth) {
+          return;
+        }
+        const text = node.children
+          .filter((child) => child.type === 'text')
+          .map((child) => child.value)
+          .join('');
+        const id =
+          node.data?.hProperties?.id || text.toLowerCase().replace(/\s+/g, '-');
+
+        toc.push({
+          depth: node.depth,
+          text,
+          url: `#${id}`,
+        });
+      }
+
+      // MDX custom components (e.g., <TeamMember>)
+      else if (node.type === 'mdxJsxFlowElement') {
+        switch (node.name) {
+          case 'TeamMember': {
+            // Extract attributes like name, permalink, etc.
+            let name = 'Team Member';
+            let permalink = 'team-member';
+
+            if (Array.isArray(node.attributes)) {
+              for (const attr of node.attributes) {
+                if (attr.name === 'name' && attr.value) {
+                  name = attr.value;
+                } else if (attr.name === 'permalink' && attr.value) {
+                  permalink = attr.value;
+                }
+              }
+            }
+
+            toc.push({
+              url: `#${permalink}`,
+              depth: 3,
+              text: name,
+            });
+            break;
+          }
+
+          // Similarly handle <Challenges>, <Recap>, or any other custom tags if needed
+          case 'Challenges':
+            toc.push({
+              url: '#challenges',
+              depth: 2,
+              text: 'Challenges',
+            });
+            break;
+          case 'Recap':
+            toc.push({
+              url: '#recap',
+              depth: 2,
+              text: 'Recap',
+            });
+            break;
+          default:
+            break;
+        }
+      }
+    });
+
+    // Insert "Overview" at the top if there's at least one heading
+    if (toc.length > 0) {
+      toc.unshift({
+        url: '#',
+        text: 'Overview',
+        depth: 2,
+      });
+    }
+
+    file.data.toc = toc;
+  };
+}
+
+function remarkWrapElements() {
+  const fullWidthTypes = [
+    'Sandpack',
+    'FullWidth',
+    'Illustration',
+    'IllustrationBlock',
+    'Challenges',
+    'Recipes',
+  ];
+
+  return (tree) => {
+    const newChildren = [];
+    let wrapQueue = [];
+
+    function flushWrapper() {
+      if (wrapQueue.length > 0) {
+        newChildren.push(
+          u('mdxJsxFlowElement', {
+            name: 'MaxWidth',
+            attributes: [],
+            children: wrapQueue,
+          })
+        );
+        wrapQueue = [];
+      }
+    }
+
+    for (const node of tree.children) {
+      if (
+        node.type === 'mdxJsxFlowElement' &&
+        fullWidthTypes.includes(node.name)
+      ) {
+        flushWrapper();
+        newChildren.push(node);
+      } else {
+        wrapQueue.push(node);
+      }
+    }
+    flushWrapper();
+
+    tree.children = newChildren;
+  };
+}
+
 export default async function compileMDX(
   mdx: string,
   path: string | string[],
@@ -44,46 +172,48 @@ export default async function compileMDX(
   }
 
   // Compile the MDX source code
-  const code = String(
-    await compile(mdx, {
-      remarkPlugins: [...remarkPlugins, remarkGfm, remarkFrontmatter],
-
-      rehypePlugins: [
-        // Support stuff like ```js App.js {1-5} active by passing it through.
-        function rehypeMetaAsAttributes() {
-          return (tree) => {
-            visit(tree, 'element', (node) => {
-              if (
-                // @ts-expect-error -- tagName is a valid property
-                node.tagName === 'code' &&
-                node.data &&
-                node.data.meta
-              ) {
-                // @ts-expect-error -- properties is a valid property
-                node.properties.meta = node.data.meta;
-              }
-            });
-          };
-        },
-      ],
-      outputFormat: 'function-body',
-    })
-  );
+  const code = await compile(mdx, {
+    remarkPlugins: [
+      ...remarkPlugins,
+      remarkGfm,
+      remarkFrontmatter,
+      remarkTOCExtractor,
+      remarkWrapElements,
+    ],
+
+    rehypePlugins: [
+      // Support stuff like ```js App.js {1-5} active by passing it through.
+      function rehypeMetaAsAttributes() {
+        return (tree) => {
+          visit(tree, 'element', (node) => {
+            if (
+              // @ts-expect-error -- tagName is a valid property
+              node.tagName === 'code' &&
+              node.data &&
+              node.data.meta
+            ) {
+              // @ts-expect-error -- properties is a valid property
+              node.properties.meta = node.data.meta;
+            }
+          });
+        };
+      },
+    ],
+    outputFormat: 'function-body',
+  });
 
   const {data: meta} = grayMatter(mdx);
 
-  const {default: MDXContent} = await run(code, {
+  const {default: MDXContent} = await run(String(code), {
     ...runtime,
     baseUrl: import.meta.url,
   });
 
-  const {toc, children} = prepareMDX(
-    <MDXContent components={{...MDXComponents}} />
-  );
+  const content = <MDXContent components={{...MDXComponents}} />;
 
   return {
-    content: children,
-    toc,
+    content,
+    toc: code.data.toc,
     meta,
   };
 }

src/utils/prepareMDX.js

@@ -1724,6 +1724,11 @@
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/unist@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
+  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
+
 "@typescript-eslint/eslint-plugin@^5.36.2":
   version "5.36.2"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.2.tgz"
@@ -8087,6 +8092,13 @@ unist-builder@^3.0.0:
   dependencies:
     "@types/unist" "^2.0.0"
 
+unist-builder@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-4.0.0.tgz#817b326c015a6f9f5e92bb55b8e8bc5e578fe243"
+  integrity sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
 unist-util-generated@^1.0.0:
   version "1.1.6"
   resolved "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz"