Files
Eric Wagoner 527f0a2640 Add Pagefind search functionality and fix missing images
- Installed Pagefind static search indexing
- Created search page with custom dark theme styling
- Added search to main navigation menu
- Updated deploy script to include Pagefind indexing
- Fixed missing images in birthday and chick legacy pages
- Copied all missing legacy images from archive

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-23 18:17:11 -04:00

114 lines
2.7 KiB
HTML

{{ define "main" }}
<article>
<header>
<h1>{{ .Title }}</h1>
</header>
<div class="content">
{{ .Content }}
<!-- Pagefind Search UI -->
<div id="search"></div>
<!-- Pagefind CSS -->
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<!-- Pagefind JS -->
<script src="/pagefind/pagefind-ui.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({
element: "#search",
showSubResults: true,
showImages: false,
excerptLength: 15
});
});
</script>
<style>
/* Custom styles for Pagefind */
.pagefind-ui {
max-width: none;
}
.pagefind-ui__search-input {
font-size: 1.1rem;
padding: 0.75rem;
background: #fff;
color: #333;
}
.pagefind-ui__result {
border: 1px solid #555;
background: rgba(30, 30, 30, 0.8);
margin-bottom: 1rem;
padding: 1.25rem;
border-radius: 8px;
}
.pagefind-ui__result-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #ffffff !important;
}
.pagefind-ui__result-link {
color: #6bb3ff !important;
text-decoration: none;
font-weight: 600;
}
.pagefind-ui__result-link:hover {
text-decoration: underline;
color: #89c7ff !important;
}
.pagefind-ui__result-excerpt {
font-size: 1.05rem;
line-height: 1.7;
color: #ffffff;
margin-top: 0.5rem;
opacity: 0.9;
}
.pagefind-ui__result-excerpt mark {
background: #ffeb3b;
color: #000;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
}
.pagefind-ui__button {
background: #4a9eff;
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
}
.pagefind-ui__button:hover {
background: #6bb3ff;
}
.pagefind-ui__message {
color: #ffffff;
font-size: 1.1rem;
padding: 1rem;
opacity: 0.8;
}
.pagefind-ui__drawer {
margin-top: 2rem;
}
/* Force all text to be visible */
.pagefind-ui__result-inner {
color: #ffffff !important;
}
.pagefind-ui__result-inner * {
color: inherit !important;
}
.pagefind-ui__result-inner .pagefind-ui__result-title {
color: #ffffff !important;
}
.pagefind-ui__result-inner .pagefind-ui__result-link {
color: #6bb3ff !important;
}
.pagefind-ui__result-inner h3 {
color: #ffffff !important;
}
</style>
</div>
</article>
{{ end }}