svemagie.net/indiekit-blog
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Activity

feat: add Pagefind search box to 404 page

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
2026-02-12 10:14:09 +01:00
parent a92fa93780
commit a54d094891
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.njk
+15 -2
View File
@@ -7,9 +7,22 @@ pagefindIgnore: true
<div class="text-center py-12"> <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> <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> <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> <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"> <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> <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 Go back home
</a> </a>
</div> </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>