feat: integrate astro-pagefind for enhanced search functionality and update related components

astro.config.mjs

@@ -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()],
   },

package-lock.json

@@ -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",

package.json

@@ -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"
   },

src/components/BlogPost.astro

@@ -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>

src/pages/search/index.astro

@@ -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>