Static site (2): full-text search with Pagefind

CHANGELOG.md

@@ -13,6 +13,14 @@ Recipe imports are logged both here (summary) and in
 
 ### Added
 
+- **Static site: full-text search (ADR 0003, PR 2 of the site phase).** Added a
+  `/search/` page powered by [Pagefind](https://pagefind.app/), a static search index
+  built from the site output (`npm run build` now runs `eleventy && pagefind`). Only
+  recipe pages are indexed (`data-pagefind-body`), with a Category filter, clean result
+  titles and thumbnails, and highlighted matches. Search assets are self-hosted in the
+  generated bundle (no external requests). Verified locally: 487 recipes indexed, and a
+  query returns matching recipes with photos.
+
 - **Static site: scaffold, data layer, and first theme (ADR 0003, PR 1 of the site
   phase).** An [Eleventy](https://www.11ty.dev/) site under `site/` that generates a
   recipe-blog website from the existing Markdown: a landing page led by the biscotti

package.json

@@ -5,12 +5,14 @@
   "type": "module",
   "description": "Static site for the Blima Cake recipe archive (Eleventy).",
   "scripts": {
-    "build": "eleventy",
+    "build": "eleventy && pagefind --site _site",
+    "eleventy": "eleventy",
     "serve": "eleventy --serve"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "gray-matter": "^4.0.3",
-    "markdown-it": "^14.1.0"
+    "markdown-it": "^14.1.0",
+    "pagefind": "^1.5.2"
   }
 }

site/_includes/base.njk

@@ -15,6 +15,7 @@
           <a href="/">Home</a>
           <a href="/categories/">Recipes</a>
           <a href="/tags/">Tags</a>
+          <a href="/search/">Search</a>
           <a href="{{ site.epub }}">Cookbook</a>
         </nav>
       </div>

site/assets/style.css

@@ -181,6 +181,19 @@ h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; font-weight: 700;
 .tag-list { list-style: none; padding: 0; margin: 0; columns: 2; }
 .tag-list li { margin: 4px 0; break-inside: avoid; }
 
+/* Search (Pagefind UI theming) */
+.pagefind {
+  --pagefind-ui-primary: var(--accent);
+  --pagefind-ui-text: var(--ink);
+  --pagefind-ui-background: var(--surface);
+  --pagefind-ui-border: var(--line);
+  --pagefind-ui-tag: #f1e7d8;
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: var(--radius);
+  --pagefind-ui-font: var(--sans);
+  max-width: 640px;
+}
+
 /* Footer */
 .site-footer {
   background: var(--surface);

site/recipe.njk

@@ -8,19 +8,23 @@ permalink: "{{ recipe.url }}"
 eleventyComputed:
   pageTitle: "{{ recipe.title }}"
 ---
-<article class="recipe wrap">
-  <nav class="crumbs">
+<article class="recipe wrap" data-pagefind-body>
+  <nav class="crumbs" data-pagefind-ignore>
     <a href="/">Home</a> &middot;
     <a href="/categories/">Recipes</a> &middot;
     <a href="/category/{{ recipe.categorySlug }}/">{{ recipe.category }}</a>
   </nav>
 
   <header class="recipe-head">
-    <span class="recipe-cat">{{ recipe.category }}</span>
-    <h1>{{ recipe.title }}</h1>
+    <span class="recipe-cat" data-pagefind-filter="category">{{ recipe.category }}</span>
+    <h1 data-pagefind-meta="title">{{ recipe.title }}</h1>
+    {% if recipe.heroImage %}
+      <span hidden data-pagefind-meta="image:{{ recipe.heroImage }}"></span>
+      <span hidden data-pagefind-meta="image_alt:{{ recipe.heroAlt }}"></span>
+    {% endif %}
     {% if recipe.tags.length %}
       <p class="recipe-tags">
-        {% for t in recipe.tags %}<a href="/tags/#{{ t }}" class="tag">{{ t }}</a>{% endfor %}
+        {% for t in recipe.tags %}<a href="/tags/#{{ t }}" class="tag">{{ t }}</a> {% endfor %}
       </p>
     {% endif %}
   </header>

site/search.njk

@@ -0,0 +1,27 @@
+---
+layout: base.njk
+permalink: /search/
+pageTitle: Search
+---
+<section class="wrap section">
+  <h1 class="section-title">Search the recipes</h1>
+  <p class="muted">Search by name, ingredient, or how it is made.</p>
+  <div id="search" class="pagefind"></div>
+</section>
+
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+  window.addEventListener("DOMContentLoaded", () => {
+    new PagefindUI({
+      element: "#search",
+      showSubResults: true,
+      showImages: true,
+      resetStyles: false,
+      translations: {
+        placeholder: "Search Blima's recipes",
+        zero_results: "No recipes found for [SEARCH]",
+      },
+    });
+  });
+</script>