Add search functionality

astro.config.mjs

@@ -4,7 +4,9 @@ import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 
+import sitemap from "@astrojs/sitemap";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
-});
+  integrations: [tailwind(), sitemap()],
+});

package.json

@@ -4,14 +4,17 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro check && astro build",
+    "build": "astro check && astro build && pagefind -s ./dist",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
+    "@pagefind/default-ui": "^1.2.0",
     "astro": "5.0.2",
+    "pagefind": "^1.2.0",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2"
   },

src/components/Navbar.astro

@@ -11,11 +11,15 @@ import { siteLink } from "@utils/links";
 ---
 
 <div
-  class="flex flex-row flex-wrap my-1 md:mx-20 mx-5 p-3 justify-between items-center"
+  class="flex flex-row flex-wrap my-1 lg:mx-20 mx-5 p-3 justify-between items-center"
 >
-  <div class="flex justify-self-start">
-    <a href={origin + siteLink(`${lang}/`)} class="text-2xl">Sherpa</a>
+  <div class="flex justify-self-start gap-2 space-x-2">
+    <a
+      href={origin + siteLink(`${lang}/`)}
+      class="text-2xl align-middle self-center">Sherpa</a
+    >
     <div></div>
+    <Search />
   </div>
   <div
     class="flex justify-self-end justify-end flex-row items-center space-x-4"