Files
veola/templates/layout.templ
prosolis ea3577a45e Items-list sparklines, retro CSS, pinned tooling, deploy docs
- Bulk-load recent price points per item and render a sparkline in
  the items list (new LoadRecentPriceHistory query avoids N+1).
- Add retro.css visual layer and refreshed login/items/layout styling.
- Swap the logo from webp to avif.
- Pin htmx/Chart.js/Tailwind/templ versions in the Makefile with
  vendor / tools / update-deps targets; README documents the
  dependency-bump flow and the hardened systemd deploy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 19:10:56 -07:00

91 lines
2.6 KiB
Plaintext

package templates
import "veola/internal/models"
// Page is the data carrier for any rendered page; concrete handlers populate
// only the fields they use.
type Page struct {
Title string
Active string
CSRFToken string
CurrentUser *models.User
Flash string
FlashError string
}
templ head(title string) {
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title } · Veola</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/static/css/tailwind.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
<!-- retro.css is an additive flair layer. Delete this <link> + the
file to revert to the plainer look. See retro.css for details. -->
<link rel="stylesheet" href="/static/css/retro.css"/>
<script src="/static/vendor/htmx.min.js" defer></script>
<script src="/static/js/flair.js" defer></script>
</head>
}
templ Sidebar(active string) {
<nav class="v-side-nav flex flex-col">
<a href="/" class="v-side-brand px-4 py-5 flex items-center gap-2">
<span class="text-2xl">🐝</span>
<span class="text-xl font-semibold tracking-wide">Veola</span>
</a>
<a href="/" class={ navClass("dashboard", active) }>Dashboard</a>
<a href="/items" class={ navClass("items", active) }>Items</a>
<a href="/results" class={ navClass("results", active) }>Results</a>
<a href="/settings" class={ navClass("settings", active) }>Settings</a>
<div class="mt-auto px-4 py-4 v-muted text-xs">
Track. Watch. Notice.
</div>
</nav>
}
func navClass(key, active string) string {
if key == active {
return "active"
}
return ""
}
templ Layout(p Page, body templ.Component) {
<!DOCTYPE html>
<html lang="en">
@head(p.Title)
<body class="min-h-screen flex">
@Sidebar(p.Active)
<main class="flex-1 p-6 max-w-6xl">
if p.Flash != "" {
<div class="v-flash">{ p.Flash }</div>
}
if p.FlashError != "" {
<div class="v-flash-error">{ p.FlashError }</div>
}
@body
</main>
</body>
</html>
}
// Bare is a chrome-less layout used by /login and /setup.
templ Bare(p Page, body templ.Component) {
<!DOCTYPE html>
<html lang="en">
@head(p.Title)
<body class="min-h-screen">
@body
</body>
</html>
}
// CSRFInput is the hidden form field for state-changing forms.
templ CSRFInput(token string) {
<input type="hidden" name="csrf_token" value={ token }/>
}