lewis.moe
Monorepo for Tangled
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 "knot" . }}
73 </div>
74 </div>
75 </div>
76{{ end }}
77
78{{ define "name" }}
79 <!-- Repository Name with Owner -->
80 <div>
81 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
82 Repository name
83 </label>
84 <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
85 <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">
86 {{ template "user/fragments/picHandle" .LoggedInUser.Did }}
87 </div>
88 <input
89 type="text"
90 id="name"
91 name="name"
92 required
93 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"
94 placeholder="repository-name"
95 />
96 </div>
97 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
98 Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
99 </p>
100 </div>
101{{ end }}
102
103{{ define "description" }}
104 <!-- Description -->
105 <div>
106 <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
107 Description
108 </label>
109 <input
110 type="text"
111 id="description"
112 name="description"
113 maxlength="140"
114 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"
115 placeholder="A brief description of your project..."
116 />
117 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
118 Optional. A short description to help others understand what your project does (max 140 characters).
119 </p>
120 </div>
121{{ end }}
122
123{{ define "defaultBranch" }}
124 <!-- Default Branch -->
125 <div>
126 <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
127 Default branch
128 </label>
129 <input
130 type="text"
131 id="branch"
132 name="branch"
133 value="main"
134 required
135 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
136 />
137 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
138 The primary branch where development happens. Common choices are "main" or "master".
139 </p>
140 </div>
141{{ end }}
142
143{{ define "knot" }}
144 <!-- Knot Selection -->
145 <div>
146 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
147 Select a knot
148 </label>
149 <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">
150 {{ range .Knots }}
151 <div class="flex items-center">
152 <input
153 type="radio"
154 name="domain"
155 value="{{ . }}"
156 class="mr-2"
157 id="domain-{{ . }}"
158 required
159 {{if eq (len $.Knots) 1}}checked{{end}}
160 />
161 <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
162 </div>
163 {{ else }}
164 <p class="dark:text-white">no knots available.</p>
165 {{ end }}
166 </div>
167 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
168 A knot hosts repository data and handles Git operations.
169 You can also <a href="/settings/knots" class="underline">register your own knot</a>.
170 </p>
171 </div>
172{{ end }}
173
174{{ define "numberCircle" }}
175 <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">
176 {{.}}
177 </div>
178{{ end }}