hoelee-blog/src/components/Search.astro

---
// Client-side search via Pagefind. The search box lives in the site header;
// this component is mounted once per page (in BaseLayout) and drives the
// overlay + results. Pagefind's index is generated post-build (see the build
// script); its UI/JS loads from /pagefind/ at runtime.
interface Props {
  lang: string;
}
const { lang } = Astro.props;
const placeholder =
  lang === 'zh' ? '搜索文章…' : 'Search posts…';
const noResults =
  lang === 'zh' ? '没有匹配的结果。' : 'No results.';
// Empty-search state: a dead end helps nobody. Offer the topic entry points that
// actually exist (tag pages are generated for tags with >= 3 posts).
const popular = ['docker', 'self-hosting', 'nginx', 'monitoring', 'automation'];
const popularHref = (t: string) => (lang === 'zh' ? `/zh/tags/${t}/` : `/tags/${t}/`);
const tryLabel = lang === 'zh' ? '试试这些主题：' : 'Try a topic:';
const archiveLabel = lang === 'zh' ? '浏览全部文章' : 'Browse all posts';
const archiveHref = lang === 'zh' ? '/zh/posts/' : '/posts/';
---

<div class="search-overlay" id="search-overlay" hidden>
  <div class="search-panel">
    <div class="search-bar">
      <input
        type="search"
        id="search-input"
        placeholder={placeholder}
        autocomplete="off"
        spellcheck="false"
        aria-label={placeholder}
      />
      <button class="search-close" id="search-close" aria-label="Close">✕</button>
    </div>
    <div class="search-results" id="search-results"></div>
  </div>

  <!-- Dead-end screen for a search with no hits: real links, rendered at build time. -->
  <template id="search-empty-tpl">
    <p class="excerpt" data-role="message">{noResults}</p>
    <p class="excerpt" data-role="try">{tryLabel}</p>
    <p class="search-empty-chips">
      {popular.map((t) => <a class="chip" href={popularHref(t)}>{t}</a>)}
      <a class="chip" href={archiveHref}>{archiveLabel}</a>
    </p>
  </template>
</div>

<style>
  .search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(4px);
    padding-top: 4rem;
  }
  .search-panel {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .search-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.7rem;
  }
  .search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    padding: 0.4rem 0;
  }
  .search-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font-family: var(--font-sans);
  }
  .search-close:hover { color: var(--brand); border-color: var(--brand); }
  .search-results {
    margin-top: 1rem;
    max-height: 70vh;
    overflow-y: auto;
  }
  .search-result {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
  }
  .search-result:hover { color: var(--brand); }
  .search-result h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
  .search-result .excerpt { color: var(--muted); font-size: 0.88rem; margin: 0; }
  .search-empty-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
  .search-empty .chip {
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.78rem;
    text-decoration: none;
  }
  .search-empty .chip:hover { color: var(--brand); border-color: var(--brand); }
  .search-result mark {
    background: color-mix(in srgb, var(--brand) 25%, transparent);
    color: var(--ink);
    border-radius: 2px;
    padding: 0 0.1em;
  }
</style>

<script>
  interface Pagefind {
    search(query: string): Promise<{ results: PagefindResult[] }>;
    debouncedSearch(query: string): Promise<{ results: PagefindResult[] }>;
  }
  interface PagefindResult {
    data(): Promise<{ url: string; meta: Record<string, string>; excerpt: string }>;
  }

  const overlay = document.getElementById('search-overlay') as HTMLElement;
  const input = document.getElementById('search-input') as HTMLInputElement;
  const results = document.getElementById('search-results') as HTMLElement;
  const closeBtn = document.getElementById('search-close') as HTMLButtonElement;

  let pagefind: Pagefind | undefined;
  let searchButton: HTMLElement | null = null;

  function open() {
    overlay.hidden = false;
    input.value = '';
    results.innerHTML = '';
    input.focus();
  }
  function close() {
    overlay.hidden = true;
  }

  // The header search trigger is injected by BaseLayout's script.
  const trigger = document.getElementById('search-toggle');
  if (trigger) trigger.addEventListener('click', open);
  closeBtn.addEventListener('click', close);
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) close();
  });
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !overlay.hidden) close();
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
      e.preventDefault();
      overlay.hidden ? open() : close();
    }
  });

  async function loadPagefind() {
    if (pagefind) return pagefind;
    // /pagefind/pagefind.js is copied into the build post-build. It is an **ES module**
    // (`export { search, debouncedSearch, … }`) and defines NO window global, so loading
    // it with a classic <script src> leaves window.Pagefind undefined and every search
    // answered "Search is unavailable." — which is what happened between the search
    // shipping and this fix. Import it as a module instead; @vite-ignore keeps Vite from
    // trying to resolve a path that only exists in dist/.
    // The specifier must be a VARIABLE: Rollup resolves a literal dynamic-import path
    // at build time (and @vite-ignore does not stop it), which breaks the build because
    // /pagefind/ only exists in dist/ after the index is generated.
    const url = '/pagefind/pagefind.js';
    pagefind = (await import(/* @vite-ignore */ url)) as unknown as Pagefind;
    return pagefind;
  }

  let timer: ReturnType<typeof setTimeout> | undefined;
  input.addEventListener('input', () => {
    const q = input.value.trim();
    if (!q) {
      results.innerHTML = '';
      return;
    }
    if (timer) clearTimeout(timer);
    timer = setTimeout(async () => {
      try {
        const pf = await loadPagefind();
        const search = pf.debouncedSearch ? pf.debouncedSearch(q) : pf.search(q);
        const res = await search;
        results.innerHTML = '';
        if (!res.results.length) {
          // Clone the build-time template: the links cannot drift from the pages that
          // actually exist (tag pages are only generated for tags with >= 3 posts).
          results.innerHTML = '';
          const tpl = document.getElementById('search-empty-tpl') as HTMLTemplateElement | null;
          if (tpl) results.appendChild(tpl.content.cloneNode(true));
          return;
        }
        for (const r of res.results.slice(0, 12)) {
          const d = await r.data();
          const a = document.createElement('a');
          a.className = 'search-result';
          a.href = d.url;
          const h = document.createElement('h3');
          h.textContent = d.meta.title || d.url;
          const ex = document.createElement('p');
          ex.className = 'excerpt';
          ex.innerHTML = d.excerpt || '';
          a.appendChild(h);
          a.appendChild(ex);
          results.appendChild(a);
        }
      } catch (err) {
        results.innerHTML = '';
        const errEl = document.createElement('p');
        errEl.className = 'excerpt';
        errEl.textContent = 'Search is unavailable.';
        results.appendChild(errEl);
      }
    }, 120);
  });
</script>