forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

appview/pages: dropdown for clone instructions and tarball in repo index

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>

anirudh.fi 45efee41 41b461fe

verified
Changed files
+154 -100
appview
pages
+104
appview/pages/templates/repo/fragments/cloneDropdown.html
···
+
{{ define "repo/fragments/cloneDropdown" }}
+
{{ $knot := .RepoInfo.Knot }}
+
{{ if eq $knot "knot1.tangled.sh" }}
+
{{ $knot = "tangled.sh" }}
+
{{ end }}
+
+
<details id="clone-dropdown" class="relative inline-block text-left group">
+
<summary class="btn-create cursor-pointer list-none flex items-center gap-2">
+
{{ i "download" "w-4 h-4" }}
+
<span>code</span>
+
<span class="group-open:hidden">
+
{{ i "chevron-down" "w-4 h-4" }}
+
</span>
+
<span class="hidden group-open:flex">
+
{{ i "chevron-up" "w-4 h-4" }}
+
</span>
+
</summary>
+
+
<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 dark:text-white z-[9999]">
+
<div class="p-4">
+
<div class="mb-3">
+
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Clone this repository</h3>
+
</div>
+
+
<!-- HTTPS Clone -->
+
<div class="mb-3">
+
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
+
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+
<code
+
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"
+
onclick="window.getSelection().selectAllChildren(this)"
+
data-url="https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}"
+
>https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code>
+
<button
+
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+
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"
+
title="Copy to clipboard"
+
>
+
{{ i "copy" "w-4 h-4" }}
+
</button>
+
</div>
+
</div>
+
+
<!-- SSH Clone -->
+
<div class="mb-3">
+
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
+
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+
<code
+
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"
+
onclick="window.getSelection().selectAllChildren(this)"
+
data-url="git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}"
+
>git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code>
+
<button
+
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+
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"
+
title="Copy to clipboard"
+
>
+
{{ i "copy" "w-4 h-4" }}
+
</button>
+
</div>
+
</div>
+
+
<!-- Note for self-hosted -->
+
<p class="text-xs text-gray-500 dark:text-gray-400">
+
For self-hosted knots, clone URLs may differ based on your setup.
+
</p>
+
+
<!-- Download Archive -->
+
<div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
+
<a
+
href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
+
class="flex items-center gap-2 px-3 py-2 text-sm"
+
>
+
{{ i "download" "w-4 h-4" }}
+
Download tar.gz
+
</a>
+
</div>
+
+
</div>
+
</div>
+
</details>
+
+
<script>
+
function copyToClipboard(button, text) {
+
navigator.clipboard.writeText(text).then(() => {
+
const originalContent = button.innerHTML;
+
button.innerHTML = `{{ i "copy-check" "w-4 h-4" }}`;
+
setTimeout(() => {
+
button.innerHTML = originalContent;
+
}, 2000);
+
});
+
}
+
+
// Close clone dropdown when clicking outside
+
document.addEventListener('click', function(event) {
+
const cloneDropdown = document.getElementById('clone-dropdown');
+
if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
+
if (!cloneDropdown.contains(event.target)) {
+
cloneDropdown.removeAttribute('open');
+
}
+
}
+
});
+
</script>
+
{{ end }}
-55
appview/pages/templates/repo/fragments/cloneInstructions.html
···
-
{{ define "repo/fragments/cloneInstructions" }}
-
{{ $knot := .RepoInfo.Knot }}
-
{{ if eq $knot "knot1.tangled.sh" }}
-
{{ $knot = "tangled.sh" }}
-
{{ end }}
-
<section
-
class="mt-4 p-6 rounded drop-shadow-sm bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto flex flex-col gap-4"
-
>
-
<div class="flex flex-col gap-2">
-
<strong>push</strong>
-
<div class="md:pl-4 overflow-x-auto whitespace-nowrap">
-
<code class="dark:text-gray-100"
-
>git remote add origin
-
git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
-
>
-
</div>
-
</div>
-
-
<div class="flex flex-col gap-2">
-
<strong>clone</strong>
-
<div class="md:pl-4 flex flex-col gap-2">
-
<div class="flex items-center gap-3">
-
<span
-
class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
-
>HTTP</span
-
>
-
<div class="overflow-x-auto whitespace-nowrap flex-1">
-
<code class="dark:text-gray-100"
-
>git clone
-
https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code
-
>
-
</div>
-
</div>
-
-
<div class="flex items-center gap-3">
-
<span
-
class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
-
>SSH</span
-
>
-
<div class="overflow-x-auto whitespace-nowrap flex-1">
-
<code class="dark:text-gray-100"
-
>git clone
-
git@{{ $knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
-
>
-
</div>
-
</div>
-
</div>
-
</div>
-
-
<p class="py-2 text-gray-500 dark:text-gray-400">
-
Note that for self-hosted knots, clone URLs may be different based
-
on your setup.
-
</p>
-
</section>
-
{{ end }}
+50 -45
appview/pages/templates/repo/index.html
···
{{ define "branchSelector" }}
-
<div class="flex gap-2 items-center items-stretch justify-center">
-
<select
-
onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
-
class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
-
>
-
<optgroup label="branches ({{len .Branches}})" class="bold text-sm">
-
{{ range .Branches }}
-
<option
-
value="{{ .Reference.Name }}"
-
class="py-1"
-
{{ if eq .Reference.Name $.Ref }}
-
selected
-
{{ end }}
-
>
-
{{ .Reference.Name }}
-
</option>
-
{{ end }}
-
</optgroup>
-
<optgroup label="tags ({{len .Tags}})" class="bold text-sm">
-
{{ range .Tags }}
-
<option
-
value="{{ .Reference.Name }}"
-
class="py-1"
-
{{ if eq .Reference.Name $.Ref }}
-
selected
-
{{ end }}
-
>
-
{{ .Reference.Name }}
-
</option>
-
{{ else }}
-
<option class="py-1" disabled>no tags found</option>
-
{{ end }}
-
</optgroup>
-
</select>
-
<div class="flex items-center gap-2">
+
<div class="flex gap-2 items-center justify-between w-full">
+
<div class="flex gap-2 items-center">
+
<select
+
onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
+
class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
+
>
+
<optgroup label="branches ({{len .Branches}})" class="bold text-sm">
+
{{ range .Branches }}
+
<option
+
value="{{ .Reference.Name }}"
+
class="py-1"
+
{{ if eq .Reference.Name $.Ref }}
+
selected
+
{{ end }}
+
>
+
{{ .Reference.Name }}
+
</option>
+
{{ end }}
+
</optgroup>
+
<optgroup label="tags ({{len .Tags}})" class="bold text-sm">
+
{{ range .Tags }}
+
<option
+
value="{{ .Reference.Name }}"
+
class="py-1"
+
{{ if eq .Reference.Name $.Ref }}
+
selected
+
{{ end }}
+
>
+
{{ .Reference.Name }}
+
</option>
+
{{ else }}
+
<option class="py-1" disabled>no tags found</option>
+
{{ end }}
+
</optgroup>
+
</select>
+
<div class="flex items-center gap-2">
{{ $isOwner := and .LoggedInUser .RepoInfo.Roles.IsOwner }}
{{ $isCollaborator := and .LoggedInUser .RepoInfo.Roles.IsCollaborator }}
{{ if and (or $isOwner $isCollaborator) .ForkInfo .ForkInfo.IsFork }}
···
<span>sync</span>
</button>
{{ end }}
-
<a
-
href="/{{ .RepoInfo.FullName }}/compare?base={{ $.Ref | urlquery }}"
-
class="btn flex items-center gap-2 no-underline hover:no-underline"
-
title="Compare branches or tags"
-
>
-
{{ i "git-compare" "w-4 h-4" }}
-
</a>
+
<a
+
href="/{{ .RepoInfo.FullName }}/compare?base={{ $.Ref | urlquery }}"
+
class="btn flex items-center gap-2 no-underline hover:no-underline"
+
title="Compare branches or tags"
+
>
+
{{ i "git-compare" "w-4 h-4" }}
+
</a>
+
</div>
</div>
-
</div>
+
+
<!-- Clone dropdown in top right -->
+
<div class="flex items-center">
+
{{ template "repo/fragments/cloneDropdown" . }}
+
</div>
+
</div>
{{ end }}
{{ define "fileTree" }}
···
{{- end -}}</article>
</section>
{{- end -}}
-
-
{{ template "repo/fragments/cloneInstructions" . }}
{{ end }}