wip blog stuff

.eslintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   env: {
     browser: true,
     es2022: true,

app.config.ts

@@ -1,25 +1,31 @@
 import { defineConfig } from "@solidjs/start/config";
-/* @ts-ignore */
-import pkg from "@vinxi/plugin-mdx";
-
-const { default: mdx } = pkg;
+import { rollup as mdx } from "./mdx";
+import remarkGfm from "remark-gfm";
+import remarkShikiTwoslash from "remark-shiki-twoslash";
+import rehypeRaw from "rehype-raw";
+import { nodeTypes } from "@mdx-js/mdx";
 
 export default defineConfig({
-  extensions: ["mdx", "md"],
+  extensions: ["md", "mdx"],
   server: {
     static: true,
-    compressPublicAssets: {gzip: false, brotli: false},
+    compressPublicAssets: { gzip: false, brotli: false },
     prerender: {
-          crawlLinks: true
-        },
+      crawlLinks: true,
+    },
   },
   vite: {
     plugins: [
-      mdx.withImports({})({
+      mdx({
+        include: /\.mdx?$/,
         jsx: true,
         jsxImportSource: "solid-js",
-        providerImportSource: "solid-mdx"
-      })
-    ]
-  }
+        providerImportSource: "solid-mdx",
+        remarkPlugins: [remarkGfm,
+          // [remarkShikiTwoslash.default, { langs: ["typescript"], themes: ["dark-plus", "light-plus"] }]
+        ],
+        rehypePlugins: [[rehypeRaw, { passThrough: nodeTypes }]],
+      }),
+    ],
+  },
 });

mdx.ts

@@ -0,0 +1,58 @@
+import { CompileOptions } from "@mdx-js/mdx";
+import { createFormatAwareProcessors, FormatAwareProcessors } from "@mdx-js/mdx/internal-create-format-aware-processors";
+import { createFilter, FilterPattern } from "@rollup/pluginutils";
+import { SourceMapGenerator } from "source-map";
+import { VFile } from "vfile";
+import { Plugin } from "vinxi";
+
+type ApplicableOptions = Omit<CompileOptions, "SourceMapGenerator">;
+interface ExtraOptions {
+  exclude?: FilterPattern | null | undefined;
+  include?: FilterPattern | null | undefined;
+}
+type Options = ApplicableOptions & ExtraOptions;
+
+/**
+ * Plugin to compile MDX w/ rollup.
+ */
+export function rollup(options?: Readonly<Options> | null | undefined): Plugin {
+  const { exclude, include, ...rest } = options || {};
+  let formatAwareProcessors: FormatAwareProcessors;
+  const filter = createFilter(include, exclude);
+
+  return {
+    name: "@mdx-js/rollup",
+    enforce: "pre",
+    config(config, env) {
+      formatAwareProcessors = createFormatAwareProcessors({
+        SourceMapGenerator,
+        development: env.mode === "development",
+        ...rest,
+      });
+    },
+    async transform(value, path) {
+      if (!formatAwareProcessors) {
+        formatAwareProcessors = createFormatAwareProcessors({
+          SourceMapGenerator,
+          ...rest,
+        });
+      }
+
+      // Strip the queryparameters that are part of the file extension
+      path = path.split("?")[0];
+
+      const file = new VFile({ path, value });
+
+      if (file.extname && filter(file.path) && formatAwareProcessors.extnames.includes(file.extname)) {
+        const compiled = await formatAwareProcessors.process(file);
+        let code = String(compiled.value);
+
+        const result = {
+          code,
+          map: compiled.map,
+        };
+        return result;
+      }
+    },
+  };
+}

package.json

@@ -5,20 +5,27 @@
   "type": "module",
   "dependencies": {
     "@mdx-js/mdx": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
+    "@rollup/pluginutils": "^5.1.0",
     "@solidjs/router": "^0.13.5",
     "@solidjs/start": "^1.0.1",
-    "@vinxi/plugin-mdx": "^3.7.1",
+    "mermaid": "^10.9.1",
     "regl": "^2.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-shiki-twoslash": "^3.1.3",
     "solid-js": "^1.8.17",
     "solid-mdx": "^0.0.7",
+    "source-map": "^0.7.4",
+    "vfile": "^6.0.1",
     "vinxi": "^0.3.11"
   },
   "devDependencies": {
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.0",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
-    "eslint": "^8.56.0",
-    "prettier": "^3.2.5",
+    "eslint": "^8.57.0",
+    "prettier": "^3.3.0",
     "typescript": "^5.4.5"
   },
   "scripts": {
@@ -27,5 +34,10 @@
     "format": "prettier --write .",
     "lint": "eslint 'src/*'"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "patchedDependencies": {
+      "@mdx-js/[email protected]": "patches/@[email protected]"
+    }
+  }
 }

patches/@mdx-js__mdx@3.0.1.patch

@@ -0,0 +1,13 @@
+diff --git a/lib/plugin/recma-jsx-rewrite.js b/lib/plugin/recma-jsx-rewrite.js
+index 82a27708f13beb625634c82d9927f21e33cc980f..49f8fcda0d692b2095158b26ba8cba5e3b86acff 100644
+--- a/lib/plugin/recma-jsx-rewrite.js
++++ b/lib/plugin/recma-jsx-rewrite.js
+@@ -196,7 +196,7 @@ export function recmaJsxRewrite(options) {
+                 functionScope.components.push(id)
+               }
+             }
+-          } else if (node.data && node.data._mdxExplicitJsx) {
++          } else if (true) {
+             // Do not turn explicit JSX into components from `_components`.
+             // As in, a given `h1` component is used for `# heading` (next case),
+             // but not for `<h1>heading</h1>`.