lildocs 0.1.16 → 0.1.17

package/dist/cli.mjs

@@ -12,7 +12,7 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 import markedShiki from "marked-shiki";
 import { bundledThemes, codeToHtml } from "shiki";
 import { decodeHTML } from "entities";
-import { renderMermaidSVG } from "beautiful-mermaid";
+import { fromShikiTheme, renderMermaidSVG } from "beautiful-mermaid";
 import os from "node:os";
 import { generateMarkdownForModule } from "exports-md";
 import { clampGamut, converter, formatHex, parse, wcagContrast } from "culori";
@@ -914,10 +914,15 @@ function escapeHtml$1(value) {
 //#endregion
 //#region src/core/mermaid.ts
 async function createMermaidRenderer(options) {
+	const lightColors = await loadShikiColors(options.themeConfig.light);
+	const darkColors = options.themeConfig.dark ? await loadShikiColors(options.themeConfig.dark) : void 0;
+	const colorKeys = sharedColorKeys(lightColors, darkColors);
+	const renderOptions = toRenderOptions(colorKeys, options.themeConfig.fontFamily);
 	return {
+		css: toThemeCss(lightColors, darkColors, colorKeys),
 		async render(source, idHint) {
 			try {
-				const svg = addImageRole(renderMermaidSVG(source, toRenderOptions(options.themeConfig)));
+				const svg = addImageRole(renderMermaidSVG(source, renderOptions));
 				return `<figure class="mermaidDiagram" id="${escapeHtml(idHint)}">${svg}</figure>`;
 			} catch (error) {
 				throw new LildocsError(`Failed to render Mermaid diagram ${idHint}: ${errorMessage$1(error)}`);
@@ -926,17 +931,51 @@ async function createMermaidRenderer(options) {
 		async close() {}
 	};
 }
-function toRenderOptions(themeConfig) {
+const optionalColorKeys = [
+	"line",
+	"accent",
+	"muted",
+	"surface",
+	"border"
+];
+async function loadShikiColors(themeName) {
+	const themeLoader = bundledThemes[themeName];
+	if (!themeLoader) throw new LildocsError(`Unknown bundled Shiki theme: ${themeName}`);
+	const themeModule = await themeLoader();
+	return fromShikiTheme("default" in themeModule ? themeModule.default : themeModule);
+}
+function sharedColorKeys(light, dark) {
+	return optionalColorKeys.filter((key) => light[key] !== void 0 && (!dark || dark[key] !== void 0));
+}
+function toRenderOptions(colorKeys, fontFamily) {
 	return {
-		bg: themeConfig.bg,
-		fg: themeConfig.fg,
-		accent: themeConfig.accent,
-		muted: themeConfig.muted,
-		surface: themeConfig.surface,
-		border: themeConfig.border,
-		font: themeConfig.fontFamily
+		bg: "var(--ld-mermaid-bg)",
+		fg: "var(--ld-mermaid-fg)",
+		...Object.fromEntries(colorKeys.map((key) => [key, `var(--ld-mermaid-${key})`])),
+		font: fontFamily
 	};
 }
+function toThemeCss(light, dark, colorKeys) {
+	const lightVariables = toCssVariables(light, colorKeys, "  ");
+	const darkVariables = dark ? toCssVariables(dark, colorKeys, "    ") : void 0;
+	return `.mermaidDiagram {
+${lightVariables}
+}${darkVariables ? `
+
+@media (prefers-color-scheme: dark) {
+  .mermaidDiagram {
+${darkVariables}
+  }
+}` : ""}
+`;
+}
+function toCssVariables(colors, colorKeys, indent) {
+	return [
+		`${indent}--ld-mermaid-bg: ${colors.bg};`,
+		`${indent}--ld-mermaid-fg: ${colors.fg};`,
+		...colorKeys.map((key) => `${indent}--ld-mermaid-${key}: ${colors[key]};`)
+	].join("\n");
+}
 function addImageRole(svg) {
 	return svg.replace("<svg", "<svg role=\"img\"");
 }
@@ -1336,12 +1375,8 @@ function resolveBackgroundOptions(options) {
 function themeToMermaidConfig(theme, fontOverrides = {}) {
 	const fonts = resolveThemeFonts(theme.light, fontOverrides);
 	return {
-		bg: theme.light.color.background,
-		fg: theme.light.color.text,
-		accent: theme.light.color.link,
-		muted: theme.light.color.mutedText,
-		surface: theme.light.color.codeBackground,
-		border: theme.light.color.border,
+		light: theme.light.shiki?.theme ?? "github-light",
+		dark: theme.dark?.shiki?.theme,
 		fontFamily: fonts.body
 	};
 }
@@ -1668,13 +1703,13 @@ async function buildSite(options) {
 		defaultText: packageName,
 		favicon: configOptions.favicon
 	});
-	const css = `${resolveThemeFontImports(theme, configOptions.fonts)}${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${backgroundResolution.css}${logoResolution.css}${baseCss}`;
+	const mermaid = await createMermaidRenderer({ themeConfig: themeToMermaidConfig(theme, fontResolution.themeFonts) });
+	const css = `${resolveThemeFontImports(theme, configOptions.fonts)}${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${mermaid.css}${backgroundResolution.css}${logoResolution.css}${baseCss}`;
 	const assets = [
 		...fontResolution.assets,
 		...backgroundResolution.assets,
 		...logoResolution.assets
 	];
-	const mermaid = await createMermaidRenderer({ themeConfig: themeToMermaidConfig(theme, fontResolution.themeFonts) });
 	let frontendRenderer;
 	try {
 		await rm(outDir, {

package/dist/render/styles.css

@@ -271,6 +271,10 @@ html.is-animating .transition-scale {
   margin-block: 1em;
 }
 
+.content article > div > ul {
+  margin-bottom: 2em;
+}
+
 .content :first-child {
   margin-top: 0;
 }
@@ -524,17 +528,20 @@ html.is-animating .transition-scale {
   border-collapse: collapse;
 }
 
-.tableFrame {
+.tableFrame,
+.mermaidFrame {
   margin-block: 1em;
 }
 
-.tableToolbar {
+.tableToolbar,
+.mermaidToolbar {
   display: flex;
   justify-content: flex-end;
   margin-top: 8px;
 }
 
-.tableViewport {
+.tableViewport,
+.mermaidViewport {
   max-width: 100%;
   overflow-x: auto;
 }
@@ -544,7 +551,12 @@ html.is-animating .transition-scale {
   margin: 0;
 }
 
+.content .mermaidViewport .mermaidDiagram {
+  margin: 0;
+}
+
 .tableExpandButton,
+.mermaidExpandButton,
 .tableFullscreenClose {
   display: inline-flex;
   align-items: center;
@@ -562,19 +574,23 @@ html.is-animating .transition-scale {
 }
 
 .tableExpandButton .ti,
+.mermaidExpandButton .ti,
 .tableFullscreenClose .ti {
   font-size: 18px;
 }
 
 .tableExpandButton:hover,
 .tableExpandButton:focus-visible,
+.mermaidExpandButton:hover,
+.mermaidExpandButton:focus-visible,
 .tableFullscreenClose:hover,
 .tableFullscreenClose:focus-visible {
   border-color: var(--ld-color-link);
   color: var(--ld-color-link);
 }
 
-.tableFullscreenDialog {
+.tableFullscreenDialog,
+.mermaidFullscreenDialog {
   width: 100vw;
   max-width: none;
   height: 100vh;
@@ -587,7 +603,8 @@ html.is-animating .transition-scale {
   font-family: var(--ld-font-body);
 }
 
-.tableFullscreenDialog::backdrop {
+.tableFullscreenDialog::backdrop,
+.mermaidFullscreenDialog::backdrop {
   background: color-mix(in srgb, black 35%, transparent);
 }
 
@@ -613,6 +630,31 @@ html.is-animating .transition-scale {
   font-size: 105%;
 }
 
+.mermaidFullscreenViewport {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px;
+  place-items: center;
+}
+
+.mermaidFullscreenViewport .mermaidDiagram {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.mermaidFullscreenViewport .mermaidDiagram svg {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .tableFullscreenViewport table {
   display: table;
   width: max-content;
@@ -621,7 +663,8 @@ html.is-animating .transition-scale {
   border-collapse: collapse;
 }
 
-html.tableFullscreenOpen {
+html.tableFullscreenOpen,
+html.mermaidFullscreenOpen {
   overflow: hidden;
 }
 

package/dist/render/table-viewer.ts

@@ -2,9 +2,11 @@ let activeDialog: HTMLDialogElement | undefined;
 
 export function initTableViewer() {
   enhanceTables();
+  enhanceMermaidDiagrams();
   document.addEventListener("lildocs:page-view", () => {
     activeDialog?.close();
     enhanceTables();
+    enhanceMermaidDiagrams();
   });
 }
 
@@ -31,7 +33,16 @@ function enhanceTables() {
     const viewport = document.createElement("div");
     viewport.className = "tableViewport";
 
-    button.addEventListener("click", () => openTableDialog(table, button));
+    button.addEventListener("click", () =>
+      openFullscreenDialog(table, button, {
+        dialogClass: "tableFullscreenDialog",
+        dialogLabel: "Full screen table",
+        title: table.querySelector("caption")?.textContent?.trim() || "Table",
+        closeLabel: "Minimize table",
+        viewportClass: "tableFullscreenViewport content",
+        openClass: "tableFullscreenOpen",
+      }),
+    );
     table.before(frame);
     toolbar.append(button);
     viewport.append(table);
@@ -39,29 +50,81 @@ function enhanceTables() {
   }
 }
 
-function openTableDialog(table: HTMLTableElement, opener: HTMLButtonElement) {
+function enhanceMermaidDiagrams() {
+  const diagrams = document.querySelectorAll<HTMLElement>(
+    ".content article .mermaidDiagram",
+  );
+  for (const diagram of Array.from(diagrams)) {
+    if (diagram.closest(".mermaidFrame")) {
+      continue;
+    }
+
+    const frame = document.createElement("div");
+    frame.className = "mermaidFrame";
+    const toolbar = document.createElement("div");
+    toolbar.className = "mermaidToolbar";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "mermaidExpandButton";
+    button.title = "Expand diagram";
+    button.setAttribute("aria-label", "View diagram in full screen");
+    button.innerHTML =
+      '<span class="ti ti-arrows-maximize" aria-hidden="true"></span>';
+    const viewport = document.createElement("div");
+    viewport.className = "mermaidViewport";
+
+    button.addEventListener("click", () =>
+      openFullscreenDialog(diagram, button, {
+        dialogClass: "mermaidFullscreenDialog",
+        dialogLabel: "Full screen diagram",
+        title: "Diagram",
+        closeLabel: "Minimize diagram",
+        viewportClass: "mermaidFullscreenViewport content",
+        openClass: "mermaidFullscreenOpen",
+      }),
+    );
+    diagram.before(frame);
+    toolbar.append(button);
+    viewport.append(diagram);
+    frame.append(viewport, toolbar);
+  }
+}
+
+type FullscreenDialogOptions = {
+  dialogClass: string;
+  dialogLabel: string;
+  title: string;
+  closeLabel: string;
+  viewportClass: string;
+  openClass: string;
+};
+
+function openFullscreenDialog(
+  source: HTMLElement,
+  opener: HTMLButtonElement,
+  options: FullscreenDialogOptions,
+) {
   activeDialog?.close();
 
   const dialog = document.createElement("dialog");
-  dialog.className = "tableFullscreenDialog";
-  dialog.setAttribute("aria-label", "Full screen table");
+  dialog.className = options.dialogClass;
+  dialog.setAttribute("aria-label", options.dialogLabel);
   const content = document.createElement("div");
   content.className = "tableFullscreenContent";
   const header = document.createElement("header");
   header.className = "tableFullscreenHeader";
   const title = document.createElement("strong");
-  title.textContent =
-    table.querySelector("caption")?.textContent?.trim() || "Table";
+  title.textContent = options.title;
   const closeButton = document.createElement("button");
   closeButton.type = "button";
   closeButton.className = "tableFullscreenClose";
-  closeButton.title = "Minimize table";
-  closeButton.setAttribute("aria-label", "Minimize table");
+  closeButton.title = options.closeLabel;
+  closeButton.setAttribute("aria-label", options.closeLabel);
   closeButton.innerHTML =
     '<span class="ti ti-arrows-minimize" aria-hidden="true"></span>';
   const viewport = document.createElement("div");
-  viewport.className = "tableFullscreenViewport content";
-  viewport.append(table.cloneNode(true));
+  viewport.className = options.viewportClass;
+  viewport.append(source.cloneNode(true));
 
   closeButton.addEventListener("click", () => dialog.close());
   dialog.addEventListener("cancel", (event) => {
@@ -76,7 +139,7 @@ function openTableDialog(table: HTMLTableElement, opener: HTMLButtonElement) {
   dialog.addEventListener(
     "close",
     () => {
-      document.documentElement.classList.remove("tableFullscreenOpen");
+      document.documentElement.classList.remove(options.openClass);
       dialog.remove();
       if (activeDialog === dialog) {
         activeDialog = undefined;
@@ -92,7 +155,7 @@ function openTableDialog(table: HTMLTableElement, opener: HTMLButtonElement) {
   content.append(header, viewport);
   dialog.append(content);
   document.body.append(dialog);
-  document.documentElement.classList.add("tableFullscreenOpen");
+  document.documentElement.classList.add(options.openClass);
   activeDialog = dialog;
   dialog.showModal();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {