lildocs 0.1.14 → 0.1.16

package/dist/render/table-viewer.ts

@@ -0,0 +1,98 @@
+let activeDialog: HTMLDialogElement | undefined;
+
+export function initTableViewer() {
+  enhanceTables();
+  document.addEventListener("lildocs:page-view", () => {
+    activeDialog?.close();
+    enhanceTables();
+  });
+}
+
+function enhanceTables() {
+  const tables = document.querySelectorAll<HTMLTableElement>(
+    ".content article table",
+  );
+  for (const table of Array.from(tables)) {
+    if (table.closest(".tableFrame")) {
+      continue;
+    }
+
+    const frame = document.createElement("div");
+    frame.className = "tableFrame";
+    const toolbar = document.createElement("div");
+    toolbar.className = "tableToolbar";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "tableExpandButton";
+    button.title = "Expand table";
+    button.setAttribute("aria-label", "View table in full screen");
+    button.innerHTML =
+      '<span class="ti ti-arrows-maximize" aria-hidden="true"></span>';
+    const viewport = document.createElement("div");
+    viewport.className = "tableViewport";
+
+    button.addEventListener("click", () => openTableDialog(table, button));
+    table.before(frame);
+    toolbar.append(button);
+    viewport.append(table);
+    frame.append(viewport, toolbar);
+  }
+}
+
+function openTableDialog(table: HTMLTableElement, opener: HTMLButtonElement) {
+  activeDialog?.close();
+
+  const dialog = document.createElement("dialog");
+  dialog.className = "tableFullscreenDialog";
+  dialog.setAttribute("aria-label", "Full screen table");
+  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";
+  const closeButton = document.createElement("button");
+  closeButton.type = "button";
+  closeButton.className = "tableFullscreenClose";
+  closeButton.title = "Minimize table";
+  closeButton.setAttribute("aria-label", "Minimize table");
+  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));
+
+  closeButton.addEventListener("click", () => dialog.close());
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    dialog.close();
+  });
+  dialog.addEventListener("click", (event) => {
+    if (event.target === dialog) {
+      dialog.close();
+    }
+  });
+  dialog.addEventListener(
+    "close",
+    () => {
+      document.documentElement.classList.remove("tableFullscreenOpen");
+      dialog.remove();
+      if (activeDialog === dialog) {
+        activeDialog = undefined;
+      }
+      if (opener.isConnected) {
+        opener.focus();
+      }
+    },
+    { once: true },
+  );
+
+  header.append(title, closeButton);
+  content.append(header, viewport);
+  dialog.append(content);
+  document.body.append(dialog);
+  document.documentElement.classList.add("tableFullscreenOpen");
+  activeDialog = dialog;
+  dialog.showModal();
+}

package/dist/render/tabler-icons.css

@@ -17,6 +17,22 @@
   --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%3Cpath%20d%3D%22M3%2010a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20%2F%3E%3Cpath%20d%3D%22M21%2021l-6%20-6%22%20%2F%3E%3C%2Fsvg%3E");
 }
 
