update

superpage/src/pages/[slug].astro

@@ -58,7 +58,7 @@ const { Content } = await render(course);
                     <h1
                         class="text-pretty font-semibold text-4xl lg:text-7xl"
                         data-pagefind-meta="title"
-                        data-pagefind-filter=`kind:${data.course.reciclagem ? 'reciclagem' : 'formação'}`
+                        data-pagefind-filter=`curso:${data.course.reciclagem ? 'reciclagem' : 'formação'}`
                     >
                         {data.title}
                     </h1>

superpage/src/pages/_components/Search.astro

@@ -1,76 +1,42 @@
 ---
+import { Icon } from "astro-icon/components";
 const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 ---
 
 <div
-    data-pagefind-ui
-    data-bundle-path={bundlePath}
-    class="border border-black bg-white w-full rounded-lg relative h-10 lg:h-12"
+    class="border border-black bg-white w-full rounded-lg h-10 lg:h-12 relative"
 >
+    <Icon
+        name="magnifying-glass"
+        class="absolute size-5 top-1/2 -translate-y-1/2 left-3"
+    />
+    <div id="pagefind-ui" class="w-full" data-bundle-path={bundlePath}></div>
 </div>
 
 <script>
     import { PagefindUI } from "@pagefind/default-ui";
 
-    function initPagefindUI() {
-        const element = "[data-pagefind-ui]";
-        const selector = document.querySelector(element);
+    const element = "#pagefind-ui";
+    const selector = document.querySelector(element);
 
-        if (!selector) {
-            return console.error(`${element} not found`);
+    async function initPagefindUI() {
+        if (selector) {
+            const bundlePath = selector.getAttribute("data-bundle-path");
+            // Pagefind UI configuration options
+            // https://pagefind.app/docs/ui/
+            new PagefindUI({
+                element,
+                bundlePath,
+                showImages: false,
+                pageSize: 5,
+            });
         }
-
-        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", () => {
+    window.addEventListener("astro:page-load", initPagefindUI);
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initPagefindUI);
+    } else {
         initPagefindUI();
-    });
-
-    // document.addEventListener("astro:page-load", initPageFind);
-    // if (document.readyState === "loading") {
-    //     document.addEventListener("DOMContentLoaded", initPageFind);
-    // } else {
-    //     initPageFind();
-    // }
+    }
 </script>

superpage/src/pages/index.astro

@@ -26,12 +26,6 @@ import mulhercomepi from "~/assets/mulher-com-epi.png";
                                 </h1>
                             </label>
 
-                            <!-- <label for="search" class="py-3.5 pl-3">
-                                    <Icon
-                                        name="magnifying-glass"
-                                        class="size-6"
-                                    />
-                                </label> -->
                             <Search />
                         </div>