Monorepo for Tangled tangled.org

htmx page nav

anirudh.fi 155d17ef 371776ff

verified
Changed files
+125 -56
appview
pages
+2
appview/pages/pages.go
··· 181 181 type RepoIndexParams struct { 182 182 LoggedInUser *auth.User 183 183 RepoInfo RepoInfo 184 + Active string 184 185 types.RepoIndexResponse 185 186 } 186 187 187 188 func (p *Pages) RepoIndexPage(w io.Writer, params RepoIndexParams) error { 189 + params.Active = "index" 188 190 return p.executeRepo("repo/index", w, params) 189 191 } 190 192
+93 -21
appview/pages/templates/layouts/repobase.html
··· 1 - {{define "title"}} {{ .RepoInfo.FullName }} {{ end}} 1 + {{ define "title" }}{{ .RepoInfo.FullName }}{{ end }} 2 2 3 3 {{ define "content" }} 4 4 5 - <div id="repo-header"> 6 - <h1>{{ .RepoInfo.FullName }}</h1> 7 - {{ if .RepoInfo.Description }} 8 - <h3 class="desc">{{ .RepoInfo.Description }}</h3> 9 - {{ else }} 10 - <em>this repo has no description</em> 11 - {{ end }} 12 - </div> 5 + <section id="repo-header"> 6 + <h1>{{ .RepoInfo.FullName }}</h1> 7 + {{ if .RepoInfo.Description }} 8 + <h3 class="desc">{{ .RepoInfo.Description }}</h3> 9 + {{ else }} 10 + <em>this repo has no description</em> 11 + {{ end }} 12 + </section> 13 + <section id="repo-links" class="min-h-screen flex flex-col"> 14 + <nav class="w-full max-w-3xl mx-auto"> 15 + <div class="relative"> 16 + <div class="flex relative"> 17 + <a 18 + href="/{{ .RepoInfo.FullName }}" 19 + class="relative -mr-px group no-underline" 20 + hx-boost="true" 21 + > 22 + <div 23 + class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-60 group-hover:bg-gray-50 24 + {{ if eq .Active "index" }} 25 + border-b-white border-b-0 border-gray-300 26 + border-l border-r border-t 27 + {{ else }} 28 + border-gray-300 border translate-y-[2px] 29 + {{ end }}" 30 + > 31 + overview 32 + </div> 33 + </a> 13 34 14 - <div id="repo-links"> 15 - <nav> 16 - <a href="/{{ .RepoInfo.FullName }}">summary</a>&nbsp;· 17 - <a href="/{{ .RepoInfo.FullName }}/branches">branches</a>&nbsp;· 18 - <a href="/{{ .RepoInfo.FullName }}/tags">tags</a> 19 - {{ if .RepoInfo.SettingsAllowed }} 20 - ·&nbsp;<a href="/{{ .RepoInfo.FullName }}/settings">settings</a> 21 - {{ end }} 22 - </nav> 23 - <div> 35 + <a 36 + href="/{{ .RepoInfo.FullName }}/issues" 37 + class="relative -mr-px group no-underline" 38 + hx-boost="true" 39 + > 40 + <div 41 + class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-50 group-hover:bg-gray-50 42 + {{ if eq .Active "issues" }} 43 + border-gray-500 border border-b-0 bg-white 44 + {{ else }} 45 + border-gray-300 border translate-y-[2px] 46 + {{ end }} 47 + " 48 + > 49 + issues 50 + </div> 51 + </a> 24 52 25 - {{ block "repoContent" . }} {{ end }} 53 + <a 54 + href="#" 55 + class="relative -mr-px group no-underline" 56 + hx-boost="true" 57 + > 58 + <div 59 + class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50 60 + {{ if eq .Active "pulls" }} 61 + border-gray-500 border border-b-0 bg-white 62 + {{ else }} 63 + border-gray-300 border translate-y-[2px] 64 + {{ end }} 65 + " 66 + > 67 + pull requests 68 + </div> 69 + </a> 26 70 71 + {{ if .RepoInfo.SettingsAllowed }} 72 + <a 73 + href="/{{ .RepoInfo.FullName }}/settings" 74 + class="relative -mr-px group no-underline" 75 + hx-boost="true" 76 + > 77 + <div 78 + class="px-6 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50 79 + {{ if .Active }} 80 + border-gray-500 border border-b-0 bg-white 81 + {{ else }} 82 + border-gray-300 border translate-y-[2px] 83 + {{ end }} 84 + " 85 + > 86 + settings 87 + </div> 88 + </a> 89 + {{ end }} 90 + </div> 91 + </div> 92 + </nav> 93 + <section 94 + class="bg-white p-6 min-h-[200px] border border-gray-300 relative z-20 w-full max-w-3xl mx-auto" 95 + > 96 + {{ block "repoContent" . }}{{ end }} 97 + </section> 98 + </section> 27 99 {{ end }} 28 100 29 101 {{ define "layouts/repobase" }} 30 - {{ template "layouts/base" . }} 102 + {{ template "layouts/base" . }} 31 103 {{ end }}
+7 -7
appview/pages/templates/layouts/topbar.html
··· 1 1 {{ define "layouts/topbar" }} 2 2 {{ with .LoggedInUser }} 3 - <nav class="flex items-center space-x-4 py-10"> 3 + <nav class="flex items-center justify-center space-x-4 py-10"> 4 4 <a 5 5 href="/" 6 6 hx-boost="true" 7 - class="text-gray-600 hover:text-gray-900" 7 + class="text-gray-600 hover:text-gray-900 no-underline" 8 8 >timeline</a 9 9 > 10 10 <a 11 11 href="/settings" 12 12 hx-boost="true" 13 - class="text-gray-600 hover:text-gray-900" 13 + class="text-gray-600 hover:text-gray-900 no-underline" 14 14 >settings</a 15 15 > 16 16 <a 17 17 href="/knots" 18 18 hx-boost="true" 19 - class="text-gray-600 hover:text-gray-900" 19 + class="text-gray-600 hover:text-gray-900 no-underline" 20 20 >knots</a 21 21 > 22 22 <a 23 23 href="/repo/new" 24 24 hx-boost="true" 25 - class="text-gray-600 hover:text-gray-900" 25 + class="text-gray-600 hover:text-gray-900 no-underline" 26 26 >add repos</a 27 27 > 28 28 {{ if .Handle }} 29 29 <a 30 30 href="/@{{ .Handle }}" 31 31 hx-boost="true" 32 - class="text-gray-600 hover:text-gray-900" 32 + class="text-gray-600 hover:text-gray-900 no-underline" 33 33 >my profile</a 34 34 > 35 35 {{ else }} 36 36 <a 37 37 href="/{{ .Did }}" 38 38 hx-boost="true" 39 - class="text-gray-600 hover:text-gray-900" 39 + class="text-gray-600 hover:text-gray-900 no-underline" 40 40 >my profile</a 41 41 > 42 42 {{ end }}
+23 -28
appview/pages/templates/user/profile.html
··· 1 1 {{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }} 2 2 3 3 {{ define "content" }} 4 - <h1> 5 - <h1>{{ didOrHandle .UserDid .UserHandle }}</h1> 6 - </h1> 7 - <section> 8 - <h2 class="text-xl font-semibold mb-4">repos</h2> 9 - <ul id="my-knots" class="space-y-4"> 10 - {{ range .Repos }} 11 - <li class="p-4 bg-gray-50 rounded-lg"> 12 - <div class="font-mono"> 13 - <div class="mb-2"> 14 - name: 15 - <a 16 - href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}" 17 - class="text-blue-600 hover:text-blue-800" 18 - >{{ .Name }}</a 19 - > 20 - </div> 21 - <div> 22 - knot: 23 - {{ .Knot }} 24 - </div> 25 - </div> 26 - </li> 27 - {{ else }} 28 - <p class="text-gray-600">does not have any repos yet</p> 29 - {{ end }} 30 - </ul> 31 - </section> 4 + <h1>{{ didOrHandle .UserDid .UserHandle }}</h1> 5 + <div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4"> 6 + {{ range .Repos }} 7 + <div 8 + id="repo-card" 9 + class="border border-black p-4 shadow-sm bg-white" 10 + > 11 + <div id="repo-card-name" class="font-medium"> 12 + <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}" 13 + >{{ .Name }}</a 14 + > 15 + </div> 16 + <div 17 + id="repo-knot-name" 18 + class="text-gray-600 text-sm font-mono" 19 + > 20 + {{ .Knot }} 21 + </div> 22 + </div> 23 + {{ else }} 24 + <p>This user does not have any repos yet.</p> 25 + {{ end }} 26 + </div> 32 27 {{ end }}