org_web/assets/scripts/search.js

let lunrIndex;
let documents = [];
let activeIndex = -1;
let currentResults = [];
let searchReady = false;

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
const searchForm = searchInput?.closest("form");
const searchContainer = searchInput?.closest(".site-actions");

const searchPanel = document.createElement("section");
searchPanel.id = "search-inline-panel";
searchPanel.className = "search-inline-panel";
searchPanel.setAttribute("aria-hidden", "true");
searchPanel.setAttribute("aria-labelledby", "search-pane-title");
searchPanel.innerHTML = `
  <div class="search-pane-meta">
    <h2 id="search-pane-title">Search</h2>
    <span id="search-pane-count">Start typing to search your notes.</span>
  </div>
  <div id="search-inline-results" class="search-pane-results" role="listbox" aria-label="Search results"></div>
  <div class="search-pane-help" aria-hidden="true">
    <span>Up/down Navigate</span>
    <span>Enter Open</span>
    <span>Esc Close</span>
  </div>
`;

if (searchContainer) {
  searchContainer.appendChild(searchPanel);
}

const inlineResults = searchPanel.querySelector("#search-inline-results");
const paneCount = searchPanel.querySelector("#search-pane-count");

function extractDocuments(node, currentPath = "") {
  if (node.type === "folder" && node.children) {
    const nextPath = currentPath ? `${currentPath}/${node.name}` : node.name;

    node.children.forEach((child) => {
      extractDocuments(child, nextPath);
    });
  }

  if (node.type === "file") {
    documents.push({
      id: documents.length.toString(),
      title: node.name,
      content: node.content || "",
      path: node.url,
    });
  }
}

function buildIndex() {
  lunrIndex = lunr(function () {
    this.ref("id");
    this.field("title", { boost: 10 });
    this.field("url");
    this.field("content");

    documents.forEach((doc) => this.add(doc));
  });
}

async function initSearch() {
  try {
    const response = await fetch("/test.json");
    const json = await response.json();

    extractDocuments(json);
    buildIndex();
    searchReady = true;
    if (isSearchOpen()) renderResults(searchInput.value);
  } catch (error) {
    console.warn("Search index could not be loaded", error);
    if (paneCount) paneCount.textContent = "Search is unavailable right now.";
  }
}

initSearch();

function buildExactQuery(query) {
  return query
    .toLowerCase()
    .split(/\s+/)
    .filter((term) => term.length > 1)
    .map((term) => `${term}*`)
    .join(" ");
}

function buildSnippet(content, terms, radius = 90) {
  if (!content || terms.length === 0) return "";

  const lower = content.toLowerCase();

  let index = -1;
  let matchedTerm = "";

  for (const term of terms) {
    const i = lower.indexOf(term);
    if (i !== -1 && (index === -1 || i < index)) {
      index = i;
      matchedTerm = term;
    }
  }

  if (index === -1) {
    return content.slice(0, radius * 2) + "...";
  }

  const start = Math.max(0, index - radius);
  const end = Math.min(content.length, index + matchedTerm.length + radius);

  const prefix = start > 0 ? "..." : "";
  const suffix = end < content.length ? "..." : "";

  return prefix + content.slice(start, end) + suffix;
}

function getSearchTerms(query) {
  return query
    .toLowerCase()
    .split(/\s+/)
    .filter((t) => t.length > 2);
}

function escapeHtml(text) {
  return String(text || "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function highlight(text, terms) {
  const escapedText = escapeHtml(text);
  if (!escapedText || terms.length === 0) return escapedText;

  const escapedTerms = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
  const regex = new RegExp(`(${escapedTerms.join("|")})`, "gi");

  return escapedText.replace(regex, "<mark>$1</mark>");
}

function search(query) {
  if (!lunrIndex) return [];

  const q = buildExactQuery(query);
  if (!q) return [];

  const terms = getSearchTerms(query);
  const results = lunrIndex.search(q);

  return results
    .map((r) => {
      const doc = documents.find((d) => d.id === r.ref);
      if (!doc) return null;

      const snippet = buildSnippet(doc.content, terms);

      return {
        title: highlight(doc.title, terms),
        path: doc.path,
        score: r.score,
        preview: highlight(snippet, terms),
      };
    })
    .filter(Boolean);
}

function isSearchOpen() {
  return searchContainer?.classList.contains("search-inline-open");
}

function openSearchPane(initialValue = null, focusInput = true) {
  if (!searchContainer || !searchInput) return;

  if (initialValue !== null) {
    searchInput.value = initialValue;
  }

  searchContainer.classList.add("search-inline-open");
  searchPanel.setAttribute("aria-hidden", "false");
  searchBtn?.setAttribute("aria-expanded", "true");
  renderResults(searchInput.value);

  if (focusInput) {
    searchInput.focus({ preventScroll: true });
    try {
      searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length);
    } catch (_) {}
  }
}

function closeSearchPane() {
  if (!searchContainer) return;

  searchContainer.classList.remove("search-inline-open");
  searchPanel.setAttribute("aria-hidden", "true");
  searchBtn?.setAttribute("aria-expanded", "false");
  activeIndex = -1;
}

function getResultItems() {
  return Array.from(inlineResults.querySelectorAll(".search-result"));
}

