add search

Author: willwade

package-lock.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro check && astro build",
+    "build": "astro check && astro build && pagefind --site dist",
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint .",
@@ -37,6 +37,7 @@
     "eslint": "^9.39.3",
     "eslint-plugin-astro": "^1.3.1",
     "globals": "^15.14.0",
+    "pagefind": "^1.4.0",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.7.3",

package.json

@@ -11,6 +11,7 @@ const navItems = [
   { href: '/demonstrations/', label: 'Demonstrations' },
   { href: '/downloads/', label: 'Downloads' },
   { href: '/docs/', label: 'Docs' },
+  { href: '/search/', label: 'Search' },
   { href: '/community/', label: 'Community' },
   { href: '/faq/', label: 'FAQ' },
 ];

src/layouts/BaseLayout.astro

@@ -0,0 +1,54 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="Search - Dasher" description="Search the Dasher website documentation and pages.">
+  <div class="container">
+    <section class="section search-section">
+      <h1>Search</h1>
+      <p class="lead">
+        Search across docs, guides, and site pages.
+      </p>
+      <div id="search-ui" class="search-ui" aria-live="polite"></div>
+      <noscript>
+        <p>Search requires JavaScript enabled in your browser.</p>
+      </noscript>
+    </section>
+  </div>
+</BaseLayout>
+
+<link rel="stylesheet" href="/pagefind/pagefind-ui.css" />
+<script is:inline type="module">
+  const mount = document.getElementById('search-ui');
+
+  if (!mount) {
+    throw new Error('Search mount not found');
+  }
+
+  const showFallback = () => {
+    mount.innerHTML = `
+      <div class="search-fallback">
+        <p>Search index not available in this environment yet.</p>
+        <p>Run <code>npm run build</code> to generate Pagefind assets, then open this page from the built site.</p>
+      </div>
+    `;
+  };
+
+  try {
+    const { PagefindUI } = await import('/pagefind/pagefind-ui.js');
+    new PagefindUI({
+      element: '#search-ui',
+      showSubResults: true,
+      resetStyles: false,
+      autofocus: true,
+      placeholder: 'Search docs, demos, and pages...',
+      translations: {
+        clear_search: 'Clear',
+        load_more: 'Load more results',
+        search_label: 'Search site',
+      },
+    });
+  } catch {
+    showFallback();
+  }
+</script>

src/pages/search.astro

@@ -1199,6 +1199,24 @@ li {
   transform: translateY(-2px);
 }
 
+/* Search page */
+.search-section .lead {
+  margin-left: 0;
+  margin-right: 0;
+  text-align: left;
+}
+
+.search-ui {
+  margin-top: var(--space-md);
+}
+
+.search-fallback {
+  padding: var(--space-md);
+  background-color: var(--color-focus-yellow);
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-horizon-mint);
+}
+
 .external-link h3 {
   font-size: 1rem;
   margin: 0 0 var(--space-xs) 0;