feat: implement article search with PostgreSQL full-text search
Some checks failed
CI / nightly-e2e (pull_request) Has been skipped
CI / deploy (pull_request) Has been skipped
CI / ci (pull_request) Failing after 1m21s
CI / pr-e2e (pull_request) Successful in 1m33s

- Configure Wagtail database search backend with English search config
- Add django.contrib.postgres to INSTALLED_APPS for full PG FTS support
- Expand ArticlePage.search_fields: body_text (excl. code blocks),
  AutocompleteField(title), RelatedFields(tags), FilterFields
- Add search view at /search/?q= with query guards (strip, max 200 chars,
  empty/whitespace handling) and pagination preserving query param
- Replace nav Subscribe CTA with compact search box (desktop + mobile)
- Add search box to article index page alongside category/tag filters
- Create search results template reusing article_card component
- Add update_index to deploy entrypoint for automated reindexing
- Update existing tests for nav change, add comprehensive search tests

Closes #41

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Mark
2026-03-03 21:25:11 +00:00
parent eebd5c9978
commit 906206d4cd
11 changed files with 299 additions and 8 deletions

View File

@@ -19,7 +19,11 @@
{% for category in category_nav_items %}
<a href="{{ category.url }}" class="hover:text-brand-cyan transition-colors {% if category.url in request.path %}text-brand-cyan{% endif %}" {% if category.url in request.path %}aria-current="page"{% endif %}>{{ category.name }}</a>
{% endfor %}
<a href="#newsletter" class="px-5 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold hover:-translate-y-1 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all border border-transparent dark:border-zinc-700">Subscribe</a>
<form action="{% url 'search' %}" method="get" role="search" class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
<input type="search" name="q" placeholder="Search articles..." aria-label="Search articles"
class="w-48 bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-300 dark:border-zinc-700 pl-9 pr-3 py-2 font-mono text-sm focus:outline-none focus:border-brand-cyan dark:focus:border-brand-cyan focus:ring-1 focus:ring-brand-cyan transition-shadow" />
</form>
</div>
<!-- Theme Toggle + Hamburger -->
@@ -44,6 +48,13 @@
{% for category in category_nav_items %}
<a href="{{ category.url }}" class="font-medium py-2 hover:text-brand-cyan transition-colors {% if category.url in request.path %}text-brand-cyan{% endif %}" {% if category.url in request.path %}aria-current="page"{% endif %}>{{ category.name }}</a>
{% endfor %}
<form action="{% url 'search' %}" method="get" role="search" class="pt-2 border-t border-zinc-200 dark:border-zinc-800">
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
<input type="search" name="q" placeholder="Search articles..." aria-label="Search articles"
class="w-full bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-300 dark:border-zinc-700 pl-9 pr-3 py-2 font-mono text-sm focus:outline-none focus:border-brand-cyan dark:focus:border-brand-cyan focus:ring-1 focus:ring-brand-cyan transition-shadow" />
</div>
</form>
<form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
{% csrf_token %}
<input type="hidden" name="source" value="nav-mobile" />