diff --git a/package.json b/package.json index c7a4a8e1..039e6baa 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "generate": "graphql-codegen --config codegen.ts" }, "dependencies": { + "@github/combobox-nav": "^3.0.1", "@lucide/astro": "^1.14.0", "graphql": "^16.13.2", "graphql-request": "^7.4.0", @@ -34,8 +35,8 @@ "@graphql-codegen/typescript-operations": "^6.0.0", "@tailwindcss/typography": "^0.5.19", "@tailwindcss/vite": "^4.2.4", - "@types/node": "25.6.0", "@types/markdown-it": "^14.1.2", + "@types/node": "25.6.0", "@types/semver": "^7.7.1", "astro": "^6.1.6", "tailwindcss": "4.2.4", diff --git a/src/components/Header.astro b/src/components/Header.astro index bc08c93a..c1944781 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -21,17 +21,29 @@ import ExternalLink from "./ui/ExternalLink.astro";
-
- - +
+
+ + +
+
@@ -57,4 +69,5 @@ import ExternalLink from "./ui/ExternalLink.astro";
+ diff --git a/src/lib/search.ts b/src/lib/search.ts index d584295c..e01aa564 100644 --- a/src/lib/search.ts +++ b/src/lib/search.ts @@ -72,6 +72,37 @@ export function filterPackages( ); } +export function getPackageSuggestions( + packages: PackageListItem[], + query: string, + limit: number, +): PackageListItem[] { + const normalized = query.trim().toLowerCase(); + if (normalized === "" || limit <= 0) { + return []; + } + + const exact: PackageListItem[] = []; + const prefix: PackageListItem[] = []; + const substring: PackageListItem[] = []; + + for (const pack of packages) { + if (pack.href === null) { + continue; + } + const name = pack.name.toLowerCase(); + if (name === normalized) { + exact.push(pack); + } else if (name.startsWith(normalized)) { + prefix.push(pack); + } else if (name.includes(normalized)) { + substring.push(pack); + } + } + + return [...exact, ...prefix, ...substring].slice(0, limit); +} + export function paginateItems( items: T[], page: number, diff --git a/src/scripts/header-typeahead.ts b/src/scripts/header-typeahead.ts new file mode 100644 index 00000000..19fa4f5e --- /dev/null +++ b/src/scripts/header-typeahead.ts @@ -0,0 +1,226 @@ +import Combobox from "@github/combobox-nav"; +import { SEARCH_PATH } from "../lib/constants"; +import { getPackageSuggestions } from "../lib/search"; +import type { PackageListItem } from "../lib/types"; + +const SUGGESTION_LIMIT = 8; +const INPUT_DEBOUNCE_MS = 150; +const BLUR_HIDE_DELAY_MS = 150; + +if (!isSearchPage()) { + initHeaderTypeahead(); +} + +function isSearchPage(): boolean { + const path = window.location.pathname.replace(/\/+$/, ""); + return path === SEARCH_PATH; +} + +function initHeaderTypeahead() { + const inputEl = document.getElementById("site-search"); + const listEl = document.getElementById("site-search-suggestions"); + + if ( + !(inputEl instanceof HTMLInputElement) || + !(listEl instanceof HTMLUListElement) + ) { + return; + } + + const input: HTMLInputElement = inputEl; + const list: HTMLUListElement = listEl; + + input.setAttribute("role", "combobox"); + input.setAttribute("aria-autocomplete", "list"); + input.setAttribute("aria-expanded", "false"); + input.setAttribute("aria-controls", list.id); + input.setAttribute("aria-haspopup", "listbox"); + + const combobox = new Combobox(input, list, { + tabInsertsSuggestions: false, + firstOptionSelectionMode: "none", + }); + let cache: Promise | null = null; + let pendingQuery = ""; + let started = false; + + function fetchPackages(): Promise { + if (cache === null) { + cache = fetch("/packages.json", { + headers: { accept: "application/json" }, + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + return response.json() as Promise; + }) + .catch((error: Error) => { + cache = null; + throw error; + }); + } + return cache; + } + + function show() { + if (list.hidden) { + list.hidden = false; + input.setAttribute("aria-expanded", "true"); + } + if (!started) { + combobox.start(); + started = true; + } + } + + function hide() { + if (started) { + combobox.clearSelection(); + combobox.stop(); + started = false; + } + if (!list.hidden) { + list.hidden = true; + input.setAttribute("aria-expanded", "false"); + } + input.removeAttribute("aria-activedescendant"); + } + + function createOption( + pack: PackageListItem & { href: string }, + index: number, + ): HTMLLIElement { + const item = document.createElement("li"); + item.id = `site-search-suggestion-${index}`; + item.setAttribute("role", "option"); + item.dataset.href = pack.href; + item.className = + "aria-selected:bg-sky-500/20 aria-selected:text-white hover:bg-sky-500/10"; + + const link = document.createElement("a"); + link.href = pack.href; + link.tabIndex = -1; + link.className = "block px-4 py-2 text-sm text-slate-200 transition"; + + const name = document.createElement("span"); + name.className = "block truncate font-semibold"; + name.textContent = pack.name; + link.appendChild(name); + + const description = pack.description.trim(); + const versionText = pack.version ? `v${pack.version}` : ""; + const meta = [versionText, description].filter(Boolean).join(" — "); + if (meta) { + const metaLine = document.createElement("span"); + metaLine.className = "block truncate text-xs text-slate-400"; + metaLine.textContent = meta; + link.appendChild(metaLine); + } + + item.appendChild(link); + return item; + } + + async function update() { + const query = input.value.trim(); + pendingQuery = query; + + if (query === "") { + list.replaceChildren(); + hide(); + return; + } + + let packages: PackageListItem[]; + try { + packages = await fetchPackages(); + } catch { + hide(); + return; + } + + if (pendingQuery !== query) { + return; + } + + const suggestions = getPackageSuggestions( + packages, + query, + SUGGESTION_LIMIT, + ); + + if (suggestions.length === 0) { + list.replaceChildren(); + hide(); + return; + } + + const linkable = suggestions.filter( + (pack): pack is PackageListItem & { href: string } => + pack.href !== null, + ); + + if (linkable.length === 0) { + list.replaceChildren(); + hide(); + return; + } + + list.replaceChildren( + ...linkable.map((pack, index) => createOption(pack, index)), + ); + show(); + } + + input.addEventListener("input", debounce(update, INPUT_DEBOUNCE_MS)); + + input.addEventListener("focus", () => { + if (input.value.trim() !== "" && list.children.length > 0) { + show(); + } + }); + + input.addEventListener("blur", () => { + window.setTimeout(hide, BLUR_HIDE_DELAY_MS); + }); + + input.addEventListener("keydown", (event) => { + if (event.key === "Escape" && !list.hidden) { + event.preventDefault(); + hide(); + } + }); + + list.addEventListener("combobox-commit", (event) => { + const target = event.target; + if (!(target instanceof HTMLElement)) { + return; + } + const href = target.dataset.href; + if (!href) { + return; + } + const originalEvent = + event instanceof CustomEvent + ? (event.detail as { event?: Event } | undefined)?.event + : undefined; + hide(); + if (originalEvent instanceof MouseEvent) { + // Let the nested handle mouse navigation natively so that + // modifier-clicks and middle-clicks behave as the user expects. + return; + } + window.location.assign(href); + }); +} + +function debounce(fn: () => void, ms: number): () => void { + let timer: ReturnType | undefined; + return () => { + if (timer !== undefined) { + clearTimeout(timer); + } + timer = setTimeout(fn, ms); + }; +} diff --git a/yarn.lock b/yarn.lock index e79d2fba..b03857d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -808,6 +808,11 @@ resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-3.1.1.tgz#af3aea7f1e52ec916d8b5c9dcc0f09d4c060a3fc" integrity sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw== +"@github/combobox-nav@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@github/combobox-nav/-/combobox-nav-3.0.1.tgz#3f8761b3e8fea6e77fa6ab78152238695d8c2868" + integrity sha512-JEAm5qU+u/dU8H+NsPisJ5c/P+lfqIk4x0h+BvqBIjP7oVZq1ChPVRYG5uPmHu5Mq7HGD8IsASbpUhX5UIfRxQ== + "@graphql-codegen/add@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-7.0.0.tgz#ec4854030d2e091dd2f8abf8ede7fd1f73364b19"