feat(dory): change {variables} to be styled and fix mermaid styles

Author: hkdeman

package.json

@@ -33,6 +33,7 @@
     "remark-gfm": "^4.0.1",
     "saas": "^1.0.0",
     "tailwindcss": "^4.1.8",
+    "unist-util-visit": "^5.0.0",
     "vite-plugin-mdx": "^3.6.1",
     "wouter-preact": "^3.7.1"
   },

pnpm-lock.yaml

@@ -41,9 +41,13 @@ export function MermaidRenderer({ content }: { content: string }) {
                     mermaidRef.current.innerHTML = ''
                 }
 
-                const contentWithoutStyle = content.replace(/classDef.*\n.*class.*\n/, '')
-
-                const { svg } = await mermaid.render(diagramId, contentWithoutStyle)
+                const contentWithoutStyle = content
+                    .replace(/^\s*style .*$/gm, '')
+                    .replace(/^\s*classDef .*$/gm, '')
+                    .replace(/^\s*class .*$/gm, '');
+              
+                const { svg } = await mermaid.render(diagramId, contentWithoutStyle);
+                
 
                 if (mounted && mermaidRef.current) {
                     mermaidRef.current.innerHTML = svg

src/mdx/mermaid.tsx

@@ -0,0 +1,15 @@
+import { visit } from 'unist-util-visit';
+
+export const remarkSafeVars = () => {
+  return (tree: any) => {
+    visit(tree, 'mdxTextExpression', (node: any, index: number | undefined, parent: any) => {
+      if (parent && typeof index === 'number') {
+        // Replace mdxTextExpression with inlineCode node for code formatting
+        parent.children[index] = {
+          type: 'inlineCode',
+          value: node.value
+        };
+      }
+    });
+  };
+};

src/plugins/sanitize.ts

@@ -3,13 +3,14 @@ import preact from '@preact/preset-vite';
 import mdx from '@mdx-js/rollup';
 import tailwindcss from '@tailwindcss/vite'
 import remarkGfm from 'remark-gfm';
+import { remarkSafeVars } from './src/plugins/sanitize';
 
 export default defineConfig({
   plugins: [
     preact(),
     mdx({
       providerImportSource: '@mdx-js/preact',
-      remarkPlugins: [remarkGfm],
+      remarkPlugins: [remarkGfm, remarkSafeVars],
     }),
     tailwindcss(),
   ],