+.ti-arrows-maximize {
+  --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%204l4%200l0%204%22%2F%3E%3Cpath%20d%3D%22M14%2010l6%20-6%22%2F%3E%3Cpath%20d%3D%22M8%2020l-4%200l0%20-4%22%2F%3E%3Cpath%20d%3D%22M4%2020l6%20-6%22%2F%3E%3Cpath%20d%3D%22M16%2020l4%200l0%20-4%22%2F%3E%3Cpath%20d%3D%22M14%2014l6%206%22%2F%3E%3Cpath%20d%3D%22M8%204l-4%200l0%204%22%2F%3E%3Cpath%20d%3D%22M4%204l6%206%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.ti-arrows-minimize {
+  --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%209l4%200l0%20-4%22%2F%3E%3Cpath%20d%3D%22M3%203l6%206%22%2F%3E%3Cpath%20d%3D%22M5%2015l4%200l0%204%22%2F%3E%3Cpath%20d%3D%22M3%2021l6%20-6%22%2F%3E%3Cpath%20d%3D%22M19%209l-4%200l0%20-4%22%2F%3E%3Cpath%20d%3D%22M15%209l6%20-6%22%2F%3E%3Cpath%20d%3D%22M19%2015l-4%200l0%204%22%2F%3E%3Cpath%20d%3D%22M15%2015l6%206%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.ti-layout-sidebar-left-collapse {
+  --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202%20-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201%20-2%202h-12a2%202%200%200%201%20-2%20-2l0%20-12%22%2F%3E%3Cpath%20d%3D%22M9%204v16%22%2F%3E%3Cpath%20d%3D%22M15%2010l-2%202l2%202%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.ti-layout-sidebar-left-expand {
+  --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202%20-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201%20-2%202h-12a2%202%200%200%201%20-2%20-2l0%20-12%22%2F%3E%3Cpath%20d%3D%22M9%204v16%22%2F%3E%3Cpath%20d%3D%22M14%2010l2%202l-2%202%22%2F%3E%3C%2Fsvg%3E");
+}
+
 .ti-copy {
   --ld-tabler-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%3Cpath%20d%3D%22M7%209.667a2.667%202.667%200%200%201%202.667%20-2.667h8.666a2.667%202.667%200%200%201%202.667%202.667v8.666a2.667%202.667%200%200%201%20-2.667%202.667h-8.666a2.667%202.667%200%200%201%20-2.667%20-2.667l0%20-8.666%22%20%2F%3E%3Cpath%20d%3D%22M4.012%2016.737a2.005%202.005%200%200%201%20-1.012%20-1.737v-10c0%20-1.1%20.9%20-2%202%20-2h10c.75%200%201.158%20.385%201.5%201%22%20%2F%3E%3C%2Fsvg%3E");
 }

package/dist/render/types.ts

@@ -0,0 +1,9 @@
+export type AdjacentPageLink = {
+  title: string;
+  href: string;
+};
+
+export type PageNavigation = {
+  previous?: AdjacentPageLink;
+  next?: AdjacentPageLink;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {
@@ -17,35 +17,39 @@
   "scripts": {
     "build": "tsdown",
     "docs:serve": "pnpm run build && node dist/cli.mjs build ./docs --out ./dist/docs && sirv ./dist/docs",
-    "format": "oxfmt --write src schemas package.json tsconfig.json tsdown.config.ts .oxlintrc.json .oxfmtrc.json .vscode/settings.json",
-    "format:check": "oxfmt --check src schemas package.json tsconfig.json tsdown.config.ts .oxlintrc.json .oxfmtrc.json .vscode/settings.json",
-    "lint": "oxlint src tsdown.config.ts",
-    "test": "pnpm run build && node --test test/*.test.mjs",
+    "format": "prettier --write src schemas package.json tsconfig.json tsdown.config.ts vitest.config.ts .oxlintrc.json .prettierrc.json .vscode/settings.json",
+    "format:check": "prettier --check src schemas package.json tsconfig.json tsdown.config.ts vitest.config.ts .oxlintrc.json .prettierrc.json .vscode/settings.json",
+    "lint": "oxlint src tsdown.config.ts vitest.config.ts",
+    "test": "pnpm run build && vitest run",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@goddard-ai/ui-primitives": "^0.1.1",
-    "@preact/signals": "^2.9.2",
     "beautiful-mermaid": "^1.1.3",
     "cmd-ts": "^0.15.0",
     "culori": "^4.0.2",
-    "exports-md": "^0.2.3",
+    "entities": "^8.0.0",
+    "exports-md": "^0.2.5",
     "gray-matter": "^4.0.3",
     "marked": "^18.0.3",
     "marked-shiki": "^1.2.1",
-    "preact": "^10.29.2",
-    "preact-render-to-string": "^6.7.0",
+    "octane": "^0.1.3",
     "shiki": "^4.0.2",
     "swup": "^4.9.0"
   },
+  "peerDependencies": {
+    "vite": "^8.0.0"
+  },
   "devDependencies": {
+    "@tsrx/prettier-plugin": "^0.3.93",
     "@types/culori": "^4.0.1",
     "@types/node": "^24.0.0",
-    "oxfmt": "^0.50.0",
     "oxlint": "^1.65.0",
+    "prettier": "^3.9.5",
     "sirv": "^3.0.2",
     "tsdown": "^0.22.0",
-    "typescript": "^5.9.0"
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.10"
   },
   "engines": {
     "node": "^22.18.0 || >=24.3.0"

package/dist/render/copy-code.js

@@ -1,54 +0,0 @@
-(() => {
-  const icons = {
-    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();
-  document.addEventListener("lildocs:page-view", initCopyCode);
-
-  function initCopyCode() {
-    const blocks = document.querySelectorAll(".content article pre");
-    if (!blocks.length || !navigator.clipboard?.writeText) {
-      return;
-    }
-
-    for (const block of blocks) {
-      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";
-      button.setAttribute("aria-label", "Copy code");
-      button.title = "Copy code";
-      button.innerHTML = icons.copy;
-
-      button.addEventListener("click", async () => {
-        try {
-          await navigator.clipboard.writeText(copyText);
-          button.innerHTML = icons.check;
-          button.setAttribute("aria-label", "Copied");
-          button.title = "Copied";
-          window.setTimeout(() => {
-            button.innerHTML = icons.copy;
-            button.setAttribute("aria-label", "Copy code");
-            button.title = "Copy code";
-          }, 1600);
-        } catch {
-          button.innerHTML = icons.error;
-          button.setAttribute("aria-label", "Copy failed");
-          button.title = "Copy failed";
-        }
-      });
-
-      block.before(wrapper);
-      wrapper.append(block, button);
-    }
-  }
-})();

package/dist/render/navigation.js

@@ -1,14 +0,0 @@
-(() => {
-  if (!window.Swup || window.location.protocol === "file:") {
-    return;
-  }
-
-  const swup = new window.Swup({
-    containers: ["#swup"],
-    animationSelector: '[class*="transition-"]',
-  });
-
-  swup.hooks.on("page:view", () => {
-    document.dispatchEvent(new CustomEvent("lildocs:page-view"));
-  });
-})();