prev-cli 0.1.3 → 0.1.5

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: "pre-mermaid" }]
-        ]
+        rehypePlugins: [rehypeHighlight]
       }),
       react(),
       tailwindcss(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@mdx-js/rollup": "^3.0.0",
+    "@terrastruct/d2": "^0.1.33",
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "class-variance-authority": "^0.7.0",
@@ -52,7 +53,6 @@
     "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,84 @@
-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, code.hljs.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 as HTMLElement
+    if (!pre || pre.dataset.rendered) continue
+    pre.dataset.rendered = 'true'
+
+    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
+      // Hide original instead of replacing (avoids React DOM conflicts)
+      pre.style.display = 'none'
+      pre.insertAdjacentElement('afterend', container)
+    } catch (e) {
+      console.error('Mermaid render error:', e)
+    }
+  }
+}
+
+// Lazy-load and render D2 diagrams
+async function renderD2Diagrams() {
+  const codeBlocks = document.querySelectorAll('code.language-d2, code.hljs.language-d2')
+  if (codeBlocks.length === 0) return
+
+  const { D2 } = await import('@terrastruct/d2')
+  const d2 = new D2()
+
+  for (const block of codeBlocks) {
+    const pre = block.parentElement as HTMLElement
+    if (!pre || pre.dataset.rendered) continue
+    pre.dataset.rendered = 'true'
+
+    const code = block.textContent || ''
+    const container = document.createElement('div')
+    container.className = 'd2-diagram'
+
+    try {
+      const result = await d2.compile(code)
+      const svg = await d2.render(result.diagram)
+      container.innerHTML = svg
+      // Hide original instead of replacing (avoids React DOM conflicts)
+      pre.style.display = 'none'
+      pre.insertAdjacentElement('afterend', container)
+    } catch (e) {
+      console.error('D2 render error:', e)
+    }
+  }
+}
+
+// Render all diagrams
+async function renderDiagrams() {
+  await Promise.all([
+    renderMermaidDiagrams(),
+    renderD2Diagrams()
+  ])
+}
+
 export function Layout() {
+  const location = useLocation()
+
+  useEffect(() => {
+    // Render diagrams after content loads
+    const timer = setTimeout(renderDiagrams, 100)
+    return () => clearTimeout(timer)
+  }, [location.pathname])
+
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="flex">