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
82
83
84
85
package components
import "context"
import "git.src.quest/~liljamo/emerwen-web/internal/consts"
func loggedIn(ctx context.Context) bool {
if loggedIn, ok := ctx.Value(consts.KeyLoggedIn).(bool); ok {
return loggedIn
}
return false
}
func userName(ctx context.Context) string {
if userName, ok := ctx.Value(consts.KeyUserName).(string); ok {
return userName
}
return "NIL_USERNAME"
}
templ ButtonLink(visual string, href string) {
<a
href={ templ.SafeURL(href)}
class="hover:underline cursor-pointer font-semibold border p-1"
>
{ visual }
</a>
}
templ Base(title string) {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="/static/style.css"/>
<link rel="icon" type="image/svg+xml" href="/static/svg/sheep.svg"/>
<script src="/static/htmx.min.js"></script>
<title>{ title }</title>
</head>
<body>
<main class="flex flex-col items-center w-full min-h-screen justify-between">
<div class="flex gap-2 p-8 w-full max-w-4xl items-center">
<div class="group w-max">
<a class="bg-size-200 bg-pos-0 group-hover:bg-pos-100
bg-gradient-to-br from-slate-600 via-blue-400 to-rose-500
bg-clip-text text-lg font-bold text-transparent
transition-all duration-500"
href="/">
emerwen
</a>
<div class="absolute group-hover:animate-sheepmove">
<img src="/static/svg/sheep.svg" class="z-50 invisible opacity-0 h-4 w-4 group-hover:visible group-hover:animate-sheepspin"/>
</div>
</div>
<div class="flex items-center w-full">
<div>counting sheep</div>
</div>
<div class="flex gap-2 items-center">
if loggedIn(ctx) {
<div class="w-max">
{ userName(ctx) }
</div>
@ButtonLink("logout", "/logout")
} else {
@ButtonLink("login", "/login")
}
</div>
</div>
<div class="flex flex-col max-w-4xl p-2">
{ children... }
</div>
<div class="flex flex-col justify-self-end items-center pb-8 pt-2 gap-1">
<img class="h-24" src="/static/createdwith.jpeg">
</div>
</main>
</body>
</html>
}