Fix search: remove duplicate results and fix titles

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/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);
 

src/templates/blog-post.js

@@ -26,8 +26,8 @@ class BlogPost extends Component {
 
     return (
       <Layout>
-        <div>
-          <h1 className="f4 f4-m f3-ns">{title}</h1>
+        <div data-pagefind-body>
+          <h1 className="f4 f4-m f3-ns" data-pagefind-meta="title">{title}</h1>
           <PublishLine
             author={author.firstName}
             published={published}