blob: a3f137a76e5866c5dfea3b27e955cb61b82d1570 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
package main
import "fmt"
// 1. Shared Base Layout Component
templ PageLayout(title string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>{ title }</title>
<style>
body { font-family: monospace; background: #0f172a; color: #f8fafc; padding: 2rem; line-height: 1.5; }
nav a { color: #38bdf8; margin-right: 1rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.card { background: #1e293b; padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid #334155; }
.badge-active { color: #4ade80; }
.badge-inactive { color: #f87171; }
</style>
<link rel="stylesheet" href="/public/style.css"/>
</head>
<body>
<nav>
<a href="/">/home</a>
<a href="/about">/about</a>
<a href="/items">/items</a>
</nav>
<hr style="border-color: #334155; margin: 1rem 0;"/>
{ children... }
</body>
</html>
}
// 2. Page 1: Home
templ HomePage() {
@PageLayout("Home") {
<h1>Home</h1>
<p>Go server running with Templ templates and Air hot-reloading.</p>
}
}
// 3. Page 2: About
templ AboutPage() {
@PageLayout("About") {
<h1 class="text-3xl font-bold underline">About</h1>
<p>Single-binary web app using Go's standard library net/http.</p>
}
}
// Data struct for dynamic rendering
type Item struct {
Name string
Active bool
}
// 4. Page 3: Dynamic Data (Conditionals + Loops)
templ ItemsPage(items []Item) {
@PageLayout("Items") {
<h1>Items</h1>
<div class="card">
if len(items) == 0 {
<p>No items in database.</p>
} else {
<ul>
for _, item := range items {
<li>
<span>{ item.Name }</span>
if item.Active {
<span class="badge-active"> [ACTIVE]</span>
} else {
<span class="badge-inactive"> [INACTIVE]</span>
}
</li>
}
</ul>
}
</div>
<p style="color: #94a3b8; font-size: 0.8rem; margin-top: 1rem;">
{ fmt.Sprintf("Total items processed: %d", len(items)) }
</p>
}
|
