Commit 5793157

@@ -0,0 +1,3 @@
+---
+
+---

@@ -0,0 +1,3 @@
+---
+
+---

@@ -0,0 +1,53 @@
+---
+import { searchConfig } from '@/config';
+import Algolia from './search/Algolia.astro';
+import Pagefind from './search/Pagefind.astro';
+---
+
+<div id="search-container" class="fixed z-30 hidden h-full w-full" transition:persist>
+  <div
+    class="fixed -z-10 h-full w-full bg-black/20 backdrop-blur-sm backdrop-saturate-100 duration-500 ease-in-out"
+  >
+  </div>
+  <div
+    class="theme-card-bg theme-border mx-auto mt-32 flex w-11/12 flex-col items-center justify-center gap-4 overflow-hidden rounded-xl border-2 md:w-1/2"
+  >
+    <div class="w-full p-4">
+      {
+        (() => {
+          switch (searchConfig.provider) {
+            case 'pagefind':
+              return <Pagefind />;
+            case 'algolia':
+              return <Algolia />;
+          }
+        })()
+      }
+    </div>
+    <div
+      class="theme-card-bg-hl-trans relative mt-auto w-full flex-shrink-0 px-4 py-2 text-center"
+    >
+      Powered by {
+        searchConfig.provider === 'pagefind' ? (
+          <a href="https://pagefind.app" target="_blank" class="text-blue-500">
+            Pagefind
+          </a>
+        ) : (
+          <a href="https://www.algolia.com" target="_blank" class="text-blue-500">
+            Algolia
+          </a>
+        )
+      }
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    const searchContainer = document.getElementById('search-container');
+    const searchContainerMask = searchContainer?.querySelector(':first-child');
+    searchContainerMask?.addEventListener('click', () => {
+      searchContainer?.classList.add('hidden');
+    });
+  });
+</script>

@@ -36,3 +36,8 @@ export async function getRandomPost() {
     console.error('Failed to get random post:', error);
   }
 }
+
+export function toggleSearch() {
+  const searchContainer = document.getElementById('search-container');
+  searchContainer?.classList.toggle('hidden');
+}

@@ -79,3 +79,8 @@ export type ArticleConfig = {
     };
   };
 };
+
+export type SearchConfig = {
+  enable: boolean;
+  provider: 'pagefind' | 'algolia';
+};

@@ -4,11 +4,12 @@ import type {
   LicenseConfig,
   NavbarConfig,
   ProfileConfig,
+  SearchConfig,
   SiteConfig,
   ToolBarConfig,
 } from './types/config';
 import I18nKey from '@i18n/I18nKey';
-import { getRandomPost } from '@scripts/utils';
+import { getRandomPost, toggleSearch } from '@scripts/utils';
 
 export const siteConfig: SiteConfig = {
   title: 'Astral Halo',
@@ -65,7 +66,10 @@ export const navbarConfig: NavbarConfig = {
       {
         icon: 'material-symbols:search-rounded',
         text: I18nKey.search,
-        onclick: '',
+        onclick: {
+          id: 'search-btn',
+          function: toggleSearch,
+        },
       },
     ],
   },
@@ -113,3 +117,8 @@ export const articleConfig: ArticleConfig = {
     },
   },
 };
+
+export const searchConfig: SearchConfig = {
+  enable: true,
+  provider: 'pagefind',
+};