Add Pagefind searchbar to apps/web header (#2075)

* Add Pagefind searchbar to apps/web header

- Install vite-plugin-pagefind and pagefind dependencies
- Configure pagefind plugin in vite.config.ts
- Update build script to run pagefind after vite build
- Create Search component using Pagefind UI
- Add Search component to header
- Import Pagefind UI CSS in styles.css

Co-Authored-By: yujonglee <[email protected]>

* Fix pagefind CSS import and add cleanup function

- Move CSS import from styles.css to dynamic loading in Search component
- Add cleanup function to destroy PagefindUI instance on unmount
- Fixes build error: ENOENT /pagefind/pagefind-ui.css during vite build

Co-Authored-By: yujonglee <[email protected]>

* wip

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: yujonglee

apps/web/package.json

@@ -4,10 +4,10 @@
   "type": "module",
   "scripts": {
     "dev": "VITE_APP_URL=\"http://localhost:3000\" dotenvx run --ignore MISSING_ENV_FILE -f ../../.env.supabase -f ../../.env.restate -f .env -- vite dev --port 3000",
-    "build": "vite build",
+    "build": "vite build && pagefind --site ./dist/client",
     "serve": "vite preview",
     "test": "playwright test",
-    "typecheck": "pnpm -F @hypr/web build && tsc --project tsconfig.json --noEmit",
+    "typecheck": "CI=true pnpm -F @hypr/web build && tsc --project tsconfig.json --noEmit",
     "gen:agents": "node scripts/gen-agents.js"
   },
   "dependencies": {
@@ -77,6 +77,7 @@
     "@vitejs/plugin-react": "^5.1.1",
     "jsdom": "^27.2.0",
     "netlify": "^23.11.1",
+    "pagefind": "^1.4.0",
     "tanstack-router-sitemap": "^1.0.13",
     "typescript": "^5.9.3",
     "vite": "^7.2.4",

apps/web/src/components/header.tsx

@@ -8,6 +8,7 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
+import { Search } from "@/components/search";
 import { useDocsDrawer } from "@/hooks/use-docs-drawer";
 import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
 
@@ -176,6 +177,7 @@ export function Header() {
             </div>
 
             <nav className="hidden sm:flex items-center gap-2">
+              <Search />
               <Link
                 to="/join-waitlist"
                 className="px-4 h-8 flex items-center text-sm text-neutral-600 hover:text-neutral-800 transition-all hover:underline decoration-dotted"

apps/web/src/components/search.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+
+export function Search() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let pagefindInstance: { destroy?: () => void } | null = null;
+
+    const loadPagefind = async () => {
+      if (!containerRef.current) return;
+
+      const linkId = "pagefind-ui-css";
+      if (!document.getElementById(linkId)) {
+        const link = document.createElement("link");
+        link.id = linkId;
+        link.rel = "stylesheet";
+        link.href = "/pagefind/pagefind-ui.css";
+        document.head.appendChild(link);
+      }
+
+      try {
+        const pagefindPath = "/pagefind/pagefind-ui.js";
+        const pagefindUI = await import(/* @vite-ignore */ pagefindPath);
+        pagefindInstance = new pagefindUI.PagefindUI({
+          element: containerRef.current,
+          showSubResults: true,
+          showImages: false,
+        });
+      } catch {}
+    };
+
+    loadPagefind();
+
+    return () => {
+      if (pagefindInstance?.destroy) {
+        pagefindInstance.destroy();
+      }
+    };
+  }, []);
+
+  return <div ref={containerRef} />;
+}

apps/web/src/env.ts

@@ -1,6 +1,7 @@
 import { createEnv } from "@t3-oss/env-core";
 import { z } from "zod";
 
+const isCI = process.env.CI === "true";
 const isDev = process.env.NODE_ENV === "development";
 
 export const env = createEnv({
@@ -34,5 +35,5 @@ export const env = createEnv({
 
   runtimeEnv: { ...process.env, ...import.meta.env },
   emptyStringAsUndefined: true,
-  skipValidation: process.env.CI === "true",
+  skipValidation: isCI,
 });