pompy.dev
forked from
tangled.org/core
fork
Configure Feed
Select the types of activity you want to include in your feed.
this repo has no description
fork
Configure Feed
Select the types of activity you want to include in your feed.
clean up knot view
anirudh.fi
+171
-124
+82
-47
appview/pages/templates/knots.html
+82
-47
appview/pages/templates/knots.html
···
3
3
{{ define "content" }}
4
4
<h1>knots</h1>
5
5
6
-
<h2>register</h2>
7
-
put in a domain, and use the key while booting up your knotserver
8
-
<form hx-post="/knots/key">
9
-
<label for="domain">domain:</label>
10
-
<input type="text" id="domain" name="domain" required />
11
-
<button class="btn my-2" type="text">generate key</button>
12
-
</form>
6
+
<section class="mb-12">
7
+
<h2 class="text-2xl mb-4">register a knot</h2>
8
+
<form hx-post="/knots/key" class="flex gap-4 items-end">
9
+
<div>
10
+
<label for="domain"
11
+
>Generate a key to start your knot with.</label
12
+
>
13
+
<input
14
+
type="text"
15
+
id="domain"
16
+
name="domain"
17
+
placeholder="knot.example.com"
18
+
required
19
+
/>
20
+
</div>
21
+
<button class="btn" type="submit">generate key</button>
22
+
</form>
23
+
</section>
13
24
14
-
<h3>my knots</h3>
15
-
<ul id="my-knots">
16
-
{{ range .Registrations }}
17
-
{{ if .Registered }}
18
-
<li>
19
-
<code
20
-
>domain:
21
-
<a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
22
-
><br />
23
-
<code>opened by: {{ .ByDid }}</code><br />
24
-
<code>on: {{ .Created }}</code><br />
25
-
<code>registered on: {{ .Registered }}</code>
26
-
</li>
25
+
<section class="mb-12">
26
+
<h3 class="text-xl font-semibold mb-4">my knots</h3>
27
+
<ul id="my-knots" class="space-y-6">
28
+
{{ range .Registrations }}
29
+
{{ if .Registered }}
30
+
<li class="border rounded p-4 flex flex-col gap-2">
31
+
<div>
32
+
<a href="/knots/{{ .Domain }}" class="font-semibold"
33
+
>{{ .Domain }}</a
34
+
>
35
+
</div>
36
+
<div class="text-gray-600">
37
+
Owned by
38
+
{{ .ByDid }}
39
+
</div>
40
+
<div class="text-gray-600">
41
+
Registered on
42
+
{{ .Registered }}
43
+
</div>
44
+
</li>
45
+
{{ end }}
46
+
{{ else }}
47
+
<p class="text-gray-600">you don't have any knots yet</p>
27
48
{{ end }}
28
-
{{ else }}
29
-
<p>you don't have any knots yet</p>
30
-
{{ end }}
31
-
</ul>
32
-
<h3>pending registrations</h3>
33
-
<ul id="pending-registrations">
34
-
{{ range .Registrations }}
35
-
{{ if not .Registered }}
36
-
<li>
37
-
<code
38
-
>domain:
39
-
<a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code
40
-
><br />
41
-
<code>opened by: {{ .ByDid }}</code><br />
42
-
<code>on: {{ .Created }}</code><br />
43
-
<code>pending registration</code>
44
-
<button
45
-
class="btn my-2"
46
-
hx-post="/knots/{{ .Domain }}/init"
47
-
>
48
-
initialize
49
-
</button>
50
-
</li>
49
+
</ul>
50
+
</section>
51
+
52
+
<section>
53
+
<h3 class="text-xl font-semibold mb-4">pending registrations</h3>
54
+
<ul id="pending-registrations" class="space-y-6">
55
+
{{ range .Registrations }}
56
+
{{ if not .Registered }}
57
+
<li class="border rounded p-4 flex flex-col gap-2">
58
+
<div>
59
+
<a
60
+
href="/knots/{{ .Domain }}"
61
+
class="text-blue-600 hover:underline"
62
+
>{{ .Domain }}</a
63
+
>
64
+
</div>
65
+
<div class="text-gray-600">
66
+
Opened by
67
+
{{ .ByDid }}
68
+
</div>
69
+
<div class="text-gray-600">
70
+
Created on
71
+
{{ .Created }}
72
+
</div>
73
+
<div class="flex items-center gap-4 mt-2">
74
+
<span class="text-amber-600"
75
+
>pending registration</span
76
+
>
77
+
<button
78
+
class="btn"
79
+
hx-post="/knots/{{ .Domain }}/init"
80
+
>
81
+
initialize
82
+
</button>
83
+
</div>
84
+
</li>
85
+
{{ end }}
86
+
{{ else }}
87
+
<p class="text-gray-600">no registrations yet</p>
51
88
{{ end }}
52
-
{{ else }}
53
-
<p>no registrations yet</p>
54
-
{{ end }}
55
-
</ul>
89
+
</ul>
90
+
</section>
56
91
{{ end }}
+3
-3
appview/pages/templates/layouts/base.html
+3
-3
appview/pages/templates/layouts/base.html
···
8
8
content="width=device-width, initial-scale=1.0"
9
9
/>
10
10
<script src="/static/htmx.min.js"></script>
11
-
<link href="/static/tw.css" rel="stylesheet" />
11
+
<link href="/static/tw.css" rel="stylesheet" type="text/css" />
12
12
<title>{{ block "title" . }}tangled{{ end }}</title>
13
13
</head>
14
-
<body class="container">
15
-
<header class="topbar">
14
+
<body class="container mx-auto px-10">
15
+
<header>
16
16
{{ block "topbar" . }}
17
17
{{ template "layouts/topbar" . }}
18
18
{{ end }}
+45
-45
appview/pages/templates/layouts/topbar.html
+45
-45
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
-
<nav class="flex items-center space-x-4">
3
-
<a
4
-
href="/"
5
-
hx-boost="true"
6
-
class="text-gray-600 hover:text-gray-900"
7
-
>timeline</a
8
-
>
9
-
{{ with .LoggedInUser }}
10
-
<a
11
-
href="/settings"
12
-
hx-boost="true"
13
-
class="text-gray-600 hover:text-gray-900"
14
-
>settings</a
15
-
>
16
-
<a
17
-
href="/knots"
18
-
hx-boost="true"
19
-
class="text-gray-600 hover:text-gray-900"
20
-
>knots</a
21
-
>
22
-
<a
23
-
href="/repo/new"
24
-
hx-boost="true"
25
-
class="text-gray-600 hover:text-gray-900"
26
-
>add repos</a
27
-
>
28
-
{{ if .Handle }}
29
-
<a
30
-
href="/@{{ .Handle }}"
31
-
hx-boost="true"
32
-
class="text-gray-600 hover:text-gray-900"
33
-
>my profile</a
34
-
>
35
-
{{ else }}
36
-
<a
37
-
href="/{{ .Did }}"
38
-
hx-boost="true"
39
-
class="text-gray-600 hover:text-gray-900"
40
-
>my profile</a
41
-
>
42
-
{{ end }}
43
-
{{ else }}
44
-
<a href="/login" class="btn my-2">login</a>
45
-
{{ end }}
46
-
</nav>
2
+
{{ with .LoggedInUser }}
3
+
<nav class="flex items-center space-x-4 py-10">
4
+
<a
5
+
href="/"
6
+
hx-boost="true"
7
+
class="text-gray-600 hover:text-gray-900"
8
+
>timeline</a
9
+
>
10
+
<a
11
+
href="/settings"
12
+
hx-boost="true"
13
+
class="text-gray-600 hover:text-gray-900"
14
+
>settings</a
15
+
>
16
+
<a
17
+
href="/knots"
18
+
hx-boost="true"
19
+
class="text-gray-600 hover:text-gray-900"
20
+
>knots</a
21
+
>
22
+
<a
23
+
href="/repo/new"
24
+
hx-boost="true"
25
+
class="text-gray-600 hover:text-gray-900"
26
+
>add repos</a
27
+
>
28
+
{{ if .Handle }}
29
+
<a
30
+
href="/@{{ .Handle }}"
31
+
hx-boost="true"
32
+
class="text-gray-600 hover:text-gray-900"
33
+
>my profile</a
34
+
>
35
+
{{ else }}
36
+
<a
37
+
href="/{{ .Did }}"
38
+
hx-boost="true"
39
+
class="text-gray-600 hover:text-gray-900"
40
+
>my profile</a
41
+
>
42
+
{{ end }}
43
+
</nav>
44
+
{{ else }}
45
+
<a href="/login" class="btn my-2">login</a>
46
+
{{ end }}
47
47
{{ end }}
+31
-19
appview/pages/templates/user/profile.html
+31
-19
appview/pages/templates/user/profile.html
···
1
-
{{define "title"}}{{ or .UserHandle .UserDid }}{{end}}
1
+
{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
2
2
3
-
{{define "content"}}
4
-
<h1>{{ didOrHandle .UserDid .UserHandle }}</h1>
5
-
6
-
<div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">
7
-
{{range .Repos}}
8
-
<div id="repo-card" class="border border-black p-4 shadow-sm bg-white">
9
-
<div id="repo-card-name" class="font-medium">
10
-
<a href="/@{{or $.UserHandle $.UserDid }}/{{.Name}}">{{.Name}}</a>
11
-
</div>
12
-
<div id="repo-knot-name" class="text-gray-600 text-sm font-mono">
13
-
{{.Knot}}
14
-
</div>
15
-
</div>
16
-
{{else}}
17
-
<p>This user does not have any repos yet.</p>
18
-
{{end}}
19
-
</div>
20
-
{{end}}
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>
32
+
{{ end }}
+10
-10
input.css
+10
-10
input.css
···
39
39
@layer components {
40
40
.btn {
41
41
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
42
-
justify-center bg-transparent px-2 pb-[0.2rem] text-base
43
-
text-black before:absolute before:inset-0 before:-z-10
44
-
before:block before:rounded-sm before:border before:border-black
45
-
before:bg-white before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
46
-
before:content-[''] hover:before:border-gray-800
47
-
hover:before:bg-gray-50
48
-
hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.1),inset_0_-2px_0_0_#ffffff]
49
-
focus:outline-none focus-visible:before:outline
50
-
focus-visible:before:outline-4 focus-visible:before:outline-black
51
-
active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)];
42
+
justify-center bg-transparent px-2 pb-[0.2rem] text-base
43
+
text-gray-900 before:absolute before:inset-0 before:-z-10
44
+
before:block before:rounded-sm before:border before:border-blue-200
45
+
before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
46
+
before:content-[''] hover:before:border-blue-300
47
+
hover:before:bg-blue-50
48
+
hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#e5edff]
49
+
focus:outline-none focus-visible:before:outline
50
+
focus-visible:before:outline-4 focus-visible:before:outline-blue-500
51
+
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
52
52
}
53
53
}
54
54
@layer utilities {