Refactor Layout and improve search

This commit is contained in:
2026-04-29 19:26:01 +02:00
parent c688761e89
commit 86f2b7c34f
8 changed files with 286 additions and 309 deletions
+22 -52
View File
@@ -1,52 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Search{{if .Query}}: {{.Query}}{{end}}</title>
<link rel="icon" href="/_/favicon.ico" />
<link rel="preload" href="/_/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/_/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="/_/style.css" />
</head>
<body>
<header>
<nav class="breadcrumb">
<a href="/"><svg class="logo" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg></a>
<span class="sep">/</span><span>search</span>
</nav>
<form class="search-form" action="/" method="get">
<input class="search-input" type="search" name="q" value="{{.Query}}" placeholder="Search folders…" autofocus />
<label class="search-toggle muted" title="Also search page contents">
<input type="checkbox" name="full" value="1" {{if .Full}}checked{{end}} />
full-text
</label>
<button class="btn" type="submit">GO</button>
</form>
</header>
<main>
{{if .Query}}
{{if .Results}}
<div class="listing">
<div class="listing-header">{{len .Results}} match{{if ne (len .Results) 1}}es{{end}} for &ldquo;{{.Query}}&rdquo;</div>
{{range .Results}}
<div class="listing-item">
<div class="search-result">
<div class="search-result-row">
<a href="{{.URL}}">{{.Name}}</a>
<span class="meta">{{.Path}}</span>
</div>
{{if .Snippet}}<div class="search-snippet muted">{{.Snippet}}</div>{{end}}
</div>
</div>
{{end}}
</div>
{{else}}
<p class="empty">No folders match &ldquo;{{.Query}}&rdquo;.</p>
{{end}}
{{else}}
<p class="empty">Enter a query above.</p>
{{end}}
</main>
</body>
</html>
{{define "searchQuery"}}{{.Query}}{{end}}
{{define "content"}}
{{if .Query}}
{{if .Results}}
<h2 class="muted search-summary">{{len .Results}} match{{if ne (len .Results) 1}}es{{end}} for &ldquo;{{.Query}}&rdquo;</h2>
<div class="search-results">
{{range .Results}}
<article class="search-card">
<a class="search-card-name" href="{{.URL}}">{{.Name}}</a>
<div class="search-card-path muted">/{{.Path}}</div>
{{if .Snippet}}<div class="search-card-snippet">{{.Snippet}}</div>{{end}}
</article>
{{end}}
</div>
{{else}}
<p class="empty">No matches for &ldquo;{{.Query}}&rdquo;.</p>
{{end}}
{{else}}
<p class="empty">Enter a query above.</p>
{{end}}
{{end}}