add fuse

2025-04-25 16:51:25 -03:00
parent 293444f421
commit 311a66c5b0
13 changed files with 97 additions and 18 deletions
--- a/superpage/astro.config.mjs
+++ b/superpage/astro.config.mjs
@@ -6,9 +6,7 @@ import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import alpinejs from "@astrojs/alpinejs";
 import icon from "astro-icon";
-
 import react from "@astrojs/react";
-
 import mdx from "@astrojs/mdx";

 // https://astro.build/config
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
@@ -22,6 +22,8 @@
        "astro": "^5.7.2",
        "astro-icon": "^1.1.5",
        "clsx": "^2.1.1",
+        "fuse.js": "^7.1.0",
+        "meilisearch": "^0.50.0",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "react-hook-form": "^7.56.0",
@@ -3858,6 +3860,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -5145,6 +5156,12 @@
      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
      "license": "CC0-1.0"
    },
+    "node_modules/meilisearch": {
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/meilisearch/-/meilisearch-0.50.0.tgz",
+      "integrity": "sha512-9IzIkobvnuS18Eg4dq/eJB9W+eXqeLZjNRgq/kKMswSmVYYSQsXqGgSuCA0JkF+o5RwJlwIsieQee6rh313VhA==",
+      "license": "MIT"
+    },
    "node_modules/micromark": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -23,6 +23,8 @@
    "astro": "^5.7.2",
    "astro-icon": "^1.1.5",
    "clsx": "^2.1.1",
+    "fuse.js": "^7.1.0",
+    "meilisearch": "^0.50.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.56.0",
--- a/superpage/src/components/Carousel.astro
+++ b/superpage/src/components/Carousel.astro
@@ -30,8 +30,7 @@ const { items = [] } = Astro.props;
                    class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
                    id={`slide${idx + 1}`}
                >
-                    <Component />
-                    <!-- <Component class="size-48 lg:size-38 fill-white" /> -->
+                    <Component class="size-48 lg:size-38 fill-white" />
                </div>
            ))
        }
--- a/superpage/src/components/Course/Contact.astro
+++ b/superpage/src/components/Course/Contact.astro
@@ -1,6 +1,6 @@
 ---
 import Container from "~/components/Container.astro";
-import Form from "./_Contact.jsx";
+import Form from "./Contact.jsx";
 ---

 <Container id="contato">
--- a/superpage/src/components/Course/_Contact.jsx
+++ b/superpage/src/components/Course/_Contact.jsx
--- a/superpage/src/content/courses/boas-praticas-em-manipulcao-de-alimentos.mdx
+++ b/superpage/src/content/courses/boas-praticas-em-manipulcao-de-alimentos.mdx
@@ -3,9 +3,8 @@ id: 386f7086-2871-436f-85f5-31d632fbf624
 title: Boas Práticas em Manipulação de Alimentos
 slug: boas-praticas-em-manipulcao-de-alimentos
 excerpt: ...
-draft: true
+draft: false

 course:
  hours: 8
-  trainer: francis
 ---
--- a/superpage/src/content/courses/cipa-grau-de-risco-1.mdx
+++ b/superpage/src/content/courses/cipa-grau-de-risco-1.mdx
@@ -7,5 +7,4 @@ draft: false

 course:
  hours: 8
-  trainer: francis
 ---
--- a/superpage/src/content/courses/cipa-grau-de-risco-2.mdx
+++ b/superpage/src/content/courses/cipa-grau-de-risco-2.mdx
@@ -7,5 +7,4 @@ draft: false

 course:
  hours: 8
-  trainer: francis
 ---
--- a/superpage/src/content/courses/cipa-grau-de-risco-3.mdx
+++ b/superpage/src/content/courses/cipa-grau-de-risco-3.mdx
@@ -7,6 +7,4 @@ draft: false

 course:
  hours: 8
-  trainer: francis
-  modules: []
 ---
--- a/superpage/src/pages/_components/Search.astro
+++ b/superpage/src/pages/_components/Search.astro
@@ -0,0 +1,10 @@
+---
+import Search from "./Search";
+import { getCollection, render } from "astro:content";
+const courses = await getCollection(
+    "courses",
+    ({ data }) => data.draft != true,
+);
+---
+
+<Search client:load searchlist={courses} />
--- a/superpage/src/pages/_components/Search.jsx
+++ b/superpage/src/pages/_components/Search.jsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import Fuse from "fuse.js";
+
+// https://fusejs.io/api/options.html
+const options = {
+  keys: ["data.title", "data.excerpt", "data.slug"],
+  includeMatches: true,
+  minMatchCharLength: 2,
+  threshold: 0.5,
+};
+
+export default function Search({ searchlist }) {
+  const [query, setQuery] = useState("");
+
+  const fuse = new Fuse(searchlist, options);
+  // Set a limit to the items: 5
+  const items = fuse
+    .search(query)
+    .map((result) => result.item)
+    .slice(0, 5);
+
+  const onChange = (e) => {
+    setQuery(e.target.value);
+  };
+
+  return (
+    <>
+      <input
+        id="search"
+        type="text"
+        className="focus:outline-none w-full pr-5 py-3.5"
+        value={query}
+        onChange={onChange}
+      />
+      {query.length > 1 && (
+        <div className="absolute w-full top-full bg-white mt-2.5 p-5 rounded-xl drop-shadow space-y-2.5">
+          <p>
+            Encontrado {items.length} resultado(s) para '
+            <strong>{query}</strong>'
+          </p>
+
+          {items.length > 1 && (
+            <ul className="list-disc list-inside">
+              {items.map(({ data }, idx) => (
+                <li key={idx}>
+                  <a
+                    href={`/${data.slug}`}
+                    className="font-medium hover:underline"
+                  >
+                    {data.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -4,6 +4,7 @@ import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
 import { Clients } from "~/components/Course";
+import Search from "./_components/Search.astro";

 import mulhercomepi from "~/assets/mulher-com-epi.png";

@@ -19,7 +20,7 @@ let posts = await res.json();
            >
                <div class="col-span-4 flex items-center justify-center">
                    <div class="lg:w-4/6 max-lg:p-5 space-y-6 lg:space-y-12">
-                        <form class="space-y-1.5">
+                        <div class="space-y-1.5">
                            <label for="search" class="block">
                                <h1
                                    class="text-pretty font-semibold text-3xl lg:text-4xl"
@@ -29,7 +30,7 @@ let posts = await res.json();
                            </label>

                            <div
-                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg"
+                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg relative"
                            >
                                <label for="search" class="py-3.5 pl-3">
                                    <Icon
@@ -37,12 +38,9 @@ let posts = await res.json();
                                        class="size-6"
                                    />
                                </label>
-                                <input
-                                    id="search"
-                                    class="focus:outline-none w-full pr-5 py-3.5"
-                                />
+                                <Search />
                            </div>
-                        </form>
+                        </div>

                        <div>
                            <h2 class="font-bold text-xl flex gap-1">