prev-cli 0.1.2 → 0.1.4

package/dist/cli.js

@@ -12,7 +12,6 @@ import tailwindcss from "@tailwindcss/vite";
 import mdx from "@mdx-js/rollup";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
-import rehypeMermaid from "rehype-mermaid";
 import path4 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
@@ -319,10 +318,7 @@ async function createViteConfig(options) {
     plugins: [
       mdx({
         remarkPlugins: [remarkGfm],
-        rehypePlugins: [
-          rehypeHighlight,
-          [rehypeMermaid, { strategy: "img-svg" }]
-        ]
+        rehypePlugins: [rehypeHighlight]
       }),
       react(),
       tailwindcss(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -47,12 +47,11 @@
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.0",
     "lucide-react": "^0.460.0",
-    "playwright": "^1.57.0",
+    "mermaid": "^11.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0",
     "rehype-highlight": "^7.0.0",
-    "rehype-mermaid": "^3.0.0",
     "remark-gfm": "^4.0.0",
     "rolldown-vite": "^7.3.0",
     "tailwind-merge": "^2.5.0",

package/src/theme/Layout.tsx

@@ -1,9 +1,43 @@
-import React from 'react'
-import { Outlet } from 'react-router-dom'
+import React, { useEffect } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
 import { Sidebar } from './Sidebar'
 import './styles.css'
 
+// Lazy-load and render mermaid diagrams
+async function renderMermaidDiagrams() {
+  const codeBlocks = document.querySelectorAll('code.language-mermaid')
+  if (codeBlocks.length === 0) return
+
+  const mermaid = await import('mermaid')
+  mermaid.default.initialize({ startOnLoad: false, theme: 'neutral' })
+
+  for (const block of codeBlocks) {
+    const pre = block.parentElement
+    if (!pre || pre.dataset.mermaidRendered) continue
+
+    const code = block.textContent || ''
+    const container = document.createElement('div')
+    container.className = 'mermaid-diagram'
+
+    try {
+      const { svg } = await mermaid.default.render(`mermaid-${Math.random().toString(36).slice(2)}`, code)
+      container.innerHTML = svg
+      pre.replaceWith(container)
+    } catch (e) {
+      console.error('Mermaid render error:', e)
+    }
+  }
+}
+
 export function Layout() {
+  const location = useLocation()
+
+  useEffect(() => {
+    // Render mermaid after content loads
+    const timer = setTimeout(renderMermaidDiagrams, 100)
+    return () => clearTimeout(timer)
+  }, [location.pathname])
+
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="flex">