function updateActiveResult(focusActive = false) {
  const items = getResultItems();

  items.forEach((item, index) => {
    const isActive = index === activeIndex;
    item.classList.toggle("active", isActive);
    item.setAttribute("aria-selected", String(isActive));
  });

  if (activeIndex >= 0 && activeIndex < items.length) {
    items[activeIndex].scrollIntoView({
      block: "nearest",
      behavior: "smooth",
    });
    if (focusActive) searchInput?.focus({ preventScroll: true });
  }
}

function setActiveResult(index, focusActive = false) {
  const items = getResultItems();
  if (!items.length) {
    activeIndex = -1;
    return;
  }

  activeIndex = Math.max(0, Math.min(index, items.length - 1));
  updateActiveResult(focusActive);
}

function openActiveResult() {
  const items = getResultItems();
  if (!items.length) return;

  const index = activeIndex >= 0 ? activeIndex : 0;
  items[index]?.click();
}

function renderResults(query) {
  const trimmed = query.trim();
  currentResults = trimmed.length >= 2 ? search(trimmed) : [];
  activeIndex = currentResults.length ? 0 : -1;
  inlineResults.innerHTML = "";

  if (!trimmed) {
    paneCount.textContent = "Start typing to search your notes.";
    inlineResults.innerHTML = `
      <div class="search-empty">
        Try a topic, page title, or phrase from a note.
      </div>
    `;
    return;
  }

  if (trimmed.length < 2) {
    paneCount.textContent = "Keep typing.";
    inlineResults.innerHTML = `
      <div class="search-empty">
        Use at least two characters.
      </div>
    `;
    return;
  }

  if (!searchReady) {
    paneCount.textContent = "Loading search index.";
    inlineResults.innerHTML = `
      <div class="search-empty">
        Loading results...
      </div>
    `;
    return;
  }

  if (!currentResults.length) {
    paneCount.textContent = "No results found.";
    inlineResults.innerHTML = `
      <div class="search-empty">
        No matches for "${escapeHtml(trimmed)}".
      </div>
    `;
    return;
  }

  paneCount.textContent = `${currentResults.length} result${currentResults.length === 1 ? "" : "s"}`;

  currentResults.slice(0, 20).forEach((result, i) => {
    const item = document.createElement("a");
    item.className = "search-result";
    item.href = result.path;
    item.dataset.index = i;
    item.setAttribute("role", "option");
    item.setAttribute("aria-selected", String(i === activeIndex));

    item.innerHTML = `
      <span class="search-result-title">${result.title}</span>
      <span class="search-result-preview">${result.preview}</span>
      <span class="search-result-path">${escapeHtml(result.path)}</span>
    `;

    item.addEventListener("mouseenter", () => setActiveResult(i));
    inlineResults.appendChild(item);
  });

  updateActiveResult();
}

function handleSearchKeydown(e) {
  if (!isSearchOpen()) return;

  const items = getResultItems();

  switch (e.key) {
    case "ArrowDown":
      e.preventDefault();
      if (items.length) setActiveResult(activeIndex + 1, true);
      break;

    case "ArrowUp":
      e.preventDefault();
      if (items.length) setActiveResult(activeIndex <= 0 ? items.length - 1 : activeIndex - 1, true);
      break;

    case "Home":
      if (items.length) {
        e.preventDefault();
        setActiveResult(0, true);
      }
      break;

    case "End":
      if (items.length) {
        e.preventDefault();
        setActiveResult(items.length - 1, true);
      }
      break;

    case "Enter":
      if (items.length) {
        e.preventDefault();
        openActiveResult();
      }
      break;

    case "Escape":
      e.preventDefault();
      closeSearchPane();
      searchInput?.focus({ preventScroll: true });
      break;
  }
}

function shouldUseSlashShortcut(event) {
  const target = event.target;
  const isEditable =
    target instanceof HTMLInputElement ||
    target instanceof HTMLTextAreaElement ||
    target?.isContentEditable;

  return event.key === "/" && !isEditable && !event.metaKey && !event.ctrlKey && !event.altKey;
}

if (searchInput && searchBtn && searchContainer && inlineResults && paneCount) {
  searchBtn.setAttribute("aria-controls", "search-inline-panel");
  searchBtn.setAttribute("aria-expanded", "false");

  searchInput.addEventListener("focus", () => {
    openSearchPane(null, false);
  });

  searchInput.addEventListener("input", () => {
    openSearchPane(null, false);
  });

  searchInput.addEventListener("keydown", handleSearchKeydown);
  inlineResults.addEventListener("keydown", handleSearchKeydown);

  searchBtn.addEventListener("click", (e) => {
    e.preventDefault();
    openSearchPane(null, true);
  });

  document.addEventListener("click", (e) => {
    if (!isSearchOpen()) return;
    if (!searchContainer.contains(e.target)) closeSearchPane();
  });

  document.addEventListener("keydown", (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
      e.preventDefault();
      openSearchPane(null, true);
      return;
    }

    if (shouldUseSlashShortcut(e)) {
      e.preventDefault();
      openSearchPane("", true);
    }
  });

  window.addEventListener("pageshow", () => {
    searchInput.value = "";
    renderResults("");
    closeSearchPane();
  });

  window.addEventListener("beforeunload", () => {
    searchInput.value = "";
  });

  if (searchForm) {
    searchForm.addEventListener("submit", (e) => {
      e.preventDefault();
      openSearchPane(null, true);
      openActiveResult();
    });
  }
}