update

superpage/src/components/Course/HeaderNav.astro

@@ -53,7 +53,6 @@ const courses = await getCollection(
             <button
                 class="absolute border border-black cursor-pointer rounded-full -top-3.5 2xl:-top-21.5 right-2.5"
                 aria-labelledby="Fechar"
-                aria-hidden={true}
                 x-on:click="open = false"
             >
                 <Icon name="x-mark" />

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
+    class="border border-black bg-white w-full rounded-lg h-10 lg:h-12 relative"
-    data-bundle-path={bundlePath}
-    class="border border-black bg-white w-full rounded-lg relative h-10 lg:h-12"
 >
+    <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 = "#pagefind-ui";
-        const element = "[data-pagefind-ui]";
+    const selector = document.querySelector(element);
-        const selector = document.querySelector(element);
 
-        if (!selector) {
+    async function initPagefindUI() {
-            return console.error(`${element} not found`);
+        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>
 

superpage/src/styles/app.css

@@ -17,13 +17,14 @@ body {
 }
 
 .pagefind-ui__search-input {
-    @apply focus:outline-none w-full placeholder:text-white h-10 lg:h-12 px-3.5;
+    @apply focus:outline-none w-full placeholder:text-white h-10 lg:h-12 indent-10;
 }
 
 .pagefind-ui__search-clear {
     @apply cursor-pointer px-3.5 text-sm hover:underline;
 }
 
+.pagefind-ui__filter-panel,
 .pagefind-ui__result-excerpt,
 .pagefind-ui__suppressed,
 .pagefind-ui__hidden {
@@ -31,7 +32,7 @@ body {
 }
 
 .pagefind-ui__drawer {
-    @apply absolute w-full top-full bg-white mt-1.5 p-2.5 lg:p-5 rounded-xl drop-shadow space-y-2.5 z-10;
+    @apply absolute w-full top-full bg-white mt-1.5 p-5 rounded-xl drop-shadow space-y-2.5 z-10;
 }
 
 .pagefind-ui__results {