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

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>