From a54d094891bfc7ad6f4a41d653ecd11085096ab4 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Thu, 12 Feb 2026 10:14:09 +0100
Subject: [PATCH] feat: add Pagefind search box to 404 page

Helps visitors from old unreirected links find what they're looking for.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 404.njk | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/404.njk b/404.njk
index 4236492..958fc50 100644
--- a/404.njk
+++ b/404.njk
@@ -7,9 +7,22 @@ pagefindIgnore: true
 <div class="text-center py-12">
   <h1 class="text-4xl sm:text-6xl font-bold text-surface-300 dark:text-surface-700 mb-4">404</h1>
   <h2 class="text-xl sm:text-2xl font-semibold text-surface-900 dark:text-surface-100 mb-4">Page Not Found</h2>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">Sorry, the page you're looking for doesn't exist.</p>
-  <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors">
+  <p class="text-surface-600 dark:text-surface-400 mb-8">Sorry, the page you're looking for doesn't exist. Try searching for it below.</p>
+  <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors mb-8">
     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
     Go back home
   </a>
 </div>
+
+<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+<div id="search-404" class="max-w-2xl mx-auto"></div>
+<script src="/pagefind/pagefind-ui.js"></script>
+<script>
+  window.addEventListener("DOMContentLoaded", () => {
+    new PagefindUI({
+      element: "#search-404",
+      showSubResults: true,
+      showImages: false,
+    });
+  });
+</script>