chore: add custom rehype plugins + add providerImportSource to use @mdx-js/react

Author: pheralb

website/rehype-plugins.js

@@ -0,0 +1,22 @@
+import { visit } from 'unist-util-visit';
+
+export const preProcess = () => (tree) => {
+  visit(tree, (node) => {
+    if (node?.type === 'element' && node?.tagName === 'pre') {
+      const [codeEl] = node.children;
+
+      if (codeEl.tagName !== 'code') return;
+
+      node.raw = codeEl.children?.[0].value;
+    }
+  });
+};
+
+export const postProcess = () => (tree) => {
+  visit(tree, 'element', (node) => {
+    if (node?.type === 'element' && node?.tagName === 'pre') {
+      node.properties['raw'] = node.raw;
+      // console.log(node) here to see if you're getting the raw text
+    }
+  });
+};

website/tsconfig.json

@@ -6,7 +6,7 @@
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
     "**/.client/**/*.tsx"
-  ],
+, "app/components/mdx/index.jsx"  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["@remix-run/node", "vite/client"],

website/vite.config.ts

@@ -9,6 +9,7 @@ import { vercelPreset } from '@vercel/remix/vite';
 import mdx from '@mdx-js/rollup';
 import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
+import { postProcess, preProcess } from './rehype-plugins';
 
 // Rehype Pretty Options:
 const options = {
@@ -18,8 +19,9 @@ const options = {
 export default defineConfig({
   plugins: [
     mdx({
+      providerImportSource: '@mdx-js/react',
       remarkPlugins: [remarkGfm],
-      rehypePlugins: [[rehypePrettyCode, options]],
+      rehypePlugins: [[rehypePrettyCode, options], preProcess, postProcess],
     }),
     remix({
       presets: [vercelPreset()],