@staticbolt/docs 0.0.1-beta.3 → 0.0.1-beta.5

package/lib/plugins.mjs

@@ -5,13 +5,12 @@ import { ExpressiveCodeBlock } from "expressive-code";
 import { toHtml } from "hast-util-to-html";
 import rehypeExpressiveCode, { createRenderer } from "rehype-expressive-code";
 import { createHash } from "node:crypto";
-import { cpSync, existsSync, globSync, mkdirSync, readFileSync, realpathSync, writeFileSync } from "node:fs";
+import { cpSync, existsSync, globSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import yaml from "yaml";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { visit } from "unist-util-visit";
 import * as pagefind from "pagefind";
-import { selectAll } from "hast-util-select";
 //#region plugins/ec-cache.ts
 /**
 * Persistent cross-build caches for expressive-code rendering.
@@ -119,7 +118,7 @@ function cachedRehypeExpressiveCode(options) {
 * replaces the tag with a syntax highlighted code block. Use the `lang` attribute to set the language, and the other attributes
 * for the rest of the expressive-code metadata.
 */
-function HtmlCodeBlockPlugin(options = {}) {
+function htmlCodeBlockPlugin(options = {}) {
 	const tag = options.tagName ?? "code-block";
 	let renderCache;
 	let diskCache;
@@ -355,11 +354,40 @@ function HtmlCodeBlockPlugin(options = {}) {
 function isItem(item) {
 	return "filePath" in item;
 }
-function normalizeTitle(string) {
+/** Words `normalizeTitle` writes as listed, matched against the whole word. */
+const ACRONYMS = [
+	"API",
+	"CDN",
+	"CLI",
+	"CSS",
+	"DOM",
+	"FAQ",
+	"HTML",
+	"HTTP",
+	"IIFE",
+	"JS",
+	"JSON",
+	"JSX",
+	"LSP",
+	"PWA",
+	"RSS",
+	"SEO",
+	"SVG",
+	"SVGO",
+	"TS",
+	"UI",
+	"URL",
+	"XML",
+	"YAML"
+];
+/** Turns a file or directory name into a title: separators to spaces, every word capitalized, listed words as listed. */
+function normalizeTitle(string, acronyms = ACRONYMS) {
 	if (!string) return "";
-	string = string.replace(/[-_]/g, " ");
-	string = string.split(/\s+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-	return string;
+	const fixed = new Map(acronyms.map((acronym) => [acronym.toLowerCase(), acronym]));
+	return string.replace(/[-_]/g, " ").split(/\s+/).map((word) => {
+		const lower = word.toLowerCase();
+		return fixed.get(lower) ?? word.charAt(0).toUpperCase() + lower.slice(1);
+	}).join(" ");
 }
 /** Escapes characters that would break out of a double-quoted HTML attribute value. */
 function escapeAttributeValue(value) {
@@ -409,6 +437,10 @@ function withInferredOrder(entries) {
 	}
 	return customizations;
 }
+/** Whether a front matter key is read by the plugin itself and so must not reach the layout tag. */
+function isConsumedKey(key) {
+	return key === "publish" || key.startsWith("sidebar.");
+}
 function prepareOptions(options) {
 	const include = options.include ?? ["pages/**/*.{html,md}"];
 	const exclude = options.exclude ?? [];
@@ -417,11 +449,8 @@ function prepareOptions(options) {
 	const icons = options.icons ?? "";
 	const publish = options.publish ?? true;
 	const collapsed = options.collapsed ?? true;
-	const sidebarLayout = options.sidebarLayout ?? {};
-	sidebarLayout.path ??= themeSidebarPart("sidebar.part.html");
-	sidebarLayout.tag ??= path.basename(sidebarLayout.path).split(".")[1];
-	sidebarLayout.sourceAttribute ??= "src";
-	sidebarLayout.slotName ??= "sidebar";
+	const acronyms = [...ACRONYMS, ...options.acronyms ?? []];
+	const data = Object.fromEntries(Object.entries(options.data ?? {}).filter(([key]) => key !== "layout" && !isConsumedKey(key)));
 	const directoryLayout = options.directoryLayout ?? {};
 	directoryLayout.path ??= themeSidebarPart("directory.part.html");
 	directoryLayout.tag ??= path.basename(directoryLayout.path).split(".")[1];
@@ -439,7 +468,8 @@ function prepareOptions(options) {
 		icons,
 		publish,
 		collapsed,
-		sidebarLayout,
+		acronyms,
+		data,
 		directoryLayout,
 		linkLayout
 	};
@@ -500,51 +530,6 @@ function parseSidebarFrontmatter(file) {
 	};
 }
 //#endregion
-//#region plugins/content-plugin/render-tree.ts
-/** `<icon>` source for a node, `undefined` when the project has no icons directory or the node no icon. */
-function iconSource(icons, icon) {
-	if (!icons || !icon) return;
-	return `${icons.replace(/\/$/, "")}/${icon}.icon.html`;
-}
-function renderDirectory(directory, items, { directoryLayout, customizations, icons }) {
-	const customization = customizations[directory.realPath];
-	const data = {
-		title: customization?.label ?? directory.title,
-		collapsed: customization?.collapsed ?? directory.collapsed,
-		...customization?.data,
-		iconSrc: iconSource(icons, customization?.data?.icon)
-	};
-	return `<li class="sidebar-list-item">
-            <${directoryLayout.tag} dataJson='${escapeAttributeValue(JSON.stringify(data))}' ${directoryLayout.sourceAttribute}="${directoryLayout.path}">
-              <ul class="sidebar-list">${items}</ul>
-            </${directoryLayout.tag}>
-          </li>`;
-}
-function renderLink(link, { linkLayout, customizations, icons }) {
-	const customization = customizations[link.realPath];
-	const data = {
-		title: customization?.label ?? link.title,
-		fullTitle: link.pageTitle ?? link.title,
-		href: encodeURIComponent(link.filePath),
-		...customization?.data,
-		iconSrc: iconSource(icons, customization?.data?.icon)
-	};
-	return `<li class="sidebar-list-item">
-            <${linkLayout.tag} dataJson='${escapeAttributeValue(JSON.stringify(data))}' ${linkLayout.sourceAttribute}="${linkLayout.path}"></${linkLayout.tag}>
-          </li>`;
-}
-function renderTree(items, options) {
-	let tree = "";
-	for (const item of items) {
-		if (isItem(item)) {
-			tree += renderLink(item, options);
-			continue;
-		}
-		tree += renderDirectory(item, renderTree(item.items, options), options);
-	}
-	return tree;
-}
-//#endregion
 //#region plugins/content-plugin/generate-tree.ts
 function getOrCreateDirectory(tree, title, realPath, collapsed) {
 	let directory = tree.find((entry) => "items" in entry && entry.title === title);
@@ -604,13 +589,13 @@ function generateTree(options) {
 		let realDirectoryPath = parts.slice(0, baseIndex + 1).join("/");
 		for (const directory of directories) {
 			realDirectoryPath = path.join(realDirectoryPath, directory);
-			const title = normalizeTitle(directory);
+			const title = normalizeTitle(directory, options.acronyms);
 			currentTree = getOrCreateDirectory(currentTree, title, realDirectoryPath, options.collapsed).items;
 		}
 		const fileNameWithoutExtension = path.parse(fileName).name;
-		const title = fileNameWithoutExtension === "index" && directories.length === 0 ? "Home" : normalizeTitle(fileNameWithoutExtension);
+		const title = fileNameWithoutExtension === "index" && directories.length === 0 ? "Home" : normalizeTitle(fileNameWithoutExtension, options.acronyms);
 		const pathAsLink = fileNameWithoutExtension === "index" ? path.dirname(file) : path.join(path.dirname(file), fileNameWithoutExtension);
-		const href = path.relative(path.dirname(options.sidebarLayout.path), pathAsLink) + "/";
+		const href = this.resolver.aliasPath(pathAsLink + "/");
 		currentTree.push({
 			title,
 			filePath: href,
@@ -620,48 +605,126 @@ function generateTree(options) {
 	}
 	applyOrdering(autoGenerated, options.customizations);
 	return {
-		tree: `<ul class="sidebar-list" slot="${options.sidebarLayout.slotName}">${renderTree(autoGenerated, options)}</ul>`,
+		tree: autoGenerated,
 		notPublished
 	};
 }
 //#endregion
+//#region plugins/content-plugin/render-tree.ts
+/** `<icon>` source for a node, `undefined` when the project has no icons directory or the node no icon. */
+function iconSource(icons, icon) {
+	if (!icons || !icon) return;
+	return `${icons.replace(/\/$/, "")}/${icon}.icon.html`;
+}
+function renderDirectory(directory, items, { directoryLayout, customizations, icons }) {
+	const customization = customizations[directory.realPath];
+	const data = {
+		title: customization?.label ?? directory.title,
+		collapsed: customization?.collapsed ?? directory.collapsed,
+		...customization?.data,
+		iconSrc: iconSource(icons, customization?.data?.icon)
+	};
+	return `<li class="sidebar-list-item">
+            <${directoryLayout.tag} dataJson='${escapeAttributeValue(JSON.stringify(data))}' ${directoryLayout.sourceAttribute}="${directoryLayout.path}">
+              <ul class="sidebar-list">${items}</ul>
+            </${directoryLayout.tag}>
+          </li>`;
+}
+function renderLink(link, { linkLayout, customizations, icons }) {
+	const customization = customizations[link.realPath];
+	const data = {
+		title: customization?.label ?? link.title,
+		fullTitle: link.pageTitle ?? link.title,
+		href: encodeURIComponent(link.filePath),
+		...customization?.data,
+		iconSrc: iconSource(icons, customization?.data?.icon)
+	};
+	return `<li class="sidebar-list-item">
+            <${linkLayout.tag} dataJson='${escapeAttributeValue(JSON.stringify(data))}' ${linkLayout.sourceAttribute}="${linkLayout.path}"></${linkLayout.tag}>
+          </li>`;
+}
+function renderTree(items, options) {
+	let tree = "";
+	for (const item of items) {
+		if (isItem(item)) {
+			tree += renderLink(item, options);
+			continue;
+		}
+		tree += renderDirectory(item, renderTree(item.items, options), options);
+	}
+	return tree;
+}
+//#endregion
 //#region plugins/content-plugin/content-plugin.ts
-/**
-* Turns an alias, a package specifier, or an absolute path into the path the build works with: relative to the project root when
-* the file lives inside it, absolute otherwise.
-*/
+/** Turns an alias, a package specifier, or an absolute path into a path relative to the project root. */
 function locate(source) {
 	const aliased = this.resolver.resolveAlias(source);
 	if (aliased) return aliased;
 	const resolved = path.isAbsolute(source) ? source : this.resolver.resolve(source, path.join(this.root, "index.html"))?.path;
-	if (!resolved) return source;
-	const relative = path.relative(this.root, resolved);
-	return relative.startsWith("..") ? resolved : relative;
+	return resolved ? path.relative(this.root, resolved) : source;
+}
+/** The layout's empty `<slot name="sidebar">`, with the attributes around the name captured for the `slot` it forwards to. */
+const slotRegex = /<slot\b([^>]*)\bname\s*=\s*["']sidebar["']([^>]*?)(\/>|>\s*<\/slot\s*>)/g;
+/** The tree in place of the slot, sent to the same slot of the part below when the slot was forwarding to one. */
+function fillSlot(content, tree) {
+	return content.replace(slotRegex, (_, before, after) => {
+		const target = /\bslot\s*=\s*["']([^"']*)["']/.exec(`${before} ${after}`)?.[1];
+		return `<ul class="sidebar-list"${target ? ` slot="${target}"` : ""}>${tree}</ul>`;
+	});
 }
 function contentPlugin(options) {
 	const prepared = prepareOptions(options);
-	const slotRegex = new RegExp(String.raw`<slot\s+name\s*=\s*['"]sidebar['"]\s*(\/>|>\s*<\/\s*slot\s*>)`, "g");
 	let tree = "";
 	let notPublished = /* @__PURE__ */ new Set();
-	let sidebarRealPath = "";
+	/**
+	* The layouts this instance serves through `read`, each the file it is read from with the tree in its `sidebar` slot.
+	*
+	* @key served path, relative to the root
+	* @value the layout file it is a copy of
+	*/
+	const served = /* @__PURE__ */ new Map();
+	const isInScope = (relativePath, root) => {
+		return path.isPathMatch(relativePath, {
+			include: prepared.include,
+			ignore: prepared.exclude,
+			root
+		});
+	};
+	const generate = (app) => {
+		const result = generateTree.call(app, prepared);
+		return {
+			tree: renderTree(result.tree, prepared),
+			notPublished: result.notPublished
+		};
+	};
 	return {
 		name: "content-plugin",
 		setup() {
-			for (const key in prepared.layouts) prepared.layouts[key] = locate.call(this, prepared.layouts[key]);
-			prepared.sidebarLayout.path = locate.call(this, prepared.sidebarLayout.path);
-			sidebarRealPath = realpathSync(path.resolve(this.root, prepared.sidebarLayout.path));
-			const sidebarDirectory = path.dirname(path.resolve(this.root, prepared.sidebarLayout.path));
-			const directoryLayoutPath = path.resolve(this.root, locate.call(this, prepared.directoryLayout.path));
-			prepared.directoryLayout.path = path.relative(sidebarDirectory, directoryLayoutPath);
-			const linkLayoutPath = path.resolve(this.root, locate.call(this, prepared.linkLayout.path));
-			prepared.linkLayout.path = path.relative(sidebarDirectory, linkLayoutPath);
+			const instance = (this.pluginData.contentPluginInstances ?? 0) + 1;
+			this.pluginData.contentPluginInstances = instance;
+			for (const key in prepared.layouts) {
+				const original = locate.call(this, prepared.layouts[key]);
+				if (instance === 1) {
+					served.set(original, original);
+					continue;
+				}
+				const [name, ...rest] = path.basename(original).split(".");
+				const copy = path.join(path.dirname(original), [
+					name,
+					`content-${instance}`,
+					...rest
+				].join("."));
+				served.set(copy, original);
+				this.resolver.files.add(path.resolve(this.root, copy));
+				prepared.layouts[key] = copy;
+			}
 			for (const pathKey in prepared.customizations) {
 				const resolvedPath = this.resolver.resolveAlias(pathKey);
 				if (!resolvedPath) continue;
 				prepared.customizations[resolvedPath] = prepared.customizations[pathKey];
 				delete prepared.customizations[pathKey];
 			}
-			({tree, notPublished} = generateTree.call(this, prepared));
+			({tree, notPublished} = generate(this));
 			for (const file of notPublished) {
 				this.entryPoints.delete(file);
 				this.entryPoints.delete(`./${file}`);
@@ -672,37 +735,31 @@ function contentPlugin(options) {
 		},
 		read(absolutePath) {
 			const relativePath = path.relative(this.root, absolutePath);
-			if (path.basename(absolutePath) === path.basename(sidebarRealPath) && realpathSync(absolutePath) === sidebarRealPath) return readFileSync(absolutePath, "utf8").replace(slotRegex, tree);
-			if (path.extname(relativePath) !== ".md") return;
-			if (!path.isPathMatch(relativePath, {
-				include: prepared.include,
-				ignore: prepared.exclude,
-				root: this.root
-			})) return;
+			const original = served.get(relativePath);
+			if (original) return fillSlot(readFileSync(path.resolve(this.root, original), "utf8"), tree);
+			if (path.extname(relativePath) !== ".md" || !isInScope(relativePath, this.root)) return;
 			const pageContent = readFileSync(absolutePath, "utf8");
 			const frontMatterBlock = pageContent.match(/^---\n(.*?)\n---/s);
 			const frontMatter = {
 				layout: "default",
+				...prepared.data,
 				...frontMatterBlock ? yaml.parse(frontMatterBlock[1]) : {}
 			};
-			const layoutPath = prepared.layouts[frontMatter.layout] ?? prepared.layouts.default;
-			frontMatter.layout = path.relative(path.dirname(relativePath), layoutPath);
-			for (const key in frontMatter) if (key === "publish" || key.startsWith("sidebar.")) delete frontMatter[key];
+			const layout = prepared.layouts[frontMatter.layout] ?? prepared.layouts.default;
+			frontMatter.layout = served.has(layout) ? path.relative(path.dirname(absolutePath), path.resolve(this.root, layout)) : layout;
+			for (const key in frontMatter) if (isConsumedKey(key)) delete frontMatter[key];
 			const body = frontMatterBlock ? pageContent.slice(frontMatterBlock[0].length) : pageContent;
 			return `---\n${yaml.stringify(frontMatter)}\n---\n${body}`;
 		},
 		onFileEvent(_, id) {
-			if (!path.isPathMatch(id, {
-				include: prepared.include,
-				ignore: prepared.exclude,
-				root: this.root
-			})) return;
-			const result = generateTree.call(this, prepared);
+			for (const [copy, original] of served) if (original === id && copy !== id) this.watcher?.emit("change", copy);
+			if (!isInScope(id, this.root)) return;
+			const result = generate(this);
 			notPublished = result.notPublished;
 			if (tree === result.tree) return;
 			this.log.info("Re-generating sidebar tree");
 			tree = result.tree;
-			this.watcher?.emit("change", prepared.sidebarLayout.path);
+			for (const layout of served.keys()) this.watcher?.emit("change", layout);
 		}
 	};
 }
@@ -748,6 +805,7 @@ const leadingFrontmatter = /^---\r?\n.*?\r?\n---\r?\n/s;
 const leadingHtmlComments = /^(?:\s*<!--.*?-->\s*)+/s;
 const fenceDelimiter = /^ {0,3}(`{3,}|~{3,})/;
 const markdownLink = /\[([^\]]+)\]\([^)]*\)/g;
+const markdownTag = /<markdown\s+src\s*=\s*["']([^"']+)["']\s*>\s*<\/markdown\s*>/g;
 /**
 * Writes `llms.txt` and `llms-full.txt`, plus a copy of every page's markdown beside its HTML.
 *
@@ -755,14 +813,15 @@ const markdownLink = /\[([^\]]+)\]\([^)]*\)/g;
 * needs no link-following. Nothing is curated by hand.
 */
 function llmsPlugin(options = {}) {
-	const { siteUrl, title = "Documentation", summary } = options;
+	const { siteUrl, title = "Documentation", summary, include = ["pages/**/*.md"], exclude = [], output = "llms" } = options;
 	return {
 		name: "llms",
 		async postBuild() {
 			if (!siteUrl) return;
 			const origin = siteUrl.replace(/\/+$/, "");
 			const isBuilt = (file) => Boolean(this.findMetadata({ id: file }) ?? this.findMetadata({ id: `./${file}` }));
-			const entries = await collectPages(this.root, isBuilt);
+			const resolveAlias = (source) => this.resolver.resolveAlias(source);
+			const entries = await collectPages(this.root, isBuilt, resolveAlias, include, exclude);
 			if (entries.length === 0) return;
 			for (const entry of entries) {
 				const target = join(this.outdir, entry.route, "index.md");
@@ -787,27 +846,33 @@ function llmsPlugin(options = {}) {
 					manifest.push(`- [${entry.title}](${url})${entry.description ? `: ${entry.description}` : ""}`);
 				}
 			}
-			await writeFile(join(this.outdir, "llms.txt"), manifest.join("\n") + "\n", "utf8");
+			const manifestFile = `${output}.txt`;
+			const fullFile = `${output}-full.txt`;
+			await mkdir(dirname(join(this.outdir, manifestFile)), { recursive: true });
+			await writeFile(join(this.outdir, manifestFile), manifest.join("\n") + "\n", "utf8");
 			const full = [[
 				...heading,
 				"",
-				`> Every document from ${origin}/llms.txt inlined in full, so no links need following.`
+				`> Every document from ${origin}/${manifestFile} inlined in full, so no links need following.`
 			].join("\n"), ...entries.map((entry) => {
 				const source = `${origin}/${entry.route}${entry.route ? "/" : ""}index.md`;
 				return `${demoteHeadings(entry.document, entry.title)}\n\nSource: ${source}`;
 			})].join("\n\n---\n\n") + "\n";
-			await writeFile(join(this.outdir, "llms-full.txt"), rewriteAliases(full, origin), "utf8");
+			await writeFile(join(this.outdir, fullFile), rewriteAliases(full, origin), "utf8");
 			const kilobytes = Math.round(Buffer.byteLength(full) / 1024);
-			this.log.success(`Wrote llms.txt (${entries.length} links) and llms-full.txt (${kilobytes} KB).`);
+			this.log.success(`Wrote ${manifestFile} (${entries.length} links) and ${fullFile} (${kilobytes} KB).`);
 		}
 	};
 }
 /** Pages the build produced, so anything the markdown plugin dropped (`publish: false`) stays out of the llms files too. */
-async function collectPages(root, isBuilt) {
-	const files = globSync("pages/**/*.md", { cwd: root }).map((file) => file.replaceAll("\\", "/")).filter((file) => isBuilt(file)).toSorted(byDepthThenPath);
+async function collectPages(root, isBuilt, resolveAlias, include, exclude) {
+	const files = globSync(include, {
+		cwd: root,
+		exclude
+	}).map((file) => file.replaceAll("\\", "/")).filter((file) => isBuilt(file)).toSorted(byDepthThenPath);
 	const entries = [];
 	for (const file of files) {
-		const document = clean(await readFile(join(root, file), "utf8"));
+		const document = await inlineMarkdownTags(clean(await readFile(join(root, file), "utf8")), file, root, resolveAlias);
 		const route = file.replace(/^pages\//, "").replace(/\.md$/, "").replace(/(^|\/)index$/, "");
 		entries.push({
 			title: firstHeading(document) ?? normalizeTitle(route.split("/").pop() ?? "Home"),
@@ -818,6 +883,22 @@ async function collectPages(root, isBuilt) {
 	}
 	return entries;
 }
+/**
+* Replaces every `<markdown src>` tag with the file it points at, so a page that only embeds another document reads as that
+* document. Aliases resolve through the app, other paths from the page's directory. A tag whose file cannot be read stays as is.
+*/
+async function inlineMarkdownTags(document, file, root, resolveAlias) {
+	for (const [tag, source] of document.matchAll(markdownTag)) {
+		const resolved = resolveAlias(source) ?? join(dirname(file), source);
+		try {
+			const content = clean(await readFile(join(root, resolved), "utf8"));
+			document = document.replace(tag, () => content);
+		} catch {
+			continue;
+		}
+	}
+	return document;
+}
 /** Groups by the first path segment, so the sections mirror the sidebar. Root pages come first, under "Overview". */
 function groupByFolder(entries) {
 	const sections = /* @__PURE__ */ new Map();
@@ -890,6 +971,13 @@ function byDepthThenPath(a, b) {
 }
 //#endregion
 //#region plugins/mermaid-fence.ts
+/** The sole `<code>` child of a `<pre>`, ignoring the whitespace some serialisers insert, or nothing when the shape differs. */
+function onlyCodeChild(node) {
+	const children = node.children.filter((child) => !(child.type === "text" && child.value.trim() === ""));
+	const [child] = children;
+	if (children.length !== 1 || child.type !== "element" || child.tagName !== "code") return;
+	return child;
+}
 /**
 * Rehype plugin: converts fenced mermaid code blocks into <pre class="mermaid"> elements.
 *
@@ -900,60 +988,21 @@ function byDepthThenPath(a, b) {
 const rehypeMermaidFence = () => {
 	return (tree) => {
 		visit(tree, "element", (node) => {
-			if (!isPreElement(node)) return;
-			const codeElement = findSingleCodeChild(node);
-			if (codeElement === null) return;
-			if (!hasMermaidLanguageClass(codeElement)) return;
-			const mermaidSource = extractTextContent(codeElement);
-			if (mermaidSource === null) return;
+			if (node.tagName !== "pre") return;
+			const code = onlyCodeChild(node);
+			if (!code) return;
+			const className = code.properties?.className;
+			if (!(Array.isArray(className) ? className : [className]).some((name) => String(name) === "language-mermaid")) return;
+			const text = code.children.filter((child) => child.type === "text");
+			if (text.length === 0) return;
 			node.properties = { className: ["mermaid"] };
 			node.children = [{
 				type: "text",
-				value: mermaidSource
+				value: text.map((child) => child.value).join("")
 			}];
 		});
 	};
 };
-function isPreElement(node) {
-	return node.tagName === "pre";
-}
-/** Returns the sole <code> child of a <pre>, or null if the structure doesn't match (e.g. multiple children, wrong tag). */
-function findSingleCodeChild(preNode) {
-	const nonWhitespaceChildren = [];
-	for (const child of preNode.children) {
-		if (child.type === "text" && child.value.trim() === "") continue;
-		nonWhitespaceChildren.push(child);
-	}
-	if (nonWhitespaceChildren.length !== 1) return null;
-	const [onlyChild] = nonWhitespaceChildren;
-	if (onlyChild.type !== "element") return null;
-	if (onlyChild.tagName !== "code") return null;
-	return onlyChild;
-}
-/**
-* Returns true when the element's className list contains "language-mermaid". Handles both string and array forms that hast
-* allows.
-*/
-function hasMermaidLanguageClass(codeElement) {
-	const rawClassName = codeElement.properties?.className;
-	if (rawClassName === void 0 || rawClassName === null) return false;
-	const classNames = Array.isArray(rawClassName) ? rawClassName : [String(rawClassName)];
-	for (const className of classNames) if (className === "language-mermaid") return true;
-	return false;
-}
-/**
-* Concatenates all text-node descendants of an element. Returns null when there are no text nodes (empty code block is valid →
-* ""). A <code> block produced by remark-rehype always has exactly one Text child, but we handle edge cases defensively.
-*/
-function extractTextContent(element) {
-	let content = "";
-	let found = false;
-	for (const child of element.children) if (child.type === "text") {
-		content += child.value;
-		found = true;
-	}
-	return found ? content : null;
-}
 //#endregion
 //#region plugins/obsidian-comments.ts
 const commentPattern = /(?<!\\)%%[\s\S]*?(?<!\\)%%/g;
@@ -1072,7 +1121,10 @@ const remarkObsidianTags = () => {
 };
 //#endregion
 //#region plugins/pagefind-plugin.ts
-function pagefindPlugin({ glob = "**/*.html" } = {}) {
+function pagefindPlugin(options = {}) {
+	const root = options.root ?? ".";
+	const glob = options.glob ?? "**/*.html";
+	const output = options.output ?? join(root, "pagefind");
 	return {
 		name: "pagefind",
 		async postBuild() {
@@ -1081,7 +1133,7 @@ function pagefindPlugin({ glob = "**/*.html" } = {}) {
 			const { index } = await pagefind.createIndex();
 			if (!index) throw new Error("Failed to create Pagefind index");
 			await index.addDirectory({
-				path: this.outdir,
+				path: join(this.outdir, root),
 				glob
 			});
 			const { files } = await index.getFiles();
@@ -1096,7 +1148,7 @@ function pagefindPlugin({ glob = "**/*.html" } = {}) {
 			]);
 			for (const file of files) {
 				if (exclude.has(file.path)) continue;
-				const targetPath = join(this.outdir, "pagefind", file.path);
+				const targetPath = join(this.outdir, output, file.path);
 				await mkdir(dirname(targetPath), { recursive: true });
 				await writeFile(targetPath, file.content, "utf8");
 			}
@@ -1108,18 +1160,17 @@ function pagefindPlugin({ glob = "**/*.html" } = {}) {
 //#region plugins/wrap-table.ts
 function wrapTables() {
 	return (tree) => {
-		const tables = selectAll("table", tree);
-		for (const table of tables) visit(tree, table, (node, index, parent) => {
-			if (!parent || typeof index !== "number") return;
-			const wrapper = {
+		visit(tree, "element", (node, index, parent) => {
+			if (node.tagName !== "table" || !parent || typeof index !== "number") return;
+			parent.children[index] = {
 				type: "element",
 				tagName: "div",
 				properties: { class: "table-wrapper" },
 				children: [node]
 			};
-			parent.children[index] = wrapper;
+			return "skip";
 		});
 	};
 }
 //#endregion
-export { HtmlCodeBlockPlugin, PersistentCache, cachedRehypeExpressiveCode, contentPlugin, ecCachePlugin, ecCacheSalt, htmlWithTypeScriptScripts, katexFontsPlugin, llmsPlugin, normalizeTitle, pagefindPlugin, pluginCollapsible, rehypeMermaidFence, remarkObsidianComments, remarkObsidianTags, sha1, wrapTables };
+export { PersistentCache, cachedRehypeExpressiveCode, contentPlugin, ecCachePlugin, ecCacheSalt, htmlCodeBlockPlugin, htmlWithTypeScriptScripts, katexFontsPlugin, llmsPlugin, normalizeTitle, pagefindPlugin, pluginCollapsible, rehypeMermaidFence, remarkObsidianComments, remarkObsidianTags, sha1, wrapTables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@staticbolt/docs",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.5",
   "description": "Documentation theme for staticbolt: layout parts, styles, and plugins shared by every docs site.",
   "author": "Ahmed ALABSI",
   "license": "MIT",
@@ -14,6 +14,7 @@
       "types": "./lib/ec.config.d.mts",
       "default": "./lib/ec-config.mjs"
     },
+    "./mermaid": "./lib/mermaid/index.js",
     "./parts/*": "./sources/parts/*",
     "./styles/*": "./sources/styles/*",
     "./scripts/*": "./sources/scripts/*",
@@ -51,13 +52,7 @@
   ],
   "peerDependencies": {
     "@staticbolt/core": "beta",
-    "@staticview/ui": ">=1.0.0-beta.0",
-    "mermaid": "^11.15.0"
-  },
-  "peerDependenciesMeta": {
-    "mermaid": {
-      "optional": true
-    }
+    "@staticview/ui": ">=1.0.0-beta.0"
   },
   "dependencies": {
     "@expressive-code/core": "^0.42.0",
@@ -66,7 +61,6 @@
     "@pagefind/component-ui": "^1.5.2",
     "@xt0rted/expressive-code-file-icons": "^1.0.0",
     "expressive-code": "^0.42.0",
-    "hast-util-select": "^6.0.2",
     "hast-util-to-html": "^9.0.5",
     "pagefind": "^1.5.2",
     "rehype-expressive-code": "^0.42.0",
@@ -75,7 +69,6 @@
     "yaml": "^2.9.0"
   },
   "overrides": {
-    "expressive-code": "^0.42.0",
     "@expressive-code/core": "^0.42.0"
   },
   "devDependencies": {