lewis.moe
Monorepo for Tangled
appview/pages: add permalink toggle to clone URLs
this replaces handles with DIDs in the clone dropdown.
Signed-off-by: oppiliappan <me@oppi.li>
+84
-53
appview/pages/templates/repo/fragments/cloneDropdown.html
+84
-53
appview/pages/templates/repo/fragments/cloneDropdown.html
···
15
15
popover
16
16
id="clone-dropdown"
17
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>
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 md:w-[440px] p-4 rounded drop-shadow overflow-visible">
22
21
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>
22
+
<input
23
+
type="checkbox"
24
+
id="permalink-toggle"
25
+
class="peer hidden m-0">
26
+
27
+
<div class="flex items-center justify-between">
28
+
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">Clone this repository</h3>
29
+
<label for="permalink-toggle" class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 cursor-pointer normal-case font-normal">
30
+
{{ i "square-check-big" "checkbox-checked size-4" }}
31
+
{{ i "square" "checkbox-unchecked size-4" }}
32
+
<span>Use permalink</span>
33
+
</label>
40
34
</div>
41
35
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>
36
+
{{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
37
+
38
+
{{ template "cloneUrlItem" (
39
+
dict
40
+
"Label" "HTTPS"
41
+
"HandleUrl" (printf "https://tangled.org/%s/%s" $repoOwnerHandle .RepoInfo.Name)
42
+
"PermaUrl" (printf "https://tangled.org/%s/%s" .RepoInfo.OwnerDid .RepoInfo.Name)
43
+
) }}
44
+
45
+
{{ template "cloneUrlItem" (
46
+
dict
47
+
"Label" "SSH"
48
+
"HandleUrl" (printf "git@%s:%s/%s" (stripPort $knot) $repoOwnerHandle .RepoInfo.Name)
49
+
"PermaUrl" (printf "git@%s:%s/%s" (stripPort $knot) .RepoInfo.OwnerDid .RepoInfo.Name)
50
+
) }}
61
51
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.
52
+
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
53
+
For self-hosted knots, clone URLs may differ based on your setup.
65
54
</p>
66
55
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>
56
+
<a
57
+
href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
58
+
class="flex items-center btn-create w-full mt-4 gap-2 text-sm hover:no-underline hover:text-gray-100"
59
+
>
60
+
{{ i "download" "w-4 h-4" }}
61
+
Download tar.gz
62
+
</a>
77
63
</div>
78
64
65
+
<style>
66
+
.clone-url-did {
67
+
display: none;
68
+
}
69
+
.checkbox-checked {
70
+
display: none;
71
+
}
72
+
#permalink-toggle:checked ~ * .clone-url-handle {
73
+
display: none;
74
+
}
75
+
#permalink-toggle:checked ~ * .clone-url-did {
76
+
display: block;
77
+
}
78
+
#permalink-toggle:checked ~ * .checkbox-checked {
79
+
display: block;
80
+
}
81
+
#permalink-toggle:checked ~ * .checkbox-unchecked {
82
+
display: none;
83
+
}
84
+
</style>
85
+
79
86
<script>
80
87
function copyToClipboard(button, text) {
81
88
navigator.clipboard.writeText(text).then(() => {
···
88
95
}
89
96
</script>
90
97
{{ end }}
98
+
99
+
{{ define "cloneUrlItem" }}
100
+
<div class="mt-4">
101
+
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 normal-case">{{ .Label }}</label>
102
+
<div class="flex items-stretch border border-gray-300 dark:border-gray-600 divide-x divide-gray-300 dark:divide-gray-600 rounded">
103
+
<span
104
+
class="clone-url-handle flex-1 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 select-all cursor-pointer whitespace-nowrap overflow-x-auto font-mono bg-gray-200 dark:bg-gray-700"
105
+
onclick="window.getSelection().selectAllChildren(this)"
106
+
>{{ .HandleUrl }}</span>
107
+
<span
108
+
class="clone-url-did flex-1 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 select-all cursor-pointer whitespace-nowrap overflow-x-auto font-mono bg-gray-200 dark:bg-gray-700"
109
+
onclick="window.getSelection().selectAllChildren(this)"
110
+
>{{ .PermaUrl }}</span>
111
+
<button
112
+
onclick="copyToClipboard(this, Array.from(this.parentElement.querySelectorAll('span')).find(s => getComputedStyle(s).display !== 'none').textContent)"
113
+
class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
114
+
title="Copy to clipboard"
115
+
>
116
+
{{ i "copy" "w-4 h-4" }}
117
+
</button>
118
+
</div>
119
+
</div>
120
+
{{ end }}
121
+