kot.pink
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 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"
114 placeholder="A brief description of your project..."
115 />
116 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
117 Optional. A short description to help others understand what your project does.
118 </p>
119 </div>
120{{ end }}
121
122{{ define "defaultBranch" }}
123 <!-- Default Branch -->
124 <div>
125 <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
126 Default branch
127 </label>
128 <input
129 type="text"
130 id="branch"
131 name="branch"
132 value="main"
133 required
134 class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
135 />
136 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
137 The primary branch where development happens. Common choices are "main" or "master".
138 </p>
139 </div>
140{{ end }}
141
142{{ define "knot" }}
143 <!-- Knot Selection -->
144 <div>
145 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
146 Select a knot
147 </label>
148 <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">
149 {{ range .Knots }}
150 <div class="flex items-center">
151 <input
152 type="radio"
153 name="domain"
154 value="{{ . }}"
155 class="mr-2"
156 id="domain-{{ . }}"
157 required
158 />
159 <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
160 </div>
161 {{ else }}
162 <p class="dark:text-white">no knots available.</p>
163 {{ end }}
164 </div>
165 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
166 A knot hosts repository data and handles Git operations.
167 You can also <a href="/knots" class="underline">register your own knot</a>.
168 </p>
169 </div>
170{{ end }}
171
172{{ define "numberCircle" }}
173 <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">
174 {{.}}
175 </div>
176{{ end }}