wip

superpage/src/pages/_components/Search.astro

@@ -1,10 +1,59 @@
 ---
-import Search from "./Search";
-import { getCollection, render } from "astro:content";
-const courses = await getCollection(
-    "courses",
-    ({ data }) => data.draft != true,
-);
----
 
-<Search client:load searchlist={courses} />
+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}
+  data-ui-options={JSON.stringify(uiOptions)}
+>
+</div>
+<script>
+  import { PagefindUI } from "@pagefind/default-ui";
+
+  function initPageFind() {
+    const allSelector = "[data-pagefind-ui]";
+    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 }));
+        }
+      }
+    }
+  }
+
+  document.addEventListener("astro:page-load", initPageFind);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initPageFind);
+  } else {
+    initPageFind();
+  }
+</script>

superpage/src/pages/index.astro

@@ -4,8 +4,8 @@ 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 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";
 ---