Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147<script lang="ts"> import { page } from "$app/state"; import Download from "$icon/download"; import Button from "#lib/components/ui/Button.svelte"; import Checkbox from "#lib/components/ui/Checkbox.svelte"; import CopyButton from "#lib/components/ui/CopyButton.svelte"; import Dropdown from "#lib/components/ui/Dropdown.svelte"; import Modal from "#lib/components/ui/Modal.svelte"; import { mobile } from "#lib/mobile.svelte.ts"; import { buttonIcon } from "#lib/components/ui/Button.svelte"; import type { RepoInfo } from "#lib/components/repo/types.ts";
interface Props { repo: RepoInfo; ref: string; bobbinUrl: string; }
let { repo, ref, bobbinUrl }: Props = $props();
// ssh for knot1 goes through the main domain, other knots serve their own. the // knot field is usually a bare host but a scheme and port are both allowed const sshHost = $derived( (repo.knot === "knot1.tangled.sh" ? "tangled.org" : repo.knot) .replace(/^[a-z]+:\/\//, "") .split(/[:/]/)[0] ); const origin = $derived(page.url.origin);
let permalink = $state(false); let sheetOpen = $state(false);
const urls = $derived([ { label: "HTTPS", handle: `${origin}/${repo.ownerHandle}/${repo.name}`, perma: repo.repoDid ? `${origin}/${repo.repoDid}` : null }, { label: "SSH", handle: `git@${sshHost}:${repo.ownerHandle}/${repo.name}`, perma: repo.repoDid ? `git@${sshHost}:${repo.repoDid}` : null } ]);
const archiveUrl = (format: "tar.gz" | "zip") => { const url = new URL("/xrpc/org.tangled.temp.git.getArchive", `${bobbinUrl}/`); url.searchParams.set("repo", repo.repoDid ?? ""); url.searchParams.set("ref", ref); url.searchParams.set("format", format); url.searchParams.set("prefix", `${repo.name}-${ref.replaceAll("/", "-")}`); return url.toString(); };</script>
{#snippet trigger()} <Download class={buttonIcon()} aria-hidden="true" /> <span class="hidden md:inline">Code</span>{/snippet}
{#snippet content()} <div class="flex items-center justify-between"> <h3 class="typography-paragraph-small font-medium text-foreground-default"> Clone this repository </h3> {#if repo.repoDid} <Checkbox bind:checked={permalink} class="typography-paragraph-small text-foreground-muted" > Use permalink </Checkbox> {/if} </div>
{#each urls as entry (entry.label)} {@const value = permalink && entry.perma ? entry.perma : entry.handle} <div class="mt-md"> <span class="mb-2xs block typography-paragraph-small font-medium text-foreground-muted" >{entry.label}</span > <div class="flex items-stretch divide-x divide-border-default rounded-md border border-border-default" > <span data-testid="cloneUrlValue" data-label={entry.label} class="flex-1 overflow-x-auto bg-background-inset px-sm py-xs typography-monospace-small whitespace-nowrap text-foreground-default select-all" >{value}</span > <CopyButton {value} label={`Copy ${entry.label} clone url`} title="Copy to clipboard" class="rounded-none px-sm py-xs text-foreground-subtle hover:text-foreground-default" /> </div> </div> {/each}
<p class="mt-xs typography-paragraph-small text-foreground-subtle"> For self-hosted knots, clone URLs may differ based on your setup. </p>
<!-- archives come from bobbin, so these are external links --> <div class="mt-md flex gap-xs"> {#each [{ format: "tar.gz" }, { format: "zip" }] as const as archive (archive.format)} <a data-testid="downloadArchiveLink" data-format={archive.format} href={archiveUrl(archive.format)} rel="external noopener noreferrer" class="flex flex-1 items-center justify-center gap-xs rounded-md border border-border-default px-xs py-1.5 typography-paragraph-small text-foreground-default no-underline hover:bg-background-subtle hover:no-underline" > <Download class="size-3.5" aria-hidden="true" /> {archive.format === "zip" ? ".zip" : archive.format} </a> {/each} </div>{/snippet}
{#if mobile.current} <Button variant="primary" aria-label="Clone this repository" aria-haspopup="dialog" aria-expanded={sheetOpen} onclick={() => (sheetOpen = true)} > {@render trigger()} </Button> <Modal drawer bind:open={sheetOpen}> <div>{@render content()}</div> </Modal>{:else} <Dropdown variant="button" buttonVariant="primary" align="right" label="Clone this repository" menuClass="w-96 divide-y-0 p-md" {trigger} > {@render content()} </Dropdown>{/if}