Tailwind is now compiled from static/css/input.css into a committed static/css/tailwind.css by the standalone CLI, fetched on demand into bin/ (gitignored) so no Node toolchain is required. layout.templ loads the local stylesheet instead of cdn.tailwindcss.com. Adds a Makefile with generate/css/build/run/test/clean targets. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
87 lines
2.4 KiB
Plaintext
87 lines
2.4 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"/>
|
|
<script src="/static/vendor/htmx.min.js" defer></script>
|
|
</head>
|
|
}
|
|
|
|
templ Sidebar(active string) {
|
|
<nav class="v-side-nav flex flex-col">
|
|
<div class="px-4 py-5 flex items-center gap-2">
|
|
<span class="text-2xl">🐝</span>
|
|
<span class="text-xl font-semibold tracking-wide">Veola</span>
|
|
</div>
|
|
<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 }/>
|
|
}
|