feat: HTMX + Go Templates HTML frontend

- Add internal/views/ package with embedded templates and static files
- Go html/template with SearXNG-compatible CSS class names
- Dark mode via prefers-color-scheme, responsive layout, print styles
- HTMX integration:
  - Debounced instant search (500ms) on the search input
  - Form submission targets #results via hx-post
  - Pagination buttons are HTMX-powered (swap results div only)
  - HX-Request header detection for fragment vs full page rendering
- Template structure:
  - base.html: full page layout with HTMX script, favicon, CSS
  - index.html: homepage with centered search box
  - results.html: full results page (wraps base + results_inner)
  - results_inner.html: results fragment (HTMX partial + sidebar + pagination)
  - result_item.html: reusable result article partial
- Smart format detection: browser requests (Accept: text/html) default to HTML,
  API clients default to JSON
- Static files served at /static/ from embedded FS (CSS, favicon SVG)
- Index route at GET /
- Empty query on HTML format redirects to homepage
- Custom CSS (gosearch.css): clean, minimal, privacy-respecting aesthetic
  with light/dark mode, responsive breakpoints, print stylesheet
- Add views package tests
This commit is contained in:
Franz Kafka 2026-03-21 16:10:42 +00:00
parent ebeaeeef21
commit 28b61ff251
12 changed files with 1013 additions and 8 deletions

View file

@ -0,0 +1,107 @@
{{define "results_inner"}}
{{if .Corrections}}
<div class="corrections">
{{range .Corrections}}<span class="correction">{{.}}</span>{{end}}
</div>
{{end}}
{{if .Answers}}
<div id="answers">
{{range .Answers}}
<div class="answer">{{.}}</div>
{{end}}
</div>
{{end}}
<div id="sidebar">
{{if .NumberOfResults}}
<p id="result_count"><small>{{.NumberOfResults}} results</small></p>
{{end}}
{{if .Infoboxes}}
<div id="infoboxes">
{{range .Infoboxes}}
<div class="infobox">
{{if .title}}<div class="title">{{.title}}</div>{{end}}
{{if .content}}<div class="content">{{.content}}</div>{{end}}
{{if .img_src}}<img src="{{.img_src}}" alt="{{.title}}" loading="lazy">{{end}}
</div>
{{end}}
</div>
{{end}}
{{if .Suggestions}}
<div id="suggestions">
<small>Suggestions:</small>
<div>
{{range .Suggestions}}<span class="suggestion"><a href="/search?q={{.}}">{{.}}</a></span>{{end}}
</div>
</div>
{{end}}
{{if .UnresponsiveEngines}}
<div class="unresponsive_engines">
<small>Unresponsive engines:</small>
<ul>
{{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
</ul>
</div>
{{end}}
</div>
<div id="urls" role="main">
{{if .Results}}
{{range .Results}}
{{template "result_item" .}}
{{end}}
{{else if not .Answers}}
<div class="no_results">
<p>No results found.</p>
{{if .Query}}<p>Try different keywords or check your spelling.</p>{{end}}
</div>
{{end}}
</div>
{{if .Pageno}}
<nav id="pagination" role="navigation">
{{if gt .Pageno 1}}
<form method="GET" action="/search" class="previous_page">
<input type="hidden" name="q" value="{{.Query}}">
<input type="hidden" name="pageno" value="{{.PrevPage}}">
<input type="hidden" name="format" value="html">
<button type="submit" role="link">← Previous</button>
</form>
{{end}}
<div class="numbered_pagination">
{{range .PageNumbers}}
{{if .IsCurrent}}
<span class="page_number_current">{{.Num}}</span>
{{else}}
<form method="GET" action="/search" class="page_number">
<input type="hidden" name="q" value="{{$.Query}}">
<input type="hidden" name="pageno" value="{{.Num}}">
<input type="hidden" name="format" value="html">
<button type="submit" role="link">{{.Num}}</button>
</form>
{{end}}
{{end}}
</div>
{{if .HasNext}}
<form method="GET" action="/search" class="next_page">
<input type="hidden" name="q" value="{{.Query}}">
<input type="hidden" name="pageno" value="{{.NextPage}}">
<input type="hidden" name="format" value="html">
<button type="submit" role="link">Next →</button>
</form>
{{end}}
</nav>
{{end}}
<div id="backToTop">
<a href="#">↑ Back to top</a>
</div>
<div class="htmx-indicator">Searching…</div>
{{end}}