sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update serarch

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-27 18:40:18 -03:00
parent 832ba12610
commit 1edd730939
4 changed files with 77 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
superpage/src/pages/[slug].astro
View File

@@ -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="#"

103
superpage/src/pages/_components/Search.astro
View File

@@ -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}
data-ui-options={JSON.stringify(uiOptions)}
class="border border-black bg-white w-full rounded-lg relative h-10 lg:h-12"
>
</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 }));
}
}
}
function initPagefindUI() {
const element = "[data-pagefind-ui]";
const selector = document.querySelector(element);
if (!selector) {
return console.error(`${element} not found`);
}
document.addEventListener("astro:page-load", initPageFind);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initPageFind);
} else {
initPageFind();
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", () => {
initPagefindUI();
});
// document.addEventListener("astro:page-load", initPageFind);
// if (document.readyState === "loading") {
// document.addEventListener("DOMContentLoaded", initPageFind);
// } else {
// initPageFind();
// }
</script>

15
superpage/src/pages/index.astro
View File

@@ -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
className="pagefind"
uiOptions={{
showImages: false,
resetStyles: false,
pageSize: 5,
excerptLength: 0,
}}
/>
</div>
<Search />
</div>
<div>

17
superpage/src/styles/app.css
View File

@@ -11,20 +11,17 @@ body {
@apply text-white bg-black scroll-pt-22 antialiased;
}
/* .pagefind-ui {
@apply w-full;
} */
/* Pagefind */
.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;
}