lildocs 0.1.2 → 0.1.4

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, "\\$&");
@@ -942,6 +942,7 @@ async function exists$1(filePath) {
 //#region src/core/theme.ts
 const MIN_BACKGROUND_CONTRAST = 1.08;
 const PREFERRED_BACKGROUND_CONTRAST = 1.14;
+const MIN_DARK_BORDER_CONTRAST = 1.35;
 const MAX_BACKGROUND_CONTRAST_STEPS = 12;
 const BACKGROUND_LIGHTNESS_STEP = .015;
 const MAX_BACKGROUND_CHROMA = .03;
@@ -956,6 +957,7 @@ const themes = {
 			border: "#e5e5e5",
 			link: "#2563eb",
 			codeBackground: "#f6f8fa",
+			codeForeground: "#24292e",
 			sidebarBackground: "#fafafa"
 		},
 		font: {
@@ -963,7 +965,8 @@ const themes = {
 			body: "system-ui, sans-serif",
 			code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
 		},
-		shiki: { theme: "github-light" }
+		shiki: { theme: "github-light" },
+		background: { gradient: "linear-gradient(180deg, rgb(37 99 235 / 0.045), transparent 220px)" }
 	},
 	minimal: {
 		color: {
@@ -973,6 +976,7 @@ const themes = {
 			border: "#dddddd",
 			link: "#0f766e",
 			codeBackground: "#f7f7f7",
+			codeForeground: "#24292e",
 			sidebarBackground: "#ffffff"
 		},
 		font: {
@@ -980,7 +984,8 @@ const themes = {
 			body: "Arial, sans-serif",
 			code: "Menlo, Consolas, monospace"
 		},
-		shiki: { theme: "github-light" }
+		shiki: { theme: "github-light" },
+		background: { gradient: "linear-gradient(180deg, rgb(15 118 110 / 0.04), transparent 220px)" }
 	}
 };
 async function resolveTheme(options) {
@@ -1056,10 +1061,11 @@ function themeToCssVariables(theme, fontOverrides = {}, linkOptions = {}, naviga
 	const navigationDuration = navigationOptions.duration ?? 180;
 	const rootVariables = themeToCssVariableBlock(theme.light, fontOverrides);
 	const darkVariables = theme.dark ? themeToCssVariableBlock(theme.dark, fontOverrides) : void 0;
+	const rootBackgroundVariables = themeToBackgroundVariableBlock(theme.light);
+	const darkBackgroundVariables = theme.dark ? themeToBackgroundVariableBlock(theme.dark) : void 0;
 	return `:root {
 ${theme.dark ? "  color-scheme: light dark;\n" : ""}${rootVariables}
-  --ld-background-image: none;
-  --ld-background-blend-mode: normal;
+${rootBackgroundVariables}
   --ld-font-logo: var(--ld-font-heading);
   --ld-link-text-decoration: ${linkDecoration.default};
   --ld-link-hover-text-decoration: ${linkDecoration.hover};
@@ -1069,7 +1075,7 @@ ${theme.dark ? "  color-scheme: light dark;\n" : ""}${rootVariables}
 
 @media (prefers-color-scheme: dark) {
   :root {
-${darkVariables}    color-scheme: dark;
+${darkVariables}${darkBackgroundVariables}    color-scheme: dark;
   }
 }` : ""}`;
 }
@@ -1112,12 +1118,18 @@ function themeToCssVariableBlock(theme, fontOverrides) {
   --ld-color-border: ${color.border};
   --ld-color-link: ${color.link};
   --ld-color-code-background: ${color.codeBackground};
+  --ld-color-code-foreground: ${color.codeForeground ?? color.text};
   --ld-color-sidebar-background: ${color.sidebarBackground ?? color.background};
   --ld-font-heading: ${fonts.heading};
   --ld-font-body: ${fonts.body};
   --ld-font-code: ${fonts.code};
 `;
 }
+function themeToBackgroundVariableBlock(theme) {
+	return `  --ld-background-image: ${theme.background?.gradient ?? "none"};
+  --ld-background-blend-mode: ${theme.background?.blendMode ?? "normal"};
+`;
+}
 function normalizeThemeColors(color) {
 	return {
 		...color,
@@ -1141,6 +1153,11 @@ function validateTheme(value, themePath) {
 		theme.font?.body,
 		theme.font?.code ?? theme.font?.mono
 	].some((item) => typeof item !== "string" || item.length === 0)) throw new LildocsError(`Local theme is missing required color or font string values: ${themePath}`);
+	if (theme.background !== void 0) {
+		if (!theme.background || typeof theme.background !== "object") throw new LildocsError(`Local theme "background" must be an object: ${themePath}`);
+		if (theme.background.gradient !== void 0 && (typeof theme.background.gradient !== "string" || theme.background.gradient.length === 0)) throw new LildocsError(`Local theme "background.gradient" must be a non-empty string: ${themePath}`);
+		if (theme.background.blendMode !== void 0 && (typeof theme.background.blendMode !== "string" || theme.background.blendMode.length === 0)) throw new LildocsError(`Local theme "background.blendMode" must be a non-empty string: ${themePath}`);
+	}
 	return theme;
 }
 function mapShikiThemeToTheme(shikiTheme, themeName) {
@@ -1156,27 +1173,30 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 		"foreground",
 		"sideBar.foreground"
 	], shikiTheme.fg ?? (shikiTheme.type === "dark" ? "#f5f5f5" : "#111111"));
+	const mutedText = pickColor(colors, [
+		"descriptionForeground",
+		"breadcrumb.foreground",
+		"editorLineNumber.foreground",
+		"sideBar.foreground"
+	], tokenForeground(tokenColors, "comment") ?? text);
+	const border = pickColor(colors, [
+		"panel.border",
+		"sideBar.border",
+		"editorGroup.border",
+		"tab.border"
+	], shikiTheme.type === "dark" ? "#333333" : "#e5e5e5");
+	const link = pickColor(colors, [
+		"textLink.foreground",
+		"terminal.ansiBlue",
+		"activityBarBadge.background"
+	], tokenForeground(tokenColors, "markup.inline.raw") ?? (shikiTheme.type === "dark" ? "#79b8ff" : "#2563eb"));
 	return {
 		color: {
 			background,
 			text,
-			mutedText: pickColor(colors, [
-				"descriptionForeground",
-				"breadcrumb.foreground",
-				"editorLineNumber.foreground",
-				"sideBar.foreground"
-			], tokenForeground(tokenColors, "comment") ?? text),
-			border: pickColor(colors, [
-				"panel.border",
-				"sideBar.border",
-				"editorGroup.border",
-				"tab.border"
-			], shikiTheme.type === "dark" ? "#333333" : "#e5e5e5"),
-			link: pickColor(colors, [
-				"textLink.foreground",
-				"terminal.ansiBlue",
-				"activityBarBadge.background"
-			], tokenForeground(tokenColors, "markup.inline.raw") ?? (shikiTheme.type === "dark" ? "#79b8ff" : "#2563eb")),
+			mutedText,
+			border,
+			link,
 			codeBackground: ensureBackgroundContrast({
 				background,
 				candidate: pickColor(colors, [
@@ -1187,6 +1207,7 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 				], background),
 				isDark: shikiTheme.type === "dark"
 			}),
+			codeForeground: text,
 			sidebarBackground: pickColor(colors, [
 				"sideBar.background",
 				"activityBar.background",
@@ -1198,7 +1219,8 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 			body: "system-ui, sans-serif",
 			code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
 		},
-		shiki: { theme: themeName }
+		shiki: { theme: themeName },
+		background: { gradient: shikiTheme.type === "dark" ? `linear-gradient(180deg, color-mix(in srgb, ${link} 16%, transparent), transparent 240px)` : `linear-gradient(180deg, color-mix(in srgb, ${link} 9%, transparent), transparent 220px)` }
 	};
 }
 function pickColor(colors, keys, fallback) {
@@ -1285,9 +1307,11 @@ function ensureDarkBorderLightness(options) {
 	const textOklch = toOklch(text);
 	const candidateOklch = toOklch(candidate);
 	if (!backgroundOklch || !textOklch || !candidateOklch || typeof backgroundOklch.l !== "number" || typeof textOklch.l !== "number" || typeof candidateOklch.l !== "number") return options.candidate;
-	if (backgroundOklch.l >= textOklch.l || candidateOklch.l > backgroundOklch.l) return options.candidate;
+	if (backgroundOklch.l >= textOklch.l) return options.candidate;
+	const currentContrast = wcagContrast(background, candidate);
+	if (candidateOklch.l > backgroundOklch.l && currentContrast >= MIN_DARK_BORDER_CONTRAST) return options.candidate;
 	let bestColor = options.candidate;
-	let bestLightness = candidateOklch.l;
+	let bestContrast = currentContrast;
 	for (let step = 1; step <= MAX_BACKGROUND_CONTRAST_STEPS; step += 1) {
 		const clampedColor = clampToRgb({
 			...candidateOklch,
@@ -1297,13 +1321,15 @@ function ensureDarkBorderLightness(options) {
 		if (!clampedColor) continue;
 		const adjustedColor = formatHex(clampedColor);
 		const adjustedParsedColor = parse(adjustedColor);
-		const adjustedOklch = adjustedParsedColor ? toOklch(adjustedParsedColor) : void 0;
+		if (!adjustedParsedColor) continue;
+		const adjustedOklch = toOklch(adjustedParsedColor);
 		if (!adjustedOklch || typeof adjustedOklch.l !== "number") continue;
-		if (adjustedOklch.l > bestLightness) {
+		const adjustedContrast = wcagContrast(background, adjustedParsedColor);
+		if (adjustedOklch.l > backgroundOklch.l && adjustedContrast > bestContrast) {
 			bestColor = adjustedColor;
-			bestLightness = adjustedOklch.l;
+			bestContrast = adjustedContrast;
 		}
-		if (adjustedOklch.l > backgroundOklch.l) return adjustedColor;
+		if (adjustedOklch.l > backgroundOklch.l && adjustedContrast >= MIN_DARK_BORDER_CONTRAST) return adjustedColor;
 	}
 	return bestColor;
 }
@@ -1374,10 +1400,6 @@ function Layout({ page, nav, pageNavigation, css, searchIndexJson, logo, favicon
 				rel: "icon",
 				href: assetSrc(page.route, 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"
-			}),
 			/* @__PURE__ */ jsx("link", {
 				rel: "stylesheet",
 				href: rootRelativeUrl(page.route, "assets/lildocs.css")
@@ -1411,9 +1433,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",
@@ -1597,6 +1618,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");
@@ -1616,8 +1638,9 @@ async function buildSite(options) {
 		defaultText: packageName,
 		favicon: configOptions.favicon
 	});
-	const css = `${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${backgroundResolution.css}${logoResolution.css}${baseCss}`;
+	const css = `${tablerIconsCss}${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
@@ -1717,6 +1740,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();
@@ -15,11 +15,13 @@
     }
 
     for (const block of blocks) {
-      if (block.querySelector(":scope > .copyCodeButton")) {
+      if (block.parentElement?.classList.contains("copyCodeBlock")) {
         continue;
       }
 
       const copyText = block.textContent ?? "";
+      const wrapper = document.createElement("div");
+      wrapper.className = "copyCodeBlock";
       const button = document.createElement("button");
       button.type = "button";
       button.className = "copyCodeButton";
@@ -45,7 +47,8 @@
         }
       });
 
-      block.append(button);
+      block.before(wrapper);
+      wrapper.append(block, button);
     }
   }
 })();

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

@@ -132,7 +132,7 @@ html.is-animating .transition-scale {
 
 .content {
   min-width: 0;
-  padding-block: 28px 64px;
+  padding-block: 0 64px;
   line-height: 1.65;
 }
 
@@ -145,15 +145,28 @@ html.is-animating .transition-scale {
   font-family: var(--ld-font-heading);
 }
 
+.content article :where(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1.2em 0.6em;
+}
+
 .content img {
   max-width: 100%;
   height: auto;
 }
 
+.content article {
+  max-width: 60ch;
+  font-size: 110%;
+}
+
 .content article li {
   margin-bottom: 8px;
 }
 
+.content article > :first-child {
+  margin-top: 0;
+}
+
 .content blockquote {
   margin: 20px 0;
   padding: 10px 16px;
@@ -181,7 +194,6 @@ html.is-animating .transition-scale {
 }
 
 .content a,
-.toc a,
 .navList a {
   color: var(--ld-color-link);
 }
@@ -279,6 +291,15 @@ html.is-animating .transition-scale {
   white-space: inherit;
 }
 
+.content .copyCodeBlock {
+  position: relative;
+  margin-block: 1em;
+}
+
+.content .copyCodeBlock > pre {
+  margin: 0;
+}
+
 .content pre.shiki {
   color: var(--shiki-light);
   background: var(--shiki-light-bg);
@@ -310,6 +331,13 @@ html.is-animating .transition-scale {
   font-size: 0.92em;
 }
 
+.content :not(pre) > code {
+  padding: 0.16em 0.36em;
+  border-radius: 4px;
+  background: var(--ld-color-code-background);
+  color: var(--ld-color-code-foreground);
+}
+
 .copyCodeButton {
   position: absolute;
   top: 10px;
@@ -325,10 +353,19 @@ html.is-animating .transition-scale {
   background: color-mix(in srgb, var(--ld-color-background) 88%, transparent);
   color: var(--ld-color-muted-text);
   line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
   vertical-align: top;
   cursor: pointer;
 }
 
+.content .copyCodeBlock:hover .copyCodeButton,
+.copyCodeButton:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .copyCodeIcon {
   font-size: 18px;
   line-height: 1;
@@ -371,6 +408,7 @@ html.is-animating .transition-scale {
 
 .markdown-alert-icon {
   flex: 0 0 auto;
+  font-size: 20px;
 }
 
 .markdown-alert-note {
@@ -464,6 +502,7 @@ html.is-animating .transition-scale {
 }
 
 .toc a {
+  color: var(--ld-color-muted-text);
   text-decoration: none;
 }
 
@@ -528,21 +567,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.2",
+  "version": "0.1.4",
   "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",