get mdx 99% working

.eleventy.js

@@ -9,19 +9,42 @@ import webcPlugin from "@11ty/eleventy-plugin-webc";
 import helmetPlugin from "eleventy-plugin-helmet";
 import embedPlugin from "eleventy-plugin-embed-everything";
 
+import { renderToStaticMarkup } from "react-dom/server";
+import * as runtime from "react/jsx-runtime";
+import React from "react";
+import { register } from "node:module";
+import { EleventyRenderPlugin } from "@11ty/eleventy";
+import { evaluate } from "@mdx-js/mdx";
+
+register("@mdx-js/node-loader", import.meta.url);
+
 const foreach = (o, f) => Object.entries(o).forEach(([k, fn]) => f(k, fn));
 
-/** @param {import("@11ty/eleventy").UserConfig} cfg */
-export default async function (cfg) {
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default async function (eleventyConfig) {
   Object.entries(transforms.before).forEach(([_, fn]) =>
-    cfg.on("eleventy.before", fn),
+    eleventyConfig.on("eleventy.before", fn),
   );
   Object.entries(transforms.after).forEach(([_, fn]) =>
-    cfg.on("eleventy.after", fn),
+    eleventyConfig.on("eleventy.after", fn),
   );
 
-  cfg.setLibrary("md", transforms.markdownLibrary);
-  foreach(transforms.transforms, (k, fn) => cfg.addTransform(k, fn));
+  eleventyConfig.setLibrary("md", transforms.markdownLibrary);
+  foreach(transforms.transforms, (k, fn) => eleventyConfig.addTransform(k, fn));
+
+  eleventyConfig.addExtension("mdx", {
+    key: "11ty.js",
+    read: true,
+    compile: function () {
+      return async function (data) {
+        let content = await this.defaultRenderer(data);
+        // TODO: Switch everything to rehype or remark or something and then I can reuse all the plugins here
+        const rendered = await evaluate(content, { ...runtime });
+        return renderToStaticMarkup(React.createElement(rendered.default));
+      };
+    },
+  });
+  eleventyConfig.addTemplateFormats("mdx");
 
   const rssCfg = (type) => ({
     type,
@@ -44,48 +67,55 @@ export default async function (cfg) {
       },
     },
   });
-  cfg.addPlugin(feedPlugin, rssCfg("rss"));
-  cfg.addPlugin(feedPlugin, rssCfg("atom"));
-  cfg.addPlugin(feedPlugin, rssCfg("json"));
-  cfg.addPlugin(directoryOutput);
-  cfg.addPlugin(helmetPlugin);
-  cfg.addPlugin(webcPlugin, {
+  eleventyConfig.addPlugin(feedPlugin, rssCfg("rss"));
+  eleventyConfig.addPlugin(feedPlugin, rssCfg("atom"));
+  eleventyConfig.addPlugin(feedPlugin, rssCfg("json"));
+  eleventyConfig.addPlugin(directoryOutput);
+  eleventyConfig.addPlugin(helmetPlugin);
+  eleventyConfig.addPlugin(webcPlugin, {
     components: "src/_components/**/*.webc",
   });
-  cfg.addPlugin(embedPlugin, {
+  eleventyConfig.addPlugin(embedPlugin, {
     youtube: {
       options: {
         lite: true,
       },
     },
   });
+  eleventyConfig.addPlugin(EleventyRenderPlugin);
 
-  cfg.setServerOptions({
+  eleventyConfig.setServerOptions({
     port: 8080,
     portReassignmentRetryCount: 0,
     showAllHosts: true,
   });
-  cfg.setQuietMode(true);
+  eleventyConfig.setQuietMode(true);
 
-  cfg.addWatchTarget("./src/css/");
-  cfg.addWatchTarget("./postcss.config.js");
-  cfg.ignores.add("src/_talks");
+  eleventyConfig.addWatchTarget("./src/css/");
+  eleventyConfig.addWatchTarget("./postcss.config.js");
+  eleventyConfig.ignores.add("src/_talks");
   if (env === "prod") {
-    cfg.ignores.add("src/_resume");
+    eleventyConfig.ignores.add("src/_resume");
   }
-  cfg.addWatchTarget("./src/_resume/cv.md");
-  cfg.addPassthroughCopy("./src/fonts");
-  cfg.addPassthroughCopy({
+  eleventyConfig.addWatchTarget("./src/_resume/cv.md");
+  eleventyConfig.addPassthroughCopy("./src/fonts");
+  eleventyConfig.addPassthroughCopy({
     "./src/favicons": ".",
     "./src/_talks/qcon-sf-2023/images": "./talks/qcon-sf-2023/images",
   });
-  cfg.addPassthroughCopy("./src/images");
+  eleventyConfig.addPassthroughCopy("./src/images");
 
-  foreach(transforms.shortcodes, (k, fn) => cfg.addShortcode(k, fn));
-  foreach(transforms.asyncShortcodes, (k, fn) => cfg.addAsyncShortcode(k, fn));
-  foreach(filters, (k, fn) => cfg.addFilter(k, fn));
-  foreach(asyncFilters, (k, fn) => cfg.addNunjucksAsyncFilter(k, fn));
-  foreach(transforms.collections, (k, fn) => cfg.addCollection(k, fn));
+  foreach(transforms.shortcodes, (k, fn) => eleventyConfig.addShortcode(k, fn));
+  foreach(transforms.asyncShortcodes, (k, fn) =>
+    eleventyConfig.addAsyncShortcode(k, fn),
+  );
+  foreach(filters, (k, fn) => eleventyConfig.addFilter(k, fn));
+  foreach(asyncFilters, (k, fn) =>
+    eleventyConfig.addNunjucksAsyncFilter(k, fn),
+  );
+  foreach(transforms.collections, (k, fn) =>
+    eleventyConfig.addCollection(k, fn),
+  );
 
   return { ...c, dir: { input: c.dir.input, output: c.dir.output } };
 }

package.json

@@ -22,34 +22,36 @@
     "url": "https://github.com/hazelweakly/hazelweakly.me/issues"
   },
   "devDependencies": {
-    "@11ty/eleventy": "3.0.0-alpha.14",
+    "@11ty/eleventy": "3.0.0-alpha.18",
     "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-plugin-directory-output": "^1.0.1",
-    "@11ty/eleventy-plugin-rss": "^2.0.1",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@11ty/eleventy-plugin-webc": "^0.11.2",
     "@fullhuman/postcss-purgecss": "^6.0.0",
     "@marp-team/marp-cli": "^3.4.0",
     "@marp-team/marp-core": "^3.9.0",
+    "@mdx-js/mdx": "^3.0.1",
+    "@mdx-js/node-loader": "^3.0.1",
     "@mermaid-js/mermaid-cli": "^10.9.1",
     "@minify-html/node": "0.15.0",
     "@minify-html/node-darwin-aarch64": "^0.15.0",
     "@parcel/css": "^1.14.0",
-    "@types/markdown-it": "^14.1.1",
+    "@types/markdown-it": "^14.1.2",
     "@types/temp": "^0.9.4",
     "@wekanteam/markdown-it-mermaid": "^0.6.4",
     "@wooorm/starry-night": "^3.4.0",
     "critical": "^7.1.2",
-    "decktape": "^3.12.0",
+    "decktape": "^3.13.0",
     "eleventy-plugin-embed-everything": "^1.18.2",
     "eleventy-plugin-helmet": "^0.2.2",
-    "eslint": "^9.6.0",
+    "eslint": "^9.9.0",
     "hast-util-to-html": "^9.0.1",
     "he": "^1.2.0",
-    "jsdom": "^24.1.0",
-    "luxon": "^3.4.4",
+    "jsdom": "^24.1.1",
+    "luxon": "^3.5.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.0.1",
-    "markdown-it-attrs": "^4.1.6",
+    "markdown-it-attrs": "^4.2.0",
     "markdown-it-bracketed-spans": "^1.0.1",
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-eleventy-img": "^0.10.2",
@@ -61,17 +63,19 @@
     "markdown-it-table-of-contents": "^0.6.0",
     "mathup": "1.0.0-rc.2",
     "modern-css-reset": "^1.4.0",
-    "netlify-cli": "^17.32.0",
-    "postcss": "^8.4.39",
+    "netlify-cli": "^17.34.1",
+    "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-load-config": "^6.0.1",
     "postcss-parcel-css": "^0.5.1",
     "posthtml": "^0.16.6",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "slugify": "^1.6.6",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.10",
     "temp": "^0.9.4"
   },
   "pnpm": {