hdoc-tools 0.52.1 → 0.54.0

package/ui/js/doc.hornbill.js

@@ -7,6 +7,102 @@ let jqDocumentHeader = null;
 let jqLeftNav = null;
 const global = { stateParams: {}, lastLayoutClass: "" };
 
+//-- Mermaid client-side rendering config — mirrors templates/mermaid-theme.yaml.
+//-- (PDFs are still rendered to SVG server-side by hdoc build; this is HTML-only.)
+const HB_MERMAID_CONFIG = {
+	startOnLoad: false,
+	theme: "base",
+	themeVariables: {
+		background: "transparent",
+		fontSize: "14px",
+		primaryColor: "#85D2FF",
+		primaryColorLight: "#85D2FF",
+		primaryColorDark: "#0065CB",
+		secondaryColor: "#219BFF",
+		secondaryColorLight: "#85D2FF",
+		secondaryColorDark: "#0C4C8C",
+		tertiaryColor: "#219BFF",
+		tertiaryColorLight: "#85D2FF",
+		tertiaryColorDark: "#0C4C8C",
+		lineColor: "#808080",
+		border1: "#606060",
+		textColor: "#A0A0A0",
+		titleColor: "#A0A0A0",
+		labelColor: "#404040",
+		loopTextColor: "#A0A0A0",
+		nodeTextColor: "#404040",
+		labelTextColor: "#404040",
+		pieSectionTextColor: "#404040",
+		nodeBorder: "#219BFF",
+		nodeBg: "transparent",
+	},
+};
+
+//-- Lazy-load the Mermaid bundle (~3MB) only when a page actually contains a
+//-- diagram. Resolves to window.mermaid, initialised once.
+let hbMermaidLoadPromise = null;
+function hbLoadMermaid() {
+	if (window.mermaid) return Promise.resolve(window.mermaid);
+	if (hbMermaidLoadPromise) return hbMermaidLoadPromise;
+	hbMermaidLoadPromise = new Promise((resolve, reject) => {
+		const el = document.createElement("script");
+		el.src = "js/mermaid.min.js"; //-- resolves against <base href> (site root)
+		el.onload = () => {
+			try {
+				window.mermaid.initialize(HB_MERMAID_CONFIG);
+				resolve(window.mermaid);
+			} catch (e) {
+				reject(e);
+			}
+		};
+		el.onerror = () => reject(new Error("failed to load js/mermaid.min.js"));
+		document.head.appendChild(el);
+	});
+	return hbMermaidLoadPromise;
+}
+
+//-- Inject the spinner styles once. While a <pre class="mermaid"> has no
+//-- data-processed attr (set by mermaid.run() once rendered) we collapse its raw
+//-- source text and show a spinner in its place.
+function hbEnsureMermaidStyles() {
+	if (document.getElementById("hb-mermaid-style")) return;
+	const style = document.createElement("style");
+	style.id = "hb-mermaid-style";
+	style.textContent =
+		"pre.mermaid:not([data-processed]){font-size:0!important;line-height:0!important;min-height:140px;display:flex;align-items:center;justify-content:center;background:none!important;border:none!important;}" +
+		'pre.mermaid:not([data-processed])::after{content:"";width:32px;height:32px;border:3px solid rgba(33,155,255,.25);border-top-color:#219BFF;border-radius:50%;animation:hbMermaidSpin .8s linear infinite;}' +
+		"@keyframes hbMermaidSpin{to{transform:rotate(360deg);}}";
+	document.head.appendChild(style);
+}
+
+//-- Render any not-yet-processed <pre class="mermaid"> blocks in the current doc.
+//-- mermaid.run() tags each node with data-processed, so re-running after a
+//-- navigation only renders freshly-injected diagrams.
+function hbRenderMermaidDiagrams() {
+	hbEnsureMermaidStyles();
+	const nodes = document.querySelectorAll(
+		"#DocContent pre.mermaid:not([data-processed])",
+	);
+	if (!nodes.length) return;
+	//-- On any failure, mark nodes processed so the spinner stops (reveals source
+	//-- rather than spinning forever).
+	const reveal = (err) => {
+		hslDocLog.log("Mermaid render failed", err);
+		for (const n of nodes) n.setAttribute("data-processed", "true");
+	};
+	hbLoadMermaid()
+		.then((mermaid) => mermaid.run({ nodes }))
+		.catch(reveal);
+}
+
+//-- Warm the Mermaid bundle (~4.5MB) immediately on first script run so it's
+//-- downloading/parsing in the background regardless of whether THIS page has a
+//-- diagram. By the time the user reaches a diagram page it's ready and the swap
+//-- is instant. The bundle is served with a long cache header, so it downloads
+//-- once per browser, not once per page.
+hbEnsureMermaidStyles();
+hbLoadMermaid().catch(() => {});
+
 const docAppMethods = {
 	setSessionInfo: function (info) {
 		this.docApp.userSession = info;
@@ -383,6 +479,9 @@ function loadContentUrl(
 				);
 			}
 
+			//-- render any Mermaid diagrams client-side (lazy-loads the bundle)
+			hbRenderMermaidDiagrams();
+
 			//-- show copy button by any code blocks
 			const options = {
 				contentSelector: ".injected-document-content",