tangled.org
Monorepo for Tangled
tangled.org
appview/pages: improve repo header styles
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+48
-33
+1
-1
appview/db/repos.go
+1
-1
appview/db/repos.go
···
405
405
func AddRepo(tx *sql.Tx, repo *models.Repo) error {
406
406
_, err := tx.Exec(
407
407
`insert into repos
408
-
(did, name, knot, rkey, at_uri, description, website, topics source)
408
+
(did, name, knot, rkey, at_uri, description, website, topics, source)
409
409
values (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
410
410
repo.Did, repo.Name, repo.Knot, repo.Rkey, repo.RepoAt().String(), repo.Description, repo.Website, repo.TopicStr(), repo.Source,
411
411
)
+47
-32
appview/pages/templates/layouts/repobase.html
+47
-32
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 dark:text-white">
4
+
<section id="repo-header" class="mb-4 p-2 dark:text-white">
5
5
{{ if .RepoInfo.Source }}
6
-
<p class="text-sm">
7
-
<div class="flex items-center">
8
-
{{ i "git-fork" "w-3 h-3 mr-1 shrink-0" }}
9
-
forked from
10
-
{{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle }}
11
-
<a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
12
-
</div>
13
-
</p>
6
+
<div class="flex items-center">
7
+
{{ i "git-fork" "w-3 h-3 mr-1 shrink-0" }}
8
+
forked from
9
+
{{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle }}
10
+
<a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
11
+
</div>
14
12
{{ end }}
15
-
<div class="text-lg flex items-center justify-between">
16
-
<div class="flex items-center gap-2 flex-wrap">
17
-
{{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
18
-
<span class="select-none">/</span>
19
-
<a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
20
-
{{ range $topic := .RepoInfo.Topics }}
21
-
<span class="font-normal normal-case text-sm rounded py-1 px-2 bg-white dark:bg-gray-800">{{ $topic }}</span>
22
-
{{ end }}
13
+
<div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
14
+
<!-- left items -->
15
+
<div class="flex flex-col gap-2">
16
+
<!-- repo owner / repo name -->
17
+
<div class="flex items-center gap-2 flex-wrap">
18
+
{{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
19
+
<span class="select-none">/</span>
20
+
<a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
21
+
</div>
22
+
23
+
<span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
24
+
{{ if .RepoInfo.Description }}
25
+
{{ .RepoInfo.Description | description }}
26
+
{{ else }}
27
+
<span class="italic">this repo has no description</span>
28
+
{{ end }}
29
+
30
+
{{ with .RepoInfo.Website }}
31
+
<span class="flex items-center gap-1">
32
+
<span class="flex-shrink-0">{{ i "globe" "size-4" }}</span>
33
+
<a href="{{ . }}">{{ . | trimUriScheme }}</a>
34
+
</span>
35
+
{{ end }}
36
+
37
+
{{ if .RepoInfo.Topics }}
38
+
<div class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-300">
39
+
{{ range .RepoInfo.Topics }}
40
+
<span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{ . }}</span>
41
+
{{ end }}
42
+
</div>
43
+
{{ end }}
44
+
45
+
</span>
23
46
</div>
24
47
25
-
<div class="flex items-center gap-2 z-auto">
26
-
<a
27
-
class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
28
-
href="/{{ .RepoInfo.FullName }}/feed.atom"
29
-
>
30
-
{{ i "rss" "size-4" }}
31
-
</a>
48
+
<div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
32
49
{{ template "repo/fragments/repoStar" .RepoInfo }}
33
50
<a
34
51
class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
···
39
56
fork
40
57
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
41
58
</a>
59
+
<a
60
+
class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
61
+
href="/{{ .RepoInfo.FullName }}/feed.atom">
62
+
{{ i "rss" "size-4" }}
63
+
<span class="md:hidden">atom</span>
64
+
</a>
42
65
</div>
43
66
</div>
44
-
<span id="repo-description" class="flex flex-wrap items-center gap-2 text-sm" hx-target="this" hx-swap="outerHTML">
45
-
{{ if .RepoInfo.Description }}
46
-
{{ .RepoInfo.Description | description }}
47
-
{{ else }}
48
-
<span class="italic">this repo has no description</span>
49
-
{{ end }}
50
-
<a href="{{ .RepoInfo.Website }}" class="underline text-blue-800 dark:text-blue-300">{{ .RepoInfo.Website | trimUriScheme }}</a>
51
-
</span>
52
67
</section>
53
68
54
69
<section class="w-full flex flex-col" >