this repo has no description
tangled.org
1{{ define "title" }}new repo{{ end }}
2
3{{ define "content" }}
4<div class="px-6 py-2 mb-4">
5 <h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
6 <p class="text-gray-600 dark:text-gray-400 mb-1">
7 Repositories contain a project's files and version history.
8 </p>
9</div>
10
11<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
12 <form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
13
14 <div class="p-6">
15 <!-- Step 1: General -->
16 <div class="flex gap-4">
17 <div class="flex flex-col items-center w-10 flex-shrink-0">
18 <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
19 1
20 </div>
21 <div class="w-px bg-gray-300 dark:bg-gray-600 h-80 mt-1"></div>
22 </div>
23 <div class="flex-1">
24 <div class="mb-6">
25 <div class="text-lg font-semibold dark:text-white mb-1">General</div>
26 <div class="text-sm text-gray-500 dark:text-gray-400">Basic repository information.</div>
27 </div>
28
29 <div class="space-y-2">
30 <!-- Repository Name with Owner -->
31 <div>
32 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
33 Repository name
34 </label>
35 <div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
36 {{ if .LoggedInUser.Handle }}
37 <div class="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">
38 {{ template "user/fragments/picHandle" .LoggedInUser.Handle }}
39 <span class="md:hidden pr-2 py-2 text-gray-500 dark:text-gray-400">/</span>
40 </div>
41 <span class="hidden md:inline pr-2 py-2 text-gray-500 dark:text-gray-400 border-t border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">/</span>
42 {{ end }}
43 <input
44 type="text"
45 id="name"
46 name="name"
47 required
48 class="w-full max-w-md 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"
49 placeholder="repository-name"
50 />
51 </div>
52 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
53 Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
54 </p>
55 </div>
56
57 <!-- Description -->
58 <div>
59 <label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
60 Description
61 </label>
62 <input
63 type="text"
64 id="description"
65 name="description"
66 class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
67 placeholder="A brief description of your project..."
68 />
69 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
70 Optional. A short description to help others understand what your project does.
71 </p>
72 </div>
73 </div>
74 </div>
75 </div>
76
77 <!-- Step 2: Configuration -->
78 <div class="flex gap-4">
79 <div class="flex flex-col items-center w-10 flex-shrink-0">
80 <div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
81 2
82 </div>
83 </div>
84 <div class="flex-1">
85 <div class="mb-6">
86 <div class="text-lg font-semibold dark:text-white mb-1">Configuration</div>
87 <div class="text-sm text-gray-500 dark:text-gray-400">Repository settings and hosting.</div>
88 </div>
89
90 <div class="space-y-2">
91 <!-- Default Branch -->
92 <div>
93 <label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
94 Default branch
95 </label>
96 <input
97 type="text"
98 id="branch"
99 name="branch"
100 value="main"
101 required
102 class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
103 />
104 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
105 The primary branch where development happens. Common choices are "main" or "master".
106 </p>
107 </div>
108
109 <!-- Knot Selection -->
110 <div>
111 <label class="block text-sm font-bold uppercase dark:text-white mb-1">
112 Select a knot
113 </label>
114 <div class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
115 {{ range .Knots }}
116 <div class="flex items-center">
117 <input
118 type="radio"
119 name="domain"
120 value="{{ . }}"
121 class="mr-2"
122 id="domain-{{ . }}"
123 required
124 />
125 <label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
126 </div>
127 {{ else }}
128 <p class="dark:text-white">no knots available.</p>
129 {{ end }}
130 </div>
131 <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
132 A knot hosts repository data and handles Git operations.
133 You can also <a href="/knots" class="underline">register your own knot</a>.
134 </p>
135 </div>
136 </div>
137 </div>
138 </div>
139 </div>
140
141 <!-- Create Repository Button -->
142 <div class="p-6 border-t border-gray-200 dark:border-gray-700">
143 <div class="flex items-center justify-between">
144 <div class="text-sm text-gray-500 dark:text-gray-400">
145 All repositories are publicly accessible.
146 </div>
147 <button type="submit" class="btn-create flex items-center gap-2">
148 {{ i "book-plus" "w-4 h-4" }}
149 create repo
150 <span id="spinner" class="group">
151 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
152 </span>
153 </button>
154 </div>
155 <div id="repo" class="error mt-2"></div>
156 </div>
157
158 </form>
159</div>
160{{ end }}