50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
|
|
---
|
|
|
|
<div
|
|
class="border border-black bg-white w-full rounded-lg h-10 lg:h-12 relative"
|
|
>
|
|
<Icon
|
|
name="magnifying-glass"
|
|
class="absolute size-5 top-1/2 -translate-y-1/2 left-3"
|
|
/>
|
|
<div id="pagefind-ui" class="pagefind-init" data-bundle-path={bundlePath}>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import { PagefindUI } from "@pagefind/default-ui";
|
|
|
|
const element = "#pagefind-ui";
|
|
const selector = document.querySelector(element);
|
|
|
|
async function initPagefindUI() {
|
|
if (selector) {
|
|
const bundlePath = selector.getAttribute("data-bundle-path");
|
|
// Pagefind UI configuration options
|
|
// https://pagefind.app/docs/ui/
|
|
new PagefindUI({
|
|
element,
|
|
bundlePath,
|
|
autofocus: true,
|
|
showImages: false,
|
|
pageSize: 5,
|
|
});
|
|
|
|
const a =
|
|
selector.querySelector<HTMLInputElement>(`input[type="text"]`);
|
|
console.log(a);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("astro:page-load", initPagefindUI);
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", initPagefindUI);
|
|
} else {
|
|
initPagefindUI();
|
|
}
|
|
</script>
|