feat: integrate astro-pagefind for enhanced search functionality and update related components
This commit is contained in:
parent
817d11a88d
commit
5e078db43e
5 changed files with 254 additions and 2 deletions
|
|
@ -2,9 +2,11 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import pagefind from "astro-pagefind";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [pagefind()],
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
|
|
|
|||
145
package-lock.json
generated
145
package-lock.json
generated
|
|
@ -12,6 +12,7 @@
|
|||
"@fontsource/jetbrains-mono": "^5.2.8",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"astro": "^5.16.10",
|
||||
"astro-pagefind": "^1.8.5",
|
||||
"lucide-astro": "^0.556.0",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
|
|
@ -1112,6 +1113,96 @@
|
|||
"integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@pagefind/darwin-arm64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz",
|
||||
"integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
]
|
||||
},
|
||||
"node_modules/@pagefind/darwin-x64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz",
|
||||
"integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
]
|
||||
},
|
||||
"node_modules/@pagefind/default-ui": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/default-ui/-/default-ui-1.4.0.tgz",
|
||||
"integrity": "sha512-wie82VWn3cnGEdIjh4YwNESyS1G6vRHwL6cNjy9CFgNnWW/PGRjsLq300xjVH5sfPFK3iK36UxvIBymtQIEiSQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@pagefind/freebsd-x64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz",
|
||||
"integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
]
|
||||
},
|
||||
"node_modules/@pagefind/linux-arm64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz",
|
||||
"integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@pagefind/linux-x64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz",
|
||||
"integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@pagefind/windows-x64": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz",
|
||||
"integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.29",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
|
||||
"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
|
||||
|
|
@ -2085,6 +2176,20 @@
|
|||
"sharp": "^0.34.0"
|
||||
}
|
||||
},
|
||||
"node_modules/astro-pagefind": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/astro-pagefind/-/astro-pagefind-1.8.5.tgz",
|
||||
"integrity": "sha512-CVhKKA9bTQ7hLsHk9KTNDzOdgR4EI04gn0mjDGfnXzaHx7rL92YkNpFM5AoFl9NWmOUbaIFC2DN7Yvs/ZFPRdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@pagefind/default-ui": "^1.2.0",
|
||||
"pagefind": "^1.2.0",
|
||||
"sirv": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"astro": "^2.0.4 || ^3 || ^4 || ^5"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
|
|
@ -4377,6 +4482,23 @@
|
|||
"integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pagefind": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz",
|
||||
"integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"pagefind": "lib/runner/bin.cjs"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@pagefind/darwin-arm64": "1.4.0",
|
||||
"@pagefind/darwin-x64": "1.4.0",
|
||||
"@pagefind/freebsd-x64": "1.4.0",
|
||||
"@pagefind/linux-arm64": "1.4.0",
|
||||
"@pagefind/linux-x64": "1.4.0",
|
||||
"@pagefind/windows-x64": "1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-latin": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-7.0.0.tgz",
|
||||
|
|
@ -4944,6 +5066,20 @@
|
|||
"@types/hast": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
|
||||
"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@polka/url": "^1.0.0-next.24",
|
||||
"mrmime": "^2.0.0",
|
||||
"totalist": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/sisteransi": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||
|
|
@ -5113,6 +5249,15 @@
|
|||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/totalist": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
|
||||
"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/trim-lines": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"@fontsource/jetbrains-mono": "^5.2.8",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"astro": "^5.16.10",
|
||||
"astro-pagefind": "^1.8.5",
|
||||
"lucide-astro": "^0.556.0",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface Props {
|
|||
const { title, description, date, tags } = Astro.props;
|
||||
---
|
||||
|
||||
<article>
|
||||
<article data-pagefind-body>
|
||||
<header class="mb-12">
|
||||
<h1 class="text-4xl font-bold mb-2">{title}</h1>
|
||||
<h2 class="text-lg mb-2">{description}</h2>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,113 @@
|
|||
---
|
||||
import PageTitle from "@/components/PageTitle.astro";
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import Search from "astro-pagefind/components/Search";
|
||||
---
|
||||
|
||||
<Layout title="Dhemas Nurjaya" description="Welcome to my personal website">
|
||||
<PageTitle title="Search" />
|
||||
<p>Come back later. This page will be available soon!</p>
|
||||
<Search
|
||||
id="search"
|
||||
className="pagefind-ui"
|
||||
uiOptions={{
|
||||
showImages: false,
|
||||
translations: {
|
||||
placeholder: "What are you looking for?",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
.pagefind-ui {
|
||||
--pagefind-ui-scale: 1;
|
||||
--pagefind-ui-primary: #a1a1aa; /* zinc-400 */
|
||||
--pagefind-ui-text: #d4d4d8; /* zinc-300 */
|
||||
--pagefind-ui-background: #18181b; /* zinc-900 */
|
||||
--pagefind-ui-border: #3f3f46; /* zinc-700 */
|
||||
--pagefind-ui-tag: #27272a; /* zinc-800 */
|
||||
--pagefind-ui-border-width: 1px;
|
||||
--pagefind-ui-border-radius: 0.5rem;
|
||||
--pagefind-ui-font: "Noto Sans Variable", sans-serif;
|
||||
}
|
||||
|
||||
.pagefind-ui__search-input {
|
||||
background: #27272a; /* zinc-800 */
|
||||
color: #d4d4d8; /* zinc-300 */
|
||||
}
|
||||
|
||||
.pagefind-ui__search-input::placeholder {
|
||||
color: #71717a; /* zinc-500 */
|
||||
}
|
||||
|
||||
.pagefind-ui__result {
|
||||
border-radius: 0.5rem !important;
|
||||
padding: 1rem !important;
|
||||
background: #27272a !important; /* zinc-800 */
|
||||
border: none !important;
|
||||
margin-bottom: 1rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-inner {
|
||||
padding: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-link {
|
||||
color: #d4d4d8; /* zinc-300 */
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title {
|
||||
color: #fafafa; /* zinc-50 */
|
||||
}
|
||||
|
||||
.pagefind-ui__result-excerpt {
|
||||
color: #a1a1aa; /* zinc-400 */
|
||||
}
|
||||
|
||||
.pagefind-ui__message {
|
||||
color: #a1a1aa; /* zinc-400 */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Re-trigger search when navigating back to the page
|
||||
function retriggerSearch() {
|
||||
const input = document.querySelector<HTMLInputElement>(
|
||||
".pagefind-ui__search-input",
|
||||
);
|
||||
if (input && input.value) {
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
}
|
||||
}
|
||||
|
||||
// Handle browser back/forward navigation
|
||||
window.addEventListener("pageshow", (event) => {
|
||||
if (event.persisted) {
|
||||
// Page was loaded from bfcache
|
||||
setTimeout(retriggerSearch, 100);
|
||||
}
|
||||
});
|
||||
|
||||
// Also trigger on initial load if there's a value
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
setTimeout(retriggerSearch, 100);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue