@supatent/supatent-docs 0.1.0

package/runtime/src/components/mobile-docs-menu.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import type { DocsNavNode } from "../framework/types";
+import { CloseIcon, MenuIcon } from "./icons";
+import { ThemeToggle } from "./theme-toggle";
+import { LocaleSwitcher } from "./locale-switcher";
+
+type TocItem = {
+  id: string;
+  label: string;
+  depth: number;
+};
+
+type MobileDocsMenuProps = {
+  navigation: DocsNavNode[];
+  activeSlug: string;
+  tocItems: TocItem[];
+  locales: string[];
+  defaultLocale: string;
+  basePath: string;
+};
+
+function MobileNavTree({
+  nodes,
+  activeSlug,
+  onNavigate,
+}: {
+  nodes: DocsNavNode[];
+  activeSlug: string;
+  onNavigate: () => void;
+}) {
+  return (
+    <ul className="docs-mobile-nav-tree">
+      {nodes.map((node) => {
+        const isCategory = node.path === null && node.children.length > 0;
+
+        if (isCategory) {
+          return (
+            <li key={node.id} className="docs-mobile-category">
+              <details open className="docs-mobile-category-details">
+                <summary className="docs-mobile-category-summary">
+                  <span>{node.title}</span>
+                  <span className="docs-mobile-category-chevron" aria-hidden="true">
+                    ▾
+                  </span>
+                </summary>
+                <ul className="docs-mobile-nav-tree">
+                  {node.children.map((child) => {
+                    const isChildActive = child.slug === activeSlug;
+                    return (
+                      <li key={child.id}>
+                        {child.path ? (
+                          <a
+                            href={child.path}
+                            className={
+                              isChildActive ? "docs-nav-link docs-nav-link-active" : "docs-nav-link"
+                            }
+                            aria-current={isChildActive ? "page" : undefined}
+                            onClick={onNavigate}
+                          >
+                            {child.title}
+                          </a>
+                        ) : null}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </details>
+            </li>
+          );
+        }
+
+        const isActive = node.slug === activeSlug;
+        return (
+          <li key={node.id}>
+            {node.path ? (
+              <a
+                href={node.path}
+                className={isActive ? "docs-nav-link docs-nav-link-active" : "docs-nav-link"}
+                aria-current={isActive ? "page" : undefined}
+                onClick={onNavigate}
+              >
+                {node.title}
+              </a>
+            ) : (
+              <span className="docs-nav-group-label">{node.title}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function MobileDocsMenu({
+  navigation,
+  activeSlug,
+  tocItems,
+  locales,
+  defaultLocale,
+  basePath,
+}: MobileDocsMenuProps) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const originalOverflow = document.body.style.overflow;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div className="docs-mobile-menu">
+      <button
+        type="button"
+        className="docs-mobile-menu-trigger"
+        aria-label="Open navigation menu"
+        aria-expanded={open}
+        aria-controls="docs-mobile-drawer"
+        onClick={() => setOpen(true)}
+      >
+        <MenuIcon />
+        <span>Menu</span>
+      </button>
+
+      {open ? (
+        <button
+          type="button"
+          className="docs-mobile-menu-overlay"
+          aria-label="Close menu"
+          onClick={() => setOpen(false)}
+        />
+      ) : null}
+
+      {open ? (
+        <aside
+          id="docs-mobile-drawer"
+          className="docs-mobile-menu-panel docs-mobile-menu-panel-open"
+        >
+          <div className="docs-mobile-menu-header">
+            <h2>Docs menu</h2>
+            <button
+              type="button"
+              className="icon-link docs-mobile-close"
+              aria-label="Close navigation menu"
+              onClick={() => setOpen(false)}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+
+          <section className="docs-mobile-menu-section">
+            <h3>Navigation</h3>
+            <MobileNavTree
+              nodes={navigation}
+              activeSlug={activeSlug}
+              onNavigate={() => setOpen(false)}
+            />
+          </section>
+
+          <section className="docs-mobile-menu-section">
+            <ul className="docs-mobile-toc">
+              {tocItems.map((item) => (
+                <li key={item.id} className={item.depth > 2 ? "toc-nested" : undefined}>
+                  <a href={`#${item.id}`} onClick={() => setOpen(false)}>
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          <section className="docs-mobile-menu-section">
+            <h3>Preferences</h3>
+            <div className="docs-mobile-preferences">
+              <ThemeToggle showLabel className="docs-mobile-theme-toggle" />
+              <LocaleSwitcher
+                locales={locales}
+                defaultLocale={defaultLocale}
+                basePath={basePath}
+                className="docs-mobile-locale-switcher"
+              />
+            </div>
+          </section>
+        </aside>
+      ) : null}
+    </div>
+  );
+}

package/runtime/src/components/site-header.tsx

@@ -0,0 +1,44 @@
+import { docsConfig } from "../docs.config";
+import { headers } from "next/headers";
+import { toDocsPagePath } from "../framework/url";
+import { ThemeToggle } from "./theme-toggle";
+import { LocaleSwitcher } from "./locale-switcher";
+import { getRuntimeLocales } from "../framework/runtime-locales";
+import { getSiteTitle } from "../framework/site-title";
+import { SiteSearch } from "./site-search";
+
+export async function SiteHeader() {
+  const requestHeaders = await headers();
+  const runtimeLocales = await getRuntimeLocales();
+  const requestedLocale = requestHeaders.get("x-docs-request-locale");
+  const siteTitle = await getSiteTitle(requestedLocale);
+  const homeDocsPath = toDocsPagePath(
+    docsConfig,
+    runtimeLocales.defaultLocale,
+  );
+
+  return (
+    <header className="topbar">
+      <div className="topbar-inner">
+        <a href={homeDocsPath} className="brand" aria-label="Home">
+          {siteTitle ? <span className="brand-text">{siteTitle}</span> : null}
+        </a>
+
+        <SiteSearch
+          locales={runtimeLocales.locales}
+          defaultLocale={runtimeLocales.defaultLocale}
+          basePath={docsConfig.routing.basePath}
+        />
+
+        <div className="topbar-actions">
+          <ThemeToggle />
+          <LocaleSwitcher
+            locales={runtimeLocales.locales}
+            defaultLocale={runtimeLocales.defaultLocale}
+            basePath={docsConfig.routing.basePath}
+          />
+        </div>
+      </div>
+    </header>
+  );
+}

package/runtime/src/components/site-search.tsx

@@ -0,0 +1,358 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  SEARCH_INDEX_PUBLIC_BASE_PATH,
+  type SearchIndexDocument,
+  type SearchIndexManifest,
+} from "../framework/search-index-types";
+
+type SiteSearchProps = {
+  locales: string[];
+  defaultLocale: string;
+  basePath: string;
+};
+
+type SearchResult = {
+  document: SearchIndexDocument;
+  score: number;
+};
+
+type AiAllResponse = {
+  requestedLocale?: string;
+  resolvedLocale?: string;
+  pages?: Array<{
+    slug: string;
+    title: string;
+    locale: string;
+    plainText?: string;
+    markdown?: string;
+    htmlPath?: string;
+  }>;
+};
+
+function normalizeForSearch(value: string): string {
+  return value.toLowerCase().replace(/[^\p{L}\p{N}\s/-]/gu, " ").replace(/\s+/g, " ").trim();
+}
+
+function toTokens(value: string): string[] {
+  return normalizeForSearch(value).split(" ").filter((token) => token.length > 1);
+}
+
+function trimSlashes(value: string): string {
+  return value.replace(/^\/+|\/+$/g, "");
+}
+
+function joinPath(...segments: Array<string | undefined>): string {
+  const cleaned = segments
+    .filter((segment): segment is string => Boolean(segment))
+    .map(trimSlashes)
+    .filter(Boolean);
+
+  return `/${cleaned.join("/")}`;
+}
+
+function resolveActiveLocale(
+  pathname: string,
+  locales: string[],
+  defaultLocale: string,
+): string {
+  const firstSegment = pathname.split("/").filter(Boolean)[0];
+  if (firstSegment && locales.includes(firstSegment)) {
+    return firstSegment;
+  }
+
+  return defaultLocale;
+}
+
+function scoreDocument(document: SearchIndexDocument, normalizedQuery: string, tokens: string[]): number {
+  const title = normalizeForSearch(document.title);
+  const slug = normalizeForSearch(document.slug);
+  const body = normalizeForSearch(document.plainText);
+
+  let score = 0;
+
+  if (title === normalizedQuery) score += 120;
+  if (title.includes(normalizedQuery)) score += 60;
+  if (slug.includes(normalizedQuery)) score += 30;
+  if (body.includes(normalizedQuery)) score += 20;
+
+  for (const token of tokens) {
+    if (title.includes(token)) {
+      score += 12;
+    } else if (slug.includes(token)) {
+      score += 8;
+    } else if (body.includes(token)) {
+      score += 3;
+    }
+  }
+
+  return score;
+}
+
+function buildResults(documents: SearchIndexDocument[], query: string): SearchResult[] {
+  const normalizedQuery = normalizeForSearch(query);
+  if (!normalizedQuery) {
+    return [];
+  }
+
+  const tokens = toTokens(query);
+
+  return documents
+    .map((document) => ({
+      document,
+      score: scoreDocument(document, normalizedQuery, tokens),
+    }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => {
+      if (a.score !== b.score) {
+        return b.score - a.score;
+      }
+      if (a.document.order !== b.document.order) {
+        return a.document.order - b.document.order;
+      }
+      return a.document.title.localeCompare(b.document.title);
+    })
+    .slice(0, 8);
+}
+
+export function SiteSearch({ locales, defaultLocale, basePath }: SiteSearchProps) {
+  const pathname = usePathname();
+  const activeLocale = useMemo(
+    () => resolveActiveLocale(pathname ?? "/", locales, defaultLocale),
+    [defaultLocale, locales, pathname],
+  );
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const manifestRef = useRef<Promise<SearchIndexManifest> | null>(null);
+  const documentsCacheRef = useRef<Map<string, SearchIndexDocument[]>>(new Map());
+
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+
+  useEffect(() => {
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const key = event.key.toLowerCase();
+      if ((event.ctrlKey || event.metaKey) && key === "k") {
+        event.preventDefault();
+        inputRef.current?.focus();
+        setOpen(true);
+        return;
+      }
+
+      if (key === "escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  async function getManifest(): Promise<SearchIndexManifest> {
+    if (!manifestRef.current) {
+      manifestRef.current = fetch(`${SEARCH_INDEX_PUBLIC_BASE_PATH}/manifest.json`, {
+        cache: "force-cache",
+      }).then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Missing search manifest (${response.status})`);
+        }
+
+        return (await response.json()) as SearchIndexManifest;
+      });
+    }
+
+    return manifestRef.current;
+  }
+
+  async function loadFromAiAll(locale: string): Promise<SearchIndexDocument[]> {
+    const route = joinPath(locale, basePath, "ai", "all");
+    const response = await fetch(route, { cache: "no-store" });
+    if (!response.ok) {
+      throw new Error(`Search source unavailable (${response.status})`);
+    }
+
+    const payload = (await response.json()) as AiAllResponse;
+
+    return (payload.pages ?? []).map((page, index) => ({
+      id: `${locale}:${page.slug}`,
+      locale,
+      slug: page.slug,
+      title: page.title,
+      path: joinPath(locale, basePath, page.slug),
+      order: index,
+      plainText: page.plainText ?? page.markdown ?? "",
+    }));
+  }
+
+  async function loadLocaleDocuments(locale: string): Promise<SearchIndexDocument[]> {
+    const cached = documentsCacheRef.current.get(locale);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      const manifest = await getManifest();
+      const entry = manifest.entries.find((item) => item.locale === locale);
+
+      if (entry) {
+        const indexResponse = await fetch(`${SEARCH_INDEX_PUBLIC_BASE_PATH}/${entry.file}`, {
+          cache: "force-cache",
+        });
+        if (!indexResponse.ok) {
+          throw new Error(`Failed to load index for locale ${locale}`);
+        }
+
+        const payload = (await indexResponse.json()) as { documents?: SearchIndexDocument[] };
+        const documents = payload.documents ?? [];
+        if (documents.length > 0) {
+          documentsCacheRef.current.set(locale, documents);
+          return documents;
+        }
+      }
+    } catch {
+      // Fall back to runtime docs endpoint when static search assets are unavailable.
+    }
+
+    const documents = await loadFromAiAll(locale);
+    documentsCacheRef.current.set(locale, documents);
+    return documents;
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const trimmed = query.trim();
+    if (trimmed.length < 2) {
+      setResults([]);
+      setError(null);
+      setLoading(false);
+      setActiveIndex(-1);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    const timeout = setTimeout(async () => {
+      try {
+        const documents = await loadLocaleDocuments(activeLocale);
+        if (cancelled) return;
+
+        const nextResults = buildResults(documents, trimmed);
+        setResults(nextResults);
+        setActiveIndex(nextResults.length > 0 ? 0 : -1);
+      } catch (searchError) {
+        if (cancelled) return;
+        const message =
+          searchError instanceof Error ? searchError.message : "Could not search right now";
+        setError(message);
+        setResults([]);
+        setActiveIndex(-1);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+          setOpen(true);
+        }
+      }
+    }, 140);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    };
+  }, [activeLocale, query]);
+
+  return (
+    <div className="search-wrap" ref={rootRef}>
+      <label className="search-box" aria-label="Search docs">
+        <span className="search-icon" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+            />
+          </svg>
+        </span>
+        <input
+          ref={inputRef}
+          placeholder="..."
+          value={query}
+          onFocus={() => setOpen(true)}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+              setActiveIndex((current) =>
+                results.length === 0 ? -1 : Math.min(current + 1, results.length - 1),
+              );
+              return;
+            }
+
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setActiveIndex((current) =>
+                results.length === 0 ? -1 : Math.max(current - 1, 0),
+              );
+              return;
+            }
+
+            if (event.key === "Enter" && activeIndex >= 0 && results[activeIndex]) {
+              event.preventDefault();
+              window.location.assign(results[activeIndex].document.path);
+            }
+          }}
+        />
+        <span className="kbd">Ctrl K</span>
+      </label>
+
+      {open && query.trim().length >= 2 ? (
+        <div className="search-results" role="listbox" aria-label="Search results">
+          {loading ? <div className="search-status">Searching…</div> : null}
+          {!loading && error ? <div className="search-status">{error}</div> : null}
+          {!loading && !error && results.length === 0 ? (
+            <div className="search-status">No results for this locale.</div>
+          ) : null}
+
+          {!loading && !error && results.length > 0 ? (
+            <ul className="search-results-list">
+              {results.map((result, index) => {
+                const isActive = index === activeIndex;
+                return (
+                  <li key={result.document.id}>
+                    <a
+                      href={result.document.path}
+                      className={isActive ? "search-result-link search-result-link-active" : "search-result-link"}
+                      onMouseEnter={() => setActiveIndex(index)}
+                    >
+                      <span className="search-result-title">{result.document.title}</span>
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/runtime/src/components/theme-toggle.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MoonIcon, SunIcon } from "./icons";
+
+type ThemePreference = "light" | "dark" | "system";
+type Theme = "light" | "dark";
+
+type ThemeToggleProps = {
+  className?: string;
+  showLabel?: boolean;
+};
+
+const STORAGE_KEY = "docs-theme";
+
+function getSystemTheme(): Theme {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolveTheme(preference: ThemePreference): Theme {
+  if (preference === "system") {
+    return getSystemTheme();
+  }
+
+  return preference;
+}
+
+function isThemePreference(value: string | null): value is ThemePreference {
+  return value === "light" || value === "dark" || value === "system";
+}
+
+export function ThemeToggle({ className, showLabel = false }: ThemeToggleProps) {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    const initial = isThemePreference(stored) ? stored : "system";
+    const resolved = resolveTheme(initial);
+    setTheme(resolved);
+    document.documentElement.dataset.theme = resolved;
+
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      const current = localStorage.getItem(STORAGE_KEY);
+      if (current === null || current === "system") {
+        const next = getSystemTheme();
+        setTheme(next);
+        document.documentElement.dataset.theme = next;
+      }
+    };
+
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className={className ? `icon-link theme-toggle-button ${className}` : "icon-link theme-toggle-button"}
+      aria-label="Toggle theme"
+      onClick={() => {
+        const nextTheme: Theme = theme === "dark" ? "light" : "dark";
+        setTheme(nextTheme);
+        localStorage.setItem(STORAGE_KEY, nextTheme);
+        document.documentElement.dataset.theme = nextTheme;
+      }}
+    >
+      {theme === "dark" ? <MoonIcon aria-hidden="true" /> : <SunIcon aria-hidden="true" />}
+      {showLabel ? (
+        <span className="theme-toggle-label">{theme === "dark" ? "Dark" : "Light"}</span>
+      ) : null}
+    </button>
+  );
+}