tangled.org
anirudh.fi
+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 {