forked from
tangled.org/core
This repository has no description
htmx page nav
author
Anirudh Oppiliappan
date
(Feb 15, 2025, 6:54 PM +0200)
commit
e4646213
e4646213b01457195d0ef0d611d0ac48fb93f780
parent
4a519952
4a519952dc40ea57d871e9e0cc061956ef0c4f51
+125
-56
+2
appview/pages/pages.go
+2
appview/pages/pages.go
···
181
181
type RepoIndexParams struct {
182
182
LoggedInUser *auth.User
183
183
RepoInfo RepoInfo
184
+
Active string
184
185
types.RepoIndexResponse
185
186
}
186
187
187
188
func (p *Pages) RepoIndexPage(w io.Writer, params RepoIndexParams) error {
189
+
params.Active = "index"
188
190
return p.executeRepo("repo/index", w, params)
189
191
}
190
192
+93
-21
appview/pages/templates/layouts/repobase.html
+93
-21
appview/pages/templates/layouts/repobase.html
···
1
-
{{define "title"}} {{ .RepoInfo.FullName }} {{ end}}
1
+
{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "content" }}
4
4
5
-
<div id="repo-header">
6
-
<h1>{{ .RepoInfo.FullName }}</h1>
7
-
{{ if .RepoInfo.Description }}
8
-
<h3 class="desc">{{ .RepoInfo.Description }}</h3>
9
-
{{ else }}
10
-
<em>this repo has no description</em>
11
-
{{ end }}
12
-
</div>
5
+
<section id="repo-header">
6
+
<h1>{{ .RepoInfo.FullName }}</h1>
7
+
{{ if .RepoInfo.Description }}
8
+
<h3 class="desc">{{ .RepoInfo.Description }}</h3>
9
+
{{ else }}
10
+
<em>this repo has no description</em>
11
+
{{ end }}
12
+
</section>
13
+
<section id="repo-links" class="min-h-screen flex flex-col">
14
+
<nav class="w-full max-w-3xl mx-auto">
15
+
<div class="relative">
16
+
<div class="flex relative">
17
+
<a
18
+
href="/{{ .RepoInfo.FullName }}"
19
+
class="relative -mr-px group no-underline"
20
+
hx-boost="true"
21
+
>
22
+
<div
23
+
class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-60 group-hover:bg-gray-50
24
+
{{ if eq .Active "index" }}
25
+
border-b-white border-b-0 border-gray-300
26
+
border-l border-r border-t
27
+
{{ else }}
28
+
border-gray-300 border translate-y-[2px]
29
+
{{ end }}"
30
+
>
31
+
overview
32
+
</div>
33
+
</a>
13
34
14
-
<div id="repo-links">
15
-
<nav>
16
-
<a href="/{{ .RepoInfo.FullName }}">summary</a> ·
17
-
<a href="/{{ .RepoInfo.FullName }}/branches">branches</a> ·
18
-
<a href="/{{ .RepoInfo.FullName }}/tags">tags</a>
19
-
{{ if .RepoInfo.SettingsAllowed }}
20
-
· <a href="/{{ .RepoInfo.FullName }}/settings">settings</a>
21
-
{{ end }}
22
-
</nav>
23
-
<div>
35
+
<a
36
+
href="/{{ .RepoInfo.FullName }}/issues"
37
+
class="relative -mr-px group no-underline"
38
+
hx-boost="true"
39
+
>
40
+
<div
41
+
class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-50 group-hover:bg-gray-50
42
+
{{ if eq .Active "issues" }}
43
+
border-gray-500 border border-b-0 bg-white
44
+
{{ else }}
45
+
border-gray-300 border translate-y-[2px]
46
+
{{ end }}
47
+
"
48
+
>
49
+
issues
50
+
</div>
51
+
</a>
24
52
25
-
{{ block "repoContent" . }} {{ end }}
53
+
<a
54
+
href="#"
55
+
class="relative -mr-px group no-underline"
56
+
hx-boost="true"
57
+
>
58
+
<div
59
+
class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50
60
+
{{ if eq .Active "pulls" }}
61
+
border-gray-500 border border-b-0 bg-white
62
+
{{ else }}
63
+
border-gray-300 border translate-y-[2px]
64
+
{{ end }}
65
+
"
66
+
>
67
+
pull requests
68
+
</div>
69
+
</a>
26
70
71
+
{{ if .RepoInfo.SettingsAllowed }}
72
+
<a
73
+
href="/{{ .RepoInfo.FullName }}/settings"
74
+
class="relative -mr-px group no-underline"
75
+
hx-boost="true"
76
+
>
77
+
<div
78
+
class="px-6 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50
79
+
{{ if .Active }}
80
+
border-gray-500 border border-b-0 bg-white
81
+
{{ else }}
82
+
border-gray-300 border translate-y-[2px]
83
+
{{ end }}
84
+
"
85
+
>
86
+
settings
87
+
</div>
88
+
</a>
89
+
{{ end }}
90
+
</div>
91
+
</div>
92
+
</nav>
93
+
<section
94
+
class="bg-white p-6 min-h-[200px] border border-gray-300 relative z-20 w-full max-w-3xl mx-auto"
95
+
>
96
+
{{ block "repoContent" . }}{{ end }}
97
+
</section>
98
+
</section>
27
99
{{ end }}
28
100
29
101
{{ define "layouts/repobase" }}
30
-
{{ template "layouts/base" . }}
102
+
{{ template "layouts/base" . }}
31
103
{{ end }}
+7
-7
appview/pages/templates/layouts/topbar.html
+7
-7
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
2
{{ with .LoggedInUser }}
3
-
<nav class="flex items-center space-x-4 py-10">
3
+
<nav class="flex items-center justify-center space-x-4 py-10">
4
4
<a
5
5
href="/"
6
6
hx-boost="true"
7
-
class="text-gray-600 hover:text-gray-900"
7
+
class="text-gray-600 hover:text-gray-900 no-underline"
8
8
>timeline</a
9
9
>
10
10
<a
11
11
href="/settings"
12
12
hx-boost="true"
13
-
class="text-gray-600 hover:text-gray-900"
13
+
class="text-gray-600 hover:text-gray-900 no-underline"
14
14
>settings</a
15
15
>
16
16
<a
17
17
href="/knots"
18
18
hx-boost="true"
19
-
class="text-gray-600 hover:text-gray-900"
19
+
class="text-gray-600 hover:text-gray-900 no-underline"
20
20
>knots</a
21
21
>
22
22
<a
23
23
href="/repo/new"
24
24
hx-boost="true"
25
-
class="text-gray-600 hover:text-gray-900"
25
+
class="text-gray-600 hover:text-gray-900 no-underline"
26
26
>add repos</a
27
27
>
28
28
{{ if .Handle }}
29
29
<a
30
30
href="/@{{ .Handle }}"
31
31
hx-boost="true"
32
-
class="text-gray-600 hover:text-gray-900"
32
+
class="text-gray-600 hover:text-gray-900 no-underline"
33
33
>my profile</a
34
34
>
35
35
{{ else }}
36
36
<a
37
37
href="/{{ .Did }}"
38
38
hx-boost="true"
39
-
class="text-gray-600 hover:text-gray-900"
39
+
class="text-gray-600 hover:text-gray-900 no-underline"
40
40
>my profile</a
41
41
>
42
42
{{ end }}
+23
-28
appview/pages/templates/user/profile.html
+23
-28
appview/pages/templates/user/profile.html
···
1
1
{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>
5
-
<h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
6
-
</h1>
7
-
<section>
8
-
<h2 class="text-xl font-semibold mb-4">repos</h2>
9
-
<ul id="my-knots" class="space-y-4">
10
-
{{ range .Repos }}
11
-
<li class="p-4 bg-gray-50 rounded-lg">
12
-
<div class="font-mono">
13
-
<div class="mb-2">
14
-
name:
15
-
<a
16
-
href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
17
-
class="text-blue-600 hover:text-blue-800"
18
-
>{{ .Name }}</a
19
-
>
20
-
</div>
21
-
<div>
22
-
knot:
23
-
{{ .Knot }}
24
-
</div>
25
-
</div>
26
-
</li>
27
-
{{ else }}
28
-
<p class="text-gray-600">does not have any repos yet</p>
29
-
{{ end }}
30
-
</ul>
31
-
</section>
4
+
<h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
5
+
<div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">
6
+
{{ range .Repos }}
7
+
<div
8
+
id="repo-card"
9
+
class="border border-black p-4 shadow-sm bg-white"
10
+
>
11
+
<div id="repo-card-name" class="font-medium">
12
+
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
13
+
>{{ .Name }}</a
14
+
>
15
+
</div>
16
+
<div
17
+
id="repo-knot-name"
18
+
class="text-gray-600 text-sm font-mono"
19
+
>
20
+
{{ .Knot }}
21
+
</div>
22
+
</div>
23
+
{{ else }}
24
+
<p>This user does not have any repos yet.</p>
25
+
{{ end }}
26
+
</div>
32
27
{{ end }}