update serarch

superpage/src/pages/_components/Search.astro

@@ -1,59 +1,76 @@
 ---
-
-export interface Props {
-  readonly id?: string;
-  readonly className?: string;
-  readonly query?: string;
-  readonly uiOptions?: Record<string, any>;
-}
-
-const { id, className, query, uiOptions = {} } = Astro.props;
 const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 ---
 
 <div
-  id={id}
-  class:list={[className, "pagefind-init"]}
-  data-pagefind-ui
-  data-bundle-path={bundlePath}
-  data-query={query}
-  data-ui-options={JSON.stringify(uiOptions)}
+    data-pagefind-ui
+    data-bundle-path={bundlePath}
+    class="border border-black bg-white w-full rounded-lg relative h-10 lg:h-12"
 >
 </div>
+
 <script>
-  import { PagefindUI } from "@pagefind/default-ui";
+    import { PagefindUI } from "@pagefind/default-ui";
 
-  function initPageFind() {
-    const allSelector = "[data-pagefind-ui]";
-    for (const el of document.querySelectorAll(`${allSelector}.pagefind-init`)) {
-      const elSelector = [
-        ...(el.id ? [`#${el.id}`] : []),
-        ...[...el.classList.values()].map((c) => `.${c}`),
-        allSelector,
-      ].join("");
-      const bundlePath = el.getAttribute("data-bundle-path");
-      const opts = JSON.parse(el.getAttribute("data-ui-options") ?? "{}");
-      new PagefindUI({
-        ...opts,
-        element: elSelector,
-        bundlePath,
-      });
-      el.classList.remove("pagefind-init");
-      const query = el.getAttribute("data-query");
-      if (query) {
-        const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
-        if (input) {
-          input.value = query;
-          input.dispatchEvent(new Event("input", { bubbles: true }));
+    function initPagefindUI() {
+        const element = "[data-pagefind-ui]";
+        const selector = document.querySelector(element);
+
+        if (!selector) {
+            return console.error(`${element} not found`);
         }
-      }
-    }
-  }
 
-  document.addEventListener("astro:page-load", initPageFind);
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initPageFind);
-  } else {
-    initPageFind();
-  }
+        const bundlePath = selector.getAttribute("data-bundle-path");
+        // Pagefind UI configuration options
+        // https://pagefind.app/docs/ui/
+        new PagefindUI({
+            element,
+            bundlePath,
+            showImages: false,
+            pageSize: 5,
+            showEmptyFilters: false,
+        });
+
+        //     for (const el of document.querySelectorAll(
+        //         `${allSelector}.pagefind-init`,
+        //     )) {
+        //         const elSelector = [
+        //             ...(el.id ? [`#${el.id}`] : []),
+        //             ...[...el.classList.values()].map((c) => `.${c}`),
+        //             allSelector,
+        //         ].join("");
+
+        //         const bundlePath = el.getAttribute("data-bundle-path");
+        //         const opts = JSON.parse(el.getAttribute("data-ui-options") ?? "{}");
+
+        //         new PagefindUI({
+        //             ...opts,
+        //             element: elSelector,
+        //             bundlePath,
+        //         });
+        //         el.classList.remove("pagefind-init");
+
+        //         const query = el.getAttribute("data-query");
+
+        //         if (query) {
+        //             const input =
+        //                 el.querySelector<HTMLInputElement>(`input[type="text"]`);
+        //             if (input) {
+        //                 input.value = query;
+        //                 input.dispatchEvent(new Event("input", { bubbles: true }));
+        //             }
+        //         }
+        //     }
+    }
+
+    window.addEventListener("DOMContentLoaded", () => {
+        initPagefindUI();
+    });
+
+    // document.addEventListener("astro:page-load", initPageFind);
+    // if (document.readyState === "loading") {
+    //     document.addEventListener("DOMContentLoaded", initPageFind);
+    // } else {
+    //     initPageFind();
+    // }
 </script>