Search a Stati site in the browser

// src/search.ts
interface SearchDocument {
  url: string;
  anchor: string;
  title: string;
  heading: string;
  content: string;
  breadcrumb: string;
}

const input = document.querySelector<HTMLInputElement>('#search');
const results = document.querySelector<HTMLUListElement>('#results');
const meta = document.querySelector<HTMLMetaElement>('meta[name="stati:search-index"]');
let documents: SearchDocument[] | undefined;

async function search(query: string): Promise<SearchDocument[]> {
  // The index's file name changes with every build; every page names it in this meta tag
  documents ??= (await (await fetch(meta!.content)).json()).documents as SearchDocument[];
  const words = query.toLowerCase();
  return documents.filter((doc) => `${doc.title} ${doc.heading} ${doc.content}`.toLowerCase().includes(words));
}

input?.addEventListener('input', async () => {
  if (!results || !meta) return;
  const query = input.value.trim();
  const hits = query.length < 2 ? [] : await search(query);
  results.replaceChildren(
    ...hits.slice(0, 10).map((doc) => {
      const link = document.createElement('a');
      link.href = doc.anchor ? `${doc.url}#${doc.anchor}` : doc.url;
      link.textContent = doc.breadcrumb;
      const item = document.createElement('li');
      item.append(link);
      return item;
    }),
  );
});

<input id="search" type="search" placeholder="Search">
<ul id="results"></ul>