alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}New repository · Tangled{{ end }}
2
3{{ define "content" }}
4<div class="grid grid-cols-12">
5 <div class="col-span-full md:col-start-3 md:col-span-8 px-6 py-2 mb-4">
6 <h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
7 <p class="text-gray-600 dark:text-gray-400 mb-1">
8 Repositories contain a project's files and version history. All
9 repositories are publicly accessible.
10 </p>
11 </div>
12 {{ template "newRepoPanel" . }}
13</div>
14{{ end }}
15
16{{ define "newRepoPanel" }}
17 <div class="col-span-full md:col-start-3 md:col-span-8 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
18 {{ template "newRepoForm" . }}
19 </div>
20{{ end }}
21
22{{ define "newRepoForm" }}
23 <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
24 {{ template "step-1" . }}
25 {{ template "step-2" . }}
26 {{ template "step-3" . }}
27
28 <div class="mt-8 flex justify-end">
29 <button type="submit" class="btn-create flex items-center gap-2">
30 {{ i "book-plus" "w-4 h-4" }}
31 Create repository
32 <span id="spinner" class="group">
33 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
34 </span>
35 </button>
36 </div>
37 <div id="repo" class="error mt-2"></div>
38
39 </form>
40{{ end }}
41
42{{ define "step-1" }}
43 <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
44 <div class="absolute -left-3 -top-0">
45 {{ template "numberCircle" 1 }}
46 </div>
47
48 <!-- Content column -->
49 <div class="flex-1 pb-12">
50 <h2 class="text-lg font-medium dark:text-white">General</h2>
51 <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Basic repository information.</div>
52
53 <div class="space-y-2">
54 {{ template "name" . }}
55 {{ template "description" . }}
56 </div>
57 </div>
58 </div>
59{{ end }}
60
61{{ define "step-2" }}
62 <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
63 <div class="absolute -left-3 -top-0">
64 {{ template "numberCircle" 2 }}
65 </div>
66
67 <div class="flex-1 pb-12">
68 <h2 class="text-lg font-medium dark:text-white">Configuration</h2>
69 <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Repository settings and hosting.</div>
70
71 <div class="space-y-2">
72 {{ template "defaultBranch" . }}
73 {{ template "knot" . }}
74 </div>
75 </div>
76 </div>
77{{ end }}
78
79{{ define "step-3" }}
80 <details class="group/advanced">
81 <summary class="flex gap-4 items-center relative border-l border-gray-200 dark:border-gray-700 pl-6 cursor-pointer list-none">
82 <div class="absolute -left-3 top-1/2 -translate-y-1/2">
83 <div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-full flex items-center justify-center">
84 {{ i "plus" "w-4 h-4" }}
85 </div>
86 </div>
87
88 <div class="flex-1">
89 <h2 class="text-lg font-medium dark:text-white">Advanced</h2>
90 </div>
91 </summary>
92
93 <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
94 <div class="flex-1 pt-4">
95 <div class="space-y-2">
96 {{ template "spindle" . }}
97 </div>
98 </div>
99 </div>
100 </details>
101{{ end }}
102
103{{ define "name" }}
104 <!-- Repository Name with Owner -->
105 <div>
106 <label class="block text-sm font-bold dark:text-white mb-1">
107 Repository name
108 </label>
109 <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
110 <div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
111 {{ template "user/fragments/picHandle" .LoggedInUser.Did }}
112 </div>
113 <input
114 type="text"
115 id="name"
116 name="name"
117 required
118 class="flex-1 md:rounded-r md:rounded-l-none py-2"
119 placeholder="repository-name"
120 />
121 </div>
122 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
123 Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
124 </p>
125 </div>
126{{ end }}
127
128{{ define "description" }}
129 <!-- Description -->
130 <div>
131 <label for="description" class="block text-sm font-bold dark:text-white mb-1">
132 Description
133 </label>
134 <input
135 type="text"
136 id="description"
137 name="description"
138 maxlength="140"
139 class="w-full py-2"
140 placeholder="A brief description of your project..."
141 />
142 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
143 Optional. A short description to help others understand what your project does (max 140 characters).
144 </p>
145 </div>
146{{ end }}
147
148{{ define "defaultBranch" }}
149 <!-- Default Branch -->
150 <div>
151 <label for="branch" class="block text-sm font-bold dark:text-white mb-1">
152 Default branch
153 </label>
154 <input
155 type="text"
156 id="branch"
157 name="branch"
158 value="main"
159 required
160 class="w-full py-2"
161 />
162 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
163 The primary branch where development happens. Common choices are "main" or "master".
164 </p>
165 </div>
166{{ end }}
167
168{{ define "knot" }}
169 <!-- Knot Selection -->
170 <div>
171 <label class="block text-sm font-bold dark:text-white mb-1">
172 Select a knot
173 </label>
174 <div class="w-full space-y-2">
175 {{ range .Knots }}
176 <div class="flex items-center">
177 <input
178 type="radio"
179 name="domain"
180 value="{{ . }}"
181 class="mr-2"
182 id="domain-{{ . }}"
183 required
184 {{if eq (len $.Knots) 1}}checked{{end}}
185 />
186 <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
187 </div>
188 {{ else }}
189 <p class="dark:text-white">No knots available.</p>
190 {{ end }}
191 </div>
192 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
193 A knot hosts repository data and handles Git operations.
194 You can also <a href="/settings/knots" class="underline">register your own knot</a>.
195 </p>
196 </div>
197{{ end }}
198
199{{ define "spindle" }}
200 <!-- Spindle Selection -->
201 <div>
202 <label class="block text-sm font-bold dark:text-white mb-1">
203 Select a spindle
204 </label>
205 <div class="w-full space-y-2">
206 <div class="flex items-center">
207 <input
208 type="radio"
209 name="spindle"
210 value=""
211 class="mr-2"
212 id="spindle-none"
213 checked
214 />
215 <label for="spindle-none" class="dark:text-white">No spindle</label>
216 </div>
217 {{ range .Spindles }}
218 <div class="flex items-center">
219 <input
220 type="radio"
221 name="spindle"
222 value="{{ . }}"
223 class="mr-2"
224 id="spindle-{{ . }}"
225 />
226 <label for="spindle-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
227 </div>
228 {{ end }}
229 </div>
230 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
231 A spindle runs your CI workflows.
232 </p>
233 </div>
234{{ end }}
235
236{{ define "numberCircle" }}
237 <div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium">
238 {{.}}
239 </div>
240{{ end }}