Monorepo for Tangled
tangled.org
tangled.org
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 {{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
47 <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
48 <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
49 <code
50 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"
51 onclick="window.getSelection().selectAllChildren(this)"
52 data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
53 >git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
54 <button
55 onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
56 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"
57 title="Copy to clipboard"
58 >
59 {{ i "copy" "w-4 h-4" }}
60 </button>
61 </div>
62 </div>
63
64 <!-- Note for self-hosted -->
65 <p class="text-xs text-gray-500 dark:text-gray-400">
66 For self-hosted knots, clone URLs may differ based on your setup.
67 </p>
68
69 <!-- Download Archive -->
70 <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
71 <a
72 href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
73 class="flex items-center gap-2 px-3 py-2 text-sm"
74 >
75 {{ i "download" "w-4 h-4" }}
76 Download tar.gz
77 </a>
78 </div>
79
80 </div>
81 </div>
82 </details>
83
84 <script>
85 function copyToClipboard(button, text) {
86 navigator.clipboard.writeText(text).then(() => {
87 const originalContent = button.innerHTML;
88 button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
89 setTimeout(() => {
90 button.innerHTML = originalContent;
91 }, 2000);
92 });
93 }
94
95 // Close clone dropdown when clicking outside
96 document.addEventListener('click', function(event) {
97 const cloneDropdown = document.getElementById('clone-dropdown');
98 if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
99 if (!cloneDropdown.contains(event.target)) {
100 cloneDropdown.removeAttribute('open');
101 }
102 }
103 });
104 </script>
105{{ end }}