lildocs 0.1.19 → 0.1.21

package/README.md

@@ -31,7 +31,11 @@ disk or from any static file host.
 ## Documentation
 
 - [Getting started](https://aleclarson.github.io/lildocs/getting-started.html)
-- [Authoring docs](https://aleclarson.github.io/lildocs/guides/authoring.html)
+- [Writing content](https://aleclarson.github.io/lildocs/features/content.html)
+- [Navigation and page structure](https://aleclarson.github.io/lildocs/features/navigation.html)
+- [Local search](https://aleclarson.github.io/lildocs/features/search.html)
+- [Mermaid diagrams](https://aleclarson.github.io/lildocs/features/mermaid.html)
+- [Generated API reference](https://aleclarson.github.io/lildocs/features/api-reference.html)
 - [GitHub Pages deployment](https://aleclarson.github.io/lildocs/guides/github-pages.html)
 - [CLI reference](https://aleclarson.github.io/lildocs/reference/cli.html)
 - [Configuration reference](https://aleclarson.github.io/lildocs/reference/configuration.html)

package/dist/cli.mjs

@@ -1714,7 +1714,8 @@ async function buildSite(options) {
 		favicon: configOptions.favicon
 	});
 	const mermaid = await createMermaidRenderer({ themeConfig: themeToMermaidConfig(theme, fontResolution.themeFonts) });
-	const css = `${resolveThemeFontImports(theme, configOptions.fonts)}${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${mermaid.css}${backgroundResolution.css}${logoResolution.css}${baseCss}`;
+	const configuredCss = `${resolveThemeFontImports(theme, configOptions.fonts)}${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${mermaid.css}${backgroundResolution.css}${logoResolution.css}`;
+	const css = `${configuredCss}${baseCss}`;
 	const assets = [
 		...fontResolution.assets,
 		...backgroundResolution.assets,
@@ -1761,7 +1762,7 @@ async function buildSite(options) {
 				page,
 				nav,
 				pageNavigation: pageNavigation.get(page.route),
-				css,
+				css: configuredCss,
 				searchIndexJson,
 				logo: logoResolution.logo,
 				favicon: logoResolution.favicon,

package/dist/render/Layout.tsrx

@@ -34,7 +34,6 @@ export function Layout({
   clientStylePaths,
 }: LayoutProps) @{
   const transition = navigation?.transition ?? "fade";
-  const repoIconUrl = rootRelativeUrl(page.route, "assets/github-icon.svg");
   const issueUrl = issueUrlForRepository(repositoryUrl);
   const repositoryLabel = repositoryLabelForUrl(repositoryUrl);
 
@@ -82,11 +81,13 @@ export function Layout({
               type="button"
               aria-label="Collapse sidebar"
               aria-controls="lildocs-sidebar"
+              aria-expanded="false"
             >
               <span
-                class="ti ti-layout-sidebar-left-collapse"
+                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">
@@ -108,6 +109,18 @@ export function Layout({
               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">
@@ -142,7 +155,6 @@ export function Layout({
             headings={page.headings}
             repositoryUrl={repositoryUrl}
             repositoryLabel={repositoryLabel}
-            repoIconUrl={repoIconUrl}
           />
         </aside>
       </div>
@@ -265,8 +277,13 @@ function NavList({
 }) @{
   <ul class="navList">
     @for (const item of items; key item.route) {
+      const isReferenceGroup = item.route === "reference/index.html";
       <li class={item.children.length > 0 ? "navGroup" : undefined}>
-        @if (item.children.length > 0 && item.hasPage) {
+        @if (isReferenceGroup) {
+          <span class="navFolder">
+            {item.title as string}
+          </span>
+        } @else if (item.children.length > 0 && item.hasPage) {
           <details
             class="navDisclosure"
             open={isActiveBranch(item, currentRoute)}
@@ -292,7 +309,7 @@ function NavList({
             {item.title as string}
           </a>
         }
-        @if (item.children.length > 0 && !item.hasPage) {
+        @if (item.children.length > 0 && !item.hasPage && !isReferenceGroup) {
           <NavList
             items={item.children}
             currentRoute={currentRoute}
@@ -313,12 +330,10 @@ function Toc({
   headings,
   repositoryUrl,
   repositoryLabel,
-  repoIconUrl,
 }: {
   headings: Heading[];
   repositoryUrl?: string;
   repositoryLabel?: string;
-  repoIconUrl: string;
 }) @{
   const tocHeadings = headings.filter(
     (heading) => heading.depth > 1 && heading.depth < 4,
@@ -330,16 +345,23 @@ function Toc({
   <nav aria-label="Table of contents">
     @if (tocHeadings.length > 0) {
       <>
-        <p>On this page</p>
-        <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>
+        <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) {
@@ -348,11 +370,7 @@ function Toc({
         href={repositoryUrl}
         aria-label="View repository on GitHub"
       >
-        <span
-          class="repoIcon"
-          aria-hidden="true"
-          style={`--ld-repo-icon: url(${repoIconUrl})`}
-        />
+        <span class="repoIcon" aria-hidden="true" />
         <span>
           {repositoryLabel as string}
         </span>

package/dist/render/Search.tsrx

@@ -73,11 +73,16 @@ export function SearchBox({
       }
 
       document.documentElement.classList.remove("sidebar-collapsed");
+      document.dispatchEvent(new CustomEvent("lildocs:sidebar-menu-open"));
       inputRef.current?.focus();
       setOpen(Boolean(query.trim()));
     };
     const handleShortcut = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+      const key = event.key.toLowerCase();
+      const hasCommandModifier = event.metaKey || event.ctrlKey;
+      if (
+        hasCommandModifier && (key === "k" || event.shiftKey && key === "f")
+      ) {
         event.preventDefault();
         toggleSearch();
       }

package/dist/render/client.tsrx

@@ -6,6 +6,7 @@ import { preloadRelativeUrl, SearchBox } from "./Search.tsrx";
 import { initSectionHighlights } from "./section-highlight.js";
 import { initSidebar } from "./sidebar.js";
 import { initTableViewer } from "./table-viewer.js";
+import { initTocVisibility } from "./toc-visibility.js";
 import type { SearchEntry } from "./Search.tsrx";
 
 initCopyCode();
@@ -14,6 +15,7 @@ initNavigation();
 initSectionHighlights();
 initSidebar();
 initTableViewer();
+initTocVisibility();
 
 void mountSearch();
 

package/dist/render/heading-links.ts

@@ -1,7 +1,13 @@
 const headingSelector =
   ".content article h1[id], .content article h2[id], .content article h3[id], .content article h4[id], .content article h5[id], .content article h6[id]";
+const headingLinkIcons = {
+  link: '<span class="ti ti-link" aria-hidden="true"></span>',
+  check: '<span class="ti ti-check" aria-hidden="true"></span>',
+};
 
 export function initHeadingLinks() {
+  enhanceHeadingLinks();
+  document.addEventListener("lildocs:page-view", enhanceHeadingLinks);
   document.addEventListener("click", (event) => {
     if (!(event.target instanceof Element) || event.target.closest("a")) {
       return;
@@ -16,17 +22,46 @@ export function initHeadingLinks() {
   });
 }
 
+function enhanceHeadingLinks() {
+  const headings =
+    document.querySelectorAll<HTMLHeadingElement>(headingSelector);
+
+  for (const heading of Array.from(headings)) {
+    if (heading.querySelector(".headingLinkIcon")) {
+      continue;
+    }
+
+    const icon = document.createElement("button");
+    icon.type = "button";
+    icon.className = "headingLinkIcon";
+    icon.setAttribute("aria-label", "Copy link to heading");
+    icon.title = "Copy link to heading";
+    icon.innerHTML = headingLinkIcons.link;
+    heading.append(icon);
+  }
+}
+
 async function copyHeadingLink(heading: HTMLHeadingElement) {
   const url = new URL(window.location.href);
   url.hash = heading.tagName === "H1" ? "" : heading.id;
 
   try {
     await writeClipboard(url.href);
-    heading.classList.add("headingLinkCopied");
-    window.setTimeout(
-      () => heading.classList.remove("headingLinkCopied"),
-      1600,
-    );
+    const icon = heading.querySelector<HTMLButtonElement>(".headingLinkIcon");
+    if (!icon) {
+      return;
+    }
+
+    icon.classList.add("headingLinkCopied");
+    icon.innerHTML = headingLinkIcons.check;
+    icon.setAttribute("aria-label", "Copied");
+    icon.title = "Copied";
+    window.setTimeout(() => {
+      icon.classList.remove("headingLinkCopied");
+      icon.innerHTML = headingLinkIcons.link;
+      icon.setAttribute("aria-label", "Copy link to heading");
+      icon.title = "Copy link to heading";
+    }, 1600);
   } catch {}
 }
 

package/dist/render/sidebar.ts

@@ -14,6 +14,17 @@ export function initSidebar() {
     return;
   }
 
+  const mobileQuery = window.matchMedia("(max-width: 860px)");
+
+  const setMenuOpen = (open: boolean) => {
+    document.documentElement.classList.toggle("sidebar-menu-open", open);
+    collapseButton.setAttribute("aria-expanded", String(open));
+    collapseButton.setAttribute(
+      "aria-label",
+      open ? "Close navigation menu" : "Open navigation menu",
+    );
+  };
+
   const setCollapsed = (collapsed: boolean) => {
     document.documentElement.classList.toggle("sidebar-collapsed", collapsed);
     collapseButton.setAttribute(
@@ -22,10 +33,61 @@ export function initSidebar() {
     );
   };
 
-  collapseButton.addEventListener("click", () => setCollapsed(true));
+  const syncResponsiveState = () => {
+    document.documentElement.classList.remove("sidebar-menu-open");
+    collapseButton.setAttribute("aria-expanded", "false");
+    collapseButton.setAttribute(
+      "aria-label",
+      mobileQuery.matches ? "Open navigation menu" : "Collapse sidebar",
+    );
+  };
+
+  collapseButton.addEventListener("click", () => {
+    if (mobileQuery.matches) {
+      setMenuOpen(
+        !document.documentElement.classList.contains("sidebar-menu-open"),
+      );
+      return;
+    }
+    setCollapsed(true);
+  });
   expandButton.addEventListener("click", () => setCollapsed(false));
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && mobileQuery.matches) {
+      setMenuOpen(false);
+      return;
+    }
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "b") {
+      event.preventDefault();
+      if (mobileQuery.matches) {
+        setMenuOpen(
+          !document.documentElement.classList.contains("sidebar-menu-open"),
+        );
+        return;
+      }
+      setCollapsed(
+        !document.documentElement.classList.contains("sidebar-collapsed"),
+      );
+    }
+  });
+  sidebar.addEventListener("click", (event) => {
+    if (
+      mobileQuery.matches &&
+      event.target instanceof Element &&
+      event.target.closest("a[href]")
+    ) {
+      setMenuOpen(false);
+    }
+  });
   searchButton.addEventListener("click", () => {
     setCollapsed(false);
     document.dispatchEvent(new CustomEvent("lildocs:search-toggle"));
   });
+  document.addEventListener("lildocs:sidebar-menu-open", () => {
+    if (mobileQuery.matches) {
+      setMenuOpen(true);
+    }
+  });
+  mobileQuery.addEventListener("change", syncResponsiveState);
+  syncResponsiveState();
 }

package/dist/render/styles.css

@@ -129,6 +129,14 @@ body {
   outline-offset: 2px;
 }
 
+.sidebarMenuIcon {
+  display: none;
+}
+
+.sidebarRepoLink {
+  display: none;
+}
+
 .sidebarFloatingControls {
   position: fixed;
   top: 24px;
@@ -185,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;
 }
 
@@ -202,6 +211,7 @@ html.is-animating .transition-scale {
 .content h5,
 .content h6 {
   font-family: var(--ld-font-heading);
+  line-height: 1.2;
 }
 
 .content article :where(h1, h2, h3, h4, h5, h6) {
@@ -210,19 +220,46 @@ html.is-animating .transition-scale {
 }
 
 .content article :where(h1, h2, h3, h4, h5, h6)[id] {
-  cursor: copy;
+  cursor: pointer;
 }
 
-.content article :where(h1, h2, h3, h4, h5, h6).headingLinkCopied::after {
-  margin-left: 0.6em;
-  color: var(--ld-color-accent);
-  content: "Link copied";
-  font-family: var(--ld-font-body);
-  font-size: 0.7rem;
-  font-weight: 600;
+.headingLinkIcon {
+  appearance: none;
+  margin-left: 0.35em;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  font-size: 0.7em;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 150ms ease;
   vertical-align: middle;
 }
 
+.content
+  article
+  :where(h1, h2, h3, h4, h5, h6)[id]:is(:hover, :focus-within)
+  .headingLinkIcon {
+  opacity: 0.55;
+}
+
+.content
+  article
+  :where(h1, h2, h3, h4, h5, h6)[id]
+  .headingLinkIcon:is(:hover, :focus-visible) {
+  opacity: 1;
+}
+
+.content
+  article
+  :where(h1, h2, h3, h4, h5, h6)[id]
+  .headingLinkIcon.headingLinkCopied {
+  color: var(--ld-color-accent);
+  opacity: 1;
+}
+
 .content article :where(h2, h3).sectionHighlight {
   animation: section-highlight 2.4s ease-out;
   border-radius: 6px;
@@ -248,6 +285,7 @@ html.is-animating .transition-scale {
 
 .content article p {
   margin-block: 1.25em;
+  line-height: 1.9;
 }
 
 .content img {
@@ -261,7 +299,7 @@ html.is-animating .transition-scale {
 }
 
 .groupBreadcrumbs {
-  margin-block-end: -4px !important;
+  margin-block-end: 0px !important;
   color: var(--ld-color-accent);
   font-size: 80%;
   font-weight: 700;
@@ -269,6 +307,7 @@ html.is-animating .transition-scale {
 
 .content article li {
   margin-block: 1em;
+  line-height: 1.9;
 }
 
 .content article > div > ul {
@@ -294,7 +333,7 @@ html.is-animating .transition-scale {
 
 .content article h1 + blockquote {
   margin: 0 0 1.5em;
-  margin-top: -1.1em;
+  margin-top: -0.6rem;
   padding: 0;
   border-left: 0;
   border-radius: 0;
@@ -308,6 +347,10 @@ html.is-animating .transition-scale {
   line-height: 1.45;
 }
 
+.content article h1 + blockquote > p {
+  line-height: 1.6;
+}
+
 .content blockquote > :first-child {
   margin-top: 0;
 }
@@ -365,13 +408,24 @@ html.is-animating .transition-scale {
 
 .navList a,
 .navDisclosure summary {
-  padding-left: 7px;
-  border-left: 1px solid
-    color-mix(in srgb, var(--ld-color-border) 65%, transparent);
+  position: relative;
+  padding-left: 9px;
   color: var(--ld-color-muted-text);
   text-decoration: none;
 }
 
+.navList a::before,
+.navDisclosure summary::before {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: 0;
+  width: 2px;
+  border-radius: 1px;
+  background: color-mix(in srgb, var(--ld-color-border) 65%, transparent);
+  content: "";
+}
+
 .navDisclosure summary {
   display: flex;
   align-items: center;
@@ -410,11 +464,15 @@ html.is-animating .transition-scale {
 
 .navList a.active,
 .navDisclosure summary.active {
-  border-left-color: var(--ld-color-accent);
   color: var(--ld-color-accent);
   font-weight: 550;
 }
 
+.navList a.active::before,
+.navDisclosure summary.active::before {
+  background: var(--ld-color-accent);
+}
+
 .content pre {
   position: relative;
   overflow: auto;
@@ -741,16 +799,64 @@ html.mermaidFullscreenOpen {
   font-weight: 700;
 }
 
-.toc ul {
+.tocTitle {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.tocLinks {
+  position: relative;
+  margin-block: 1em;
+  margin-left: 5px;
+}
+
+.tocLinks ul {
   display: grid;
   gap: 9px;
+  margin: 0;
   list-style: none;
-  padding-left: 0;
+  padding-left: 16px;
+}
+
+.tocRail,
+.tocVisibility {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.tocRail {
+  bottom: 0;
+  background: var(--ld-color-border);
+}
+
+.tocVisibility {
+  top: var(--ld-toc-visibility-top, 0);
+  z-index: 1;
+  height: var(--ld-toc-visibility-height, 0);
+  background: var(--ld-color-accent);
+  opacity: 0;
+  transition:
+    top 180ms var(--ld-navigation-easing),
+    height 180ms var(--ld-navigation-easing),
+    opacity 120ms ease;
+}
+
+.tocVisibility.isVisible {
+  opacity: 1;
 }
 
 .toc a {
+  display: block;
+  overflow: hidden;
   color: var(--ld-color-muted-text);
   text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tocDepth3 {
@@ -762,8 +868,8 @@ html.mermaidFullscreenOpen {
   width: 20px;
   height: 20px;
   background: currentColor;
-  mask: var(--ld-repo-icon) center / contain no-repeat;
-  -webkit-mask: var(--ld-repo-icon) center / contain no-repeat;
+  mask: url("./github-icon.svg") center / contain no-repeat;
+  -webkit-mask: url("./github-icon.svg") center / contain no-repeat;
 }
 
 .searchBox {
@@ -941,6 +1047,10 @@ html.mermaidFullscreenOpen {
   text-decoration: none;
 }
 
+.tocRepoLink:first-child {
+  border-top: 0;
+}
+
 .tocRepoLink:hover,
 .tocRepoLink:focus-visible {
   color: var(--ld-color-link);
@@ -980,19 +1090,102 @@ html.mermaidFullscreenOpen {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .tocVisibility {
+    transition: none;
+  }
+}
+
 @media (max-width: 860px) {
+  html.sidebar-menu-open,
+  html.sidebar-menu-open body {
+    overflow: hidden;
+  }
+
   .pageShell {
     display: block;
   }
 
+  .content {
+    padding-block-start: 25px;
+  }
+
   .sidebar {
-    position: static;
+    position: sticky;
+    top: 0;
+    z-index: 30;
     height: auto;
     max-height: none;
+    overflow: visible;
+    padding: 0;
     border-bottom: 1px solid var(--ld-color-border);
     border-right: 0;
   }
 
+  .sidebarContents {
+    display: block;
+  }
+
+  .sidebarHeader {
+    min-height: 76px;
+    padding: 20px;
+    background: var(--ld-color-sidebar-background);
+  }
+
+  .sidebarCollapseIcon {
+    display: none;
+  }
+
+  .sidebarMenuIcon {
+    display: block;
+  }
+
+  .sidebarContents > .searchBox,
+  #lildocs-sidebar-navigation {
+    display: none;
+  }
+
+  html.sidebar-menu-open .sidebar {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow: auto;
+    overscroll-behavior: contain;
+    border-bottom: 0;
+  }
+
+  html.sidebar-menu-open .sidebarHeader {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    border-bottom: 1px solid var(--ld-color-border);
+  }
+
+  html.sidebar-menu-open .sidebarContents > .searchBox {
+    display: block;
+    margin: 20px;
+  }
+
+  html.sidebar-menu-open #lildocs-sidebar-navigation {
+    display: block;
+    padding: 0 20px 32px;
+  }
+
+  html.sidebar-menu-open .sidebarRepoLink {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    margin: 0 20px 32px;
+    padding-top: 16px;
+    border-top: 1px solid var(--ld-color-border);
+    color: var(--ld-color-text);
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+
   .searchResults {
     position: absolute;
     top: calc(100% + 8px);
@@ -1009,8 +1202,6 @@ html.mermaidFullscreenOpen {
   }
 
   .toc {
-    position: static;
-    max-height: none;
-    border-bottom: 1px solid var(--ld-color-border);
+    display: none;
   }
 }

package/dist/render/tabler-icons.css

@@ -17,6 +17,18 @@
   --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-link {
+  --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%22M9%2015l6%20-6%22%2F%3E%3Cpath%20d%3D%22M11%206l.463%20-.536a5%205%200%200%201%207.071%207.072l-.534%20.464%22%2F%3E%3Cpath%20d%3D%22M13%2018l-.397%20.534a5.068%205.068%200%200%201%20-7.127%200a4.972%204.972%200%200%201%200%20-7.071l.524%20-.463%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.ti-check {
+  --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%2012l5%205l10%20-10%22%2F%3E%3C%2Fsvg%3E");
+}
+
+.ti-align-left {
+  --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%22M4%206l16%200%22%2F%3E%3Cpath%20d%3D%22M4%2012l10%200%22%2F%3E%3Cpath%20d%3D%22M4%2018l14%200%22%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");
 }
@@ -33,6 +45,10 @@
   --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-menu-2 {
+  --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%206l16%200%22%2F%3E%3Cpath%20d%3D%22M4%2012l16%200%22%2F%3E%3Cpath%20d%3D%22M4%2018l16%200%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/toc-visibility.ts

@@ -0,0 +1,78 @@
+let animationFrame: number | undefined;
+
+export function initTocVisibility() {
+  window.addEventListener("scroll", scheduleTocVisibilityUpdate, {
+    passive: true,
+  });
+  window.addEventListener("resize", scheduleTocVisibilityUpdate);
+  document.addEventListener("lildocs:page-view", scheduleTocVisibilityUpdate);
+  void document.fonts?.ready.then(scheduleTocVisibilityUpdate);
+  scheduleTocVisibilityUpdate();
+}
+
+function scheduleTocVisibilityUpdate() {
+  if (animationFrame !== undefined) {
+    return;
+  }
+
+  animationFrame = window.requestAnimationFrame(() => {
+    animationFrame = undefined;
+    updateTocVisibility();
+  });
+}
+
+function updateTocVisibility() {
+  const container = document.querySelector<HTMLElement>("[data-toc-links]");
+  const indicator = container?.querySelector<HTMLElement>(
+    "[data-toc-visibility]",
+  );
+  if (!container || !indicator) {
+    return;
+  }
+
+  const items = Array.from(
+    container.querySelectorAll<HTMLAnchorElement>('a[href^="#"]'),
+  )
+    .map((link) => {
+      const heading = headingForLink(link);
+      return heading ? { heading, link } : undefined;
+    })
+    .filter((item): item is { heading: HTMLElement; link: HTMLAnchorElement } =>
+      Boolean(item),
+    );
+  const visibleItems = items.filter(({ heading }) => {
+    const bounds = heading.getBoundingClientRect();
+    return bounds.bottom > 0 && bounds.top < window.innerHeight;
+  });
+  if (visibleItems.length === 0 || visibleItems.length === items.length) {
+    indicator.classList.remove("isVisible");
+    return;
+  }
+
+  const containerBounds = container.getBoundingClientRect();
+  const firstBounds = visibleItems[0].link.getBoundingClientRect();
+  const lastBounds =
+    visibleItems.at(-1)?.link.getBoundingClientRect() ?? firstBounds;
+  indicator.style.setProperty(
+    "--ld-toc-visibility-top",
+    `${firstBounds.top - containerBounds.top}px`,
+  );
+  indicator.style.setProperty(
+    "--ld-toc-visibility-height",
+    `${lastBounds.bottom - firstBounds.top}px`,
+  );
+  indicator.classList.add("isVisible");
+}
+
+function headingForLink(link: HTMLAnchorElement): HTMLElement | null {
+  const id = link.hash.slice(1);
+  if (!id) {
+    return null;
+  }
+
+  try {
+    return document.getElementById(decodeURIComponent(id));
+  } catch {
+    return document.getElementById(id);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {
@@ -28,7 +28,7 @@
     "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",