Function createSearchResult

packages/web/src/index.ts:305–358

(result: SearchResult, index: number, query: string)

}

function createSearchResult(result: SearchResult, index: number, query: string) {
  const { item } = result;
  const link = document.createElement("a");
  link.className = `search-result search-result-${item.type}`;
  link.href = item.href;
  link.id = `search-result-${index}`;
  link.setAttribute("role", "option");
  link.setAttribute("aria-selected", index === activeSearchIndex ? "true" : "false");
  link.dataset.searchIndex = String(index);
  if (index === activeSearchIndex) link.classList.add("is-active");

  const icon = document.createElement("span");
  icon.className = "search-result-icon";
  const logo = document.createElement("img");
  logo.src = item.logo;
  logo.alt = "";
  logo.loading = "lazy";
  icon.append(logo);
  link.append(icon);

  const body = document.createElement("span");
  body.className = "search-result-body";

  const top = document.createElement("span");
  top.className = "search-result-top";

  const title = document.createElement("span");
  title.className = "search-result-title";
  appendHighlightedText(title, item.title, query);
  top.append(title);

  const kind = document.createElement("span");
  kind.className = "search-result-kind";
  kind.textContent = item.type;
  top.append(kind);
  body.append(top);

  const subtitle = document.createElement("span");
  subtitle.className = "search-result-subtitle mono";
  appendHighlightedText(subtitle, resultSubtitle(item), query);
  body.append(subtitle);

  const meta = document.createElement("span");
  meta.className = "search-result-meta";
  for (const value of resultMeta(item)) {
    const chip = document.createElement("span");
    chip.textContent = value;
    meta.append(chip);
  }
  body.append(meta);

  link.append(body);
  return link;
}

function updateActiveSearchResult() {
  if (!searchResults || !searchInput) return;