forked from
tangled.org/core
This repository has no description
appview: templates: first pass for dark mode
author
Anirudh Oppiliappan
date
(Mar 25, 2025, 11:36 PM +0200)
commit
df03f182
df03f1829b79a19e9c5995393d8871e9d88a7e98
parent
3ba8cb57
3ba8cb57fae988cae6da459190ce14e71076c641
+462
-412
+18
-18
appview/pages/templates/fragments/diff.html
+18
-18
appview/pages/templates/fragments/diff.html
···
11
11
{{ $last := sub (len $diff) 1 }}
12
12
{{ range $idx, $hunk := $diff }}
13
13
{{ with $hunk }}
14
-
<section class="mt-6 border border-gray-200 w-full mx-auto rounded bg-white drop-shadow-sm">
14
+
<section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
15
15
<div id="file-{{ .Name.New }}">
16
16
<div id="diff-file">
17
17
<details open>
18
18
<summary class="list-none cursor-pointer sticky top-0">
19
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white flex justify-between">
19
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
20
20
<div id="left-side-items" class="p-2 flex gap-2 items-center">
21
21
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
22
22
23
23
{{ if .IsNew }}
24
-
<span class="bg-green-100 text-green-700 {{ $markerstyle }}">ADDED</span>
24
+
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
25
25
{{ else if .IsDelete }}
26
-
<span class="bg-red-100 text-red-700 {{ $markerstyle }}">DELETED</span>
26
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span>
27
27
{{ else if .IsCopy }}
28
-
<span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">COPIED</span>
28
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span>
29
29
{{ else if .IsRename }}
30
-
<span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">RENAMED</span>
30
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span>
31
31
{{ else }}
32
-
<span class="bg-gray-100 text-gray-700 {{ $markerstyle }}">MODIFIED</span>
32
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span>
33
33
{{ end }}
34
34
35
35
{{ if .IsDelete }}
36
-
<a {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
36
+
<a class="dark:text-white" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
37
37
{{ .Name.Old }}
38
38
</a>
39
39
{{ else if (or .IsCopy .IsRename) }}
40
-
<a {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
40
+
<a class="dark:text-white" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
41
41
{{ .Name.Old }}
42
42
</a>
43
43
{{ i "arrow-right" "w-4 h-4" }}
44
-
<a {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
44
+
<a class="dark:text-white" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
45
45
{{ .Name.New }}
46
46
</a>
47
47
{{ else }}
48
-
<a {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
48
+
<a class="dark:text-white" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
49
49
{{ .Name.New }}
50
50
</a>
51
51
{{ end }}
52
52
</div>
53
53
54
-
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 rounded" }}
54
+
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
55
55
<div id="right-side-items" class="p-2 flex items-center">
56
56
<a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
57
57
{{ if gt $idx 0 }}
···
70
70
71
71
<div class="transition-all duration-700 ease-in-out">
72
72
{{ if .IsDelete }}
73
-
<p class="text-center text-gray-400 p-4">
73
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
74
74
This file has been deleted in this commit.
75
75
</p>
76
76
{{ else }}
77
77
{{ if .IsBinary }}
78
-
<p class="text-center text-gray-400 p-4">
78
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
79
79
This is a binary file and will not be displayed.
80
80
</p>
81
81
{{ else }}
82
82
<pre class="overflow-auto">
83
83
{{- range .TextFragments -}}
84
-
<div class="bg-gray-100 text-gray-500 select-none">{{ .Header }}</div>
84
+
<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none">{{ .Header }}</div>
85
85
{{- range .Lines -}}
86
86
{{- if eq .Op.String "+" -}}
87
-
<div class="bg-green-100 text-green-700 p-1 w-full min-w-fit"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
87
+
<div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 p-1 w-full min-w-fit"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
88
88
{{- end -}}
89
89
90
90
{{- if eq .Op.String "-" -}}
91
-
<div class="bg-red-100 text-red-700 p-1 w-full min-w-fit"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
91
+
<div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 p-1 w-full min-w-fit"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
92
92
{{- end -}}
93
93
94
94
{{- if eq .Op.String " " -}}
95
-
<div class="bg-white text-gray-500 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
95
+
<div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
96
96
{{- end -}}
97
97
98
98
{{- end -}}
+88
-34
appview/pages/templates/knot.html
+88
-34
appview/pages/templates/knot.html
···
1
-
{{define "title"}}{{ .Registration.Domain }}{{end}}
1
+
{{ define "title" }}{{ .Registration.Domain }}{{ end }}
2
2
3
-
{{define "content"}}
4
-
<h1>{{.Registration.Domain}}</h1>
5
-
<p>
6
-
<code>
7
-
opened by: {{.Registration.ByDid}}
8
-
{{ if eq $.LoggedInUser.Did $.Registration.ByDid }}
9
-
(you)
10
-
{{ end }}
11
-
</code><br>
12
-
<code>on: {{.Registration.Created}}</code><br>
13
-
{{ if .Registration.Registered }}
14
-
<code>registered on: {{.Registration.Registered}}</code>
15
-
{{ else }}
16
-
<code>pending registration</code>
17
-
<button class="btn my-2" hx-post="/knots/{{.Domain}}/init" hx-swap="none">initialize</button>
3
+
{{ define "content" }}
4
+
<div class="p-6">
5
+
<p class="text-xl font-bold dark:text-white">{{ .Registration.Domain }}</p>
6
+
</div>
7
+
8
+
<div class="flex flex-col">
9
+
{{ block "registration-info" . }} {{ end }}
10
+
{{ block "members" . }} {{ end }}
11
+
{{ block "add-member" . }} {{ end }}
12
+
</div>
13
+
{{ end }}
14
+
15
+
{{ define "registration-info" }}
16
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
17
+
<dl class="grid grid-cols-[auto_1fr] gap-x-4 dark:text-gray-200">
18
+
<dt class="font-bold">opened by</dt>
19
+
<dd>
20
+
@{{ .Registration.ByDid }}
21
+
{{ if eq $.LoggedInUser.Did $.Registration.ByDid }}
22
+
<span class="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded ml-2">you</span>
18
23
{{ end }}
19
-
</p>
20
-
24
+
</dd>
25
+
26
+
<dt class="font-bold">opened</dt>
27
+
<dd>{{ .Registration.Created | timeFmt }}</dd>
28
+
21
29
{{ if .Registration.Registered }}
22
-
<h3> members </h3>
23
-
<ol>
24
-
{{ range $.Members }}
25
-
<li><a href="/{{.}}">{{.}}</a></li>
30
+
<dt class="font-bold">registered</dt>
31
+
<dd>{{ .Registration.Registered | timeFmt }}</dd>
26
32
{{ else }}
27
-
<p>no members</p>
33
+
<dt class="font-bold">status</dt>
34
+
<dd class="text-yellow-800 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 rounded px-2 py-1 inline-block">
35
+
Pending Registration
36
+
</dd>
28
37
{{ end }}
29
-
{{ end }}
30
-
</ol>
38
+
</dl>
39
+
40
+
{{ if not .Registration.Registered }}
41
+
<div class="mt-4">
42
+
<button
43
+
class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
44
+
hx-post="/knots/{{.Domain}}/init"
45
+
hx-swap="none">
46
+
Initialize Registration
47
+
</button>
48
+
</div>
49
+
{{ end }}
50
+
</section>
51
+
{{ end }}
31
52
32
-
{{ if $.IsOwner }}
33
-
<h3>add member</h3>
34
-
<form hx-put="/knots/{{.Registration.Domain}}/member">
35
-
<label for="member">did or handle:</label>
36
-
<input type="text" id="member" name="member" required>
37
-
<button class="btn my-2" type="text">add member</button>
38
-
</form>
39
-
{{ end }}
40
-
{{end}}
53
+
{{ define "members" }}
54
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">members</h2>
55
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
56
+
{{ if .Registration.Registered }}
57
+
<div id="member-list" class="flex flex-col gap-4">
58
+
{{ range $.Members }}
59
+
<div class="inline-flex items-center gap-4">
60
+
{{ i "user" "w-3 h-3 dark:text-gray-300" }}
61
+
<a href="/{{.}}" class="text-gray-900 dark:text-white">{{.}}</a>
62
+
</div>
63
+
{{ else }}
64
+
<p class="text-gray-500 dark:text-gray-400">No members have been added yet.</p>
65
+
{{ end }}
66
+
</div>
67
+
{{ else }}
68
+
<p class="text-gray-500 dark:text-gray-400">Members can be added after registration is complete.</p>
69
+
{{ end }}
70
+
</section>
71
+
{{ end }}
72
+
73
+
{{ define "add-member" }}
74
+
{{ if $.IsOwner }}
75
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">add member</h2>
76
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
77
+
<form
78
+
hx-put="/knots/{{.Registration.Domain}}/member"
79
+
class="max-w-2xl space-y-4">
80
+
<input
81
+
type="text"
82
+
id="member"
83
+
name="member"
84
+
placeholder="did or handle"
85
+
required
86
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
87
+
88
+
<button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add member</button>
89
+
90
+
<div id="add-member-error" class="error dark:text-red-400"></div>
91
+
</form>
92
+
</section>
93
+
{{ end }}
94
+
{{ end }}
+79
-85
appview/pages/templates/knots.html
+79
-85
appview/pages/templates/knots.html
···
1
1
{{ define "title" }}knots{{ end }}
2
-
3
2
{{ define "content" }}
4
-
<h1>knots</h1>
5
-
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>
3
+
<div class="p-6">
4
+
<p class="text-xl font-bold dark:text-white">Knots</p>
5
+
</div>
6
+
<div class="flex flex-col">
7
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">register a knot</h2>
8
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
9
+
<p class="mb-8 dark:text-gray-300">Generate a key to initialize your knot server.</p>
10
+
<form
11
+
hx-put="/knots/key"
12
+
hx-swap="none"
13
+
class="max-w-2xl mb-8 space-y-4"
14
+
>
15
+
<input
16
+
type="text"
17
+
id="domain"
18
+
name="domain"
19
+
placeholder="knot.example.com"
20
+
required
21
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"
22
+
/>
23
+
<button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">
24
+
generate key
25
+
</button>
26
+
<div id="settings-knots-error" class="error dark:text-red-400"></div>
27
+
</form>
23
28
</section>
24
29
25
-
<section class="mb-12">
26
-
<h3 class="text-xl font-semibold mb-4">my knots</h3>
27
-
<p>This is a list of knots</p>
28
-
<ul id="my-knots" class="space-y-6">
29
-
{{ range .Registrations }}
30
-
{{ if .Registered }}
31
-
<li class="border rounded p-4 flex flex-col gap-2">
32
-
<div>
33
-
<a href="/knots/{{ .Domain }}" class="font-semibold"
34
-
>{{ .Domain }}</a
35
-
>
36
-
</div>
37
-
<div class="text-gray-600">
38
-
Owned by
39
-
{{ .ByDid }}
40
-
</div>
41
-
<div class="text-gray-600">
42
-
Registered on
43
-
{{ .Registered }}
44
-
</div>
45
-
</li>
46
-
{{ end }}
47
-
{{ else }}
48
-
<p class="text-gray-600">you don't have any knots yet</p>
49
-
{{ end }}
50
-
</ul>
30
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">my knots</h2>
31
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
32
+
<div id="knots-list" class="flex flex-col gap-6 mb-8">
33
+
{{ range .Registrations }}
34
+
{{ if .Registered }}
35
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
36
+
<div class="flex flex-col gap-1">
37
+
<div class="inline-flex items-center gap-4">
38
+
{{ i "git-branch" "w-3 h-3 dark:text-gray-300" }}
39
+
<p class="font-bold dark:text-white">{{ .Domain }}</p>
40
+
</div>
41
+
<p class="text-sm text-gray-500 dark:text-gray-400">owned by {{ .ByDid }}</p>
42
+
<p class="text-sm text-gray-500 dark:text-gray-400">registered {{ .Registered | timeFmt }}</p>
43
+
</div>
44
+
</div>
45
+
{{ end }}
46
+
{{ else }}
47
+
<p class="text-sm text-gray-500 dark:text-gray-400">No knots registered</p>
48
+
{{ end }}
49
+
</div>
51
50
</section>
52
51
53
-
<section>
54
-
<h3 class="text-xl font-semibold mb-4">pending registrations</h3>
55
-
<ul id="pending-registrations" class="space-y-6">
56
-
{{ range .Registrations }}
57
-
{{ if not .Registered }}
58
-
<li class="border rounded p-4 flex flex-col gap-2">
59
-
<div>
60
-
<a
61
-
href="/knots/{{ .Domain }}"
62
-
class="text-blue-600 hover:underline"
63
-
>{{ .Domain }}</a
64
-
>
65
-
</div>
66
-
<div class="text-gray-600">
67
-
Opened by
68
-
{{ .ByDid }}
69
-
</div>
70
-
<div class="text-gray-600">
71
-
Created on
72
-
{{ .Created }}
73
-
</div>
74
-
<div class="flex items-center gap-4 mt-2">
75
-
<span class="text-amber-600"
76
-
>pending registration</span
77
-
>
78
-
<button
79
-
class="btn"
80
-
hx-post="/knots/{{ .Domain }}/init"
81
-
>
82
-
initialize
83
-
</button>
84
-
</div>
85
-
</li>
86
-
{{ end }}
87
-
{{ else }}
88
-
<p class="text-gray-600">no registrations yet</p>
89
-
{{ end }}
90
-
</ul>
52
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">pending registrations</h2>
53
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
54
+
<div id="pending-knots-list" class="flex flex-col gap-6 mb-8">
55
+
{{ range .Registrations }}
56
+
{{ if not .Registered }}
57
+
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
58
+
<div class="flex flex-col gap-1">
59
+
<div class="inline-flex items-center gap-4">
60
+
<p class="font-bold dark:text-white">{{ .Domain }}</p>
61
+
<div class="inline-flex items-center gap-1">
62
+
<span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">
63
+
pending
64
+
</span>
65
+
</div>
66
+
</div>
67
+
<p class="text-sm text-gray-500 dark:text-gray-400">opened by {{ .ByDid }}</p>
68
+
<p class="text-sm text-gray-500 dark:text-gray-400">created {{ .Created | timeFmt }}</p>
69
+
</div>
70
+
<div class="flex gap-2 items-center">
71
+
<button
72
+
class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 gap-2"
73
+
hx-post="/knots/{{ .Domain }}/init">
74
+
{{ i "square-play" "w-5 h-5" }}
75
+
<span class="hidden md:inline">initialize</span>
76
+
</button>
77
+
</div>
78
+
</div>
79
+
{{ end }}
80
+
{{ else }}
81
+
<p class="text-sm text-gray-500 dark:text-gray-400">No pending registrations</p>
82
+
{{ end }}
83
+
</div>
91
84
</section>
92
-
{{ end }}
85
+
</div>
86
+
{{ end }}
+3
-3
appview/pages/templates/layouts/base.html
+3
-3
appview/pages/templates/layouts/base.html
···
1
1
{{ define "layouts/base" }}
2
2
<!doctype html>
3
-
<html lang="en">
3
+
<html lang="en" class="dark:bg-gray-900">
4
4
<head>
5
5
<meta charset="UTF-8" />
6
6
<meta
···
13
13
<title>{{ block "title" . }}{{ end }} · tangled</title>
14
14
{{ block "extrameta" . }}{{ end }}
15
15
</head>
16
-
<body class="bg-slate-100">
17
-
<div class="container mx-auto px-1 pt-4 min-h-screen flex flex-col">
16
+
<body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
17
+
<div class="container mx-auto px-1 pt-4 min-h-screen flex flex-col">
18
18
<header style="z-index: 5">
19
19
{{ block "topbar" . }}
20
20
{{ template "layouts/topbar" . }}
+6
-6
appview/pages/templates/layouts/repobase.html
+6
-6
appview/pages/templates/layouts/repobase.html
···
1
1
{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<section id="repo-header" class="mb-4 py-2 px-6">
4
+
<section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
5
5
<p class="text-lg">
6
6
<a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
7
7
<span class="select-none">/</span>
···
15
15
<section class="min-h-screen flex flex-col drop-shadow-sm">
16
16
<nav class="w-full pl-4 overflow-auto">
17
17
<div class="flex z-60">
18
-
{{ $activeTabStyles := "-mb-px bg-white" }}
18
+
{{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
19
19
{{ $tabs := .RepoInfo.GetTabs }}
20
20
{{ $tabmeta := .RepoInfo.TabMetadata }}
21
21
{{ range $item := $tabs }}
···
28
28
hx-boost="true"
29
29
>
30
30
<div
31
-
class="px-4 py-1 mr-1 text-black min-w-[80px] text-center relative rounded-t whitespace-nowrap
31
+
class="px-4 py-1 mr-1 text-black dark:text-white min-w-[80px] text-center relative rounded-t whitespace-nowrap
32
32
{{ if eq $.Active $key }}
33
33
{{ $activeTabStyles }}
34
34
{{ else }}
35
-
group-hover:bg-gray-200
35
+
group-hover:bg-gray-200 dark:group-hover:bg-gray-700
36
36
{{ end }}
37
37
"
38
38
>
39
39
{{ $key }}
40
40
{{ if not (isNil $meta) }}
41
-
<span class="bg-gray-200 rounded py-1/2 px-1 text-sm">{{ $meta }}</span>
41
+
<span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{ $meta }}</span>
42
42
{{ end }}
43
43
</div>
44
44
</a>
···
46
46
</div>
47
47
</nav>
48
48
<section
49
-
class="bg-white p-6 rounded relative z-20 w-full mx-auto drop-shadow-sm"
49
+
class="bg-white dark:bg-gray-800 p-6 rounded relative z-20 w-full mx-auto drop-shadow-sm dark:text-white"
50
50
>
51
51
{{ block "repoContent" . }}{{ end }}
52
52
</section>
+3
-3
appview/pages/templates/layouts/topbar.html
+3
-3
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
-
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white drop-shadow-sm">
2
+
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
3
3
<div class="container flex justify-between p-0">
4
4
<div id="left-items">
5
5
<a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
···
28
28
{{ didOrHandle .Did .Handle }}
29
29
</summary>
30
30
<div
31
-
class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white border border-gray-200"
31
+
class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700"
32
32
>
33
33
<a href="/{{ didOrHandle .Did .Handle }}">profile</a>
34
34
<a href="/knots">knots</a>
35
35
<a href="/settings">settings</a>
36
-
<a href="/logout" class="text-red-400 hover:text-red-700">logout</a>
36
+
<a href="/logout" class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">logout</a>
37
37
</div>
38
38
</details>
39
39
{{ end }}
+7
-7
appview/pages/templates/repo/blob.html
+7
-7
appview/pages/templates/repo/blob.html
···
15
15
{{ $lines := split .Contents }}
16
16
{{ $tot_lines := len $lines }}
17
17
{{ $tot_chars := len (printf "%d" $tot_lines) }}
18
-
{{ $code_number_style := "text-gray-400 left-0 bg-white text-right mr-6 select-none inline-block w-12" }}
18
+
{{ $code_number_style := "text-gray-400 dark:text-gray-500 left-0 bg-white dark:bg-gray-800 text-right mr-6 select-none inline-block w-12" }}
19
19
{{ $linkstyle := "no-underline hover:underline" }}
20
-
<div class="pb-2 mb-3 text-base border-b border-gray-200">
20
+
<div class="pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
21
21
<div class="flex flex-col md:flex-row md:justify-between gap-2">
22
22
<div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap">
23
23
{{ range $idx, $value := .BreadCrumbs }}
24
24
{{ if ne $idx (sub (len $.BreadCrumbs) 1) }}
25
25
<a
26
26
href="{{ index . 1 }}"
27
-
class="text-bold text-gray-500 {{ $linkstyle }}"
27
+
class="text-bold text-gray-500 dark:text-gray-400 {{ $linkstyle }}"
28
28
>{{ index . 0 }}</a
29
29
>
30
30
/
31
31
{{ else }}
32
-
<span class="text-bold text-gray-500"
32
+
<span class="text-bold text-gray-500 dark:text-gray-400"
33
33
>{{ index . 0 }}</span
34
34
>
35
35
{{ end }}
36
36
{{ end }}
37
37
</div>
38
-
<div id="file-info" class="text-gray-500 text-xs md:text-sm flex flex-wrap items-center gap-1 md:gap-0">
38
+
<div id="file-info" class="text-gray-500 dark:text-gray-400 text-xs md:text-sm flex flex-wrap items-center gap-1 md:gap-0">
39
39
<span>at <a href="/{{ .RepoInfo.FullName }}/tree/{{ .Ref }}">{{ .Ref }}</a></span>
40
40
<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
41
41
<span>{{ .Lines }} lines</span>
···
47
47
</div>
48
48
</div>
49
49
{{ if .IsBinary }}
50
-
<p class="text-center text-gray-400">
50
+
<p class="text-center text-gray-400 dark:text-gray-500">
51
51
This is a binary file and will not be displayed.
52
52
</p>
53
53
{{ else }}
···
61
61
{{ $linenr }}
62
62
</span>
63
63
</a>
64
-
<div class="whitespace-pre peer-target:bg-yellow-200">{{ $line | escapeHtml }}</div>
64
+
<div class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ $line | escapeHtml }}</div>
65
65
</div>
66
66
{{ end }}
67
67
</div>
+12
-12
appview/pages/templates/repo/commit.html
+12
-12
appview/pages/templates/repo/commit.html
···
7
7
{{ $stat := .Diff.Stat }}
8
8
{{ $diff := .Diff.Diff }}
9
9
10
-
<section class="commit">
10
+
<section class="commit dark:text-white">
11
11
<div id="commit-message">
12
12
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
13
13
<div>
···
19
19
</div>
20
20
21
21
<div class="flex items-center">
22
-
<p class="text-sm text-gray-500">
22
+
<p class="text-sm text-gray-500 dark:text-gray-300">
23
23
{{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
24
24
25
25
{{ if $didOrHandle }}
26
-
<a href="/{{ $didOrHandle }}" class="no-underline hover:underline text-gray-500">{{ $didOrHandle }}</a>
26
+
<a href="/{{ $didOrHandle }}" class="no-underline hover:underline text-gray-500 dark:text-gray-300">{{ $didOrHandle }}</a>
27
27
{{ else }}
28
-
<a href="mailto:{{ $commit.Author.Email }}" class="no-underline hover:underline text-gray-500">{{ $commit.Author.Name }}</a>
28
+
<a href="mailto:{{ $commit.Author.Email }}" class="no-underline hover:underline text-gray-500 dark:text-gray-300">{{ $commit.Author.Name }}</a>
29
29
{{ end }}
30
30
<span class="px-1 select-none before:content-['\00B7']"></span>
31
31
{{ timeFmt $commit.Author.When }}
···
34
34
<span class="px-1 select-none before:content-['\00B7']"></span>
35
35
</p>
36
36
37
-
<p class="flex items-center text-sm text-gray-500">
38
-
<a href="/{{ $repo }}/commit/{{ $commit.This }}" class="no-underline hover:underline text-gray-500">{{ slice $commit.This 0 8 }}</a>
37
+
<p class="flex items-center text-sm text-gray-500 dark:text-gray-300">
38
+
<a href="/{{ $repo }}/commit/{{ $commit.This }}" class="no-underline hover:underline text-gray-500 dark:text-gray-300">{{ slice $commit.This 0 8 }}</a>
39
39
{{ if $commit.Parent }}
40
40
{{ i "arrow-left" "w-3 h-3 mx-1" }}
41
-
<a href="/{{ $repo }}/commit/{{ $commit.Parent }}" class="no-underline hover:underline text-gray-500">{{ slice $commit.Parent 0 8 }}</a>
41
+
<a href="/{{ $repo }}/commit/{{ $commit.Parent }}" class="no-underline hover:underline text-gray-500 dark:text-gray-300">{{ slice $commit.Parent 0 8 }}</a>
42
42
{{ end }}
43
43
</p>
44
44
</div>
45
-
45
+
46
46
<div class="diff-stat">
47
47
<br>
48
-
<strong class="text-sm uppercase mb-4">Changed files</strong>
48
+
<strong class="text-sm uppercase mb-4 dark:text-gray-200">Changed files</strong>
49
49
{{ range $diff }}
50
-
<ul>
50
+
<ul class="dark:text-gray-200">
51
51
{{ if .IsDelete }}
52
-
<li><a href="#file-{{ .Name.Old }}">{{ .Name.Old }}</a></li>
52
+
<li><a href="#file-{{ .Name.Old }}" class="dark:hover:text-gray-300">{{ .Name.Old }}</a></li>
53
53
{{ else }}
54
-
<li><a href="#file-{{ .Name.New }}">{{ .Name.New }}</a></li>
54
+
<li><a href="#file-{{ .Name.New }}" class="dark:hover:text-gray-300">{{ .Name.New }}</a></li>
55
55
{{ end }}
56
56
</ul>
57
57
{{ end }}
+8
-8
appview/pages/templates/repo/empty.html
+8
-8
appview/pages/templates/repo/empty.html
···
2
2
3
3
{{ define "repoContent" }}
4
4
<main>
5
-
<p class="text-center pt-5 text-gray-400">
5
+
<p class="text-center pt-5 text-gray-400 dark:text-gray-500">
6
6
This is an empty repository. Push some commits here.
7
7
</p>
8
8
</main>
9
9
{{ end }}
10
10
11
11
{{ define "repoAfter" }}
12
-
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto">
12
+
<section class="mt-4 p-6 rounded bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto">
13
13
<strong>push</strong>
14
14
<div class="py-2">
15
-
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
15
+
<code class="dark:text-gray-300">git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
16
16
</div>
17
17
<strong>clone</strong>
18
-
18
+
19
19
20
20
<div class="flex flex-col gap-2">
21
21
<div class="pt-2 flex flex-row gap-2">
22
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
23
-
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
22
+
<span class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-gray-300">HTTP</span>
23
+
<code class="dark:text-gray-300">git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
24
24
</div>
25
25
<div class="pt-2 flex flex-row gap-2">
26
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span><code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
26
+
<span class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-gray-300">SSH</span><code class="dark:text-gray-300">git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
27
27
</div>
28
28
</div>
29
-
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
29
+
<p class="py-2 text-gray-500 dark:text-gray-400">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
30
30
</section>
31
31
32
32
{{ end }}
+29
-29
appview/pages/templates/repo/index.html
+29
-29
appview/pages/templates/repo/index.html
···
25
25
<div class="flex justify-between pb-5">
26
26
<select
27
27
onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
28
-
class="p-1 border border-gray-200 bg-white"
28
+
class="p-1 border border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
29
29
>
30
30
<optgroup label="branches" class="bold text-sm">
31
31
{{ range .Branches }}
···
58
58
</select>
59
59
<a
60
60
href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}"
61
-
class="ml-2 no-underline flex items-center gap-2 text-sm uppercase font-bold"
61
+
class="ml-2 no-underline flex items-center gap-2 text-sm uppercase font-bold dark:text-white"
62
62
>
63
63
{{ i "logs" "w-4 h-4" }}
64
64
{{ .TotalCommits }}
···
68
68
{{ end }}
69
69
70
70
{{ define "fileTree" }}
71
-
<div id="file-tree" class="col-span-1 pr-2 md:border-r md:border-gray-200">
71
+
<div id="file-tree" class="col-span-1 pr-2 md:border-r md:border-gray-200 dark:md:border-gray-700">
72
72
{{ $containerstyle := "py-1" }}
73
-
{{ $linkstyle := "no-underline hover:underline" }}
73
+
{{ $linkstyle := "no-underline hover:underline dark:text-white" }}
74
74
75
75
{{ range .Files }}
76
76
{{ if not .IsFile }}
···
86
86
</div>
87
87
</a>
88
88
89
-
<time class="text-xs text-gray-500"
89
+
<time class="text-xs text-gray-500 dark:text-gray-400"
90
90
>{{ timeFmt .LastCommit.When }}</time
91
91
>
92
92
</div>
···
107
107
</div>
108
108
</a>
109
109
110
-
<time class="text-xs text-gray-500"
110
+
<time class="text-xs text-gray-500 dark:text-gray-400"
111
111
>{{ timeFmt .LastCommit.When }}</time
112
112
>
113
113
</div>
···
129
129
<div>
130
130
<a
131
131
href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
132
-
class="inline no-underline hover:underline"
132
+
class="inline no-underline hover:underline dark:text-white"
133
133
>{{ index $messageParts 0 }}</a
134
134
>
135
135
{{ if gt (len $messageParts) 1 }}
136
136
137
137
<button
138
-
class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded"
138
+
class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded dark:bg-gray-700 dark:hover:bg-gray-600"
139
139
hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')"
140
140
>
141
141
{{ i "ellipsis" "w-3 h-3" }}
···
144
144
</div>
145
145
{{ if gt (len $messageParts) 1 }}
146
146
<p
147
-
class="hidden mt-1 text-sm cursor-text pb-2"
147
+
class="hidden mt-1 text-sm cursor-text pb-2 dark:text-gray-300"
148
148
>
149
149
{{ nl2br (unwrapText (index $messageParts 1)) }}
150
150
</p>
···
153
153
</div>
154
154
</div>
155
155
156
-
<div class="text-xs text-gray-500">
156
+
<div class="text-xs text-gray-500 dark:text-gray-400">
157
157
<span class="font-mono">
158
158
<a
159
159
href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
160
-
class="text-gray-500 no-underline hover:underline"
160
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
161
161
>{{ slice .Hash.String 0 8 }}</a
162
162
>
163
163
</span>
···
168
168
{{ $didOrHandle := index $.EmailToDidOrHandle .Author.Email }}
169
169
<a
170
170
href="{{ if $didOrHandle }}/{{ $didOrHandle }}{{ else }}mailto:{{ .Author.Email }}{{ end }}"
171
-
class="text-gray-500 no-underline hover:underline"
171
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
172
172
>{{ if $didOrHandle }}{{ $didOrHandle }}{{ else }}{{ .Author.Name }}{{ end }}</a
173
173
>
174
174
</span>
···
183
183
></div>
184
184
{{ end }}
185
185
{{ range $tagsForCommit }}
186
-
<span class="text-xs rounded bg-gray-100 text-black font-mono px-2 mx-1/2 inline-flex items-center">
186
+
<span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
187
187
{{ . }}
188
188
</span>
189
189
{{ end }}
···
196
196
197
197
{{ define "repoAfter" }}
198
198
{{- if .HTMLReadme }}
199
-
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto {{ if not .Raw }} prose {{ end }}">
200
-
<article class="{{ if .Raw }}whitespace-pre{{end}}">
201
-
{{ if .Raw }}
202
-
<pre>{{ .HTMLReadme }}</pre>
203
-
{{ else }}
204
-
{{ .HTMLReadme }}
205
-
{{ end }}
206
-
</article>
207
-
</section>
199
+
<section class="mt-4 p-6 rounded bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto {{ if not .Raw }} prose dark:prose-invert dark:[&_pre]:bg-gray-900 dark:[&_code]:text-gray-300 dark:[&_pre_code]:bg-gray-900 dark:[&_pre]:border dark:[&_pre]:border-gray-700 {{ end }}">
200
+
<article class="{{ if .Raw }}whitespace-pre{{end}}">
201
+
{{ if .Raw }}
202
+
<pre class="dark:bg-gray-900 dark:text-gray-200 dark:border dark:border-gray-700 dark:p-4 dark:rounded">{{ .HTMLReadme }}</pre>
203
+
{{ else }}
204
+
{{ .HTMLReadme }}
205
+
{{ end }}
206
+
</article>
207
+
</section>
208
208
{{- end -}}
209
209
210
210
211
-
<section class="mt-4 p-6 rounded bg-white w-full mx-auto overflow-auto flex flex-col gap-4">
211
+
<section class="mt-4 p-6 rounded bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto flex flex-col gap-4">
212
212
<div class="flex flex-col gap-2">
213
213
<strong>push</strong>
214
214
<div class="md:pl-4 overflow-x-auto whitespace-nowrap">
215
-
<code>git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
215
+
<code class="dark:text-gray-100">git remote add origin git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
216
216
</div>
217
217
</div>
218
218
···
221
221
<div class="md:pl-4 flex flex-col gap-2">
222
222
223
223
<div class="flex items-center gap-3">
224
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">HTTP</span>
224
+
<span class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white">HTTP</span>
225
225
<div class="overflow-x-auto whitespace-nowrap flex-1">
226
-
<code>git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
226
+
<code class="dark:text-gray-100">git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
227
227
</div>
228
228
</div>
229
229
230
230
<div class="flex items-center gap-3">
231
-
<span class="bg-gray-100 p-1 mr-1 font-mono text-sm rounded select-none">SSH</span>
231
+
<span class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white">SSH</span>
232
232
<div class="overflow-x-auto whitespace-nowrap flex-1">
233
-
<code>git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
233
+
<code class="dark:text-gray-100">git clone git@{{.RepoInfo.Knot}}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
234
234
</div>
235
235
</div>
236
236
</div>
237
237
</div>
238
238
239
239
240
-
<p class="py-2 text-gray-500">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
240
+
<p class="py-2 text-gray-500 dark:text-gray-400">Note that for self-hosted knots, clone URLs may be different based on your setup.</p>
241
241
</section>
242
242
{{ end }}
+18
-18
appview/pages/templates/repo/issues/issue.html
+18
-18
appview/pages/templates/repo/issues/issue.html
···
4
4
<header class="pb-4">
5
5
<h1 class="text-2xl">
6
6
{{ .Issue.Title }}
7
-
<span class="text-gray-500">#{{ .Issue.IssueId }}</span>
7
+
<span class="text-gray-500 dark:text-gray-400">#{{ .Issue.IssueId }}</span>
8
8
</h1>
9
9
</header>
10
10
11
-
{{ $bgColor := "bg-gray-800" }}
11
+
{{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
12
12
{{ $icon := "ban" }}
13
13
{{ if eq .State "open" }}
14
-
{{ $bgColor = "bg-green-600" }}
14
+
{{ $bgColor = "bg-green-600 dark:bg-green-700" }}
15
15
{{ $icon = "circle-dot" }}
16
16
{{ end }}
17
17
18
18
<section class="mt-2">
19
19
<div class="inline-flex items-center gap-2">
20
20
<div id="state"
21
-
class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }} text-sm">
21
+
class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }}">
22
22
{{ i $icon "w-4 h-4 mr-1.5 text-white" }}
23
23
<span class="text-white">{{ .State }}</span>
24
24
</div>
25
-
<span class="text-gray-500 text-sm">
25
+
<span class="text-gray-500 dark:text-gray-400 text-sm">
26
26
opened by
27
27
{{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
28
28
<a href="/{{ $owner }}" class="no-underline hover:underline"
···
34
34
</div>
35
35
36
36
{{ if .Issue.Body }}
37
-
<article id="body" class="mt-4 prose">
37
+
<article id="body" class="mt-8 prose dark:text-white">
38
38
{{ .Issue.Body | markdown }}
39
39
</article>
40
40
{{ end }}
···
47
47
{{ range $index, $comment := .Comments }}
48
48
<div
49
49
id="comment-{{ .CommentId }}"
50
-
class="rounded bg-white px-6 py-4 relative"
50
+
class="rounded bg-white px-6 py-4 relative dark:bg-gray-800"
51
51
>
52
52
{{ if eq $index 0 }}
53
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300" ></div>
53
+
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
54
54
{{ else }}
55
-
<div class="absolute left-8 -top-4 w-px h-4 bg-gray-300" ></div>
55
+
<div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-700" ></div>
56
56
{{ end }}
57
-
<div class="flex items-center gap-2 mb-2 text-gray-500">
57
+
<div class="flex items-center gap-2 mb-2 text-gray-500 dark:text-gray-400">
58
58
{{ $owner := index $.DidHandleMap .OwnerDid }}
59
59
<span class="text-sm">
60
60
<a
···
67
67
<span class="before:content-['·']"></span>
68
68
<a
69
69
href="#{{ .CommentId }}"
70
-
class="text-gray-500 text-sm hover:text-gray-500 hover:underline no-underline"
70
+
class="text-gray-500 text-sm hover:text-gray-500 hover:underline no-underline dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-800"
71
71
id="{{ .CommentId }}"
72
72
>
73
73
{{ .Created | timeFmt }}
74
74
</a>
75
75
</div>
76
-
<div class="prose">
76
+
<div class="prose dark:text-white">
77
77
{{ .Body | markdown }}
78
78
</div>
79
79
</div>
···
101
101
>
102
102
<button type="submit" class="btn hover:bg-{{ $hoverColor }}-300">
103
103
{{ i $icon "w-4 h-4 mr-2" }}
104
-
<span class="text-black">{{ $action }}</span>
104
+
<span class="text-black dark:text-gray-400">{{ $action }}</span>
105
105
</button>
106
106
<div id="issue-action" class="error"></div>
107
107
</form>
···
110
110
111
111
{{ define "newComment" }}
112
112
{{ if .LoggedInUser }}
113
-
<div class="bg-white rounded drop-shadow-sm py-4 px-6 relative w-full flex flex-col gap-2 mt-8">
114
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300" ></div>
115
-
<div class="text-sm text-gray-500">
113
+
<div class="bg-white rounded drop-shadow-sm py-4 px-6 relative w-full flex flex-col gap-2 mt-8 dark:bg-gray-800 dark:text-gray-400">
114
+
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
115
+
<div class="text-sm text-gray-500 dark:text-gray-400">
116
116
{{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }}
117
117
</div>
118
118
<form hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment">
119
119
<textarea
120
120
name="body"
121
-
class="w-full p-2 rounded border border-gray-200"
121
+
class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
122
122
placeholder="Add to the discussion..."
123
123
></textarea>
124
124
<button type="submit" class="btn mt-2">comment</button>
···
127
127
</div>
128
128
{{ else }}
129
129
<div class="bg-white rounded drop-shadow-sm px-6 py-4 mt-8">
130
-
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300" ></div>
130
+
<div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
131
131
<a href="/login" class="underline">login</a> to join the discussion
132
132
</div>
133
133
{{ end }}
+8
-8
appview/pages/templates/repo/issues/issues.html
+8
-8
appview/pages/templates/repo/issues/issues.html
···
4
4
<div class="flex justify-between items-center">
5
5
<p>
6
6
filtering
7
-
<select class="border px-1 bg-white border-gray-200" onchange="window.location.href = '/{{ .RepoInfo.FullName }}/issues?state=' + this.value">
7
+
<select class="border px-1 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700" onchange="window.location.href = '/{{ .RepoInfo.FullName }}/issues?state=' + this.value">
8
8
<option value="open" {{ if .FilteringByOpen }}selected{{ end }}>open ({{ .RepoInfo.Stats.IssueCount.Open }})</option>
9
9
<option value="closed" {{ if not .FilteringByOpen }}selected{{ end }}>closed ({{ .RepoInfo.Stats.IssueCount.Closed }})</option>
10
10
</select>
···
23
23
{{ define "repoAfter" }}
24
24
<div class="flex flex-col gap-2 mt-2">
25
25
{{ range .Issues }}
26
-
<div class="rounded drop-shadow-sm bg-white px-6 py-4">
26
+
<div class="rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700">
27
27
<div class="pb-2">
28
28
<a
29
29
href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}"
···
33
33
<span class="text-gray-500">#{{ .IssueId }}</span>
34
34
</a>
35
35
</div>
36
-
<p class="text-sm text-gray-500">
37
-
{{ $bgColor := "bg-gray-800" }}
36
+
<p class="text-sm text-gray-500 dark:text-gray-400">
37
+
{{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
38
38
{{ $icon := "ban" }}
39
39
{{ $state := "closed" }}
40
40
{{ if .Open }}
41
-
{{ $bgColor = "bg-green-600" }}
41
+
{{ $bgColor = "bg-green-600 dark:bg-green-700" }}
42
42
{{ $icon = "circle-dot" }}
43
43
{{ $state = "open" }}
44
44
{{ end }}
45
45
46
46
<span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm">
47
-
{{ i $icon "w-3 h-3 mr-1.5 text-white" }}
48
-
<span class="text-white">{{ $state }}</span>
47
+
{{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
48
+
<span class="text-white dark:text-white">{{ $state }}</span>
49
49
</span>
50
50
51
51
<span>
···
64
64
{{ if eq .Metadata.CommentCount 1 }}
65
65
{{ $s = "" }}
66
66
{{ end }}
67
-
<a href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}" class="text-gray-500">{{ .Metadata.CommentCount }} comment{{$s}}</a>
67
+
<a href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}" class="text-gray-500 dark:text-gray-400">{{ .Metadata.CommentCount }} comment{{$s}}</a>
68
68
</span>
69
69
</p>
70
70
</div>
+16
-16
appview/pages/templates/repo/log.html
+16
-16
appview/pages/templates/repo/log.html
···
5
5
{{ $commit := index .Commits 0 }}
6
6
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
7
7
<div>
8
-
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}">
8
+
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white">
9
9
<p class="pb-5">{{ index $messageParts 0 }}</p>
10
10
{{ if gt (len $messageParts) 1 }}
11
11
<p class="mt-1 text-sm cursor-text pb-5">
···
15
15
</a>
16
16
</div>
17
17
18
-
<div class="text-sm text-gray-500">
18
+
<div class="text-sm text-gray-500 dark:text-gray-400">
19
19
<span class="font-mono">
20
20
<a
21
21
href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}"
22
-
class="text-gray-500 no-underline hover:underline"
22
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
23
23
>{{ slice $commit.Hash.String }}</a
24
24
>
25
25
</span>
···
29
29
{{ if $didOrHandle }}
30
30
<a
31
31
href="/{{ $didOrHandle }}"
32
-
class="text-gray-500 no-underline hover:underline"
32
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
33
33
>{{ $didOrHandle }}</a
34
34
>
35
35
{{ else }}
36
36
<a
37
37
href="mailto:{{ $commit.Author.Email }}"
38
-
class="text-gray-500 no-underline hover:underline"
38
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
39
39
>{{ $commit.Author.Name }}</a
40
40
>
41
41
{{ end }}
···
51
51
{{ define "repoAfter" }}
52
52
<main>
53
53
<div id="commit-log" class="flex-1 relative">
54
-
<div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
54
+
<div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300 dark:bg-gray-600"></div>
55
55
{{ $end := length .Commits }}
56
56
{{ $commits := subslice .Commits 1 $end }}
57
57
{{ range $commits }}
58
58
<div class="flex flex-row justify-between items-center">
59
59
<div
60
-
class="relative w-full px-4 py-4 mt-4 rounded-sm bg-white"
60
+
class="relative w-full px-4 py-4 mt-4 rounded-sm bg-white dark:bg-gray-800"
61
61
>
62
62
<div id="commit-message">
63
63
{{ $messageParts := splitN .Message "\n\n" 2 }}
···
66
66
<div>
67
67
<a
68
68
href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
69
-
class="inline no-underline hover:underline"
69
+
class="inline no-underline hover:underline dark:text-white"
70
70
>{{ index $messageParts 0 }}</a
71
71
>
72
72
{{ if gt (len $messageParts) 1 }}
73
73
74
74
<button
75
-
class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded"
75
+
class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded"
76
76
hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')"
77
77
>
78
78
{{ i "ellipsis" "w-3 h-3" }}
···
81
81
</div>
82
82
{{ if gt (len $messageParts) 1 }}
83
83
<p
84
-
class="hidden mt-1 text-sm cursor-text pb-2"
84
+
class="hidden mt-1 text-sm cursor-text pb-2 dark:text-gray-300"
85
85
>
86
86
{{ nl2br (unwrapText (index $messageParts 1)) }}
87
87
</p>
···
90
90
</div>
91
91
</div>
92
92
93
-
<div class="text-sm text-gray-500 mt-3">
93
+
<div class="text-sm text-gray-500 dark:text-gray-400 mt-3">
94
94
<span class="font-mono">
95
95
<a
96
96
href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
97
-
class="text-gray-500 no-underline hover:underline"
97
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
98
98
>{{ slice .Hash.String 0 8 }}</a
99
99
>
100
100
</span>
···
106
106
{{ if $didOrHandle }}
107
107
<a
108
108
href="/{{ $didOrHandle }}"
109
-
class="text-gray-500 no-underline hover:underline"
109
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
110
110
>{{ $didOrHandle }}</a
111
111
>
112
112
{{ else }}
113
113
<a
114
114
href="mailto:{{ .Author.Email }}"
115
-
class="text-gray-500 no-underline hover:underline"
115
+
class="text-gray-500 dark:text-gray-400 no-underline hover:underline"
116
116
>{{ .Author.Name }}</a
117
117
>
118
118
{{ end }}
···
131
131
<div class="flex justify-end mt-4 gap-2">
132
132
{{ if gt .Page 1 }}
133
133
<a
134
-
class="btn flex items-center gap-2 no-underline hover:no-underline"
134
+
class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
135
135
hx-boost="true"
136
136
onclick="window.location.href = window.location.pathname + '?page={{ sub .Page 1 }}'"
137
137
>
···
144
144
145
145
{{ if eq $commits_len 30 }}
146
146
<a
147
-
class="btn flex items-center gap-2 no-underline hover:no-underline"
147
+
class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
148
148
hx-boost="true"
149
149
onclick="window.location.href = window.location.pathname + '?page={{ add .Page 1 }}'"
150
150
>
+13
-13
appview/pages/templates/repo/new.html
+13
-13
appview/pages/templates/repo/new.html
···
2
2
3
3
{{ define "content" }}
4
4
<div class="p-6">
5
-
<p class="text-xl font-bold">Create a new repository</p>
5
+
<p class="text-xl font-bold dark:text-white">Create a new repository</p>
6
6
</div>
7
-
<div class="p-6 bg-white drop-shadow-sm rounded">
7
+
<div class="p-6 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
8
8
<form hx-post="/repo/new" class="space-y-12" hx-swap="none">
9
9
<div class="space-y-2">
10
-
<label for="name" class="-mb-1">Repository name</label>
10
+
<label for="name" class="-mb-1 dark:text-white">Repository name</label>
11
11
<input
12
12
type="text"
13
13
id="name"
14
14
name="name"
15
15
required
16
-
class="w-full max-w-md"
16
+
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
17
17
/>
18
-
<p class="text-sm text-gray-500">All repositories are publicly visible.</p>
18
+
<p class="text-sm text-gray-500 dark:text-gray-400">All repositories are publicly visible.</p>
19
19
20
-
<label for="branch">Default branch</label>
20
+
<label for="branch" class="dark:text-white">Default branch</label>
21
21
<input
22
22
type="text"
23
23
id="branch"
24
24
name="branch"
25
25
value="main"
26
26
required
27
-
class="w-full max-w-md"
27
+
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
28
28
/>
29
29
30
-
<label for="description">Description</label>
30
+
<label for="description" class="dark:text-white">Description</label>
31
31
<input
32
32
type="text"
33
33
id="description"
34
34
name="description"
35
-
class="w-full max-w-md"
35
+
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
36
36
/>
37
37
</div>
38
38
39
39
<fieldset class="space-y-3">
40
-
<legend>Select a knot</legend>
40
+
<legend class="dark:text-white">Select a knot</legend>
41
41
<div class="space-y-2">
42
42
<div class="flex flex-col">
43
43
{{ range .Knots }}
···
49
49
class="mr-2"
50
50
id="domain-{{ . }}"
51
51
/>
52
-
<span>{{ . }}</span>
52
+
<span class="dark:text-white">{{ . }}</span>
53
53
</div>
54
54
{{ else }}
55
-
<p>No knots available.</p>
55
+
<p class="dark:text-white">No knots available.</p>
56
56
{{ end }}
57
57
</div>
58
58
</div>
59
-
<p class="text-sm text-gray-500">A knot hosts repository data. <a href="/knots" class="underline">Learn how to register your own knot.</a></p>
59
+
<p class="text-sm text-gray-500 dark:text-gray-400">A knot hosts repository data. <a href="/knots" class="underline">Learn how to register your own knot.</a></p>
60
60
</fieldset>
61
61
62
62
<div class="space-y-2">
+14
-14
appview/pages/templates/repo/pulls/new.html
+14
-14
appview/pages/templates/repo/pulls/new.html
···
1
1
{{ define "title" }}new pull | {{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "repoContent" }}
4
-
<section class="prose">
4
+
<section class="prose dark:prose-invert">
5
5
<p>
6
6
This is v1 of the pull request flow. Paste your patch in the form below.
7
7
Here are the steps to get you started:
8
-
<ul class="list-decimal pl-10 space-y-2 text-gray-700">
8
+
<ul class="list-decimal pl-10 space-y-2 text-gray-700 dark:text-gray-300">
9
9
<li class="leading-relaxed">Clone this repository.</li>
10
10
<li class="leading-relaxed">Make your changes in your local repository.</li>
11
-
<li class="leading-relaxed">Grab the diff using <code class="bg-gray-100 px-1 py-0.5 rounded text-gray-800 font-mono text-sm">git diff</code>.</li>
11
+
<li class="leading-relaxed">Grab the diff using <code class="bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-gray-800 dark:text-gray-200 font-mono text-sm">git diff</code>.</li>
12
12
<li class="leading-relaxed">Paste the diff output in the form below.</li>
13
13
</ul>
14
14
</p>
···
20
20
>
21
21
<div class="flex flex-col gap-4">
22
22
<div>
23
-
<label for="title">write a title</label>
24
-
<input type="text" name="title" id="title" class="w-full" />
23
+
<label for="title" class="dark:text-white">write a title</label>
24
+
<input type="text" name="title" id="title" class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600" />
25
25
26
-
<label for="targetBranch">select a target branch</label>
27
-
<p class="text-gray-500">
26
+
<label for="targetBranch" class="dark:text-white">select a target branch</label>
27
+
<p class="text-gray-500 dark:text-gray-400">
28
28
The branch you want to make your change against.
29
29
</p>
30
30
<select
31
31
name="targetBranch"
32
-
class="p-1 mb-2 border border-gray-200 bg-white"
32
+
class="p-1 mb-2 border border-gray-200 bg-white dark:bg-gray-700 dark:text-white dark:border-gray-600"
33
33
>
34
34
<option disabled selected>select a branch</option>
35
35
{{ range .Branches }}
···
38
38
</option>
39
39
{{ end }}
40
40
</select>
41
-
<label for="body">add a description</label>
41
+
<label for="body" class="dark:text-white">add a description</label>
42
42
<textarea
43
43
name="body"
44
44
id="body"
45
45
rows="6"
46
-
class="w-full resize-y"
46
+
class="w-full resize-y dark:bg-gray-700 dark:text-white dark:border-gray-600"
47
47
placeholder="Describe your change. Markdown is supported."
48
48
></textarea>
49
49
50
50
<div class="mt-4">
51
-
<label for="patch">paste your patch here</label>
51
+
<label for="patch" class="dark:text-white">paste your patch here</label>
52
52
<textarea
53
53
name="patch"
54
54
id="patch"
55
55
rows="10"
56
-
class="w-full resize-y font-mono"
56
+
class="w-full resize-y font-mono dark:bg-gray-700 dark:text-white dark:border-gray-600"
57
57
placeholder="Paste your git diff output here."
58
58
></textarea>
59
59
</div>
60
60
</div>
61
61
<div>
62
-
<button type="submit" class="btn">create</button>
62
+
<button type="submit" class="btn dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">create</button>
63
63
</div>
64
64
</div>
65
-
<div id="pull" class="error"></div>
65
+
<div id="pull" class="error dark:text-red-300"></div>
66
66
</form>
67
67
{{ end }}
+6
-6
appview/pages/templates/repo/pulls/patch.html
+6
-6
appview/pages/templates/repo/pulls/patch.html
···
4
4
5
5
{{ define "content" }}
6
6
{{ $stat := .Diff.Stat }}
7
-
<div class="rounded drop-shadow-sm bg-white py-4 px-6">
7
+
<div class="rounded drop-shadow-sm bg-white dark:bg-gray-800 py-4 px-6 dark:text-white">
8
8
<header class="pb-2">
9
9
<div class="flex gap-3 items-center mb-3">
10
10
<a href="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/" class="flex items-center gap-2 font-medium">
···
18
18
view raw
19
19
</a>
20
20
</div>
21
-
<div class="border-t border-gray-200 my-2"></div>
21
+
<div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
22
22
<h1 class="text-2xl mt-3">
23
23
{{ .Pull.Title }}
24
-
<span class="text-gray-500">#{{ .Pull.PullId }}</span>
24
+
<span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span>
25
25
</h1>
26
26
</header>
27
27
···
45
45
{{ i $icon "w-4 h-4 mr-1.5 text-white" }}
46
46
<span class="text-white">{{ .Pull.State.String }}</span>
47
47
</div>
48
-
<span class="text-gray-500 text-sm">
48
+
<span class="text-gray-500 dark:text-gray-400 text-sm">
49
49
opened by
50
50
{{ $owner := index $.DidHandleMap .Pull.OwnerDid }}
51
51
<a href="/{{ $owner }}" class="no-underline hover:underline"
···
55
55
<time>{{ .Pull.Created | timeFmt }}</time>
56
56
<span class="select-none before:content-['\00B7']"></span>
57
57
<span>targeting branch
58
-
<span class="text-xs rounded bg-gray-100 text-black font-mono px-2 mx-1/2 inline-flex items-center">
58
+
<span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
59
59
{{ .Pull.TargetBranch }}
60
60
</span>
61
61
</span>
···
63
63
</div>
64
64
65
65
{{ if .Pull.Body }}
66
-
<article id="body" class="mt-2 prose">
66
+
<article id="body" class="mt-2 prose dark:prose-invert">
67
67
{{ .Pull.Body | markdown }}
68
68
</article>
69
69
{{ end }}
+34
-34
appview/pages/templates/repo/pulls/pull.html
+34
-34
appview/pages/templates/repo/pulls/pull.html
···
4
4
5
5
{{ define "repoContent" }}
6
6
<header class="pb-4">
7
-
<h1 class="text-2xl">
7
+
<h1 class="text-2xl dark:text-white">
8
8
{{ .Pull.Title }}
9
-
<span class="text-gray-500">#{{ .Pull.PullId }}</span>
9
+
<span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span>
10
10
</h1>
11
11
</header>
12
12
13
-
{{ $bgColor := "bg-gray-800" }}
13
+
{{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
14
14
{{ $icon := "ban" }}
15
15
16
16
{{ if .Pull.State.IsOpen }}
17
-
{{ $bgColor = "bg-green-600" }}
17
+
{{ $bgColor = "bg-green-600 dark:bg-green-700" }}
18
18
{{ $icon = "git-pull-request" }}
19
19
{{ else if .Pull.State.IsMerged }}
20
-
{{ $bgColor = "bg-purple-600" }}
20
+
{{ $bgColor = "bg-purple-600 dark:bg-purple-700" }}
21
21
{{ $icon = "git-merge" }}
22
22
{{ end }}
23
23
···
30
30
{{ i $icon "w-4 h-4 mr-1.5 text-white" }}
31
31
<span class="text-white">{{ .Pull.State.String }}</span>
32
32
</div>
33
-
<span class="text-gray-500 text-sm">
33
+
<span class="text-gray-500 dark:text-gray-400 text-sm">
34
34
opened by
35
35
{{ $owner := index $.DidHandleMap .Pull.OwnerDid }}
36
36
<a href="/{{ $owner }}" class="no-underline hover:underline"
···
40
40
<time>{{ .Pull.Created | timeFmt }}</time>
41
41
<span class="select-none before:content-['\00B7']"></span>
42
42
<span>targeting branch
43
-
<span class="text-xs rounded bg-gray-100 text-black font-mono px-2 mx-1/2 inline-flex items-center">
43
+
<span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
44
44
{{ .Pull.TargetBranch }}
45
45
</span>
46
46
</span>
···
48
48
</div>
49
49
50
50
{{ if .Pull.Body }}
51
-
<article id="body" class="mt-2 prose">
51
+
<article id="body" class="mt-2 prose dark:prose-invert">
52
52
{{ .Pull.Body | markdown }}
53
53
</article>
54
54
{{ end }}
···
78
78
<summary id="round-#{{ .RoundNumber }}" class="list-none cursor-pointer">
79
79
<div class="flex flex-wrap gap-2 items-center">
80
80
<!-- round number -->
81
-
<div class="rounded bg-white drop-shadow-sm px-3 py-2">
81
+
<div class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-3 py-2 dark:text-white">
82
82
#{{ .RoundNumber }}
83
83
</div>
84
84
<!-- round summary -->
85
-
<div class="rounded drop-shadow-sm bg-white p-2 text-gray-500">
85
+
<div class="rounded drop-shadow-sm bg-white dark:bg-gray-800 p-2 text-gray-500 dark:text-gray-400">
86
86
<span>
87
87
{{ $owner := index $.DidHandleMap $.Pull.OwnerDid }}
88
88
{{ $re := "re" }}
···
92
92
<span class="hidden md:inline">{{$re}}submitted</span>
93
93
by <a href="/{{ $owner }}">{{ $owner }}</a>
94
94
<span class="select-none before:content-['\00B7']"></span>
95
-
<a class="text-gray-500 hover:text-gray-500" href="#round-#{{ .RoundNumber }}"><time>{{ .Created | shortTimeFmt }}</time></a>
95
+
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ .RoundNumber }}"><time>{{ .Created | shortTimeFmt }}</time></a>
96
96
<span class="select-none before:content-['·']"></span>
97
97
{{ $s := "s" }}
98
98
{{ if eq (len .Comments) 1 }}
···
111
111
</summary>
112
112
<div class="md:pl-12 flex flex-col gap-2 mt-2 relative">
113
113
{{ range .Comments }}
114
-
<div id="comment-{{.ID}}" class="bg-white rounded drop-shadow-sm py-2 px-4 relative w-fit">
115
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
116
-
<div class="text-sm text-gray-500">
114
+
<div id="comment-{{.ID}}" class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-2 px-4 relative w-fit">
115
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
116
+
<div class="text-sm text-gray-500 dark:text-gray-400">
117
117
{{ $owner := index $.DidHandleMap .OwnerDid }}
118
118
<a href="/{{$owner}}">{{$owner}}</a>
119
119
<span class="before:content-['·']"></span>
120
-
<a class="text-gray-500 hover:text-gray-500" href="#comment-{{.ID}}"><time>{{ .Created | shortTimeFmt }}</time></a>
120
+
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}"><time>{{ .Created | shortTimeFmt }}</time></a>
121
121
</div>
122
-
<div class="prose">
122
+
<div class="prose dark:prose-invert">
123
123
{{ .Body | markdown }}
124
124
</div>
125
125
</div>
···
132
132
{{ if $.LoggedInUser }}
133
133
{{ template "fragments/pullActions" (dict "LoggedInUser" $.LoggedInUser "Pull" $.Pull "RepoInfo" $.RepoInfo "RoundNumber" .RoundNumber "MergeCheck" $.MergeCheck) }}
134
134
{{ else }}
135
-
<div class="bg-white rounded drop-shadow-sm px-6 py-4 w-fit">
136
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
135
+
<div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm px-6 py-4 w-fit dark:text-white">
136
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
137
137
<a href="/login" class="underline">login</a> to join the discussion
138
138
</div>
139
139
{{ end }}
···
146
146
147
147
{{ define "mergeStatus" }}
148
148
{{ if .Pull.State.IsClosed }}
149
-
<div class="bg-gray-50 border border-black rounded drop-shadow-sm px-6 py-2 relative w-fit">
150
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
151
-
<div class="flex items-center gap-2 text-black">
149
+
<div class="bg-gray-50 dark:bg-gray-700 border border-black dark:border-gray-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
150
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
151
+
<div class="flex items-center gap-2 text-black dark:text-white">
152
152
{{ i "ban" "w-4 h-4" }}
153
153
<span class="font-medium">closed without merging</span
154
154
>
155
155
</div>
156
156
</div>
157
157
{{ else if .Pull.State.IsMerged }}
158
-
<div class="bg-purple-50 border border-purple-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
159
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
160
-
<div class="flex items-center gap-2 text-purple-500">
158
+
<div class="bg-purple-50 dark:bg-purple-900 border border-purple-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
159
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
160
+
<div class="flex items-center gap-2 text-purple-500 dark:text-purple-300">
161
161
{{ i "git-merge" "w-4 h-4" }}
162
162
<span class="font-medium">pull request successfully merged</span
163
163
>
164
164
</div>
165
165
</div>
166
166
{{ else if and .MergeCheck .MergeCheck.Error }}
167
-
<div class="bg-red-50 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
168
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
169
-
<div class="flex items-center gap-2 text-red-500">
167
+
<div class="bg-red-50 dark:bg-red-900 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
168
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
169
+
<div class="flex items-center gap-2 text-red-500 dark:text-red-300">
170
170
{{ i "triangle-alert" "w-4 h-4" }}
171
171
<span class="font-medium">{{ .MergeCheck.Error }}</span>
172
172
</div>
173
173
</div>
174
174
{{ else if and .MergeCheck .MergeCheck.IsConflicted }}
175
-
<div class="bg-red-50 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
176
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
177
-
<div class="flex items-center gap-2 text-red-500">
175
+
<div class="bg-red-50 dark:bg-red-900 border border-red-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
176
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
177
+
<div class="flex items-center gap-2 text-red-500 dark:text-red-300">
178
178
{{ i "triangle-alert" "w-4 h-4" }}
179
179
<span class="font-medium">merge conflicts detected</span>
180
180
<ul class="text-sm space-y-1">
181
181
{{ range .MergeCheck.Conflicts }}
182
182
{{ if .Filename }}
183
183
<li class="flex items-center">
184
-
{{ i "file-warning" "w-3 h-3 mr-1.5 text-red-500" }}
184
+
{{ i "file-warning" "w-3 h-3 mr-1.5 text-red-500 dark:text-red-300" }}
185
185
<span class="font-mono">{{ slice .Filename 0 (sub (len .Filename) 2) }}</span>
186
186
</li>
187
187
{{ end }}
···
190
190
</div>
191
191
</div>
192
192
{{ else if .MergeCheck }}
193
-
<div class="bg-green-50 border border-green-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
194
-
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300"></div>
195
-
<div class="flex items-center gap-2 text-green-500">
193
+
<div class="bg-green-50 dark:bg-green-900 border border-green-500 rounded drop-shadow-sm px-6 py-2 relative w-fit">
194
+
<div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
195
+
<div class="flex items-center gap-2 text-green-500 dark:text-green-300">
196
196
{{ i "circle-check-big" "w-4 h-4" }}
197
197
<span class="font-medium">no conflicts, ready to merge</span>
198
198
</div>
+12
-12
appview/pages/templates/repo/pulls/pulls.html
+12
-12
appview/pages/templates/repo/pulls/pulls.html
···
2
2
3
3
{{ define "repoContent" }}
4
4
<div class="flex justify-between items-center">
5
-
<p>
5
+
<p class="dark:text-white">
6
6
filtering
7
7
<select
8
-
class="border px-1 bg-white border-gray-200"
8
+
class="border px-1 bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600 dark:text-white"
9
9
onchange="window.location.href = '/{{ .RepoInfo.FullName }}/pulls?state=' + this.value"
10
10
>
11
11
<option value="open" {{ if .FilteringBy.IsOpen }}selected{{ end }}>
···
22
22
</p>
23
23
<a
24
24
href="/{{ .RepoInfo.FullName }}/pulls/new"
25
-
class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"
25
+
class="btn text-sm flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600"
26
26
>
27
27
{{ i "git-pull-request" "w-4 h-4" }}
28
28
<span>new pull request</span>
···
34
34
{{ define "repoAfter" }}
35
35
<div class="flex flex-col gap-2 mt-2">
36
36
{{ range .Pulls }}
37
-
<div class="rounded drop-shadow-sm bg-white px-6 py-4">
37
+
<div class="rounded drop-shadow-sm bg-white dark:bg-gray-800 px-6 py-4">
38
38
<div class="pb-2">
39
-
<a href="/{{ $.RepoInfo.FullName }}/pulls/{{ .PullId }}">
39
+
<a href="/{{ $.RepoInfo.FullName }}/pulls/{{ .PullId }}" class="dark:text-white">
40
40
{{ .Title }}
41
-
<span class="text-gray-500">#{{ .PullId }}</span>
41
+
<span class="text-gray-500 dark:text-gray-400">#{{ .PullId }}</span>
42
42
</a>
43
43
</div>
44
-
<p class="text-sm text-gray-500">
45
-
{{ $bgColor := "bg-gray-800" }}
44
+
<p class="text-sm text-gray-500 dark:text-gray-400">
45
+
{{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
46
46
{{ $icon := "ban" }}
47
47
48
48
{{ if .State.IsOpen }}
49
-
{{ $bgColor = "bg-green-600" }}
49
+
{{ $bgColor = "bg-green-600 dark:bg-green-700" }}
50
50
{{ $icon = "git-pull-request" }}
51
51
{{ else if .State.IsMerged }}
52
-
{{ $bgColor = "bg-purple-600" }}
52
+
{{ $bgColor = "bg-purple-600 dark:bg-purple-700" }}
53
53
{{ $icon = "git-merge" }}
54
54
{{ end }}
55
55
···
63
63
64
64
<span>
65
65
{{ $owner := index $.DidHandleMap .OwnerDid }}
66
-
<a href="/{{ $owner }}">{{ $owner }}</a>
66
+
<a href="/{{ $owner }}" class="dark:text-gray-300">{{ $owner }}</a>
67
67
</span>
68
68
69
69
<span class="before:content-['·']">
···
74
74
75
75
<span class="before:content-['·']">
76
76
targeting branch
77
-
<span class="text-xs rounded bg-gray-100 text-black font-mono px-2 mx-1/2 inline-flex items-center">
77
+
<span class="text-xs rounded bg-gray-100 dark:bg-gray-600 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
78
78
{{ .TargetBranch }}
79
79
</span>
80
80
</span>
+7
-7
appview/pages/templates/repo/settings.html
+7
-7
appview/pages/templates/repo/settings.html
···
1
1
{{ define "title" }}settings · {{ .RepoInfo.FullName }}{{ end }}
2
2
{{ define "repoContent" }}
3
-
<header class="font-bold text-sm mb-4 uppercase">Collaborators</header>
3
+
<header class="font-bold text-sm mb-4 uppercase dark:text-white">Collaborators</header>
4
4
5
5
<div id="collaborator-list" class="flex flex-col gap-2 mb-2">
6
6
{{ range .Collaborators }}
7
7
<div id="collaborator" class="mb-2">
8
8
<a
9
9
href="/{{ didOrHandle .Did .Handle }}"
10
-
class="no-underline hover:underline text-black"
10
+
class="no-underline hover:underline text-black dark:text-white"
11
11
>
12
12
{{ didOrHandle .Did .Handle }}
13
13
</a>
14
14
<div>
15
-
<span class="text-sm text-gray-500">
15
+
<span class="text-sm text-gray-500 dark:text-gray-400">
16
16
{{ .Role }}
17
17
</span>
18
18
</div>
···
21
21
</div>
22
22
23
23
{{ if .IsCollaboratorInviteAllowed }}
24
-
<h3>add collaborator</h3>
24
+
<h3 class="dark:text-white">add collaborator</h3>
25
25
<form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">
26
-
<label for="collaborator">did or handle:</label>
27
-
<input type="text" id="collaborator" name="collaborator" required />
28
-
<button class="btn my-2" type="text">add collaborator</button>
26
+
<label for="collaborator" class="dark:text-white">did or handle:</label>
27
+
<input type="text" id="collaborator" name="collaborator" required class="dark:bg-gray-700 dark:text-white" />
28
+
<button class="btn my-2 dark:text-white dark:hover:bg-gray-700" type="text">add collaborator</button>
29
29
</form>
30
30
{{ end }}
31
31
{{ end }}
+5
-5
appview/pages/templates/repo/tree.html
+5
-5
appview/pages/templates/repo/tree.html
···
17
17
{{ $containerstyle := "py-1" }}
18
18
{{ $linkstyle := "no-underline hover:underline" }}
19
19
20
-
<div class="pb-2 mb-3 text-base border-b border-gray-200">
20
+
<div class="pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-500">
21
21
<div class="flex flex-col md:flex-row md:justify-between gap-2">
22
22
<div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap">
23
23
{{ range .BreadCrumbs }}
24
-
<a href="{{ index . 1}}" class="text-bold text-gray-500 {{ $linkstyle }}">{{ index . 0 }}</a> /
24
+
<a href="{{ index . 1}}" class="text-bold text-gray-500 dark:text-gray-400 {{ $linkstyle }}">{{ index . 0 }}</a> /
25
25
{{ end }}
26
26
</div>
27
-
<div id="dir-info" class="text-gray-500 text-xs md:text-sm flex flex-wrap items-center gap-1 md:gap-0">
27
+
<div id="dir-info" class="text-gray-500 dark:text-gray-400 text-xs md:text-sm flex flex-wrap items-center gap-1 md:gap-0">
28
28
{{ $stats := .TreeStats }}
29
29
30
30
<span>at <a href="/{{ $.RepoInfo.FullName }}/tree/{{ $.Ref }}">{{ $.Ref }}</a></span>
···
56
56
{{ i "folder" "w-3 h-3 fill-current" }}{{ .Name }}
57
57
</div>
58
58
</a>
59
-
<time class="text-xs text-gray-500">{{ timeFmt .LastCommit.When }}</time>
59
+
<time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
60
60
</div>
61
61
</div>
62
62
{{ end }}
···
71
71
{{ i "file" "w-3 h-3" }}{{ .Name }}
72
72
</div>
73
73
</a>
74
-
<time class="text-xs text-gray-500">{{ timeFmt .LastCommit.When }}</time>
74
+
<time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
75
75
</div>
76
76
</div>
77
77
{{ end }}
+33
-33
appview/pages/templates/settings.html
+33
-33
appview/pages/templates/settings.html
···
2
2
3
3
{{ define "content" }}
4
4
<div class="p-6">
5
-
<p class="text-xl font-bold">Settings</p>
5
+
<p class="text-xl font-bold dark:text-white">Settings</p>
6
6
</div>
7
7
<div class="flex flex-col">
8
8
{{ block "profile" . }} {{ end }}
···
12
12
{{ end }}
13
13
14
14
{{ define "profile" }}
15
-
<h2 class="text-sm font-bold py-2 px-6 uppercase">profile</h2>
16
-
<section class="rounded bg-white drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
17
-
<dl class="grid grid-cols-[auto_1fr] gap-x-4">
15
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">profile</h2>
16
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
17
+
<dl class="grid grid-cols-[auto_1fr] gap-x-4 dark:text-gray-200">
18
18
{{ if .LoggedInUser.Handle }}
19
19
<dt class="font-bold">handle</dt>
20
20
<dd>@{{ .LoggedInUser.Handle }}</dd>
···
28
28
{{ end }}
29
29
30
30
{{ define "keys" }}
31
-
<h2 class="text-sm font-bold py-2 px-6 uppercase">ssh keys</h2>
32
-
<section class="rounded bg-white drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
33
-
<p class="mb-8">SSH public keys added here will be broadcasted to knots that you are a member of, <br> allowing you to push to repositories there.</p>
31
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">ssh keys</h2>
32
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
33
+
<p class="mb-8 dark:text-gray-300">SSH public keys added here will be broadcasted to knots that you are a member of, <br> allowing you to push to repositories there.</p>
34
34
<div id="key-list" class="flex flex-col gap-6 mb-8">
35
35
{{ range $index, $key := .PubKeys }}
36
36
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
37
37
<div class="flex flex-col gap-1">
38
38
<div class="inline-flex items-center gap-4">
39
-
{{ i "key" "w-3 h-3" }}
40
-
<p class="font-bold">{{ .Name }}</p>
39
+
{{ i "key" "w-3 h-3 dark:text-gray-300" }}
40
+
<p class="font-bold dark:text-white">{{ .Name }}</p>
41
41
</div>
42
-
<p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p>
42
+
<p class="text-sm text-gray-500 dark:text-gray-400">added {{ .Created | timeFmt }}</p>
43
43
<div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full">
44
-
<code class="text-sm text-gray-500">{{ .Key }}</code>
44
+
<code class="text-sm text-gray-500 dark:text-gray-400">{{ .Key }}</code>
45
45
</div>
46
46
</div>
47
47
<button
48
-
class="btn text-red-500 hover:text-red-700"
48
+
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2"
49
49
title="Delete key"
50
50
hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}"
51
51
hx-confirm="Are you sure you want to delete the key '{{ .Name }}'?">
···
66
66
name="name"
67
67
placeholder="key name"
68
68
required
69
-
class="w-full"/>
69
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
70
70
71
71
<input
72
72
id="key"
73
73
name="key"
74
74
placeholder="ssh-rsa AAAAAA..."
75
75
required
76
-
class="w-full"/>
76
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
77
77
78
-
<button class="btn" type="submit">add key</button>
78
+
<button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add key</button>
79
79
80
-
<div id="settings-keys" class="error"></div>
80
+
<div id="settings-keys" class="error dark:text-red-400"></div>
81
81
</form>
82
82
</section>
83
83
{{ end }}
84
84
85
85
{{ define "emails" }}
86
-
<h2 class="text-sm font-bold py-2 px-6 uppercase">email addresses</h2>
87
-
<section class="rounded bg-white drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
88
-
<p class="mb-8">Commits authored using emails listed here will be associated with your Tangled profile.</p>
86
+
<h2 class="text-sm font-bold py-2 px-6 uppercase dark:text-gray-300">email addresses</h2>
87
+
<section class="rounded bg-white dark:bg-gray-800 drop-shadow-sm px-6 py-4 mb-6 w-full lg:w-fit">
88
+
<p class="mb-8 dark:text-gray-300">Commits authored using emails listed here will be associated with your Tangled profile.</p>
89
89
<div id="email-list" class="flex flex-col gap-6 mb-8">
90
90
{{ range $index, $email := .Emails }}
91
91
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
92
92
<div class="flex flex-col gap-2">
93
93
<div class="inline-flex items-center gap-4">
94
-
{{ i "mail" "w-3 h-3" }}
95
-
<p class="font-bold">{{ .Address }}</p>
94
+
{{ i "mail" "w-3 h-3 dark:text-gray-300" }}
95
+
<p class="font-bold dark:text-white">{{ .Address }}</p>
96
96
<div class="inline-flex items-center gap-1">
97
97
{{ if .Verified }}
98
-
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">verified</span>
98
+
<span class="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 rounded">verified</span>
99
99
{{ else }}
100
-
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">unverified</span>
100
+
<span class="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-2 py-1 rounded">unverified</span>
101
101
{{ end }}
102
102
{{ if .Primary }}
103
-
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">primary</span>
103
+
<span class="text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded">primary</span>
104
104
{{ end }}
105
105
</div>
106
106
</div>
107
-
<p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p>
107
+
<p class="text-sm text-gray-500 dark:text-gray-400">added {{ .CreatedAt | timeFmt }}</p>
108
108
</div>
109
109
<div class="flex gap-2 items-center">
110
110
{{ if not .Verified }}
111
111
<button
112
-
class="btn flex gap-2"
112
+
class="btn flex gap-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
113
113
hx-post="/settings/emails/verify/resend"
114
114
hx-swap="none"
115
115
href="#"
···
120
120
{{ end }}
121
121
{{ if and (not .Primary) .Verified }}
122
122
<a
123
-
class="text-sm"
123
+
class="text-sm dark:text-blue-400 dark:hover:text-blue-300"
124
124
hx-post="/settings/emails/primary"
125
125
hx-swap="none"
126
126
href="#"
···
132
132
<form hx-delete="/settings/emails" hx-confirm="Are you sure you wish to delete the email '{{ .Address }}'?">
133
133
<input type="hidden" name="email" value="{{ .Address }}">
134
134
<button
135
-
class="btn text-red-500 hover:text-red-700"
135
+
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
136
136
title="Delete email"
137
137
type="submit">
138
138
{{ i "trash-2" "w-5 h-5" }}
···
155
155
name="email"
156
156
placeholder="your@email.com"
157
157
required
158
-
class="w-full"/>
158
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400"/>
159
159
160
-
<button class="btn" type="submit">add email</button>
160
+
<button class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" type="submit">add email</button>
161
161
162
-
<div id="settings-emails-error" class="error"></div>
163
-
<div id="settings-emails-success" class="success"></div>
162
+
<div id="settings-emails-error" class="error dark:text-red-400"></div>
163
+
<div id="settings-emails-success" class="success dark:text-green-400"></div>
164
164
165
165
</form>
166
166
</section>
167
-
{{ end }}
167
+
{{ end }}
+11
-12
appview/pages/templates/timeline.html
+11
-12
appview/pages/templates/timeline.html
···
17
17
{{ end }}
18
18
19
19
{{ define "hero" }}
20
-
<div class="flex flex-col items-center justify-center text-center rounded drop-shadow bg-white text-black py-4 px-10">
20
+
<div class="flex flex-col items-center justify-center text-center rounded drop-shadow bg-white dark:bg-gray-800 text-black dark:text-white py-4 px-10">
21
21
<div class="font-bold italic text-4xl mb-4">
22
22
tangled
23
23
</div>
24
24
<div class="italic text-lg">
25
25
tightly-knit social coding, <a href="/login" class="underline inline-flex gap-1 items-center">join now {{ i "arrow-right" "w-4 h-4" }}</a>
26
-
<p class="pt-5 px-10 text-sm text-gray-500">Join our IRC channel: <a href="https://web.libera.chat/#tangled"><code>#tangled</code> on Libera Chat</a>.
26
+
<p class="pt-5 px-10 text-sm text-gray-500 dark:text-gray-400">Join our IRC channel: <a href="https://web.libera.chat/#tangled"><code>#tangled</code> on Libera Chat</a>.
27
27
Read an introduction to Tangled <a href="https://blog.tangled.sh/intro">here</a>.</p>
28
28
</div>
29
29
</div>
···
32
32
{{ define "timeline" }}
33
33
<div>
34
34
<div class="p-6">
35
-
<p class="text-xl font-bold">Timeline</p>
35
+
<p class="text-xl font-bold dark:text-white">Timeline</p>
36
36
</div>
37
37
38
38
<div class="flex flex-col gap-3 relative">
39
-
<div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
39
+
<div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300 dark:bg-gray-600"></div>
40
40
{{ range .Timeline }}
41
-
<div class="px-6 py-2 bg-white rounded drop-shadow-sm w-fit">
41
+
<div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit">
42
42
{{ if .Repo }}
43
43
{{ $userHandle := index $.DidHandleMap .Repo.Did }}
44
44
<div class="flex items-center">
45
-
<p class="text-gray-600">
45
+
<p class="text-gray-600 dark:text-gray-300">
46
46
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle | truncateAt30 }}</a>
47
47
created
48
48
<a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
49
-
<time class="text-gray-700 text-xs">{{ .Repo.Created | timeFmt }}</time>
49
+
<time class="text-gray-700 dark:text-gray-400 text-xs">{{ .Repo.Created | timeFmt }}</time>
50
50
</p>
51
51
</div>
52
52
{{ else if .Follow }}
53
53
{{ $userHandle := index $.DidHandleMap .Follow.UserDid }}
54
54
{{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}
55
55
<div class="flex items-center">
56
-
<p class="text-gray-600">
56
+
<p class="text-gray-600 dark:text-gray-300">
57
57
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle | truncateAt30 }}</a>
58
58
followed
59
59
<a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle | truncateAt30 }}</a>
60
-
<time class="text-gray-700 text-xs">{{ .Follow.FollowedAt | timeFmt }}</time>
60
+
<time class="text-gray-700 dark:text-gray-400 text-xs">{{ .Follow.FollowedAt | timeFmt }}</time>
61
61
</p>
62
62
</div>
63
63
{{ else if .Star }}
64
64
{{ $starrerHandle := index $.DidHandleMap .Star.StarredByDid }}
65
65
{{ $repoOwnerHandle := index $.DidHandleMap .Star.Repo.Did }}
66
66
<div class="flex items-center">
67
-
<p class="text-gray-600">
67
+
<p class="text-gray-600 dark:text-gray-300">
68
68
<a href="/{{ $starrerHandle }}" class="no-underline hover:underline">{{ $starrerHandle | truncateAt30 }}</a>
69
69
starred
70
70
<a href="/{{ $repoOwnerHandle }}/{{ .Star.Repo.Name }}" class="no-underline hover:underline">{{ $repoOwnerHandle | truncateAt30 }}/{{ .Star.Repo.Name }}</a>
71
-
<time class="text-gray-700 text-xs">{{ .Star.Created | timeFmt }}</time>
71
+
<time class="text-gray-700 dark:text-gray-400 text-xs">{{ .Star.Created | timeFmt }}</time>
72
72
</p>
73
73
</div>
74
74
{{ end }}
···
77
77
</div>
78
78
</div>
79
79
{{ end }}
80
-
+3
-3
appview/pages/templates/user/login.html
+3
-3
appview/pages/templates/user/login.html
···
1
1
{{ define "user/login" }}
2
2
<!doctype html>
3
-
<html lang="en">
3
+
<html lang="en" class="dark:bg-gray-900">
4
4
<head>
5
5
<meta charset="UTF-8" />
6
6
<meta
···
13
13
</head>
14
14
<body class="flex items-center justify-center min-h-screen">
15
15
<main class="max-w-64">
16
-
<h1 class="text-center text-2xl font-semibold italic">
16
+
<h1 class="text-center text-2xl font-semibold italic dark:text-white">
17
17
tangled
18
18
</h1>
19
-
<h2 class="text-center text-xl italic">
19
+
<h2 class="text-center text-xl italic dark:text-white">
20
20
tightly-knit social coding.
21
21
</h2>
22
22
<form
+13
-13
appview/pages/templates/user/profile.html
+13
-13
appview/pages/templates/user/profile.html
···
14
14
{{ end }}
15
15
16
16
{{ define "profileCard" }}
17
-
<div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit">
17
+
<div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit">
18
18
<div class="flex justify-center items-center">
19
19
{{ if .AvatarUri }}
20
20
<img class="w-1/2 rounded-full p-2" src="{{ .AvatarUri }}" />
21
21
{{ end }}
22
22
</div>
23
-
<p class="text-xl font-bold text-center">
23
+
<p class="text-xl font-bold text-center dark:text-white">
24
24
{{ truncateAt30 (didOrHandle .UserDid .UserHandle) }}
25
25
</p>
26
-
<div class="text-sm text-center">
26
+
<div class="text-sm text-center dark:text-gray-300">
27
27
<span>{{ .ProfileStats.Followers }} followers</span>
28
28
<div
29
29
class="inline-block px-1 select-none after:content-['·']"
···
38
38
{{ end }}
39
39
40
40
{{ define "ownRepos" }}
41
-
<p class="text-sm font-bold py-2 px-6">REPOS</p>
41
+
<p class="text-sm font-bold py-2 px-6 dark:text-white">REPOS</p>
42
42
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
43
43
{{ range .Repos }}
44
44
<div
45
45
id="repo-card"
46
-
class="py-4 px-6 drop-shadow-sm rounded bg-white"
46
+
class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800"
47
47
>
48
-
<div id="repo-card-name" class="font-medium">
48
+
<div id="repo-card-name" class="font-medium dark:text-white">
49
49
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
50
50
>{{ .Name }}</a
51
51
>
52
52
</div>
53
53
{{ if .Description }}
54
-
<div class="text-gray-600 text-sm">
54
+
<div class="text-gray-600 dark:text-gray-300 text-sm">
55
55
{{ .Description }}
56
56
</div>
57
57
{{ end }}
···
68
68
</div>
69
69
</div>
70
70
{{ else }}
71
-
<p class="px-6">This user does not have any repos yet.</p>
71
+
<p class="px-6 dark:text-white">This user does not have any repos yet.</p>
72
72
{{ end }}
73
73
</div>
74
74
{{ end }}
75
75
76
76
{{ define "collaboratingRepos" }}
77
-
<p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>
77
+
<p class="text-sm font-bold py-2 px-6 dark:text-white">COLLABORATING ON</p>
78
78
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
79
79
{{ range .CollaboratingRepos }}
80
80
<div
81
81
id="repo-card"
82
-
class="py-4 px-6 drop-shadow-sm rounded bg-white flex flex-col"
82
+
class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex flex-col"
83
83
>
84
-
<div id="repo-card-name" class="font-medium">
84
+
<div id="repo-card-name" class="font-medium dark:text-white">
85
85
<a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
86
86
{{ index $.DidHandleMap .Did }}/{{ .Name }}
87
87
</a>
88
88
</div>
89
89
{{ if .Description }}
90
-
<div class="text-gray-600 text-sm">
90
+
<div class="text-gray-600 dark:text-gray-300 text-sm">
91
91
{{ .Description }}
92
92
</div>
93
93
{{ end }}
···
102
102
</div>
103
103
</div>
104
104
{{ else }}
105
-
<p class="px-6">This user is not collaborating.</p>
105
+
<p class="px-6 dark:text-white">This user is not collaborating.</p>
106
106
{{ end }}
107
107
</div>
108
108
{{ end }}
+14
-11
input.css
+14
-11
input.css
···
96
96
"calt" 1,
97
97
"kern" 1;
98
98
}
99
-
100
99
::selection {
101
-
@apply bg-yellow-400;
102
-
@apply text-black;
103
-
@apply bg-opacity-30;
100
+
@apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
104
101
}
105
102
106
103
@layer base {
···
110
107
font-size: 14px;
111
108
}
112
109
a {
113
-
@apply no-underline text-black hover:underline hover:text-gray-800;
110
+
@apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
114
111
}
115
112
116
113
label {
117
-
@apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase;
114
+
@apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
118
115
}
119
116
input {
120
-
@apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3;
117
+
@apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
121
118
}
122
119
textarea {
123
-
@apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3;
120
+
@apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
124
121
}
125
122
details summary::-webkit-details-marker {
126
123
display: none;
···
141
138
focus-visible:before:outline-4 focus-visible:before:outline-gray-500
142
139
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
143
140
disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
144
-
disabled:hover:before:bg-white disabled:hover:before:shadow-none;
141
+
disabled:hover:before:bg-white disabled:hover:before:shadow-none
142
+
dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
143
+
dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
144
+
dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
145
+
dark:focus-visible:before:outline-gray-400
146
+
dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
147
+
dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
145
148
}
146
149
}
147
150
@layer utilities {
148
151
.error {
149
-
@apply py-1 text-red-400;
152
+
@apply py-1 text-red-400 dark:text-red-300;
150
153
}
151
154
.success {
152
-
@apply py-1 text-gray-900;
155
+
@apply py-1 text-gray-900 dark:text-gray-100;
153
156
}
154
157
}
155
158
}