foxwitch.net
1{{ define "title" }}spindles{{ end }}
2
3{{ define "content" }}
4<div class="px-6 py-4">
5 <h1 class="text-xl font-bold dark:text-white">Spindles</h1>
6</div>
7
8<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
9 <div class="flex flex-col gap-6">
10 {{ block "about" . }} {{ end }}
11 {{ block "list" . }} {{ end }}
12 {{ block "register" . }} {{ end }}
13 </div>
14</section>
15{{ end }}
16
17{{ define "about" }}
18 <section class="rounded flex flex-col gap-2">
19 <p class="dark:text-gray-300">
20 Spindles are small CI runners.
21 <a href="https://tangled.sh/@tangled.sh/core/blob/master/docs/spindle/hosting.md">
22 Checkout the documentation if you're interested in self-hosting.
23 </a>
24 </p>
25 </section>
26{{ end }}
27
28{{ define "list" }}
29 <section class="rounded w-full flex flex-col gap-2">
30 <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your spindles</h2>
31 <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
32 {{ range $spindle := .Spindles }}
33 {{ template "spindles/fragments/spindleListing" . }}
34 {{ else }}
35 <div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
36 no spindles registered yet
37 </div>
38 {{ end }}
39 </div>
40 <div id="operation-error" class="text-red-500 dark:text-red-400"></div>
41 </section>
42{{ end }}
43
44{{ define "register" }}
45 <section class="rounded w-full lg:w-fit flex flex-col gap-2">
46 <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a spindle</h2>
47 <p class="mb-2 dark:text-gray-300">Enter the hostname of your spindle to get started.</p>
48 <form
49 hx-post="/spindles/register"
50 class="max-w-2xl mb-2 space-y-4"
51 hx-indicator="#register-button"
52 hx-swap="none"
53 >
54 <div class="flex gap-2">
55 <input
56 type="text"
57 id="instance"
58 name="instance"
59 placeholder="spindle.example.com"
60 required
61 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"
62 >
63 <button
64 type="submit"
65 id="register-button"
66 class="btn rounded flex items-center py-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 group"
67 >
68 <span class="inline-flex items-center gap-2">
69 {{ i "plus" "w-4 h-4" }}
70 register
71 </span>
72 <span class="pl-2 hidden group-[.htmx-request]:inline">
73 {{ i "loader-circle" "w-4 h-4 animate-spin" }}
74 </span>
75 </button>
76 </div>
77
78 <div id="register-error" class="dark:text-red-400"></div>
79 </form>
80
81 </section>
82{{ end }}