From 9b7e535fa76efdd4f76c23f3d7dee8d860b60642 Mon Sep 17 00:00:00 2001
From: Dennis Fink
Date: Sun, 9 Aug 2026 15:34:34 +0200
Subject: 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.
---
 assets/static/css/style.css | 65 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

(limited to 'assets/static/css')

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index fb12054..00e9ee3 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -63,6 +63,36 @@ CUSTOM PROPERTIES
   --breakout-xl: 24rem;
   --breakout-xxl: 32rem;
 
+  /* Pagefind */
+  --pf-text: var(--foreground);
+  --pf-text-secondary: var(--dim-foreground);
+  --pf-text-muted: var(--dim-foreground);
+
+  --pf-background: var(--background);
+
+  --pf-border: var(--foreground);
+  --pf-border-focus: var(--green);
+
+  --pf-hover: color-mix(in srgb, var(--green) 10%, var(--background));
+
+  --pf-mark: var(--yellow);
+
+  --pf-outline-focus: var(--green);
+
+  --pf-shadow-sm: none;
+  --pf-shadow-md: none;
+  --pf-shadow-lg: none;
+
+  --pf-font: "Libre Baskerville", Georgia, serif;
+
+  --pf-input-height: 2.5rem;
+  --pf-input-font-size: 1rem;
+
+  --pf-border-radius: 0.5rem;
+
+  --pf-searchbox-max-width: 20rem;
+  --pf-searchbox-dropdown-max-height: 24rem;
+
   /* Responsive layout */
   @media (min-width: 500px) {
     --column-max-width: var(--measure);
@@ -401,6 +431,37 @@ body > header {
       width: 1.5rem;
     }
   }
+
+  /* --- Search --- */
+  pagefind-modal-trigger {
+    align-self: center;
+    margin-left: auto;
+
+    button {
+      background: none !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
+      color: var(--foreground) !important;
+      min-height: 0 !important;
+      padding: 0 !important;
+
+      &:hover {
+        color: var(--blue) !important;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--bright-blue);
+        outline-offset: 0.25rem;
+      }
+    }
+
+    .pf-trigger-icon {
+      background-color: currentColor !important;
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+    }
+  }
 }
 
 #lightmode + span,
@@ -1025,3 +1086,7 @@ article::after,
     }
   }
 }
+
+pagefind-modal .pf-result-card:has([data-pf-selected]) {
+  background: var(--pf-hover) !important;
+}
-- 
cgit v1.3.1