feat(site): migrate search from Pagefind to Algolia DocSearch v4

site/CLAUDE.md

@@ -165,7 +165,6 @@ site/
 │   └── api-docs-builder/    # Generates API reference from TypeScript
 ├── public/                  # Static assets (served untransformed)
 ├── integrations/            # Custom Astro integrations
-│   ├── pagefind.ts          # Pagefind search integration
 │   └── llms-markdown.ts     # LLM-optimized markdown generation
 ├── astro.config.mjs         # Astro configuration
 ├── tsconfig.json            # TypeScript config with path aliases
@@ -554,7 +553,7 @@ vi.mock('@/types/docs', async () => {
 - **[Tailwind v4](https://tailwindcss.com)**: CSS utility classes via `@tailwindcss/vite`
 - **[Nanostores 1.0.1](https://github.com/nanostores/nanostores)**: Cross-island state
 - **[Base UI 1.2.0](https://base-ui.com)**: Headless accessible components
-- **[Pagefind 1.4.0](https://pagefind.app)**: Static search with build-time indexing
+- **[Algolia DocSearch v4](https://docsearch.algolia.com)**: Search via Algolia-hosted indexes (docs + blog)
 - **[Shiki 3.13.0](https://shiki.style)**: Syntax highlighting
 - **[Vitest 3.2.4](https://vitest.dev)**: Testing framework
 - **[clsx](https://github.com/lukeed/clsx)**: Class name concatenation utility
@@ -582,30 +581,24 @@ import UtilReference from '@/components/docs/api-reference/UtilReference.astro';
 <UtilReference util="usePlayer" />
 ```
 
-## Custom Astro Integration: Pagefind
+## Search: Algolia DocSearch v4
 
-**Location:** `integrations/pagefind.ts`
+**Config:** `src/search.config.ts` — Algolia app ID, API key, and index names.
 
-**Purpose:** Integrates Pagefind static search into Astro build pipeline.
+**Component:** `src/components/Search.tsx` — React component loaded via `client:load` in the NavBar.
 
-**Development mode:**
-- Serves Pagefind index from previous production build
-- Uses `sirv` middleware to serve `/pagefind/*` routes
-- Warns if index doesn't exist (needs `pnpm build` first)
+**Styles:** `src/styles/docsearch.css` — CSS variable overrides mapping DocSearch theming to site tokens (imported via `globals.css`).
 
-**Production mode:**
-- Runs Pagefind CLI after Astro build completes
-- Indexes all HTML files in `dist/`
-- Maps Astro logger levels to Pagefind CLI flags
-
-**Usage in `astro.config.mjs`:**
-```js
-import pagefind from './integrations/pagefind';
+**How it works:**
+- `DocSearch` React component provides the trigger button, modal, and keyboard shortcut (Cmd+K)
+- Two indexes queried via the `indices` prop: `videojs_docs` (filtered by current framework) and `videojs_blog` (unfiltered)
+- No build-time indexing — search queries hit the Algolia API directly
 
-export default defineConfig({
-  integrations: [pagefind()],
-});
-```
+**Data attributes used by the crawler:**
+- `data-search-content` — marks searchable content regions
+- `data-search-ignore` — excludes elements from search indexing
+- `data-framework`, `data-site`, `data-category` — facet/filter attributes
+- `data-llms-*` attributes are for the LLM markdown integration (unrelated to search)
 
 ## Environment Variables
 
@@ -819,12 +812,9 @@ Key points:
 - Add new guides to `src/docs.config.ts` sidebar
 - Use `devOnly: true` for internal documentation
 
-### Search Indexing
+### Search
 
-Pagefind indexes HTML files after build. During development:
-1. Run `pnpm build` at least once to generate search index
-2. Dev server serves the index from previous build
-3. Search won't include new content until next build
+Search is powered by Algolia DocSearch v4 and queries the Algolia API directly — no build-time indexing step needed. Search works in both dev and production as long as the Algolia account is provisioned. See the "Search: Algolia DocSearch v4" section above for details.
 
 ### Adding Framework/Style Support
 

site/README.md

@@ -13,7 +13,7 @@ Mostly a standard [Astro](https://astro.build/) project.
 ├── public/                  # Static assets served as videojs.org/[filename]
 ├── scripts/
 │  └── api-docs-builder/     # Generates API reference JSON from TypeScript sources
-├── integrations/            # Custom Astro integrations (pagefind, llms-markdown, etc.)
+├── integrations/            # Custom Astro integrations (llms-markdown, etc.)
 ├── src/
 │  ├── assets/               # Assets imported into components, pages, etc.
 │  ├── components/
@@ -164,9 +164,14 @@ See [CLAUDE.md](CLAUDE.md) for details on each plugin.
 
 ## Custom Integrations
 
-Two custom Astro integrations in `integrations/`:
+### Search
+
+Search is powered by [Algolia DocSearch v4](https://docsearch.algolia.com). Configuration is in `src/search.config.ts` and the component is `src/components/Search.tsx`.
+
+### Custom Integration
+
+One custom Astro integration in `integrations/`:
 
-- **pagefind** — Indexes HTML after build for static search; serves previous index in dev
 - **llms-markdown** — Generates LLM-optimized `.md` files and `llms.txt` index from `[data-llms-content]` elements
 
 See [CLAUDE.md](CLAUDE.md) for implementation details.

site/astro.config.mjs

@@ -11,7 +11,6 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, envField, fontProviders } from 'astro/config';
 import svgr from 'vite-plugin-svgr';
 import llmsMarkdown from './integrations/llms-markdown';
-import pagefind from './integrations/pagefind';
 import rehypePrepareCodeBlocks from './src/utils/rehypePrepareCodeBlocks';
 import remarkConditionalHeadings from './src/utils/remarkConditionalHeadings';
 import { remarkReadingTime } from './src/utils/remarkReadingTime.mjs';
@@ -77,7 +76,6 @@ export default defineConfig({
         `${SITE_URL}/docs/framework/react/llms.txt`,
       ],
     }),
-    pagefind(),
     llmsMarkdown(),
     react({
       babel: {

site/package.json

@@ -22,10 +22,11 @@
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.6.0",
     "@base-ui/react": "^1.2.0",
+    "@docsearch/css": "^4.6.0",
+    "@docsearch/react": "^4.6.0",
     "@mux/mux-node": "^12.8.1",
     "@mux/mux-uploader-react": "^1.4.1",
     "@nanostores/react": "^1.0.0",
-    "@pagefind/default-ui": "^1.4.0",
     "@sentry/astro": "^10.32.1",
     "@shikijs/transformers": "^4.0.2",
     "@tailwindcss/vite": "^4.2.1",
@@ -70,7 +71,6 @@
     "jsdom": "^27.0.0",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
-    "sirv": "^3.0.2",
     "tsx": "^4.21.0",
     "turndown": "^7.2.2",
     "typescript": "^5.9.3",

site/src/components/NavBar/NavBar.astro

@@ -45,7 +45,7 @@ const { class: className, dark = false } = Astro.props;
   >
     <Logo width="100%" />
   </a>
-  <Search class="mr-4 ml-auto sm:self-center" />
+  <Search client:load className="mr-4 ml-auto sm:self-center" />
   {/* Desktop nav links */}
   <div class="hidden md:flex">
     <GetStartedLink

site/src/components/NavBar/NavBarDocs.astro

@@ -42,7 +42,7 @@ const { class: className } = Astro.props;
       <LogoDocs width="100%" />
     </div>
   </a>
-  <Search class="mr-4 ml-auto sm:self-center" />
+  <Search client:load className="mr-4 ml-auto sm:self-center" />
   {/* Desktop nav links */}
   <div class="hidden h-full md:flex">
     <GetStartedLink

site/src/components/Search.tsx

@@ -0,0 +1,36 @@
+import { DocSearch } from '@docsearch/react';
+import { useStore } from '@nanostores/react';
+import { GITHUB_REPO_URL } from '@/consts';
+import { DOCSEARCH_API_KEY, DOCSEARCH_APP_ID, DOCSEARCH_BLOG_INDEX, DOCSEARCH_DOCS_INDEX } from '@/search.config';
+import { currentFramework } from '@/stores/preferences';
+
+interface SearchProps {
+  className?: string;
+}
+
+export default function Search({ className }: SearchProps) {
+  const framework = useStore(currentFramework);
+
+  return (
+    <div className={className}>
+      <DocSearch
+        appId={DOCSEARCH_APP_ID}
+        apiKey={DOCSEARCH_API_KEY}
+        indices={[
+          {
+            name: DOCSEARCH_DOCS_INDEX,
+            searchParameters: {
+              facetFilters: framework ? [`framework:${framework}`] : [],
+            },
+          },
+          {
+            name: DOCSEARCH_BLOG_INDEX,
+          },
+        ]}
+        getMissingResultsUrl={({ query }) =>
+          `${GITHUB_REPO_URL}issues/new?title=${encodeURIComponent(`Search: no results for "${query}"`)}&labels=search`
+        }
+      />
+    </div>
+  );
+}