@sullux/markdown-docs 2.0.0 → 2.0.2

package/lib/config.js

@@ -62,8 +62,9 @@ const normalizeConfig = (opts = {}) => {
   const favicon = fileConfig.favicon || opts.favicon || ''
   const links = fileConfig.links || opts.links || []
   const theme = { ...(fileConfig.theme || {}), ...(opts.theme || {}) }
+  const math = opts.math !== undefined ? opts.math : fileConfig.math
 
-  return { input, output, title, baseUrl, logo, favicon, links, theme }
+  return { input, output, title, baseUrl, logo, favicon, links, theme, math }
 }
 
 module.exports = { parseArgs, normalizeConfig, loadFileConfig }

package/lib/layout.js

@@ -1,58 +1,12 @@
-const path = require('node:path')
 const { getCss } = require('./theme')
 const { getSearchScript } = require('./search')
 const { SVGS } = require('./icons')
-
-const normalizeTargetHref = (href) => {
-  if (!href) return '#'
-  if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('/') || href.startsWith('#') || href.startsWith('mailto:')) {
-    return href
-  }
-  return href
-    .replace(/(?:^|\/)README\.(?:md|html)(#.*)?$/i, (match) => match.replace(/README\.(?:md|html)/i, 'index.html'))
-    .replace(/\.md(#.*)?$/, (match) => match.replace(/\.md/, '.html'))
-}
-
-const calcRelativeHref = (currentHref, targetHref) => {
-  if (!targetHref) return '#'
-  const normalizedTarget = normalizeTargetHref(targetHref)
-  if (normalizedTarget.startsWith('http://') || normalizedTarget.startsWith('https://') || normalizedTarget.startsWith('/') || normalizedTarget.startsWith('#') || normalizedTarget.startsWith('mailto:')) {
-    return normalizedTarget
-  }
-  const normalizedCurrent = normalizeTargetHref(currentHref)
-  const rel = path.relative(path.dirname(normalizedCurrent), normalizedTarget)
-  return rel || './'
-}
-
-const renderNavTree = (items, currentHref) => {
-  if (!items?.length) return ''
-  let html = '', group = []
-  const flushGroup = () => {
-    if (!group.length) return ''
-    const list = `<ul class="nav-list">\n` + group.map((item) => {
-      const active = normalizeTargetHref(item.href) === normalizeTargetHref(currentHref) ? ' active' : ''
-      const href = calcRelativeHref(currentHref, item.href)
-      const sub = item.children?.length ? renderNavTree(item.children, currentHref) : ''
-      return `<li class="nav-item"><a href="${href}" class="nav-link${active}">${item.title}</a>${sub ? `<div class="nav-sub">${sub}</div>` : ''}</li>\n`
-    }).join('') + `</ul>\n`
-    group = []
-    return list
-  }
-  for (const item of items) {
-    if (item.type === 'section') {
-      html += `${flushGroup()}<div class="nav-section-title">${item.title}</div>\n`
-      if (item.items?.length) html += renderNavTree(item.items, currentHref)
-    } else group.push(item)
-  }
-  return html + flushGroup()
-}
+const { calcRelativeHref, renderNavTree } = require('./nav')
 
 const renderTocList = (toc) => toc?.length ? `<div class="toc-title">On this page</div>\n<ul class="toc-list">\n` + toc.map((i) => `<li class="toc-item level-${i.level}"><a href="#${i.id}" class="toc-link" onclick="closeAllDrawers()">${i.title}</a></li>`).join('') + `</ul>\n` : ''
 
 const resolveAssetHref = (currentHref, assetPath) => {
-  if (!assetPath || assetPath.startsWith('http') || assetPath.startsWith('<svg') || assetPath.startsWith('data:') || assetPath.startsWith('/')) {
-    return assetPath
-  }
+  if (!assetPath || ['http', '<svg', 'data:', '/'].some((p) => assetPath.startsWith(p))) return assetPath
   return calcRelativeHref(currentHref, assetPath.replace(/^\.\//, ''))
 }
 
@@ -70,16 +24,17 @@ const renderFavicon = (f) => f ? `<link rel="icon" href="${f}" />` : `<link rel=
 
 const renderHeaderLinks = (links = []) => links?.length ? `<div class="header-links">` + links.map((l) => `<a href="${l.url}" target="_blank" rel="noopener" class="header-link">${l.title} ↗</a>`).join('') + `</div>` : ''
 
-const renderPageLayout = ({ title, siteTitle, navTree, toc, contentHtml, currentHref, logo, favicon, links, theme }) => {
+const renderPageLayout = ({ title, siteTitle, navTree, toc, contentHtml, currentHref, logo, favicon, links, theme, head = [] }) => {
   const sidebarNav = renderNavTree(navTree, currentHref)
   return `<!DOCTYPE html><html lang="en"><head>
   <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>${title}</title>${renderFavicon(favicon)}<style>${getCss(theme)}</style>
-  <script>
+${head?.length ? head.join('\n') + '\n' : ''}  <script>
     function setThemeMode(m) {
       try { localStorage.setItem('sullux-theme-mode', m); } catch(e) {}
       if (m === 'light' || m === 'dark') document.documentElement.setAttribute('data-theme', m); else document.documentElement.removeAttribute('data-theme');
       document.querySelectorAll('.theme-opt').forEach(function(b) { b.classList.toggle('active', b.getAttribute('data-mode') === m); });
+      try { window.dispatchEvent(new CustomEvent('@sullux/markdown:theme', { detail: { mode: m } })); } catch(e) {}
     }
     function toggleDrawer(id) {
       var d = document.getElementById(id), b = document.getElementById('drawer-backdrop'), open = d?.classList.contains('open');
@@ -116,4 +71,4 @@ const renderPageLayout = ({ title, siteTitle, navTree, toc, contentHtml, current
 </body></html>`
 }
 
-module.exports = { calcRelativeHref, renderPageLayout }
+module.exports = { renderPageLayout }

package/lib/nav.js

@@ -0,0 +1,46 @@
+const path = require('node:path')
+
+const normalizeTargetHref = (href) => {
+  if (!href) return '#'
+  if (['http://', 'https://', '/', '#', 'mailto:'].some((p) => href.startsWith(p))) return href
+  return href
+    .replace(/(?:^|\/)README\.(?:md|html)(#.*)?$/i, (match) => match.replace(/README\.(?:md|html)/i, 'index.html'))
+    .replace(/\.md(#.*)?$/, (match) => match.replace(/\.md/, '.html'))
+}
+
+const calcRelativeHref = (currentHref, targetHref) => {
+  if (!targetHref) return '#'
+  const normalizedTarget = normalizeTargetHref(targetHref)
+  if (['http://', 'https://', '/', '#', 'mailto:'].some((p) => normalizedTarget.startsWith(p))) return normalizedTarget
+  const normalizedCurrent = normalizeTargetHref(currentHref)
+  const rel = path.relative(path.dirname(normalizedCurrent), normalizedTarget)
+  return rel || './'
+}
+
+const renderNavTree = (items, currentHref) => {
+  if (!items?.length) return ''
+  let html = '', group = []
+  const flushGroup = () => {
+    if (!group.length) return ''
+    const list = `<ul class="nav-list">\n` + group.map((item) => {
+      const sub = item.children?.length ? renderNavTree(item.children, currentHref) : ''
+      if (!item.href) {
+        return `<li class="nav-item nav-category"><span class="nav-label">${item.title}</span>${sub ? `<div class="nav-sub">${sub}</div>` : ''}</li>\n`
+      }
+      const active = normalizeTargetHref(item.href) === normalizeTargetHref(currentHref) ? ' active' : ''
+      const href = calcRelativeHref(currentHref, item.href)
+      return `<li class="nav-item"><a href="${href}" class="nav-link${active}">${item.title}</a>${sub ? `<div class="nav-sub">${sub}</div>` : ''}</li>\n`
+    }).join('') + `</ul>\n`
+    group = []
+    return list
+  }
+  for (const item of items) {
+    if (item.type === 'section') {
+      html += `${flushGroup()}<div class="nav-section-title">${item.title}</div>\n`
+      if (item.items?.length) html += renderNavTree(item.items, currentHref)
+    } else group.push(item)
+  }
+  return html + flushGroup()
+}
+
+module.exports = { normalizeTargetHref, calcRelativeHref, renderNavTree }

package/lib/site.js

@@ -53,7 +53,7 @@ const generateSite = (options = {}) => {
     const rawMd = fs.readFileSync(file.fullPath, 'utf8')
     const ast = parse(rawMd)
     const toc = extractToc(ast)
-    const rawHtml = markdownToHtml(ast)
+    const { html: rawHtml, head: docHead } = markdownToHtml(ast)
     const contentHtml = rewriteMarkdownLinks(rawHtml)
     const relHtmlPath = normalizeHtmlPath(file.relPath)
     const outHtmlPath = path.join(config.output, relHtmlPath)
@@ -76,6 +76,7 @@ const generateSite = (options = {}) => {
       favicon: config.favicon,
       links: config.links,
       theme: config.theme,
+      head: docHead,
     })
 
     fs.writeFileSync(outHtmlPath, fullHtml, 'utf8')

package/lib/summary.js

@@ -4,7 +4,7 @@ const { parse } = require('@sullux/markdown-compiler')
 
 const normalizeHref = (url) => {
   if (!url) return '#'
-  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('/') || url.startsWith('#')) return url
+  if (['http://', 'https://', '/', '#'].some((p) => url.startsWith(p))) return url
   return url
     .replace(/(?:^|\/)README\.md(#.*)?$/i, (match) => match.replace(/README\.md/i, 'index.html'))
     .replace(/\.md(#.*)?$/, (match) => match.replace(/\.md/, '.html'))
@@ -19,7 +19,7 @@ const parseSummaryMd = (content) => {
     const items = []
     const listChildren = listNode.children || listNode.items || []
     for (const item of listChildren) {
-      let linkInfo = null
+      let linkInfo = null, textTitle = ''
       const subLists = []
       const itemBlocks = item.children || (Array.isArray(item) ? [{ type: 'paragraph', children: item }] : [])
 
@@ -27,26 +27,26 @@ const parseSummaryMd = (content) => {
         if (child.type === 'paragraph') {
           for (const node of child.children || []) {
             if (node.type === 'link') {
-              const title = node.children ? node.children.map((c) => c.value || '').join('') : ''
+              const title = (node.children || []).map((c) => c.value || '').join('')
               linkInfo = { title, href: normalizeHref(node.url) }
-            }
+            } else if (node.type === 'text') textTitle += node.value || ''
           }
+          if (!textTitle) textTitle = (child.children || []).map((c) => c.value || '').join('')
         } else if (child.type === 'bulletList' || child.type === 'orderedList') {
           subLists.push(...extractItems(child))
         }
       }
 
-      if (linkInfo) {
-        items.push({ ...linkInfo, children: subLists })
-      }
+      if (linkInfo) items.push({ ...linkInfo, children: subLists })
+      else if (textTitle.trim()) items.push({ title: textTitle.trim(), href: null, children: subLists })
     }
     return items
   }
 
   for (const block of ast.blocks) {
     if (block.type === 'header' && block.level > 1) {
-      const sectionTitle = block.children ? block.children.map((c) => c.value || '').join('') : ''
-      currentSection = { type: 'section', title: sectionTitle, items: [] }
+      const title = (block.children || []).map((c) => c.value || '').join('')
+      currentSection = { type: 'section', title, items: [] }
       nav.push(currentSection)
     } else if (block.type === 'bulletList' || block.type === 'orderedList') {
       const listItems = extractItems(block)
@@ -85,9 +85,7 @@ const scanDir = (dir, rootDir = dir) => {
 
 const getNavigationTree = (inputDir) => {
   const summaryPath = path.join(inputDir, 'SUMMARY.md')
-  if (fs.existsSync(summaryPath)) {
-    return parseSummaryMd(fs.readFileSync(summaryPath, 'utf8'))
-  }
+  if (fs.existsSync(summaryPath)) return parseSummaryMd(fs.readFileSync(summaryPath, 'utf8'))
   return scanDir(inputDir)
 }
 

package/lib/theme.css

@@ -357,6 +357,16 @@ body {
   border-left-color: var(--accent-color);
 }
 
+.nav-label {
+  display: block;
+  padding: 0.4rem 0.65rem;
+  color: var(--text-primary);
+  font-size: 0.88rem;
+  font-weight: 600;
+  line-height: 1.35;
+  cursor: default;
+}
+
 .nav-sub {
   list-style: none;
   padding-left: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sullux/markdown-docs",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A zero-dependency, local-first static documentation site generator compiling GitBook-style Markdown docs.",
   "main": "./index.js",
   "bin": {