feat: complete MDX migration for blog, fix diagram fidelity and refactor styling architecture

apps/web/scripts/repair-mermaid.ts

@@ -0,0 +1,53 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const MDX_DIR = path.join(process.cwd(), 'content/blog');
+
+function repairMermaidSyntax(content: string): string {
+    // 1. Convert <Mermaid graph={`...`} /> to <Mermaid graph={`...`}>...</Mermaid> style or just fix the graph prop
+    // Actually, let's keep the graph prop but make sure the content is VERY safe.
+
+    const mermaidRegex = /<Mermaid\s+([\s\S]*?)graph=\{(`[\s\S]*?`)\}([\s\S]*?)\/>/g;
+
+    return content.replace(mermaidRegex, (match, before, graphLiteral, after) => {
+        let graphContent = graphLiteral.slice(1, -1);
+
+        // Replace all {Label} with ["Label"]
+        graphContent = graphContent.replace(/\{([^{}]+)\}/g, '["$1"]');
+
+        // Sometimes people use double {{Label}}
+        graphContent = graphContent.replace(/\{\{([^{}]+)\}\}/g, '["$1"]');
+
+        // Remove any trailing backticks inside that might have been accidentally added
+        graphContent = graphContent.trim();
+
+        return `<Mermaid\n    ${before.trim()}\n    graph={\`${graphContent}\`}\n    ${after.trim()}\n  />`;
+    });
+}
+
+// Additional fix for other diagram components that might have similar issues with props
+function repairOtherDiagrams(content: string): string {
+    // For DiagramSequence, DiagramTimeline etc., we often pass arrays of objects.
+    // MDX handles these better, but let's make sure there are no weird backticks.
+    return content;
+}
+
+function processFiles() {
+    const files = fs.readdirSync(MDX_DIR).filter(f => f.endsWith('.mdx'));
+
+    for (const file of files) {
+        const filePath = path.join(MDX_DIR, file);
+        const content = fs.readFileSync(filePath, 'utf8');
+        let repaired = repairMermaidSyntax(content);
+        repaired = repairOtherDiagrams(repaired);
+
+        if (content !== repaired) {
+            fs.writeFileSync(filePath, repaired);
+            console.log(`✅ Repaired Mermaid syntax in ${file}`);
+        } else {
+            console.log(`- Checked ${file}`);
+        }
+    }
+}
+
+processFiles();