@inovus-medical/docs 0.4.0 → 0.5.0

package/README.md

@@ -27,7 +27,8 @@ Flags: `--root <dir>` `--in <docs>` `--out <dist>` `--port <n>`.
 ## What it does
 
 - Renders markdown with `markdown-it` + `@shikijs/markdown-it` (dual light/dark
-  syntax highlighting), heading anchors, tables, and frontmatter.
+  syntax highlighting), Mermaid diagrams (` ```mermaid ` fences), heading anchors,
+  tables, and frontmatter.
 - Generates sidebar navigation from your folder structure.
 - Builds a client-side search index, light/dark theme, on-page table of contents,
   and prev/next paging.

package/assets/client.js

@@ -1,6 +1,52 @@
 (function () {
   var root = document.documentElement
 
+  // ---------- Mermaid (loaded only when diagrams are present) ----------
+  var mermaidLoading = null
+
+  function mermaidTheme() {
+    return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'
+  }
+
+  function prepareMermaidNodes() {
+    var nodes = document.querySelectorAll('.mermaid')
+    for (var i = 0; i < nodes.length; i++) {
+      var el = nodes[i]
+      if (!el.getAttribute('data-src')) {
+        el.setAttribute('data-src', el.textContent)
+      }
+      el.removeAttribute('data-processed')
+      el.removeAttribute('data-mermaid-svg')
+      el.textContent = el.getAttribute('data-src')
+    }
+    return nodes
+  }
+
+  function renderMermaid() {
+    var nodes = document.querySelectorAll('.mermaid')
+    if (!nodes.length) return Promise.resolve()
+
+    if (!mermaidLoading) {
+      mermaidLoading = import('https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs')
+        .then(function (mod) { return mod.default })
+        .catch(function (err) {
+          mermaidLoading = null
+          console.error('Failed to load Mermaid', err)
+          throw err
+        })
+    }
+
+    return mermaidLoading.then(function (mermaid) {
+      var list = prepareMermaidNodes()
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'strict',
+        theme: mermaidTheme()
+      })
+      return mermaid.run({ nodes: list })
+    })
+  }
+
   // Theme toggle
   var toggle = document.getElementById('theme-toggle')
   if (toggle) {
@@ -8,9 +54,14 @@
       var next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
       root.setAttribute('data-theme', next)
       try { localStorage.setItem('theme', next) } catch (e) {}
+      if (document.querySelector('.mermaid')) renderMermaid()
     })
   }
 
+  if (document.querySelector('.mermaid')) {
+    renderMermaid()
+  }
+
   // Mobile sidebar
   var menuBtn = document.getElementById('menu-toggle')
   var sidebar = document.querySelector('.sidebar')

package/assets/styles.css

@@ -173,6 +173,31 @@ a:hover { text-decoration: underline; }
 .header-anchor { color: var(--text-soft); opacity: 0; margin-left: .3em; font-weight: 400; text-decoration: none; }
 .prose h2:hover .header-anchor, .prose h3:hover .header-anchor { opacity: 1; }
 
+/* ---------- Mermaid ---------- */
+.mermaid-wrap {
+  margin: 1.4em 0;
+  padding: 18px 16px;
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow-x: auto;
+  text-align: center;
+}
+.prose .mermaid-wrap pre.mermaid {
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  font-size: inherit;
+  line-height: normal;
+  text-align: center;
+}
+.mermaid-wrap .mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
 /* Shiki dual-theme color swap */
 [data-theme='dark'] .shiki,
 [data-theme='dark'] .shiki span {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inovus-medical/docs",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Turn a folder of markdown into a themed, Cloudflare-ready docs site.",
   "type": "module",
   "bin": {

package/src/markdown.js

@@ -58,6 +58,21 @@ export async function createRenderer() {
     })
   )
 
+  // Mermaid fences must not go through Shiki — emit source for client-side render.
+  const defaultFence = md.renderer.rules.fence
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const info = String(tokens[idx].info || '')
+      .trim()
+      .split(/\s+/)[0]
+      .toLowerCase()
+    if (info === 'mermaid' || info === 'mmd') {
+      const code = tokens[idx].content.replace(/\n$/, '')
+      const escaped = md.utils.escapeHtml(code)
+      return `<div class="mermaid-wrap"><pre class="mermaid">${escaped}</pre></div>\n`
+    }
+    return defaultFence(tokens, idx, options, env, self)
+  }
+
   return {
     render(content) {
       const tokens = md.parse(content, {})