lewis.moe
Monorepo for Tangled
1{{ define "repo/fragments/cloneDropdown" }}
2 {{ $knot := .RepoInfo.Knot }}
3 {{ if eq $knot "knot1.tangled.sh" }}
4 {{ $knot = "tangled.org" }}
5 {{ end }}
6
7 <button
8 popovertarget="clone-dropdown"
9 popovertargetaction="toggle"
10 class="btn-create cursor-pointer list-none flex items-center gap-2 px-4">
11 {{ i "download" "w-4 h-4" }}
12 <span class="hidden md:inline">code</span>
13 </button>
14 <div
15 popover
16 id="clone-dropdown"
17 class="
18 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
19 dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50
20 w-96 p-4 rounded drop-shadow overflow-visible">
21 <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-5">Clone this repository</h3>
22
23 <!-- HTTPS Clone -->
24 <div class="mb-3">
25 <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
26 <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
27 <code
28 class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
29 onclick="window.getSelection().selectAllChildren(this)"
30 data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
31 >https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
32 <button
33 onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
34 class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
35 title="Copy to clipboard"
36 >
37 {{ i "copy" "w-4 h-4" }}
38 </button>
39 </div>
40 </div>
41
42 <!-- SSH Clone -->
43 <div class="mb-3">
44 {{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
45 <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
46 <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
47 <code
48 class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
49 onclick="window.getSelection().selectAllChildren(this)"
50 data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
51 >git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
52 <button
53 onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
54 class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
55 title="Copy to clipboard"
56 >
57 {{ i "copy" "w-4 h-4" }}
58 </button>
59 </div>
60 </div>
61
62 <!-- Note for self-hosted -->
63 <p class="text-xs text-gray-500 dark:text-gray-400">
64 For self-hosted knots, clone URLs may differ based on your setup.
65 </p>
66
67 <!-- Download Archive -->
68 <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
69 <a
70 href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
71 class="flex items-center gap-2 px-3 py-2 text-sm"
72 >
73 {{ i "download" "w-4 h-4" }}
74 Download tar.gz
75 </a>
76 </div>
77 </div>
78
79 <script>
80 function copyToClipboard(button, text) {
81 navigator.clipboard.writeText(text).then(() => {
82 const originalContent = button.innerHTML;
83 button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
84 setTimeout(() => {
85 button.innerHTML = originalContent;
86 }, 2000);
87 });
88 }
89 </script>
90{{ end }}