lildocs 0.1.3 → 0.1.5

package/dist/cli.mjs

@@ -429,23 +429,23 @@ function ensureUniqueRoutes(pages) {
 const defaultAlertVariants = [
 	{
 		type: "note",
-		icon: materialSymbol("info")
+		icon: tablerIcon("info-circle")
 	},
 	{
 		type: "tip",
-		icon: materialSymbol("lightbulb")
+		icon: tablerIcon("bulb")
 	},
 	{
 		type: "important",
-		icon: materialSymbol("feedback")
+		icon: tablerIcon("message-report")
 	},
 	{
 		type: "warning",
-		icon: materialSymbol("warning")
+		icon: tablerIcon("alert-triangle")
 	},
 	{
 		type: "caution",
-		icon: materialSymbol("dangerous")
+		icon: tablerIcon("alert-circle")
 	}
 ];
 function markedAlert(options = {}) {
@@ -511,8 +511,8 @@ function createSyntaxPattern(type) {
 function capitalize$1(value) {
 	return value.slice(0, 1).toUpperCase() + value.slice(1).toLowerCase();
 }
-function materialSymbol(name) {
-	return `<span class="material-symbols-rounded markdown-alert-icon" aria-hidden="true">${name}</span>`;
+function tablerIcon(name) {
+	return `<span class="ti ti-${name} markdown-alert-icon" aria-hidden="true"></span>`;
 }
 function escapeRegExp(value) {
 	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -768,7 +768,7 @@ function nestNavItems(items) {
 			let group = byDir.get(currentPath);
 			if (!group) {
 				group = {
-					title: titleFromDir(part),
+					title: titleFromDir$1(part),
 					route: `${currentPath}/index.html`,
 					active: false,
 					hasPage: false,
@@ -789,7 +789,7 @@ function nestNavItems(items) {
 	}
 	return topLevel;
 }
-function titleFromDir(dir) {
+function titleFromDir$1(dir) {
 	return dir.replace(/[-_]+/g, " ").replace(/\S+/g, (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`);
 }
 //#endregion
@@ -1117,6 +1117,7 @@ function themeToCssVariableBlock(theme, fontOverrides) {
   --ld-color-muted-text: ${color.mutedText};
   --ld-color-border: ${color.border};
   --ld-color-link: ${color.link};
+  --ld-color-accent: ${color.link};
   --ld-color-code-background: ${color.codeBackground};
   --ld-color-code-foreground: ${color.codeForeground ?? color.text};
   --ld-color-sidebar-background: ${color.sidebarBackground ?? color.background};
@@ -1402,7 +1403,7 @@ function Layout({ page, nav, pageNavigation, css, searchIndexJson, logo, favicon
 			}) : null,
 			/* @__PURE__ */ jsx("link", {
 				rel: "stylesheet",
-				href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&display=block"
+				href: rootRelativeUrl(page.route, "assets/tabler-icons.css")
 			}),
 			/* @__PURE__ */ jsx("link", {
 				rel: "stylesheet",
@@ -1437,9 +1438,8 @@ function Layout({ page, nav, pageNavigation, css, searchIndexJson, logo, favicon
 							id: "lildocs-search-root",
 							className: "searchBox",
 							children: [/* @__PURE__ */ jsx("span", {
-								className: "searchIcon material-symbols-rounded",
-								"aria-hidden": "true",
-								children: "search"
+								className: "searchIcon ti ti-search",
+								"aria-hidden": "true"
 							}), /* @__PURE__ */ jsx("input", {
 								id: "lildocs-search-input",
 								type: "search",
@@ -1465,7 +1465,7 @@ function Layout({ page, nav, pageNavigation, css, searchIndexJson, logo, favicon
 						}),
 						/* @__PURE__ */ jsxs("main", {
 							className: `content transition-${transition}`,
-							children: [/* @__PURE__ */ jsx("article", { dangerouslySetInnerHTML: { __html: page.html ?? "" } }), /* @__PURE__ */ jsx(PageNav, { pageNavigation })]
+							children: [/* @__PURE__ */ jsxs("article", { children: [/* @__PURE__ */ jsx(GroupBreadcrumbs, { route: page.route }), /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: page.html ?? "" } })] }), /* @__PURE__ */ jsx(PageNav, { pageNavigation })]
 						}),
 						/* @__PURE__ */ jsx("aside", {
 							className: `toc transition-${transition}`,
@@ -1500,6 +1500,17 @@ function assetSrc(pageRoute, image) {
 	if (/^(?:[a-z]+:)?\/\//i.test(image) || image.startsWith("data:") || image.startsWith("/")) return image;
 	return rootRelativeUrl(pageRoute, image);
 }
+function GroupBreadcrumbs({ route }) {
+	const dir = route.split("/").slice(0, -1);
+	if (dir.length === 0) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: "groupBreadcrumbs",
+		children: dir.map(titleFromDir).join(" / ")
+	});
+}
+function titleFromDir(dir) {
+	return dir.replace(/[-_]+/g, " ").replace(/\S+/g, (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`);
+}
 function PageNav({ pageNavigation }) {
 	if (!pageNavigation?.previous && !pageNavigation?.next) return null;
 	return /* @__PURE__ */ jsxs("nav", {
@@ -1623,6 +1634,7 @@ async function buildSite(options) {
 		fonts: configOptions.fonts
 	});
 	const baseCss = await readRenderAsset("styles.css");
+	const tablerIconsCss = await readTablerIconsCss();
 	const searchScript = await readRenderAsset("search.js");
 	const copyCodeScript = await readRenderAsset("copy-code.js");
 	const navigationScript = await readRenderAsset("navigation.js");
@@ -1644,6 +1656,7 @@ async function buildSite(options) {
 	});
 	const css = `${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${backgroundResolution.css}${logoResolution.css}${baseCss}`;
 	const assets = [
+		...tablerIconFontAssets(outDir),
 		...fontResolution.assets,
 		...backgroundResolution.assets,
 		...logoResolution.assets
@@ -1678,6 +1691,7 @@ async function buildSite(options) {
 			await writeFile(outputPath, html);
 		}));
 		await writeFile(path.join(outDir, "assets", "lildocs.css"), css);
+		await writeFile(path.join(outDir, "assets", "tabler-icons.css"), tablerIconsCss);
 		await writeFile(path.join(outDir, "assets", "search.js"), searchScript);
 		await writeFile(path.join(outDir, "assets", "copy-code.js"), copyCodeScript);
 		await writeFile(path.join(outDir, "assets", "swup.umd.js"), swupScript);
@@ -1743,6 +1757,20 @@ async function readRenderAsset(name) {
 async function readSwupAsset() {
 	return readFile(path.join(path.dirname(require.resolve("swup")), "Swup.umd.js"), "utf8");
 }
+async function readTablerIconsCss() {
+	return readFile(require.resolve("@tabler/icons-webfont/dist/tabler-icons.css"), "utf8");
+}
+function tablerIconFontAssets(outDir) {
+	const fontsDir = path.join(path.dirname(require.resolve("@tabler/icons-webfont/dist/tabler-icons.css")), "fonts");
+	return [
+		"tabler-icons.woff2",
+		"tabler-icons.woff",
+		"tabler-icons.ttf"
+	].map((name) => ({
+		from: path.join(fontsDir, name),
+		to: path.join(outDir, "assets", "fonts", name)
+	}));
+}
 function buildPageNavigation(pages) {
 	const navigation = /* @__PURE__ */ new Map();
 	if (pages.length < 2) return navigation;

package/dist/render/copy-code.js

@@ -1,8 +1,8 @@
 (() => {
   const icons = {
-    copy: '<span class="material-symbols-rounded copyCodeIcon" aria-hidden="true">content_copy</span>',
-    check: '<span class="material-symbols-rounded copyCodeIcon" aria-hidden="true">check</span>',
-    error: '<span class="material-symbols-rounded copyCodeIcon" aria-hidden="true">error</span>',
+    copy: '<span class="ti ti-copy copyCodeIcon" aria-hidden="true"></span>',
+    check: '<span class="ti ti-copy-check copyCodeIcon" aria-hidden="true"></span>',
+    error: '<span class="ti ti-alert-circle copyCodeIcon" aria-hidden="true"></span>',
   };
 
   initCopyCode();

package/dist/render/search.js

@@ -3082,9 +3082,8 @@ function SearchBox({ anchorElement, index, siteRoot, preloadedUrls }) {
 	};
 	return /* @__PURE__ */ u(S$1, { children: [
 		/* @__PURE__ */ u("span", {
-			className: "searchIcon material-symbols-rounded",
-			"aria-hidden": "true",
-			children: "search"
+			className: "searchIcon ti ti-search",
+			"aria-hidden": "true"
 		}),
 		/* @__PURE__ */ u("input", {
 			ref: inputRef,

package/dist/render/styles.css

@@ -122,7 +122,7 @@ html.is-animating .transition-scale {
   align-self: start;
   max-height: 100vh;
   overflow: auto;
-  padding-block: 24px;
+  padding-block: 28px 24px;
 }
 
 .sidebar {
@@ -132,7 +132,7 @@ html.is-animating .transition-scale {
 
 .content {
   min-width: 0;
-  padding-block: 0 64px;
+  padding-block: 28px 64px;
   line-height: 1.65;
 }
 
@@ -145,16 +145,36 @@ html.is-animating .transition-scale {
   font-family: var(--ld-font-heading);
 }
 
+.content article :where(h1, h2, h3, h4, h5, h6) {
+  margin-block: 2em 0.667em;
+}
+
+.content article p {
+  margin-block: 1.25em;
+}
+
 .content img {
   max-width: 100%;
   height: auto;
 }
 
+.content article {
+  max-width: 60ch;
+  font-size: 110%;
+}
+
+.groupBreadcrumbs {
+  margin: 0 0 -4px;
+  color: var(--ld-color-accent);
+  font-size: 80%;
+  font-weight: 700;
+}
+
 .content article li {
-  margin-bottom: 8px;
+  margin-block: 1em;
 }
 
-.content article > :first-child {
+.content :first-child {
   margin-top: 0;
 }
 
@@ -220,11 +240,12 @@ html.is-animating .transition-scale {
 .navFolder {
   display: block;
   padding: 6px 8px;
-  border-radius: 6px;
 }
 
 .navList a,
 .navDisclosure summary {
+  padding-left: 7px;
+  border-left: 1px solid color-mix(in srgb, var(--ld-color-border) 65%, transparent);
   color: var(--ld-color-muted-text);
   text-decoration: none;
 }
@@ -263,9 +284,9 @@ html.is-animating .transition-scale {
 
 .navList a.active,
 .navDisclosure summary.active {
-  color: var(--ld-color-text);
-  background: var(--ld-color-code-background);
-  font-weight: 600;
+  border-left-color: var(--ld-color-accent);
+  color: var(--ld-color-accent);
+  font-weight: 550;
 }
 
 .content pre {
@@ -399,6 +420,7 @@ html.is-animating .transition-scale {
 
 .markdown-alert-icon {
   flex: 0 0 auto;
+  font-size: 20px;
 }
 
 .markdown-alert-note {
@@ -486,7 +508,7 @@ html.is-animating .transition-scale {
 
 .toc ul {
   display: grid;
-  gap: 6px;
+  gap: 9px;
   list-style: none;
   padding-left: 0;
 }
@@ -557,21 +579,6 @@ html.is-animating .transition-scale {
   transform: translateY(-50%);
 }
 
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-
 .searchBox input {
   box-sizing: border-box;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {
@@ -26,6 +26,7 @@
   "dependencies": {
     "@goddard-ai/ui-primitives": "^0.1.1",
     "@preact/signals": "^2.9.2",
+    "@tabler/icons-webfont": "^3.44.0",
     "beautiful-mermaid": "^1.1.3",
     "cmd-ts": "^0.15.0",
     "culori": "^4.0.2",