kot.pink
1{{ define "repo/fragments/cloneDropdown" }}
2 {{ $knot := .RepoInfo.Knot }}
3 {{ if eq $knot "knot1.tangled.sh" }}
4 {{ $knot = "tangled.org" }}
5 {{ end }}
6
7 <details id="clone-dropdown" class="relative inline-block text-left group">
8 <summary class="btn-create cursor-pointer list-none flex items-center gap-2">
9 {{ i "download" "w-4 h-4" }}
10 <span class="hidden md:inline">code</span>
11 <span class="group-open:hidden">
12 {{ i "chevron-down" "w-4 h-4" }}
13 </span>
14 <span class="hidden group-open:flex">
15 {{ i "chevron-up" "w-4 h-4" }}
16 </span>
17 </summary>
18
19 <div class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 drop-shadow-sm dark:text-white z-[9999]">
20 <div class="p-4">
21 <div class="mb-3">
22 <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Clone this repository</h3>
23 </div>
24
25 <!-- HTTPS Clone -->
26 <div class="mb-3">
27 <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
28 <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
29 <code
30 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"
31 onclick="window.getSelection().selectAllChildren(this)"
32 data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
33 >https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
34 <button
35 onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
36 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"
37 title="Copy to clipboard"
38 >
39 {{ i "copy" "w-4 h-4" }}
40 </button>
41 </div>
42 </div>
43
44 <!-- SSH Clone -->
45 <div class="mb-3">
46 <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
47 <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
48 <code
49 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"
50 onclick="window.getSelection().selectAllChildren(this)"
51 data-url="git@{{ $knot | stripPort }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}"
52 >git@{{ $knot | stripPort }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
53 <button
54 onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
55 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"
56 title="Copy to clipboard"
57 >
58 {{ i "copy" "w-4 h-4" }}
59 </button>
60 </div>
61 </div>
62
63 <!-- Note for self-hosted -->
64 <p class="text-xs text-gray-500 dark:text-gray-400">
65 For self-hosted knots, clone URLs may differ based on your setup.
66 </p>
67
68 <!-- Download Archive -->
69 <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
70 <a
71 href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
72 class="flex items-center gap-2 px-3 py-2 text-sm"
73 >
74 {{ i "download" "w-4 h-4" }}
75 Download tar.gz
76 </a>
77 </div>
78
79 </div>
80 </div>
81 </details>
82
83 <script>
84 function copyToClipboard(button, text) {
85 navigator.clipboard.writeText(text).then(() => {
86 const originalContent = button.innerHTML;
87 button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
88 setTimeout(() => {
89 button.innerHTML = originalContent;
90 }, 2000);
91 });
92 }
93
94 // Close clone dropdown when clicking outside
95 document.addEventListener('click', function(event) {
96 const cloneDropdown = document.getElementById('clone-dropdown');
97 if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
98 if (!cloneDropdown.contains(event.target)) {
99 cloneDropdown.removeAttribute('open');
100 }
101 }
102 });
103 </script>
104{{ end }}