From b27c164c2d80da0eb763279148356d84e18a6ad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Sat, 26 Apr 2025 11:47:16 -0300
Subject: [PATCH] improve seacrh

---
 superpage/scripts/meili.js       | 14 -----------
 superpage/src/pages/[slug].astro |  9 +++++--
 superpage/src/pages/index.astro  | 18 +++++++++----
 superpage/src/styles/app.css     | 43 ++++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 21 deletions(-)
 delete mode 100644 superpage/scripts/meili.js

diff --git a/superpage/scripts/meili.js b/superpage/scripts/meili.js
deleted file mode 100644
index e6bc694..0000000
--- a/superpage/scripts/meili.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MeiliSearch } from "meilisearch";
-import { fileURLToPath } from "node:url";
-
-export default function meili() {
-  return {
-    name: "meili",
-    hooks: {
-      "astro:build:done": async ({ logger, dir }) => {
-        const pathToRead = fileURLToPath(dir);
-        console.log(pathToRead);
-      },
-    },
-  };
-}
diff --git a/superpage/src/pages/[slug].astro b/superpage/src/pages/[slug].astro
index a350926..f0d986b 100644
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -55,7 +55,10 @@ const { Content } = await render(course);
                             )
                         }
                     </span>
-                    <h1 class="text-pretty font-semibold text-4xl lg:text-7xl" data-pagefind-meta="title">
+                    <h1
+                        class="text-pretty font-semibold text-4xl lg:text-7xl"
+                        data-pagefind-meta="title"
+                    >
                         {data.title}
                     </h1>
                     <p class="text-base/6">
@@ -63,11 +66,12 @@ const { Content } = await render(course);
                         <a
                             href="#modulos"
                             class="text-blue-400 *:hover:underline"
+                            data-pagefind-ignore
                         >
                             <sup>[1]</sup>
                         </a>
                     </p>
-                    <ul class="lg:flex gap-3">
+                    <ul class="lg:flex gap-3" data-pagefind-ignore="all">
                         <li class="flex gap-1">
                             <Icon name="clock" class="size-5" />
                             <span
@@ -94,6 +98,7 @@ 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="#"
diff --git a/superpage/src/pages/index.astro b/superpage/src/pages/index.astro
index d4b38f0..7c47e40 100644
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -5,7 +5,7 @@ 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 Search from "astro-pagefind/components/Search";
 
 import mulhercomepi from "~/assets/mulher-com-epi.png";
 ---
@@ -28,15 +28,23 @@ import mulhercomepi from "~/assets/mulher-com-epi.png";
                             </label>
 
                             <div
-                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg relative"
+                                class="border border-black bg-white w-full rounded-lg relative"
                             >
-                                <label for="search" class="py-3.5 pl-3">
+                                <!-- <label for="search" class="py-3.5 pl-3">
                                     <Icon
                                         name="magnifying-glass"
                                         class="size-6"
                                     />
-                                </label>
-                                <Search uiOptions={{ showImages: false, resetStyles: true }} />
+                                </label> -->
+                                <Search
+                                    className="pagefind-ui"
+                                    uiOptions={{
+                                        showImages: false,
+                                        resetStyles: false,
+                                        pageSize: 5,
+                                        excerptLength: 0,
+                                    }}
+                                />
                             </div>
                         </div>
 
diff --git a/superpage/src/styles/app.css b/superpage/src/styles/app.css
index 8ca6029..d7a9b16 100644
--- a/superpage/src/styles/app.css
+++ b/superpage/src/styles/app.css
@@ -10,3 +10,46 @@ html,
 body {
     @apply text-white bg-black scroll-pt-22 antialiased;
 }
+
+.pagefind-ui {
+    @apply w-full;
+}
+
+.pagefind-ui__search-input {
+    @apply focus:outline-none w-full p-3.5 placeholder:text-white;
+}
+
+.pagefind-ui__search-clear {
+    @apply absolute right-0;
+}
+
+.pagefind-ui__result-excerpt,
+.pagefind-ui__suppressed,
+.pagefind-ui__hidden {
+    @apply hidden;
+}
+
+.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;
+}
+
+.pagefind-ui__results {
+    @apply empty:hidden space-y-1;
+}
+
+.pagefind-ui__results,
+.pagefind-ui__button {
+    @apply mt-4;
+}
+
+.pagefind-ui__result {
+    @apply hover:underline;
+}
+
+.pagefind-ui__result-link {
+    @apply font-semibold block;
+}
+
+.pagefind-ui__button {
+    @apply text-center text-sm cursor-pointer hover:underline border border-gray-300 rounded-lg p-1.5 w-full;
+}