this repo has no description
1{{ define "title" }}knots{{ end }}
2
3{{ define "content" }}
4<div class="px-6 py-4 flex items-center justify-between gap-4 align-bottom">
5 <h1 class="text-xl font-bold dark:text-white">Knots</h1>
6 <span class="flex items-center gap-1">
7 {{ i "book" "w-3 h-3" }}
8 <a href="https://tangled.org/@tangled.org/core/blob/master/docs/knot-hosting.md">docs</a>
9 </span>
10</div>
11
12<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
13 <div class="flex flex-col gap-6">
14 {{ block "about" . }} {{ end }}
15 {{ block "list" . }} {{ end }}
16 {{ block "register" . }} {{ end }}
17 </div>
18</section>
19{{ end }}
20
21{{ define "about" }}
22<section class="rounded">
23 <p class="text-gray-500 dark:text-gray-400">
24 Knots are lightweight headless servers that enable users to host Git repositories with ease.
25 When creating a repository, you can choose a knot to store it on.
26 </p>
27
28
29</section>
30{{ end }}
31
32{{ define "list" }}
33 <section class="rounded w-full flex flex-col gap-2">
34 <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your knots</h2>
35 <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
36 {{ range $registration := .Registrations }}
37 {{ template "knots/fragments/knotListing" . }}
38 {{ else }}
39 <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
40 no knots registered yet
41 </div>
42 {{ end }}
43 </div>
44 <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
45 </section>
46{{ end }}
47
48{{ define "register" }}
49 <section class="rounded w-full lg:w-fit flex flex-col gap-2">
50 <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a knot</h2>
51 <p class="mb-2 dark:text-gray-300">Enter the hostname of your knot to get started.</p>
52 <form
53 hx-post="/knots/register"
54 class="max-w-2xl mb-2 space-y-4"
55 hx-indicator="#register-button"
56 hx-swap="none"
57 >
58 <div class="flex gap-2">
59 <input
60 type="text"
61 id="domain"
62 name="domain"
63 placeholder="knot.example.com"
64 required
65 class="flex-1 w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 px-3 py-2 border rounded"
66 >
67 <button
68 type="submit"
69 id="register-button"
70 class="btn rounded flex items-center py-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 group"
71 >
72 <span class="inline-flex items-center gap-2">
73 {{ i "plus" "w-4 h-4" }}
74 register
75 </span>
76 <span class="pl-2 hidden group-[.htmx-request]:inline">
77 {{ i "loader-circle" "w-4 h-4 animate-spin" }}
78 </span>
79 </button>
80 </div>
81
82 <div id="register-error" class="error dark:text-red-400"></div>
83 </form>
84
85 </section>
86{{ end }}