Fix Pagefind search results sort and excerpt rendering

Replace <pagefind-results sort=...> (sort attribute is unsupported on that
component) with a custom JS implementation using the pagefind JS API.
Results are now sorted by date descending, matched terms are highlighted and
visible within the 3-line excerpt clamp, and destination pages receive the
highlight query parameter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jsanz

_includes/search.html

@@ -2,27 +2,73 @@
 <pagefind-config bundle-path="{{ site.baseurl }}/pagefind/" highlight-param="highlight"></pagefind-config>
 <pagefind-modal>
   <pagefind-modal-header>
-    <pagefind-input></pagefind-input>
+    <div class="pf-input-wrapper">
+      <input type="search" id="pf-input" class="pf-input"
+             placeholder="Search" autocomplete="off" spellcheck="false" aria-label="Search this site">
+    </div>
   </pagefind-modal-header>
   <pagefind-modal-body>
-    <pagefind-summary></pagefind-summary>
-    <pagefind-results sort='{"date": "desc"}'>
-      <script type="text/pagefind-template">
-        {% raw %}<li>
-          <div class="pf-result-card">
-            <div class="pf-result-content">
-              <p class="pf-result-title">
-                <a class="pf-result-link" href="{{ url }}">{{#if meta.date}}{{ meta.date }} - {{/if}}{{#if meta.rid}}#{{ meta.rid }}{{/if}}</a>
-              </p>
-              <p class="pf-result-excerpt">{{+ excerpt +}}</p>
-            </div>
-          </div>
-        </li>{% endraw %}
-      </script>
-    </pagefind-results>
+    <p id="pf-summary" role="status"></p>
+    <ul id="pf-results"></ul>
   </pagefind-modal-body>
   <pagefind-modal-footer>
     <pagefind-keyboard-hints></pagefind-keyboard-hints>
   </pagefind-modal-footer>
 </pagefind-modal>
+<script type="module">
+(async () => {
+  const pfModule = await import('{{ site.baseurl }}/pagefind/pagefind.js');
+  const pf = await pfModule.createInstance({ highlightParam: 'highlight', excerptLength: 30 });
+  await pf.init();
+
+  const input   = document.getElementById('pf-input');
+  const list    = document.getElementById('pf-results');
+  const summary = document.getElementById('pf-summary');
+  const modal   = document.querySelector('pagefind-modal');
+  let timer;
+
+  // Focus the input whenever the modal opens
+  if (modal) {
+    new MutationObserver(() => {
+      if (modal.hasAttribute('open')) input.focus();
+    }).observe(modal, { attributes: true, attributeFilter: ['open'] });
+  }
+
+  // Clear results when the input is emptied (e.g. pressing × in type=search)
+  input.addEventListener('search', e => {
+    if (!e.target.value) { list.innerHTML = ''; summary.textContent = ''; }
+  });
+
+  input.addEventListener('input', e => {
+    clearTimeout(timer);
+    timer = setTimeout(() => search(e.target.value), 300);
+  });
+
+  function render(data, query) {
+    list.innerHTML = '';
+    summary.textContent = data.length
+      ? `${data.length} results for "${query}"`
+      : `No results for "${query}"`;
+    for (const d of data) {
+      const date  = d.meta?.date ?? '';
+      const rid   = d.meta?.rid  ? '#' + d.meta.rid : '';
+      const label = [date, rid].filter(Boolean).join(' - ');
+      const li    = document.createElement('li');
+      li.innerHTML =
+        `<a class="pf-result-link" href="${d.url}">${label}</a>` +
+        `<p class="pf-result-excerpt">${d.excerpt}</p>`;
+      list.appendChild(li);
+    }
+  }
+
+  async function search(query) {
+    list.innerHTML      = '';
+    summary.textContent = '';
+    if (!query.trim()) return;
+    const res  = await pf.search(query, { sort: { date: 'desc' } });
+    const data = await Promise.all(res.results.map(r => r.data()));
+    render(data, query);
+  }
+})();
+</script>
 {% endif %}

_sass/_search.scss

@@ -24,15 +24,82 @@
   --pf-border-radius: 2px;
 }
 
-// Excerpt: default is single-line ellipsis (white-space:nowrap + overflow:hidden).
-// Allow up to 4 lines so the matched term is actually visible in results.
-pagefind-modal .pf-result-excerpt {
-  white-space: normal !important;
-  overflow: hidden !important;
-  text-overflow: unset !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 4 !important;
-  -webkit-box-orient: vertical !important;
+// Custom search input — replaces <pagefind-input> component (closed shadow DOM).
+.pf-input-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 1rem;
+}
+
+.pf-input {
+  width: 100%;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-border-radius);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-size: 1rem;
+  color: var(--pf-text);
+  background: transparent;
+  outline: none;
+
+  &:focus {
+    border-color: var(--pf-border-focus);
+    box-shadow: 0 0 0 2px var(--pf-outline-focus);
+  }
+}
+
+// Custom results list — replaces <pagefind-results> component.
+// Styles .pf-result-* classes that were previously inside the component shadow DOM.
+#pf-summary {
+  font-size: 0.75rem;
+  color: var(--pf-text-secondary);
+  padding: 0.25rem 1rem;
+  margin: 0;
+}
+
+#pf-results {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  li {
+    border: 1px solid var(--pf-border);
+    border-radius: var(--pf-border-radius);
+    padding: 0.75rem 1rem;
+  }
+
+  .pf-result-link {
+    font-weight: 600;
+    color: var(--pf-text);
+    text-decoration: none;
+    display: block;
+    margin-bottom: 0.4rem;
+
+    &:hover { color: var(--pf-outline-focus); }
+  }
+
+  .pf-result-excerpt {
+    font-size: 0.85rem;
+    color: var(--pf-text-secondary);
+    margin: 0;
+    // pagefind-component-ui.css uses :is(*, #\#)×3 specificity — !important needed.
+    white-space: normal !important;
+    overflow: hidden !important;
+    text-overflow: unset !important;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 3 !important;
+    -webkit-box-orient: vertical !important;
+
+    mark {
+      background: transparent;
+      font-weight: bold !important;
+      color: var(--pf-text);
+    }
+  }
 }
 
 // Nav trigger — set CSS variables scoped to this element so they cascade into