htmx page nav
Anirudh Oppiliappan 2 weeks ago 4 files (+125, -56)
MODIFIED
appview/pages/pages.go
MODIFIED
appview/pages/pages.go
@@ -181,10 +181,12 @@type RepoIndexParams struct {LoggedInUser *auth.UserRepoInfo RepoInfo+ Active stringtypes.RepoIndexResponse}func (p *Pages) RepoIndexPage(w io.Writer, params RepoIndexParams) error {+ params.Active = "index"return p.executeRepo("repo/index", w, params)}
@@ -1,31 +1,103 @@-{{define "title"}} {{ .RepoInfo.FullName }} {{ end}}+{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}{{ define "content" }}- <div id="repo-header">- <h1>{{ .RepoInfo.FullName }}</h1>- {{ if .RepoInfo.Description }}- <h3 class="desc">{{ .RepoInfo.Description }}</h3>- {{ else }}- <em>this repo has no description</em>- {{ end }}- </div>+ <section id="repo-header">+ <h1>{{ .RepoInfo.FullName }}</h1>+ {{ if .RepoInfo.Description }}+ <h3 class="desc">{{ .RepoInfo.Description }}</h3>+ {{ else }}+ <em>this repo has no description</em>+ {{ end }}+ </section>+ <section id="repo-links" class="min-h-screen flex flex-col">+ <nav class="w-full max-w-3xl mx-auto">+ <div class="relative">+ <div class="flex relative">+ <a+ href="/{{ .RepoInfo.FullName }}"+ class="relative -mr-px group no-underline"+ hx-boost="true"+ >+ <div+ class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-60 group-hover:bg-gray-50+ {{ if eq .Active "index" }}+ border-b-white border-b-0 border-gray-300+ border-l border-r border-t+ {{ else }}+ border-gray-300 border translate-y-[2px]+ {{ end }}"+ >+ overview+ </div>+ </a>- <div id="repo-links">- <nav>- <a href="/{{ .RepoInfo.FullName }}">summary</a> ·- <a href="/{{ .RepoInfo.FullName }}/branches">branches</a> ·- <a href="/{{ .RepoInfo.FullName }}/tags">tags</a>- {{ if .RepoInfo.SettingsAllowed }}- · <a href="/{{ .RepoInfo.FullName }}/settings">settings</a>- {{ end }}- </nav>- <div>+ <a+ href="/{{ .RepoInfo.FullName }}/issues"+ class="relative -mr-px group no-underline"+ hx-boost="true"+ >+ <div+ class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-50 group-hover:bg-gray-50+ {{ if eq .Active "issues" }}+ border-gray-500 border border-b-0 bg-white+ {{ else }}+ border-gray-300 border translate-y-[2px]+ {{ end }}+ "+ >+ issues+ </div>+ </a>- {{ block "repoContent" . }} {{ end }}+ <a+ href="#"+ class="relative -mr-px group no-underline"+ hx-boost="true"+ >+ <div+ class="px-4 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50+ {{ if eq .Active "pulls" }}+ border-gray-500 border border-b-0 bg-white+ {{ else }}+ border-gray-300 border translate-y-[2px]+ {{ end }}+ "+ >+ pull requests+ </div>+ </a>+ {{ if .RepoInfo.SettingsAllowed }}+ <a+ href="/{{ .RepoInfo.FullName }}/settings"+ class="relative -mr-px group no-underline"+ hx-boost="true"+ >+ <div+ class="px-6 py-2 bg-white text-black min-w-[80px] text-center text-sm relative z-40 group-hover:bg-gray-50+ {{ if .Active }}+ border-gray-500 border border-b-0 bg-white+ {{ else }}+ border-gray-300 border translate-y-[2px]+ {{ end }}+ "+ >+ settings+ </div>+ </a>+ {{ end }}+ </div>+ </div>+ </nav>+ <section+ class="bg-white p-6 min-h-[200px] border border-gray-300 relative z-20 w-full max-w-3xl mx-auto"+ >+ {{ block "repoContent" . }}{{ end }}+ </section>+ </section>{{ end }}{{ define "layouts/repobase" }}- {{ template "layouts/base" . }}+ {{ template "layouts/base" . }}{{ end }}
@@ -1,42 +1,42 @@{{ define "layouts/topbar" }}{{ with .LoggedInUser }}- <nav class="flex items-center space-x-4 py-10">+ <nav class="flex items-center justify-center space-x-4 py-10"><ahref="/"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">timeline</a><ahref="/settings"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">settings</a><ahref="/knots"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">knots</a><ahref="/repo/new"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">add repos</a>{{ if .Handle }}<ahref="/@{{ .Handle }}"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">my profile</a>{{ else }}<ahref="/{{ .Did }}"hx-boost="true"- class="text-gray-600 hover:text-gray-900"+ class="text-gray-600 hover:text-gray-900 no-underline">my profile</a>{{ end }}
@@ -1,32 +1,27 @@{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}{{ define "content" }}- <h1>- <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>- </h1>- <section>- <h2 class="text-xl font-semibold mb-4">repos</h2>- <ul id="my-knots" class="space-y-4">- {{ range .Repos }}- <li class="p-4 bg-gray-50 rounded-lg">- <div class="font-mono">- <div class="mb-2">- name:- <a- href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"- class="text-blue-600 hover:text-blue-800"- >{{ .Name }}</a- >- </div>- <div>- knot:- {{ .Knot }}- </div>- </div>- </li>- {{ else }}- <p class="text-gray-600">does not have any repos yet</p>- {{ end }}- </ul>- </section>+ <h1>{{ didOrHandle .UserDid .UserHandle }}</h1>+ <div id="my-repos" class="grid grid-cols-1 md:grid-cols-2 gap-4">+ {{ range .Repos }}+ <div+ id="repo-card"+ class="border border-black p-4 shadow-sm bg-white"+ >+ <div id="repo-card-name" class="font-medium">+ <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"+ >{{ .Name }}</a+ >+ </div>+ <div+ id="repo-knot-name"+ class="text-gray-600 text-sm font-mono"+ >+ {{ .Knot }}+ </div>+ </div>+ {{ else }}+ <p>This user does not have any repos yet.</p>+ {{ end }}+ </div>{{ end }}