@inovus-medical/docs 0.2.1 → 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

@@ -102,8 +102,7 @@ a:hover { text-decoration: underline; }
 .layout {
   display: grid;
   grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
-  max-width: 1400px;
-  margin: 0 auto;
+  width: 100%;
 }
 .sidebar {
   position: sticky; top: var(--header-h); align-self: start;
@@ -174,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/bin/cli.js

@@ -58,16 +58,18 @@ async function run() {
   if (cmd === 'dev') {
     const { pageCount, outPath, contentDir } = await build({ root, inDir, outDir })
     console.log(`✓ Built ${pageCount} page(s) from ${contentDir === '.' ? 'repo root' : contentDir + '/'}`)
-    serve({ dir: outPath, port })
-    console.log(`→ Serving http://localhost:${port}  (watching ${contentDir === '.' ? 'repo root' : contentDir + '/'} for changes)`)
+    const { port: actual } = await serve({ dir: outPath, port })
+    const busy = actual !== port ? `  (port ${port} was busy)` : ''
+    console.log(`→ Serving http://localhost:${actual}${busy}  (watching ${contentDir === '.' ? 'repo root' : contentDir + '/'} for changes)`)
     watchAndRebuild({ root, inDir: contentDir, outDir })
     return
   }
 
   if (cmd === 'serve') {
     const outPath = path.join(root, outDir)
-    serve({ dir: outPath, port })
-    console.log(`→ Serving ${outDir}/ at http://localhost:${port}`)
+    const { port: actual } = await serve({ dir: outPath, port })
+    const busy = actual !== port ? `  (port ${port} was busy)` : ''
+    console.log(`→ Serving ${outDir}/ at http://localhost:${actual}${busy}`)
     return
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inovus-medical/docs",
-  "version": "0.2.1",
+  "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, {})

package/src/serve.js

@@ -40,24 +40,47 @@ async function resolveFile(dir, urlPath) {
   }
 }
 
-export function serve({ dir, port = 8788 }) {
-  const server = http.createServer(async (req, res) => {
-    const file = await resolveFile(dir, req.url || '/')
-    if (file) {
-      res.writeHead(200, { 'content-type': TYPES[path.extname(file)] || 'application/octet-stream' })
-      createReadStream(file).pipe(res)
-      return
-    }
-    const notFound = path.join(dir, '404.html')
-    try {
-      const body = await fs.readFile(notFound)
-      res.writeHead(404, { 'content-type': 'text/html; charset=utf-8' })
-      res.end(body)
-    } catch {
-      res.writeHead(404, { 'content-type': 'text/plain' })
-      res.end('Not found')
-    }
+/**
+ * Start a static server for `dir`. If the requested port is busy, automatically tries the
+ * next ones (up to maxAttempts) instead of crashing. Resolves with the server and the
+ * actual port it bound to.
+ */
+export function serve({ dir, port = 8788, maxAttempts = 25 }) {
+  return new Promise((resolve, reject) => {
+    const server = http.createServer(async (req, res) => {
+      try {
+        const file = await resolveFile(dir, req.url || '/')
+        if (file) {
+          res.writeHead(200, { 'content-type': TYPES[path.extname(file)] || 'application/octet-stream' })
+          createReadStream(file).pipe(res)
+          return
+        }
+        const notFound = path.join(dir, '404.html')
+        try {
+          const body = await fs.readFile(notFound)
+          res.writeHead(404, { 'content-type': 'text/html; charset=utf-8' })
+          res.end(body)
+        } catch {
+          res.writeHead(404, { 'content-type': 'text/plain' })
+          res.end('Not found')
+        }
+      } catch (err) {
+        // A single bad request should never take down the dev server.
+        res.writeHead(500, { 'content-type': 'text/plain' })
+        res.end('Internal error: ' + err.message)
+      }
+    })
+
+    let attempt = 0
+    server.on('error', (err) => {
+      if (err.code === 'EADDRINUSE' && attempt < maxAttempts) {
+        attempt++
+        server.listen(port + attempt)
+      } else {
+        reject(err)
+      }
+    })
+    server.once('listening', () => resolve({ server, port: server.address().port }))
+    server.listen(port)
   })
-  server.listen(port)
-  return server
 }