Monorepo for Tangled
appview/pages: add onboardingbase
base layout for all onboarding related pages
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 7, 2026, 3:55 PM +0100)
1ed3d894
a3f2b4ad
+67
+9
appview/pages/pages.go
+9
appview/pages/pages.go
···
236
236
return p.parse(stack...)
237
237
}
238
238
239
+
func (p *Pages) parseOnboardingBase(top string) (*template.Template, error) {
240
+
stack := []string{
241
+
"layouts/base",
242
+
"layouts/onboardingbase",
243
+
top,
244
+
}
245
+
return p.parse(stack...)
246
+
}
247
+
239
248
func (p *Pages) executePlain(name string, w io.Writer, params any) error {
240
249
tpl, err := p.parse(name)
241
250
if err != nil {
+58
appview/pages/templates/layouts/onboardingbase.html
+58
appview/pages/templates/layouts/onboardingbase.html
···
1
+
{{ define "mainLayout" }}
2
+
<div class="w-full min-h-screen flex items-start justify-center bg-white dark:bg-transparent px-4 pt-16 pb-8">
3
+
<main class="max-w-3xl w-full">
4
+
<h1 class="flex place-content-center mb-4">
5
+
{{ template "fragments/logotype" (dict "Classes" "w-40 h-20") }}
6
+
</h1>
7
+
8
+
<div class="bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 shadow-sm dark:text-white overflow-hidden">
9
+
<div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
10
+
{{ template "onboarding/fragments/steps" . }}
11
+
</div>
12
+
<div class="p-6">
13
+
{{ block "content" . }}{{ end }}
14
+
</div>
15
+
</div>
16
+
17
+
{{ if lt .Step 3 }}
18
+
<form hx-post="/welcome/skip" hx-swap="none" class="flex justify-center mt-4">
19
+
<button type="submit" class="btn-flat flex items-center gap-2">
20
+
{{ i "x" "size-4" }}
21
+
Skip onboarding
22
+
</button>
23
+
</form>
24
+
{{ end }}
25
+
</main>
26
+
</div>
27
+
{{ end }}
28
+
29
+
{{ define "topbarLayout" }}
30
+
<div class="hidden"></div>
31
+
{{ end }}
32
+
33
+
{{ define "footerLayout" }}
34
+
<div class="hidden"></div>
35
+
{{ end }}
36
+
37
+
{{ define "onboarding/fragments/steps" }}
38
+
{{ $step := .Step }}
39
+
<ol class="flex items-center w-full gap-3 text-sm">
40
+
{{ range $i, $label := list "Set up your profile" "Follow & star" "Add SSH keys" "Finish" }}
41
+
{{ if gt $i 0 }}
42
+
<li aria-hidden="true" class="h-px flex-1 min-w-4 bg-gray-200 dark:bg-gray-700"></li>
43
+
{{ end }}
44
+
<li class="flex items-center gap-2 flex-shrink-0">
45
+
{{ if lt $i $step }}
46
+
<span class="flex items-center justify-center size-7 rounded-full bg-gray-200 dark:bg-gray-700 text-black dark:text-white">{{ i "check" "size-4" }}</span>
47
+
<span class="hidden sm:inline text-gray-500 dark:text-gray-400">{{ $label }}</span>
48
+
{{ else if eq $i $step }}
49
+
<span class="flex items-center justify-center size-7 rounded-full bg-indigo-600 dark:bg-indigo-500 text-white dark:text-white font-medium">{{ add $i 1 }}</span>
50
+
<span class="hidden sm:inline font-medium text-black dark:text-white">{{ $label }}</span>
51
+
{{ else }}
52
+
<span class="flex items-center justify-center size-7 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500">{{ add $i 1 }}</span>
53
+
<span class="hidden sm:inline text-gray-400 dark:text-gray-500">{{ $label }}</span>
54
+
{{ end }}
55
+
</li>
56
+
{{ end }}
57
+
</ol>
58
+
{{ end }}