more htmxing
Anirudh Oppiliappan 2 weeks ago 8 files (+141, -102)
Changed files
MODIFIED
appview/pages/templates/knot.html
MODIFIED
appview/pages/templates/knot.html
@@ -14,7 +14,7 @@ {{ if .Registration.Registered }}<code>registered on: {{.Registration.Registered}}</code>{{ else }}<code>pending registration</code>- <button hx-post="/knots/{{.Domain}}/init">initialize</button>+ <button class="btn my-2" hx-post="/knots/{{.Domain}}/init" hx-swap="none">initialize</button>{{ end }}</p>@@ -34,7 +34,7 @@ <h3>add member</h3><form hx-put="/knots/{{.Registration.Domain}}/member"><label for="member">did or handle:</label><input type="text" id="member" name="member" required>- <button type="text">add member</button>+ <button class="btn my-2" type="text">add member</button></form>{{ end }}{{end}}
MODIFIED
appview/pages/templates/knots.html
MODIFIED
appview/pages/templates/knots.html
@@ -1,45 +1,56 @@-{{define "title"}}knots{{end}}+{{ define "title" }}knots{{ end }}-{{define "content"}}+{{ define "content" }}<h1>knots</h1><h2>register</h2>put in a domain, and use the key while booting up your knotserver<form hx-post="/knots/key"><label for="domain">domain:</label>- <input type="text" id="domain" name="domain" required>- <button type="text">generate key</button>+ <input type="text" id="domain" name="domain" required />+ <button class="btn my-2" type="text">generate key</button></form><h3>my knots</h3><ul id="my-knots">- {{range .Registrations}}- {{ if .Registered }}- <li>- <code>domain: <a href="/knots/{{.Domain}}">{{.Domain}}</a></code><br>- <code>opened by: {{.ByDid}}</code><br>- <code>on: {{.Created}}</code><br>- <code>registered on: {{.Registered}}</code>- </li>- {{ end }}- {{else}}+ {{ range .Registrations }}+ {{ if .Registered }}+ <li>+ <code+ >domain:+ <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code+ ><br />+ <code>opened by: {{ .ByDid }}</code><br />+ <code>on: {{ .Created }}</code><br />+ <code>registered on: {{ .Registered }}</code>+ </li>+ {{ end }}+ {{ else }}<p>you don't have any knots yet</p>- {{end}}+ {{ end }}</ul><h3>pending registrations</h3><ul id="pending-registrations">- {{range .Registrations}}- {{ if not .Registered }}- <li>- <code>domain: <a href="/knots/{{.Domain}}">{{.Domain}}</a></code><br>- <code>opened by: {{.ByDid}}</code><br>- <code>on: {{.Created}}</code><br>- <code>pending registration</code>- <button hx-post="/knots/{{.Domain}}/init">initialize</button>- </li>- {{ end }}- {{else}}+ {{ range .Registrations }}+ {{ if not .Registered }}+ <li>+ <code+ >domain:+ <a href="/knots/{{ .Domain }}">{{ .Domain }}</a></code+ ><br />+ <code>opened by: {{ .ByDid }}</code><br />+ <code>on: {{ .Created }}</code><br />+ <code>pending registration</code>+ <button+ class="btn my-2"+ hx-post="/knots/{{ .Domain }}/init"+ >+ initialize+ </button>+ </li>+ {{ end }}+ {{ else }}<p>no registrations yet</p>- {{end}}+ {{ end }}</ul>-{{end}}+{{ end }}
@@ -1,19 +1,48 @@{{ define "layouts/topbar" }}--{{ with .LoggedInUser }}-<nav>- <a href="/">timeline</a> ·- <a href="/settings">settings</a> ·- <a href="/knots">knots</a> ·- <a href="/repo/new">add repos</a> ·- {{ if .Handle }}- <a href="/@{{ .Handle }}">my profile</a>+ {{ with .LoggedInUser }}+ <nav class="flex items-center space-x-4">+ <a+ href="/"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >timeline</a+ >+ <a+ href="/settings"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >settings</a+ >+ <a+ href="/knots"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >knots</a+ >+ <a+ href="/repo/new"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >add repos</a+ >+ {{ if .Handle }}+ <a+ href="/@{{ .Handle }}"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >my profile</a+ >+ {{ else }}+ <a+ href="/{{ .Did }}"+ hx-boost="true"+ class="text-gray-600 hover:text-gray-900"+ >my profile</a+ >+ {{ end }}+ </nav>{{ else }}- <a href="/{{ .Did }}">my profile</a>+ <a href="/login" class="btn my-2">login</a>{{ end }}-</nav>-{{ else }}-<button onclick="window.location.href='/login'">login</button>-{{ end }}{{ end }}
@@ -1,15 +1,14 @@-{{define "title"}}new repo{{end}}+{{ define "title" }}new repo{{ end }}-{{define "content"}}-<h1>new repo</h1>-<form method="POST" action="/repo/new">- <label for="name">repo name</label>- <input type="text" id="name" name="name" required>+{{ define "content" }}+ <h1>new repo</h1>+ <form method="POST" action="/repo/new">+ <label for="name">repo name</label>+ <input type="text" id="name" name="name" required />- <label for="domain">domain</label>- <input type="domain" id="domain" name="domain" required>+ <label for="domain">domain</label>+ <input type="domain" id="domain" name="domain" required />- <button type="submit">create repo</button>-</form>-{{end}}-+ <button class="btn my-2" type="submit">create repo</button>+ </form>+{{ end }}
@@ -2,22 +2,22 @@ {{ define "repoContent" }}<h3>settings</h3><em>collaborators</em><ol>- {{ range .Collaborators }}- <li>- {{ index . 0 }} - {{ index . 3 }}- </li>- {{ else }}- <p>no members</p>- {{ end }}+ {{ range .Collaborators }}+ <li>+ {{ index . 0 }} -+ {{ index . 3 }}+ </li>+ {{ else }}+ <p>no members</p>+ {{ end }}</ol>{{ if .IsCollaboratorInviteAllowed }}- <h3>add collaborator</h3>- <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">- <label for="collaborator">did or handle:</label>- <input type="text" id="collaborator" name="collaborator" required>- <button type="text">add collaborator</button>- </form>+ <h3>add collaborator</h3>+ <form hx-put="/{{ $.RepoInfo.FullName }}/settings/collaborator">+ <label for="collaborator">did or handle:</label>+ <input type="text" id="collaborator" name="collaborator" required />+ <button class="btn my-2" type="text">add collaborator</button>+ </form>{{ end }}-{{end}}-+{{ end }}
@@ -1,33 +1,38 @@-{{define "title"}}settings{{end}}+{{ define "title" }}settings{{ end }}-{{define "content"}}+{{ define "content" }}<h1>settings</h1><h2>profile</h2>- <p><strong>handle:</strong> {{.LoggedInUser.Handle}}</p>- <p><strong>did:</strong> {{.LoggedInUser.Did}}</p>- <p><strong>pds:</strong> {{.LoggedInUser.Pds}}</p>+ <p><strong>handle:</strong> {{ .LoggedInUser.Handle }}</p>+ <p><strong>did:</strong> {{ .LoggedInUser.Did }}</p>+ <p><strong>pds:</strong> {{ .LoggedInUser.Pds }}</p><h2>ssh keys</h2><form hx-put="/settings/keys"><label for="name">key name:</label>- <input type="text" id="name" name="name" required>+ <input type="text" id="name" name="name" required /><label for="key">pub key:</label>- <textarea id="key" name="key" placeholder="ssh-rsa AAAAAA..." required></textarea>+ <textarea+ id="key"+ name="key"+ placeholder="ssh-rsa AAAAAA..."+ required+ ></textarea>- <button type="submit">add key</button>+ <button class="btn my-2" type="submit">add key</button></form><h3>existing keys</h3><ul id="key-list">- {{range .PubKeys}}+ {{ range .PubKeys }}<li>- <strong>{{.Name}}</strong><br>- <code>{{.Key}}</code>+ <strong>{{ .Name }}</strong><br />+ <code>{{ .Key }}</code></li>- {{else}}+ {{ else }}<p>no ssh keys added yet</p>- {{end}}+ {{ end }}</ul>-{{end}}+{{ end }}
@@ -26,12 +26,7 @@ name="app_password"required/>- <button- class="bg-blue-500 text-white font-bold py-2 px-4 rounded"- type="submit"- >- login- </button>+ <button class="btn my-2" type="submit">login</button></form></main></body>
MODIFIED
input.css
MODIFIED
input.css
@@ -27,17 +27,17 @@@layer components {.btn {@apply relative z-10 inline-flex min-h-[36px] cursor-pointer items-center- justify-center border-0 bg-transparent px-3 pb-[0.3rem] text-base- text-gray-800 before:absolute before:inset-0 before:-z-10- before:block before:rounded before:border before:border-cyan-200- before:bg-white before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#ebebf6]- before:content-[''] hover:before:border-cyan-600- hover:before:bg-cyan-600- hover:before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#c2b3ff]- focus:outline-none focus-visible:before:outline- focus-visible:before:outline-4 focus-visible:before:outline-[#fc440f]- active:border-t-4 active:border-transparent active:py-1- active:before:shadow-none;+ justify-center border-0 bg-transparent px-3 pb-[0.3rem] text-base+ text-gray-900 before:absolute before:inset-0 before:-z-10+ before:block before:rounded-sm before:border before:border-blue-200+ before:bg-white before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]+ before:content-[''] hover:before:border-blue-300+ hover:before:bg-blue-50+ hover:before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]+ focus:outline-none focus-visible:before:outline+ focus-visible:before:outline-4 focus-visible:before:outline-blue-500+ active:border-t-4 active:border-transparent active:py-1+ active:before:shadow-none;}}