lildocs 0.1.20 → 0.1.22

package/dist/render/styles.css

@@ -193,7 +193,8 @@ html.is-animating .transition-scale {
   top: 0;
   align-self: start;
   max-height: 100vh;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding-block: 70px 24px;
 }
 
@@ -849,9 +850,13 @@ html.mermaidFullscreenOpen {
   opacity: 1;
 }
 
-.toc a {
+.tocLinks a {
+  display: block;
+  overflow: hidden;
   color: var(--ld-color-muted-text);
   text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tocDepth3 {
@@ -1042,6 +1047,10 @@ html.mermaidFullscreenOpen {
   text-decoration: none;
 }
 
+.tocRepoLink:first-child {
+  border-top: 0;
+}
+
 .tocRepoLink:hover,
 .tocRepoLink:focus-visible {
   color: var(--ld-color-link);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {
@@ -15,37 +15,34 @@
   ],
   "type": "module",
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node scripts/build-renderers.mjs",
     "docs:serve": "pnpm run build && node dist/cli.mjs build ./docs --out ./dist/docs && sirv ./dist/docs",
-    "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",
+    "format": "prettier --write src scripts schemas package.json tsconfig.json tsdown.config.ts vitest.config.ts .oxlintrc.json .prettierrc.json .vscode/settings.json",
+    "format:check": "prettier --check src scripts schemas package.json tsconfig.json tsdown.config.ts vitest.config.ts .oxlintrc.json .prettierrc.json .vscode/settings.json",
+    "lint": "oxlint src scripts tsdown.config.ts vitest.config.ts",
     "test": "pnpm run build && vitest run",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "beautiful-mermaid": "^1.1.3",
+    "shiki": "^4.0.2"
+  },
+  "devDependencies": {
+    "@tsrx/prettier-plugin": "^0.3.93",
+    "@types/culori": "^4.0.1",
+    "@types/node": "^24.0.0",
     "cmd-ts": "^0.15.0",
     "culori": "^4.0.2",
     "entities": "^8.0.0",
-    "exports-md": "^0.2.5",
+    "exports-md": "^0.2.7",
     "gray-matter": "^4.0.3",
     "marked": "^18.0.3",
     "marked-shiki": "^1.2.1",
     "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",
     "oxlint": "^1.65.0",
     "prettier": "^3.9.5",
     "sirv": "^3.0.2",
+    "swup": "^4.9.0",
     "tsdown": "^0.22.0",
     "typescript": "^5.9.0",
     "vite": "^8.0.0",

package/dist/render/Layout.tsrx

@@ -1,375 +0,0 @@
-import type { Heading, Page } from "../core/content.js";
-import type { ResolvedLogo } from "../core/logo.js";
-import type { NavItem } from "../core/nav.js";
-import type { NavigationOptions } from "../core/theme.js";
-import { relativeUrl, rootRelativeUrl } from "./paths.js";
-import type { PageNavigation } from "./types.js";
-
-export type LayoutProps = {
-  page: Page;
-  nav: NavItem[];
-  pageNavigation?: PageNavigation;
-  css: string;
-  searchIndexJson: string;
-  logo: ResolvedLogo;
-  favicon?: string;
-  repositoryUrl?: string;
-  projectName?: string;
-  navigation?: NavigationOptions;
-  clientScriptPath: string;
-  clientStylePaths: string[];
-};
-
-export function Layout({
-  page,
-  nav,
-  pageNavigation,
-  searchIndexJson,
-  logo,
-  favicon,
-  repositoryUrl,
-  projectName,
-  navigation,
-  clientScriptPath,
-  clientStylePaths,
-}: LayoutProps) @{
-  const transition = navigation?.transition ?? "fade";
-  const issueUrl = issueUrlForRepository(repositoryUrl);
-  const repositoryLabel = repositoryLabelForUrl(repositoryUrl);
-
-  <>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>
-      {(projectName ? `${page.title} • ${projectName}` : page.title) as string}
-    </title>
-    @if (favicon) {
-      <link rel="icon" href={assetSrc(page.route, favicon)} />
-    }
-    <link
-      rel="stylesheet"
-      href={rootRelativeUrl(page.route, "assets/tabler-icons.css")}
-    />
-    <link
-      rel="stylesheet"
-      href={rootRelativeUrl(page.route, "assets/lildocs.css")}
-    />
-    @for (const stylePath of clientStylePaths; key stylePath) {
-      <link rel="stylesheet" href={assetSrc(page.route, stylePath)} />
-    }
-    <div class="pageShell">
-      <aside id="lildocs-sidebar" class="sidebar">
-        <div class="sidebarContents">
-          <div class="sidebarHeader">
-            <a class="brand" href={relativeUrl(page.route, "index.html")}>
-              @if (logo.image) {
-                <img
-                  class="brandLogo"
-                  src={assetSrc(page.route, logo.image)}
-                  alt=""
-                />
-              }
-              @if (logo.text) {
-                <span>
-                  {logo.text as string}
-                </span>
-              }
-            </a>
-            <button
-              id="lildocs-sidebar-toggle"
-              class="sidebarToggle"
-              type="button"
-              aria-label="Collapse sidebar"
-              aria-controls="lildocs-sidebar"
-              aria-expanded="false"
-            >
-              <span
-                class="sidebarCollapseIcon ti ti-layout-sidebar-left-collapse"
-                aria-hidden="true"
-              />
-              <span class="sidebarMenuIcon ti ti-menu-2" aria-hidden="true" />
-            </button>
-          </div>
-          <div id="lildocs-search-root" class="searchBox">
-            <span class="searchIcon ti ti-search" aria-hidden="true" />
-            <input
-              id="lildocs-search-input"
-              type="search"
-              placeholder="Search docs"
-              aria-label="Search docs"
-            />
-          </div>
-          <nav
-            id="lildocs-sidebar-navigation"
-            aria-label="Documentation navigation"
-          >
-            <NavList
-              items={nav}
-              currentRoute={page.route}
-              pageRoute={page.route}
-            />
-          </nav>
-          @if (repositoryUrl && repositoryLabel) {
-            <a
-              class="sidebarRepoLink"
-              href={repositoryUrl}
-              aria-label="View repository on GitHub"
-            >
-              <span class="repoIcon" aria-hidden="true" />
-              <span>
-                {repositoryLabel as string}
-              </span>
-            </a>
-          }
-        </div>
-      </aside>
-      <div class="sidebarFloatingControls">
-        <button
-          id="lildocs-sidebar-expand"
-          class="sidebarToggle"
-          type="button"
-          aria-label="Expand sidebar"
-          aria-controls="lildocs-sidebar"
-        >
-          <span class="ti ti-layout-sidebar-left-expand" aria-hidden="true" />
-        </button>
-        <button
-          id="lildocs-floating-search"
-          class="sidebarToggle"
-          type="button"
-          aria-label="Search docs"
-        >
-          <span class="ti ti-search" aria-hidden="true" />
-        </button>
-      </div>
-      <div id="swup" class="contentGrid">
-        <main class={`content transition-${transition}`}>
-          <article>
-            <GroupBreadcrumbs route={page.route} />
-            <div dangerouslySetInnerHTML={{ __html: page.html ?? "" }} />
-          </article>
-          <PageNav pageNavigation={pageNavigation} />
-        </main>
-        <aside class={`toc transition-${transition}`}>
-          <Toc
-            headings={page.headings}
-            repositoryUrl={repositoryUrl}
-            repositoryLabel={repositoryLabel}
-          />
-        </aside>
-      </div>
-    </div>
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `window.lildocsSearchUrl = ${JSON.stringify(
-          rootRelativeUrl(page.route, "search-index.json"),
-        )};${
-          issueUrl
-            ? `window.lildocsIssueUrl = ${JSON.stringify(issueUrl)};`
-            : ""
-        }`,
-      }}
-    />
-    <script
-      type="application/json"
-      id="lildocs-search-index"
-      dangerouslySetInnerHTML={{ __html: searchIndexJson }}
-    />
-    <div id="lildocs-overlay-root" />
-    <script type="module" src={assetSrc(page.route, clientScriptPath)} />
-  </>
-}
-
-function issueUrlForRepository(repositoryUrl: string | undefined) {
-  if (!repositoryUrl) {
-    return undefined;
-  }
-
-  let url: URL;
-  try {
-    url = new URL(repositoryUrl);
-  } catch {
-    return undefined;
-  }
-
-  if (url.hostname !== "github.com") {
-    return undefined;
-  }
-
-  const [owner, repo] = url.pathname.split("/").filter(Boolean);
-  if (!owner || !repo) {
-    return undefined;
-  }
-
-  return `https://github.com/${owner}/${repo}/issues/new`;
-}
-
-function repositoryLabelForUrl(repositoryUrl: string | undefined) {
-  if (!repositoryUrl) {
-    return undefined;
-  }
-
-  try {
-    const url = new URL(repositoryUrl);
-    if (url.hostname !== "github.com") {
-      return undefined;
-    }
-
-    const [owner, repo] = url.pathname.split("/").filter(Boolean);
-    return owner && repo ? `${owner}/${repo}` : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-function assetSrc(pageRoute: string, image: string) {
-  if (
-    /^(?:[a-z]+:)?\/\//i.test(image) || image.startsWith("data:") ||
-      image.startsWith("/")
-  ) {
-    return image;
-  }
-
-  return rootRelativeUrl(pageRoute, image);
-}
-
-function GroupBreadcrumbs({ route }: { route: string }) @{
-  const dir = route.split("/").slice(0, -1);
-  if (dir.length === 0) {
-    return null;
-  }
-
-  <p class="groupBreadcrumbs">
-    {dir.map(titleFromDir).join(" / ") as string}
-  </p>
-}
-
-function titleFromDir(dir: string) {
-  return dir.replace(/[-_]+/g, " ").replace(
-    /\S+/g,
-    (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`,
-  );
-}
-
-function PageNav({ pageNavigation }: { pageNavigation?: PageNavigation }) @{
-  if (!pageNavigation?.next) {
-    return null;
-  }
-
-  <nav class="pageNav" aria-label="Page navigation">
-    <p>
-      {"Next: "}
-      <a rel="next" href={pageNavigation.next.href}>
-        {pageNavigation.next.title as string}
-      </a>
-    </p>
-  </nav>
-}
-
-function NavList({
-  items,
-  currentRoute,
-  pageRoute,
-}: {
-  items: NavItem[];
-  currentRoute: string;
-  pageRoute: string;
-}) @{
-  <ul class="navList">
-    @for (const item of items; key item.route) {
-      <li class={item.children.length > 0 ? "navGroup" : undefined}>
-        @if (item.children.length > 0 && item.hasPage) {
-          <details
-            class="navDisclosure"
-            open={isActiveBranch(item, currentRoute)}
-          >
-            <summary class={item.route === currentRoute ? "active" : undefined}>
-              {item.title as string}
-            </summary>
-            <NavList
-              items={item.children}
-              currentRoute={currentRoute}
-              pageRoute={pageRoute}
-            />
-          </details>
-        } @else if (item.children.length > 0) {
-          <span class="navFolder">
-            {item.title as string}
-          </span>
-        } @else {
-          <a
-            class={item.route === currentRoute ? "active" : undefined}
-            href={relativeUrl(pageRoute, item.route)}
-          >
-            {item.title as string}
-          </a>
-        }
-        @if (item.children.length > 0 && !item.hasPage) {
-          <NavList
-            items={item.children}
-            currentRoute={currentRoute}
-            pageRoute={pageRoute}
-          />
-        }
-      </li>
-    }
-  </ul>
-}
-
-function isActiveBranch(item: NavItem, currentRoute: string): boolean {
-  return item.route === currentRoute ||
-    item.children.some((child) => isActiveBranch(child, currentRoute));
-}
-
-function Toc({
-  headings,
-  repositoryUrl,
-  repositoryLabel,
-}: {
-  headings: Heading[];
-  repositoryUrl?: string;
-  repositoryLabel?: string;
-}) @{
-  const tocHeadings = headings.filter(
-    (heading) => heading.depth > 1 && heading.depth < 4,
-  );
-  if (tocHeadings.length === 0 && !repositoryLabel) {
-    return null;
-  }
-
-  <nav aria-label="Table of contents">
-    @if (tocHeadings.length > 0) {
-      <>
-        <p class="tocTitle">
-          <span class="ti ti-align-left" aria-hidden="true" />
-          On this page
-        </p>
-        <div class="tocLinks" data-toc-links>
-          <span class="tocRail" aria-hidden="true" />
-          <span class="tocVisibility" data-toc-visibility aria-hidden="true" />
-          <ul>
-            @for (const heading of tocHeadings; key heading.id) {
-              <li class={`tocDepth${heading.depth}`}>
-                <a href={`#${heading.id}`}>
-                  {heading.text as string}
-                </a>
-              </li>
-            }
-          </ul>
-        </div>
-      </>
-    }
-    @if (repositoryUrl && repositoryLabel) {
-      <a
-        class="tocRepoLink"
-        href={repositoryUrl}
-        aria-label="View repository on GitHub"
-      >
-        <span class="repoIcon" aria-hidden="true" />
-        <span>
-          {repositoryLabel as string}
-        </span>
-      </a>
-    }
-  </nav>
-}