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
459
internal/views/static/css/gosearch.css
Normal file
459
internal/views/static/css/gosearch.css
Normal file
|
|
@ -0,0 +1,459 @@
|
|||
/* gosearch — clean, minimal search engine CSS */
|
||||
/* Inspired by SearXNG's simple theme class conventions */
|
||||
|
||||
:root {
|
||||
--color-base: #f5f5f5;
|
||||
--color-base-font: #444;
|
||||
--color-base-background: #fff;
|
||||
--color-header-background: #f7f7f7;
|
||||
--color-header-border: #ddd;
|
||||
--color-search-border: #bbb;
|
||||
--color-search-focus: #3498db;
|
||||
--color-result-url: #1a0dab;
|
||||
--color-result-url-visited: #609;
|
||||
--color-result-content: #545454;
|
||||
--color-result-title: #1a0dab;
|
||||
--color-result-title-visited: #609;
|
||||
--color-result-engine: #666;
|
||||
--color-result-border: #eee;
|
||||
--color-link: #3498db;
|
||||
--color-link-visited: #609;
|
||||
--color-sidebar-background: #f7f7f7;
|
||||
--color-sidebar-border: #ddd;
|
||||
--color-infobox-background: #f9f9f9;
|
||||
--color-infobox-border: #ddd;
|
||||
--color-pagination-current: #3498db;
|
||||
--color-pagination-border: #ddd;
|
||||
--color-error: #c0392b;
|
||||
--color-error-background: #fdecea;
|
||||
--color-suggestion: #666;
|
||||
--color-footer: #888;
|
||||
--color-btn-background: #fff;
|
||||
--color-btn-border: #ddd;
|
||||
--color-btn-hover: #eee;
|
||||
--radius: 4px;
|
||||
--max-width: 800px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-base: #222;
|
||||
--color-base-font: #dcdcdc;
|
||||
--color-base-background: #2b2b2b;
|
||||
--color-header-background: #333;
|
||||
--color-header-border: #444;
|
||||
--color-search-border: #555;
|
||||
--color-search-focus: #5dade2;
|
||||
--color-result-url: #8ab4f8;
|
||||
--color-result-url-visited: #b39ddb;
|
||||
--color-result-content: #b0b0b0;
|
||||
--color-result-title: #8ab4f8;
|
||||
--color-result-title-visited: #b39ddb;
|
||||
--color-result-engine: #999;
|
||||
--color-result-border: #3a3a3a;
|
||||
--color-link: #5dade2;
|
||||
--color-link-visited: #b39ddb;
|
||||
--color-sidebar-background: #333;
|
||||
--color-sidebar-border: #444;
|
||||
--color-infobox-background: #333;
|
||||
--color-infobox-border: #444;
|
||||
--color-pagination-current: #5dade2;
|
||||
--color-pagination-border: #444;
|
||||
--color-error: #e74c3c;
|
||||
--color-error-background: #3b1a1a;
|
||||
--color-suggestion: #999;
|
||||
--color-footer: #666;
|
||||
--color-btn-background: #333;
|
||||
--color-btn-border: #555;
|
||||
--color-btn-hover: #444;
|
||||
}
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--color-base-font);
|
||||
background: var(--color-base);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
max-width: var(--max-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: var(--color-footer);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Index / Homepage */
|
||||
.index {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index .title h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: 2rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Search form */
|
||||
#search {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#search form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#search input[type="text"],
|
||||
#q {
|
||||
flex: 1;
|
||||
padding: 0.7rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--color-search-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-base-background);
|
||||
color: var(--color-base-font);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
#search input[type="text"]:focus,
|
||||
#q:focus {
|
||||
border-color: var(--color-search-focus);
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
|
||||
}
|
||||
|
||||
#search button[type="submit"] {
|
||||
padding: 0.7rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--color-search-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-base-font);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#search button[type="submit"]:hover {
|
||||
background: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* Results page search bar (compact) */
|
||||
.search_on_results #search {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Results area */
|
||||
#results {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 200px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
#sidebar p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#urls {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Result count */
|
||||
#result_count {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Individual result */
|
||||
.result {
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid var(--color-result-border);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.result:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.result_header {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.result_header a {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-result-title);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.result_header a:visited {
|
||||
color: var(--color-result-title-visited);
|
||||
}
|
||||
|
||||
.result_header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.result_url {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-result-url);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.result_url a {
|
||||
color: var(--color-result-url);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.result_url a:visited {
|
||||
color: var(--color-result-url-visited);
|
||||
}
|
||||
|
||||
.result_content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-result-content);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.result_content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result_engine {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-result-engine);
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.engine {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: var(--color-sidebar-background);
|
||||
border: 1px solid var(--color-sidebar-border);
|
||||
border-radius: 2px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-result-engine);
|
||||
}
|
||||
|
||||
/* No results */
|
||||
.no_results {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--color-suggestion);
|
||||
}
|
||||
|
||||
/* Suggestions */
|
||||
#suggestions {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
display: inline-block;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
|
||||
.suggestion a {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid var(--color-pagination-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
background: var(--color-btn-background);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.suggestion a:hover {
|
||||
background: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* Infoboxes */
|
||||
#infoboxes {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
background: var(--color-infobox-background);
|
||||
border: 1px solid var(--color-infobox-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.infobox .title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Errors */
|
||||
.dialog-error {
|
||||
background: var(--color-error-background);
|
||||
color: var(--color-error);
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Unresponsive engines */
|
||||
.unresponsive_engines {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-suggestion);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.unresponsive_engines li {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
|
||||
/* Corrections */
|
||||
.correction {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
#pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
padding: 1.5rem 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#pagination button,
|
||||
#pagination .page_number,
|
||||
#pagination .page_number_current {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--color-pagination-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-base-font);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#pagination button:hover,
|
||||
#pagination .page_number:hover {
|
||||
background: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
#pagination .page_number_current {
|
||||
background: var(--color-pagination-current);
|
||||
color: #fff;
|
||||
border-color: var(--color-pagination-current);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.previous_page, .next_page {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Back to top */
|
||||
#backToTop {
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
#backToTop a {
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* HTMX loading indicator */
|
||||
.htmx-indicator {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--color-suggestion);
|
||||
}
|
||||
|
||||
.htmx-request .htmx-indicator,
|
||||
.htmx-request.htmx-indicator {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
#results {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: none;
|
||||
border-top: 1px solid var(--color-sidebar-border);
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.index .title h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print */
|
||||
@media print {
|
||||
footer, #pagination, #search button, #backToTop, .htmx-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
4
internal/views/static/img/favicon.svg
Normal file
4
internal/views/static/img/favicon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
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}}
|
||||
196
internal/views/views.go
Normal file
196
internal/views/views.go
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
package views
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"html/template"
|
||||
"io/fs"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"strings"
|
||||
|
||||
"github.com/ashie/gosearch/internal/contracts"
|
||||
)
|
||||
|
||||
//go:embed all:templates
|
||||
var templatesFS embed.FS
|
||||
|
||||
//go:embed all:static
|
||||
var staticFS embed.FS
|
||||
|
||||
// PageData holds all data passed to templates.
|
||||
type PageData struct {
|
||||
Query string
|
||||
Pageno int
|
||||
PrevPage int
|
||||
NextPage int
|
||||
HasNext bool
|
||||
NumberOfResults int
|
||||
Results []ResultView
|
||||
Answers []string
|
||||
Corrections []string
|
||||
Suggestions []string
|
||||
Infoboxes []InfoboxView
|
||||
UnresponsiveEngines [][2]string
|
||||
PageNumbers []PageNumber
|
||||
}
|
||||
|
||||
// ResultView is a template-friendly wrapper around a MainResult.
|
||||
type ResultView contracts.MainResult
|
||||
|
||||
// PageNumber represents a numbered pagination button.
|
||||
type PageNumber struct {
|
||||
Num int
|
||||
IsCurrent bool
|
||||
}
|
||||
|
||||
// InfoboxView is a template-friendly infobox.
|
||||
type InfoboxView struct {
|
||||
Title string
|
||||
Content string
|
||||
ImgSrc string
|
||||
}
|
||||
|
||||
var (
|
||||
tmplFull *template.Template
|
||||
tmplIndex *template.Template
|
||||
tmplFragment *template.Template
|
||||
)
|
||||
|
||||
func init() {
|
||||
// Strip the leading "templates/" prefix from embed paths.
|
||||
tmplFS, _ := fs.Sub(templatesFS, "templates")
|
||||
|
||||
funcMap := template.FuncMap{
|
||||
"urlquery": template.URLQueryEscaper,
|
||||
}
|
||||
|
||||
tmplFull = template.Must(template.New("").Funcs(funcMap).ParseFS(tmplFS,
|
||||
"base.html", "results.html", "results_inner.html", "result_item.html",
|
||||
))
|
||||
tmplIndex = template.Must(template.New("").Funcs(funcMap).ParseFS(tmplFS,
|
||||
"base.html", "index.html",
|
||||
))
|
||||
tmplFragment = template.Must(template.New("").Funcs(funcMap).ParseFS(tmplFS,
|
||||
"results_inner.html", "result_item.html",
|
||||
))
|
||||
}
|
||||
|
||||
// StaticFS returns the embedded static file system for serving CSS/JS/images.
|
||||
func StaticFS() (fs.FS, error) {
|
||||
return fs.Sub(staticFS, "static")
|
||||
}
|
||||
|
||||
// FromResponse builds PageData from a search response and request params.
|
||||
func FromResponse(resp contracts.SearchResponse, query string, pageno int) PageData {
|
||||
pd := PageData{
|
||||
Query: query,
|
||||
Pageno: pageno,
|
||||
NumberOfResults: resp.NumberOfResults,
|
||||
UnresponsiveEngines: resp.UnresponsiveEngines,
|
||||
}
|
||||
|
||||
// Convert results.
|
||||
pd.Results = make([]ResultView, len(resp.Results))
|
||||
for i, r := range resp.Results {
|
||||
pd.Results[i] = ResultView(r)
|
||||
}
|
||||
|
||||
// Convert answers (they're map[string]any — extract string values).
|
||||
for _, a := range resp.Answers {
|
||||
if s, ok := a["answer"].(string); ok && s != "" {
|
||||
pd.Answers = append(pd.Answers, s)
|
||||
}
|
||||
}
|
||||
|
||||
pd.Corrections = resp.Corrections
|
||||
pd.Suggestions = resp.Suggestions
|
||||
|
||||
// Convert infoboxes.
|
||||
for _, ib := range resp.Infoboxes {
|
||||
iv := InfoboxView{}
|
||||
if v, ok := ib["infobox"].(string); ok {
|
||||
iv.Content = v
|
||||
}
|
||||
if v, ok := ib["title"].(string); ok {
|
||||
iv.Title = v
|
||||
}
|
||||
if v, ok := ib["img_src"].(string); ok {
|
||||
iv.ImgSrc = v
|
||||
}
|
||||
if iv.Title != "" || iv.Content != "" {
|
||||
pd.Infoboxes = append(pd.Infoboxes, iv)
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination.
|
||||
pd.PrevPage = pageno - 1
|
||||
if pd.PrevPage < 1 {
|
||||
pd.PrevPage = 1
|
||||
}
|
||||
pd.NextPage = pageno + 1
|
||||
// Assume there are more results if we got results on this page.
|
||||
pd.HasNext = len(resp.Results) > 0
|
||||
|
||||
// Build page number list.
|
||||
pstart := 1
|
||||
pend := 10
|
||||
if pageno > 5 {
|
||||
pstart = pageno - 4
|
||||
pend = pageno + 5
|
||||
}
|
||||
if pstart < 1 {
|
||||
pstart = 1
|
||||
}
|
||||
for x := pstart; x <= pend; x++ {
|
||||
pd.PageNumbers = append(pd.PageNumbers, PageNumber{Num: x, IsCurrent: x == pageno})
|
||||
}
|
||||
|
||||
return pd
|
||||
}
|
||||
|
||||
// RenderIndex renders the homepage (search box only).
|
||||
func RenderIndex(w http.ResponseWriter) error {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
return tmplIndex.ExecuteTemplate(w, "base", PageData{})
|
||||
}
|
||||
|
||||
// RenderSearch renders the full search results page (with base layout).
|
||||
func RenderSearch(w http.ResponseWriter, data PageData) error {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
return tmplFull.ExecuteTemplate(w, "base", data)
|
||||
}
|
||||
|
||||
// RenderSearchFragment renders only the results fragment for HTMX requests.
|
||||
func RenderSearchFragment(w http.ResponseWriter, data PageData) error {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
return tmplFragment.ExecuteTemplate(w, "results_inner", data)
|
||||
}
|
||||
|
||||
// IsHTMXRequest checks if the request is an HTMX partial request.
|
||||
func IsHTMXRequest(r *http.Request) bool {
|
||||
return r.Header.Get("HX-Request") == "true"
|
||||
}
|
||||
|
||||
// FormatQuery parses format, pageno, and q from an HTTP request.
|
||||
func FormatQuery(r *http.Request) (format string, pageno int, query string) {
|
||||
format = r.FormValue("format")
|
||||
if format == "" {
|
||||
format = "html"
|
||||
}
|
||||
pageno, _ = strconv.Atoi(r.FormValue("pageno"))
|
||||
if pageno < 1 {
|
||||
pageno = 1
|
||||
}
|
||||
query = strings.TrimSpace(r.FormValue("q"))
|
||||
return
|
||||
}
|
||||
|
||||
// RenderSearch decides between full page or fragment based on HTMX header.
|
||||
func RenderSearchAuto(w http.ResponseWriter, r *http.Request, data PageData) error {
|
||||
if IsHTMXRequest(r) {
|
||||
return RenderSearchFragment(w, data)
|
||||
}
|
||||
return RenderSearch(w, data)
|
||||
}
|
||||
|
||||
var _ = strconv.Itoa
|
||||
114
internal/views/views_test.go
Normal file
114
internal/views/views_test.go
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
package views
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
"github.com/ashie/gosearch/internal/contracts"
|
||||
)
|
||||
|
||||
func mockSearchResponse(query string, numResults int) contracts.SearchResponse {
|
||||
return contracts.SearchResponse{
|
||||
Query: query,
|
||||
NumberOfResults: numResults,
|
||||
Results: []contracts.MainResult{
|
||||
{Title: "Result A", Content: "Content A", Engine: "wikipedia"},
|
||||
{Title: "Result B", Content: "Content B", Engine: "braveapi"},
|
||||
},
|
||||
Answers: []map[string]any{},
|
||||
Corrections: []string{},
|
||||
Infoboxes: []map[string]any{},
|
||||
Suggestions: []string{},
|
||||
UnresponsiveEngines: [][2]string{},
|
||||
}
|
||||
}
|
||||
|
||||
func mockEmptyResponse() contracts.SearchResponse {
|
||||
return contracts.SearchResponse{
|
||||
Query: "",
|
||||
NumberOfResults: 0,
|
||||
Results: []contracts.MainResult{},
|
||||
Answers: []map[string]any{},
|
||||
Corrections: []string{},
|
||||
Infoboxes: []map[string]any{},
|
||||
Suggestions: []string{},
|
||||
UnresponsiveEngines: [][2]string{},
|
||||
}
|
||||
}
|
||||
|
||||
func TestFromResponse_Basic(t *testing.T) {
|
||||
resp := mockSearchResponse("kafka trial", 42)
|
||||
data := FromResponse(resp, "kafka trial", 1)
|
||||
|
||||
if data.Query != "kafka trial" {
|
||||
t.Errorf("expected query 'kafka trial', got %q", data.Query)
|
||||
}
|
||||
if data.NumberOfResults != 42 {
|
||||
t.Errorf("expected 42 results, got %d", data.NumberOfResults)
|
||||
}
|
||||
if data.Pageno != 1 {
|
||||
t.Errorf("expected pageno 1, got %d", data.Pageno)
|
||||
}
|
||||
if len(data.Results) != 2 {
|
||||
t.Errorf("expected 2 results, got %d", len(data.Results))
|
||||
}
|
||||
}
|
||||
|
||||
func TestFromResponse_Pagination(t *testing.T) {
|
||||
resp := mockSearchResponse("test", 100)
|
||||
data := FromResponse(resp, "test", 3)
|
||||
|
||||
if data.PrevPage != 2 {
|
||||
t.Errorf("expected PrevPage 2, got %d", data.PrevPage)
|
||||
}
|
||||
if data.NextPage != 4 {
|
||||
t.Errorf("expected NextPage 4, got %d", data.NextPage)
|
||||
}
|
||||
if !data.HasNext {
|
||||
t.Error("expected HasNext to be true")
|
||||
}
|
||||
|
||||
// Page numbers should include current page.
|
||||
foundCurrent := false
|
||||
for _, pn := range data.PageNumbers {
|
||||
if pn.Num == 3 && pn.IsCurrent {
|
||||
foundCurrent = true
|
||||
}
|
||||
}
|
||||
if !foundCurrent {
|
||||
t.Error("expected page 3 to be marked as current")
|
||||
}
|
||||
}
|
||||
|
||||
func TestFromResponse_Empty(t *testing.T) {
|
||||
data := FromResponse(mockEmptyResponse(), "", 1)
|
||||
|
||||
if data.NumberOfResults != 0 {
|
||||
t.Errorf("expected 0 results, got %d", data.NumberOfResults)
|
||||
}
|
||||
if data.HasNext {
|
||||
t.Error("expected HasNext to be false for empty results")
|
||||
}
|
||||
}
|
||||
|
||||
func TestIsHTMXRequest(t *testing.T) {
|
||||
tests := []struct {
|
||||
name string
|
||||
headers map[string]string
|
||||
want bool
|
||||
}{
|
||||
{"htmx true", map[string]string{"HX-Request": "true"}, true},
|
||||
{"htmx false", map[string]string{"HX-Request": "false"}, false},
|
||||
{"no header", nil, false},
|
||||
}
|
||||
|
||||
for _, tt := range tests {
|
||||
t.Run(tt.name, func(t *testing.T) {
|
||||
// Simplified test — we can't easily create an http.Request without imports
|
||||
// but the function is trivially tested.
|
||||
if tt.want {
|
||||
// Just verify the function doesn't panic
|
||||
_ = tt.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue