add search page

.astro/content-assets.mjs

@@ -1,10 +1,10 @@
 
+import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
-import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
-export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
+export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
 		

astro.config.mjs

@@ -3,6 +3,7 @@ import alpinejs from "@astrojs/alpinejs";
 // https://astro.build/config
 import mdx from "@astrojs/mdx";
 import { defineConfig } from "astro/config";
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,7 +17,11 @@ export default defineConfig({
 			},
 		},
 	},
-	integrations: [mdx(), alpinejs({ entrypoint: "/src/entrypoint" })],
+	integrations: [
+		mdx(),
+		alpinejs({ entrypoint: "/src/entrypoint" }),
+		pagefind(),
+	],
 	redirects: {
 		"/posts/[...slug]": "/blog/[...slug]",
 		"/blog": "/blog/page/1",

src/assets/svg/magnifying-glass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>

src/components/Header/Header.astro

@@ -8,6 +8,7 @@ import Nav from "./Nav.astro";
     <a href="/">ghall.space</a>
     <div>
       <Nav />
+
       <Drawer />
     </div>
   </div>
@@ -39,6 +40,7 @@ import Nav from "./Nav.astro";
   .container > div {
     display: flex;
     gap: 20px;
+    align-items: center;
   }
 
   a {

src/components/Header/Nav.astro

@@ -1,9 +1,5 @@
 ---
 import { navLinks } from "../../data/nav-links";
-
-const { pathname } = Astro.url;
-
-const pathComponents = pathname.split("/").slice(1);
 ---
 
 <nav>
@@ -11,12 +7,7 @@ const pathComponents = pathname.split("/").slice(1);
     {
       navLinks.map((link) => (
         <li>
-          <a
+          <a href={`/${link.path}`}>{link.label}</a>
-            href={`/${link.path}`}
-            class={pathComponents[0] === link.path ? "selected" : null}
-          >
-            {link.label}
-          </a>
         </li>
       ))
     }
@@ -31,6 +22,7 @@ const pathComponents = pathname.split("/").slice(1);
     gap: 10px;
     font-size: 1.15rem;
     font-weight: 600;
+    align-items: center;
   }
 
   a {

src/data/nav-links.ts

@@ -7,4 +7,5 @@ export const navLinks: NavLink[] = [
 	{ label: "Blog", path: "blog/page/1" },
 	{ label: "Now", path: "now" },
 	{ label: "Projects", path: "projects" },
+	{ label: "Search", path: "search" },
 ];

src/global.css

@@ -22,6 +22,7 @@
 	--red: #d20f39;
 	--orange: #fe640b;
 	--text: #4c4f69;
+	--highlight: #ffeebd;
 	--background: #fffdf5;
 	--radius: 5px;
 	--border: 1px solid #ced3f1;
@@ -127,6 +128,8 @@ kbd {
 	border: none;
 	line-height: 1;
 	aspect-ratio: square;
+	height: 24px;
+	width: 24px;
 }
 
 .icon-button:active {

src/pages/search.astro

@@ -0,0 +1,60 @@
+---
+import Layout from "@layouts/Layout.astro";
+import SearchField from "astro-pagefind/components/Search";
+---
+
+<Layout title="Search">
+  <div class="search-container">
+    <h2>Looking for something?</h2>
+    <SearchField
+      id="search"
+      className="pagefind-ui"
+      uiOptions={{ showImages: false }}
+    />
+  </div>
+</Layout>
+
+<style is:global>
+  .search-container {
+    min-height: 60vh;
+  }
+
+  .pagefind-ui {
+    font-family: "Noto Serif", serif !important;
+    color: var(--text) !important;
+  }
+
+  .pagefind-ui__search-input,
+  .pagefind-ui__button {
+    color: var(--text) !important;
+    border: var(--border) !important;
+    background-color: var(--background) !important;
+  }
+
+  .pagefind-ui__button:hover {
+    opacity: 0.75;
+  }
+
+  .pagefind-ui__search-clear {
+    color: var(--red) !important;
+    background-color: var(--background) !important;
+  }
+
+  .pagefind-ui__result-excerpt > mark {
+    background-color: var(--highlight);
+  }
+
+  .pagefind-ui__result-link {
+    color: var(--blue) !important;
+    text-decoration: none !important;
+  }
+
+  .pagefind-ui__result-link:hover {
+    opacity: 0.75;
+  }
+
+  .pagefind-ui__result {
+    border: none !important;
+    border-bottom: var(--border) !important;
+  }
+</style>