Monorepo for Tangled tangled.org

appview/pages: improve repo header styles

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li 1346e89a dd1bcee8

verified
Changed files
+48 -33
appview
db
pages
templates
layouts
+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
··· 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" >