dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "title" }}new repo{{ 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
27 <div class="mt-8 flex justify-end">
28 <button type="submit" class="btn-create flex items-center gap-2">
29 {{ i "book-plus" "w-4 h-4" }}
30 create repo
31 <span id="spinner" class="group">
32 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
33 </span>
34 </button>
35 </div>
36 <div id="repo" class="error mt-2"></div>
37
38 </form>
39{{ end }}
40
41{{ define "step-1" }}
42 <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
43 <div class="absolute -left-3 -top-0">
44 {{ template "numberCircle" 1 }}
45 </div>
46
47 <!-- Content column -->
48 <div class="flex-1 pb-12">
49 <h2 class="text-lg font-semibold dark:text-white">General</h2>
50 <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Basic repository information.</div>
51
52 <div class="space-y-2">
53 {{ template "name" . }}
54 {{ template "description" . }}
55 </div>
56 </div>
57 </div>
58{{ end }}
59
60{{ define "step-2" }}
61 <div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
62 <div class="absolute -left-3 -top-0">
63 {{ template "numberCircle" 2 }}
64 </div>
65
66 <div class="flex-1">
67 <h2 class="text-lg font-semibold dark:text-white">Configuration</h2>
68 <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Repository settings and hosting.</div>
69
70 <div class="space-y-2">
71 {{ template "defaultBranch" . }}
72 {{ template "vcs" . }}
73 {{ template "knot" . }}
74 </div>
75 </div>
76 </div>
77{{ end }}
78
79{{ define "name" }}
80 <!-- Repository Name with Owner -->
81 <div>
82 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
83 Repository name
84 </label>
85 <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
86 <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">
87 {{ template "user/fragments/picHandle" .LoggedInUser.Did }}
88 </div>
89 <input
90 type="text"
91 id="name"
92 name="name"
93 required
94 class="flex-1 dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
95 placeholder="repository-name"
96 />
97 </div>
98 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
99 Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
100 </p>
101 </div>
102{{ end }}
103
104{{ define "description" }}
105 <!-- Description -->
106 <div>
107 <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
108 Description
109 </label>
110 <input
111 type="text"
112 id="description"
113 name="description"
114 maxlength="140"
115 class="w-full w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
116 placeholder="A brief description of your project..."
117 />
118 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
119 Optional. A short description to help others understand what your project does (max 140 characters).
120 </p>
121 </div>
122{{ end }}
123
124{{ define "defaultBranch" }}
125 <!-- Default Branch -->
126 <div>
127 <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
128 Default branch
129 </label>
130 <input
131 type="text"
132 id="branch"
133 name="branch"
134 value="main"
135 required
136 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
137 />
138 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
139 The primary branch where development happens. Common choices are "main" or "master".
140 </p>
141 </div>
142{{ end }}
143
144{{ define "vcs" }}
145 <!-- Version Control -->
146 <div>
147 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
148 Repository type
149 </label>
150 <div class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
151 <div class="flex items-center">
152 <input
153 type="radio"
154 name="vcs"
155 value="git"
156 class="mr-2"
157 id="vcs-git"
158 checked
159 />
160 <label for="vcs-git" class="dark:text-white">git</label>
161 </div>
162 <div class="flex items-center">
163 <input
164 type="radio"
165 name="vcs"
166 value="pijul"
167 class="mr-2"
168 id="vcs-pijul"
169 />
170 <label for="vcs-pijul" class="dark:text-white">pijul</label>
171 </div>
172 </div>
173 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
174 Choose the version control system for this repository.
175 </p>
176 </div>
177{{ end }}
178
179{{ define "knot" }}
180 <!-- Knot Selection -->
181 <div>
182 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
183 Select a knot
184 </label>
185 <div class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
186 {{ range .Knots }}
187 <div class="flex items-center">
188 <input
189 type="radio"
190 name="domain"
191 value="{{ . }}"
192 class="mr-2"
193 id="domain-{{ . }}"
194 required
195 {{if eq (len $.Knots) 1}}checked{{end}}
196 />
197 <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
198 </div>
199 {{ else }}
200 <p class="dark:text-white">no knots available.</p>
201 {{ end }}
202 </div>
203 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
204 A knot hosts repository data and handles version control operations.
205 You can also <a href="/settings/knots" class="underline">register your own knot</a>.
206 </p>
207 </div>
208{{ end }}
209
210{{ define "numberCircle" }}
211 <div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium mt-1">
212 {{.}}
213 </div>
214{{ end }}