Fix search: remove duplicate results and fix result titles

- Replace pagefind-searchbox with pagefind-input to remove the
  dropdown autocomplete (results only show in the page body)
- Add data-pagefind-body to main content area in Layout so Pagefind
  only indexes page content, not header/nav/footer
- Add data-pagefind-ignore to Header to prevent the site title
  being used as the result title for every page
- Result titles now correctly show the blog post title

Author: ohookins

snapshots.yml

@@ -8,3 +8,8 @@
   url: /posts/dont-use-aws-ses/
 - name: Tag page
   url: /tags/aws
+- name: Search page
+  url: /search/
+- name: Search results
+  url: /search/?q=aws
+  wait_for_selector: "pagefind-results a"

src/components/Header/index.js

@@ -5,6 +5,7 @@ import Background from "./header.jpg";
 const Header = () => (
   <div
     className="vh-10 dt w-100 tc bg-dark-gray cover"
+    data-pagefind-ignore
     style={{
       background: `url(${Background}) no-repeat center`
     }}

src/components/Layout/index.js

@@ -25,7 +25,7 @@ const TemplateWrapper = ({ children }) => (
     <Header />
     <Buttons />
     <div className="flex justify-center">
-      <div className="fl bg-dark-gray pa3 pl3 pl3-m pr3 pr3-m w100 pl5-ns pr5-ns w-90-m w-70-ns">
+      <div className="fl bg-dark-gray pa3 pl3 pl3-m pr3 pr3-m w100 pl5-ns pr5-ns w-90-m w-70-ns" data-pagefind-body>
         {children}
       </div>
     </div>

src/pages/search.js

@@ -20,9 +20,23 @@ const SearchPage = () => {
     script.onload = () => {
       // Insert the web components after the script loads
       containerRef.current.innerHTML = `
-        <pagefind-searchbox></pagefind-searchbox>
+        <pagefind-input></pagefind-input>
         <pagefind-results></pagefind-results>
       `;
+
+      // Check for a ?q= query parameter and pre-fill the search
+      const params = new URLSearchParams(window.location.search);
+      const query = params.get("q");
+      if (query) {
+        // Wait for the web component to render its internal input
+        setTimeout(() => {
+          const input = containerRef.current.querySelector("pagefind-input input");
+          if (input) {
+            input.value = query;
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+        }, 100);
+      }
     };
     document.head.appendChild(script);