Add self-hosted Pagefind search

This adds the Pagefind component UI assets and wires the search modal
into the base template with a compact header trigger.

The integration marks searchable page bodies explicitly, exposes page
titles to Pagefind metadata, and adds site-specific styling so the
search modal, trigger, focus states, and keyboard-selected results match
the blog’s colour scheme.

1 files changed, 10 insertions, 1 deletions

diff --git a/templates/base.html b/templates/base.html
index 99341e7..83d4234 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -13,6 +13,7 @@
         <meta property="og:description"  content="{{ page_description }}">
         <meta property="og:site_name" content="{{ bag('blog.name') }}">
         <meta property="og:title"
+              data-pagefind-meta="title[content]"
               content="{% if (this.title or title) %}{{ (this.title or title) | safe }}{% else %}{{ bag('blog.name') }}{% endif %}">
         <meta property="og:url"
               content="{{ this | url(absolute=True, external=True) }}">
@@ -73,6 +74,9 @@
               href="{{ '/static/css/libre_baskerville.css' | asseturl }}">
         <link rel="stylesheet"
               type="text/css"
+              href="{{ '/static/vendor/pagefind/pagefind-component-ui.css' | asseturl }}">
+        <link rel="stylesheet"
+              type="text/css"
               href="{{ '/static/css/style.css' | asseturl }}">
       {% endblock styles %}
 
@@ -122,6 +126,7 @@
   <body>
     {% block body %}
       <a href="#main" class="skip-link">Skip to main content</a>
+      <pagefind-config bundle-path="/pagefind/"></pagefind-config>
       <header>
         {% block site_header %}
           <div>
@@ -156,6 +161,7 @@
                 </ul>
               {% endblock site_navigation %}
             </nav>
+            <pagefind-modal-trigger compact placeholder="Search" hide-shortcut></pagefind-modal-trigger>
             <fieldset class="theme-switcher">
               <legend class="visually-hidden">Color theme</legend>
               <label title="Light mode">
@@ -187,7 +193,8 @@
           </div>
         {% endblock site_header %}
       </header>
-      <main>
+      <pagefind-modal></pagefind-modal>
+      <main {% if pagefind_body | default(false) %}data-pagefind-body{% endif %}>
         {% block content required %}
         {% endblock content %}
       </main>
@@ -224,6 +231,8 @@
       </footer>
     {% endblock body %}
     {% block scripts %}
+      <script src="{{ '/static/vendor/pagefind/pagefind-component-ui.js' | asseturl }}"
+              type="module"></script>
       {% if needs_trail_assets | default(false) %}
         <script src="{{ '/static/vendor/leaflet/leaflet.js' | asseturl }}" defer></script>
         <script src="{{ '/static/vendor/leaflet-providers/leaflet-providers.js' | asseturl }}"