idcmd 0.0.4 → 0.0.6

package/templates/default/site/{public/_idcmd/right-rail-scrollspy.js → client/runtime/right-rail-scrollspy.ts}

@@ -3,15 +3,16 @@ const TOC_LINK_SELECTOR = 'a[data-toc-link="1"][href^="#"]';
 const TOC_SCROLL_CONTAINER_SELECTOR = '[data-toc-scroll-container="1"]';
 
 const NAVBAR_GAP_PX = 16;
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), max);
 
-const getTopOffset = () => {
+const getTopOffset = (): number => {
   const header = document.querySelector("header");
   const headerHeight = header?.getBoundingClientRect().height ?? 0;
   return Math.ceil(headerHeight + NAVBAR_GAP_PX);
 };
 
-const decodeAnchorId = (href) => {
+const decodeAnchorId = (href: string | null): string | null => {
   if (!href?.startsWith("#")) {
     return null;
   }
@@ -28,7 +29,13 @@ const decodeAnchorId = (href) => {
   }
 };
 
-const toEntry = (link) => {
+interface TocEntry {
+  heading: HTMLElement;
+  link: HTMLAnchorElement;
+  y: number;
+}
+
+const toEntry = (link: HTMLAnchorElement): TocEntry | null => {
   const id = decodeAnchorId(link.getAttribute("href"));
   if (!id) {
     return null;
@@ -44,32 +51,39 @@ const toEntry = (link) => {
   return { heading, link, y: 0 };
 };
 
-const buildEntries = (tocRoot) =>
+const buildEntries = (tocRoot: Element): TocEntry[] =>
   [...tocRoot.querySelectorAll(TOC_LINK_SELECTOR)]
+    .filter(
+      (link): link is HTMLAnchorElement => link instanceof HTMLAnchorElement
+    )
     .map(toEntry)
-    .filter((entry) => entry !== null);
+    .filter((entry): entry is TocEntry => entry !== null);
 
-const measureEntries = (entries) => {
+const measureEntries = (entries: TocEntry[]): void => {
   for (const entry of entries) {
     entry.y = entry.heading.getBoundingClientRect().top + window.scrollY;
   }
 };
 
-const setScrollMarginTop = (topOffset) => {
+const setScrollMarginTop = (topOffset: number): void => {
   document.documentElement.style.setProperty(
     "--scroll-margin-top",
     `${topOffset}px`
   );
 };
 
-const binarySearchLastAtOrAbove = (entries, anchorLine) => {
+const binarySearchLastAtOrAbove = (
+  entries: TocEntry[],
+  anchorLine: number
+): number => {
   let lo = 0;
   let hi = entries.length;
 
   // Find the first entry with y > anchorLine, then step back one.
   while (lo < hi) {
     const mid = Math.floor((lo + hi) / 2);
-    if (entries[mid].y <= anchorLine) {
+    const midY = entries[mid]?.y ?? Number.POSITIVE_INFINITY;
+    if (midY <= anchorLine) {
       lo = mid + 1;
     } else {
       hi = mid;
@@ -79,28 +93,30 @@ const binarySearchLastAtOrAbove = (entries, anchorLine) => {
   return lo - 1;
 };
 
-const findActiveIndex = (entries, topOffset) => {
+const findActiveIndex = (entries: TocEntry[], topOffset: number): number => {
   const anchorLine = window.scrollY + topOffset + 1;
   const best = binarySearchLastAtOrAbove(entries, anchorLine);
   return Math.max(0, best);
 };
 
-const parseTransformValues = (transform, prefix) =>
+const parseTransformValues = (transform: string, prefix: string): number[] =>
   transform
     .slice(prefix.length, -1)
     .split(",")
     .map((value) => Number.parseFloat(value.trim()));
 
-const getNumberAtIndex = (values, index) => {
-  const [value] = values.slice(index, index + 1);
+const getNumberAtIndex = (values: number[], index: number): number => {
+  const value = values[index] ?? Number.NaN;
   return Number.isFinite(value) ? value : 0;
 };
 
-const getMatrix3dTranslateY = (values) => getNumberAtIndex(values, 13);
+const getMatrix3dTranslateY = (values: number[]): number =>
+  getNumberAtIndex(values, 13);
 
-const getMatrixTranslateY = (values) => getNumberAtIndex(values, 5);
+const getMatrixTranslateY = (values: number[]): number =>
+  getNumberAtIndex(values, 5);
 
-const getComputedTranslateY = (element) => {
+const getComputedTranslateY = (element: Element): number => {
   const { transform } = window.getComputedStyle(element);
   if (!transform || transform === "none") {
     return 0;
@@ -119,16 +135,20 @@ const getComputedTranslateY = (element) => {
   return 0;
 };
 
-const setTranslateY = (element, next) => {
+const setTranslateY = (element: HTMLElement, next: number): void => {
   element.style.transform = `translate3d(0, ${next}px, 0)`;
 };
 
-const getElementCenterY = (element) => {
+const getElementCenterY = (element: Element): number => {
   const rect = element.getBoundingClientRect();
   return rect.top + rect.height / 2;
 };
 
-const getCenteredTranslateY = (scrollContainer, list, link) => {
+const getCenteredTranslateY = (
+  scrollContainer: HTMLElement,
+  list: HTMLElement,
+  link: HTMLAnchorElement
+): number => {
   const containerHeight = scrollContainer.clientHeight;
   const listHeight = list.scrollHeight;
 
@@ -142,7 +162,20 @@ const getCenteredTranslateY = (scrollContainer, list, link) => {
   return clamp(currentTranslate + delta, minTranslate, 0);
 };
 
-const centerLinkIfNeeded = (state, link) => {
+interface ScrollSpyState {
+  activeIndex: number;
+  centerActiveItem: boolean;
+  entries: TocEntry[];
+  isTicking: boolean;
+  scrollContainer: HTMLElement | null;
+  tocList: HTMLElement | null;
+  topOffset: number;
+}
+
+const centerLinkIfNeeded = (
+  state: ScrollSpyState,
+  link: HTMLAnchorElement
+): void => {
   const { scrollContainer, tocList } = state;
   if (!scrollContainer || !tocList) {
     return;
@@ -157,7 +190,14 @@ const centerLinkIfNeeded = (state, link) => {
   setTranslateY(tocList, next);
 };
 
-const setActiveLink = (state, index) => {
+const setCurrentLocationAttr = (entry: TocEntry | undefined): void => {
+  if (!entry) {
+    return;
+  }
+  entry.link.setAttribute("aria-current", "location");
+};
+
+const setActiveLink = (state: ScrollSpyState, index: number): void => {
   if (index === state.activeIndex) {
     return;
   }
@@ -167,18 +207,18 @@ const setActiveLink = (state, index) => {
 
   state.activeIndex = index;
   const current = state.entries[state.activeIndex];
-  current.link.setAttribute("aria-current", "location");
+  setCurrentLocationAttr(current);
 
-  if (state.centerActiveItem) {
+  if (state.centerActiveItem && current) {
     centerLinkIfNeeded(state, current.link);
   }
 };
 
-const updateActive = (state) => {
+const updateActive = (state: ScrollSpyState): void => {
   setActiveLink(state, findActiveIndex(state.entries, state.topOffset));
 };
 
-const scheduleUpdate = (state) => {
+const scheduleUpdate = (state: ScrollSpyState): void => {
   if (state.isTicking) {
     return;
   }
@@ -190,7 +230,7 @@ const scheduleUpdate = (state) => {
   });
 };
 
-const refreshLayout = (state) => {
+const refreshLayout = (state: ScrollSpyState): void => {
   state.topOffset = getTopOffset();
   setScrollMarginTop(state.topOffset);
   measureEntries(state.entries);
@@ -204,7 +244,7 @@ const refreshLayout = (state) => {
   }
 };
 
-const createState = () => {
+const createState = (): ScrollSpyState | null => {
   const { body } = document;
   const tocRoot = document.querySelector(TOC_ROOT_SELECTOR);
   const entries = tocRoot ? buildEntries(tocRoot) : [];
@@ -226,13 +266,14 @@ const createState = () => {
     centerActiveItem,
     entries,
     isTicking: false,
-    scrollContainer,
-    tocList,
+    scrollContainer:
+      scrollContainer instanceof HTMLElement ? scrollContainer : null,
+    tocList: tocList instanceof HTMLElement ? tocList : null,
     topOffset: getTopOffset(),
   };
 };
 
-const start = (state) => {
+const start = (state: ScrollSpyState): void => {
   // Disable independent TOC scrolling whenever scrollspy is active.
   // The TOC list position is controlled by JS (either centered or left as-is).
   document.body.dataset.tocFollow = "1";
@@ -250,7 +291,7 @@ const start = (state) => {
   refreshLayout(state);
 };
 
-const init = () => {
+const init = (): void => {
   const state = createState();
   if (!state) {
     return;

package/templates/default/site/client/search-page.tsx

@@ -1 +1,87 @@
-export { renderSearchPageContent } from "idcmd/client";
+import type { SearchPageProps } from "idcmd/client";
+import type { JSX } from "preact";
+
+import { render as renderToString } from "preact-render-to-string";
+
+const ResultItem = ({
+  result,
+}: {
+  result: SearchPageProps["results"][number];
+}): JSX.Element => (
+  <li class="rounded-md border border-border p-3">
+    <a
+      href={result.slug}
+      class="font-medium underline decoration-border underline-offset-4"
+    >
+      {result.title}
+    </a>
+    <p class="mt-1 text-sm text-muted-foreground">{result.description}</p>
+  </li>
+);
+
+const EmptyState = ({
+  minQueryLength,
+  topPages,
+}: {
+  minQueryLength: number;
+  topPages: SearchPageProps["topPages"];
+}): JSX.Element => (
+  <div class="text-sm text-muted-foreground">
+    <p>{`Type at least ${minQueryLength} characters to search.`}</p>
+    {topPages.length > 0 ? (
+      <>
+        <p class="mt-4 font-medium text-foreground">Popular pages</p>
+        <ul class="mt-2 space-y-1">
+          {topPages.map((page) => (
+            <li key={page.href}>
+              <a
+                href={page.href}
+                class="underline decoration-border underline-offset-4"
+              >
+                {page.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </>
+    ) : null}
+  </div>
+);
+
+const SearchPage = ({
+  query,
+  minQueryLength,
+  results,
+  topPages,
+}: SearchPageProps): JSX.Element => {
+  const trimmed = query.trim();
+  const showResults = trimmed.length >= minQueryLength;
+
+  return (
+    <section class="not-prose rounded-lg border border-border bg-card/30 p-4">
+      <h1 class="text-lg font-semibold">Search</h1>
+      {showResults ? (
+        <p class="mt-2 text-sm text-muted-foreground">
+          {results.length === 0
+            ? `No matches for "${trimmed}".`
+            : `Found ${results.length} result(s) for "${trimmed}".`}
+        </p>
+      ) : (
+        <div class="mt-2">
+          <EmptyState minQueryLength={minQueryLength} topPages={topPages} />
+        </div>
+      )}
+
+      {showResults ? (
+        <ul class="mt-4 space-y-2">
+          {results.map((result) => (
+            <ResultItem key={result.slug} result={result} />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+};
+
+export const renderSearchPageContent = (props: SearchPageProps): string =>
+  renderToString(<SearchPage {...props} />);

package/templates/default/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",