update serarch

superpage/src/pages/[slug].astro

@@ -46,7 +46,7 @@ const { Content } = await render(course);
             />
             <section class="max-lg:pt-6 lg:py-24">
                 <div class="space-y-5">
-                    <span class="font-medium" data-pagefind-ignore>
+                    <span class="font-medium">
                         {
                             data.course.reciclagem ? (
                                 <>Curso de reciclagem</>
@@ -58,6 +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.title}
                     </h1>
@@ -66,7 +67,6 @@ const { Content } = await render(course);
                         <a
                             href="#modulos"
                             class="text-blue-400 *:hover:underline"
-                            data-pagefind-ignore
                         >
                             <sup>[1]</sup>
                         </a>
@@ -98,7 +98,6 @@ const { Content } = await render(course);
 
                     <div
                         class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
-                        data-pagefind-ignore="all"
                     >
                         <a
                             href="#"

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}
+    class="border border-black bg-white w-full rounded-lg relative h-10 lg:h-12"
-  data-ui-options={JSON.stringify(uiOptions)}
 >
 </div>
+
 <script>
     import { PagefindUI } from "@pagefind/default-ui";
 
-  function initPageFind() {
+    function initPagefindUI() {
-    const allSelector = "[data-pagefind-ui]";
+        const element = "[data-pagefind-ui]";
-    for (const el of document.querySelectorAll(`${allSelector}.pagefind-init`)) {
+        const selector = document.querySelector(element);
-      const elSelector = [
+
-        ...(el.id ? [`#${el.id}`] : []),
+        if (!selector) {
-        ...[...el.classList.values()].map((c) => `.${c}`),
+            return console.error(`${element} not found`);
-        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 }));
-        }
-      }
-    }
         }
 
-  document.addEventListener("astro:page-load", initPageFind);
+        const bundlePath = selector.getAttribute("data-bundle-path");
-  if (document.readyState === "loading") {
+        // Pagefind UI configuration options
-    document.addEventListener("DOMContentLoaded", initPageFind);
+        // https://pagefind.app/docs/ui/
-  } else {
+        new PagefindUI({
-    initPageFind();
+            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>

superpage/src/pages/index.astro

@@ -5,7 +5,6 @@ import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import { Clients } from "~/components/Course";
 import Search from "./_components/Search.astro";
-// import Search from "astro-pagefind/components/Search";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
 ---
@@ -27,25 +26,13 @@ import mulhercomepi from "~/assets/mulher-com-epi.png";
                                 </h1>
                             </label>
 
-                            <div
-                                class="border border-black bg-white w-full rounded-lg relative h-13"
-                            >
                             <!-- <label for="search" class="py-3.5 pl-3">
                                     <Icon
                                         name="magnifying-glass"
                                         class="size-6"
                                     />
                                 </label> -->
-                                <Search
+                            <Search />
-                                    className="pagefind"
-                                    uiOptions={{
-                                        showImages: false,
-                                        resetStyles: false,
-                                        pageSize: 5,
-                                        excerptLength: 0,
-                                    }}
-                                />
-                            </div>
                         </div>
 
                         <div>

superpage/src/styles/app.css

@@ -11,20 +11,17 @@ body {
     @apply text-white bg-black scroll-pt-22 antialiased;
 }
 
-/* .pagefind-ui {
+/* Pagefind */
-    @apply w-full;
-} */
-
 .pagefind-ui__form {
     @apply flex;
 }
 
 .pagefind-ui__search-input {
-    @apply focus:outline-none w-full placeholder:text-white h-13 px-4;
+    @apply focus:outline-none w-full placeholder:text-white h-10 lg:h-12 px-3.5;
 }
 
 .pagefind-ui__search-clear {
-    @apply cursor-pointer px-2.5 text-sm hover:underline;
+    @apply cursor-pointer px-3.5 text-sm hover:underline;
 }
 
 .pagefind-ui__result-excerpt,
@@ -34,7 +31,7 @@ body {
 }
 
 .pagefind-ui__drawer {
-    @apply absolute w-full top-full bg-white mt-1.5 p-5 rounded-xl drop-shadow space-y-2.5 z-5;
+    @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;
 }
 
 .pagefind-ui__results {
@@ -51,5 +48,9 @@ body {
 }
 
 .pagefind-ui__button {
-    @apply text-center text-sm cursor-pointer hover:underline border border-gray-200 rounded-lg p-1.5 w-full;
+    @apply text-sm cursor-pointer hover:underline;
+}
+
+.pagefind-ui__loading {
+    @apply w-full h-6 bg-gray-100 animate-pulse text-transparent rounded-lg;
 }