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:
parent
ebeaeeef21
commit
28b61ff251
12 changed files with 1013 additions and 8 deletions
25
internal/views/templates/base.html
Normal file
25
internal/views/templates/base.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{{define "base"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<meta name="robots" content="noarchive">
|
||||
<meta name="description" content="gosearch — a privacy-respecting, open metasearch engine">
|
||||
<title>{{template "title" .}}gosearch</title>
|
||||
<link rel="stylesheet" href="/static/css/gosearch.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
|
||||
<link title="gosearch" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml">
|
||||
</head>
|
||||
<body class="{{if .Query}}search_on_results{{end}}">
|
||||
<main>
|
||||
{{template "content" .}}
|
||||
</main>
|
||||
<footer>
|
||||
<p>Powered by <a href="https://git.ashisgreat.xyz/penal-colony/gosearch">gosearch</a> — a privacy-respecting, open metasearch engine</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
14
internal/views/templates/index.html
Normal file
14
internal/views/templates/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{{define "title"}}{{end}}
|
||||
{{define "content"}}
|
||||
<div class="index">
|
||||
<div class="title"><h1>gosearch</h1></div>
|
||||
<div id="search">
|
||||
<form method="GET" action="/search" role="search">
|
||||
<input type="text" name="q" id="q" placeholder="Search…" autocomplete="off" autofocus
|
||||
hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results"></div>
|
||||
{{end}}
|
||||
16
internal/views/templates/result_item.html
Normal file
16
internal/views/templates/result_item.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{{define "result_item"}}
|
||||
<article class="result">
|
||||
<h3 class="result_header">
|
||||
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>
|
||||
</h3>
|
||||
<div class="result_url">
|
||||
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
|
||||
</div>
|
||||
{{if .Content}}
|
||||
<p class="result_content">{{.Content}}</p>
|
||||
{{end}}
|
||||
{{if .Engine}}
|
||||
<div class="result_engine"><span class="engine">{{.Engine}}</span></div>
|
||||
{{end}}
|
||||
</article>
|
||||
{{end}}
|
||||
14
internal/views/templates/results.html
Normal file
14
internal/views/templates/results.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
|
||||
{{define "content"}}
|
||||
<div id="search">
|
||||
<form method="GET" action="/search" role="search">
|
||||
<input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off"
|
||||
hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="results">
|
||||
{{template "results_inner" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
107
internal/views/templates/results_inner.html
Normal file
107
internal/views/templates/results_inner.html
Normal 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}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue