Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119<script lang="ts"> import { page } from "$app/state"; import Download from "$icon/download"; 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 { buttonIcon } from "$lib/components/ui/Button.svelte"; import type { RepoInfo } from "$lib/components/repo/types";
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);
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/sh.tangled.repo.archive", `${bobbinUrl}/`); url.searchParams.set("repo", repo.uri); url.searchParams.set("ref", ref); url.searchParams.set("format", format); return url.toString(); };</script>
<Dropdown variant="button" buttonVariant="primary" insetShadow align="right" label="Clone this repository" menuClass="w-96 divide-y-0 p-md"> {#snippet trigger()} <Download class={buttonIcon()} aria-hidden="true" /> <span class="hidden md:inline">Code</span> {/snippet}
<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-sm border border-border-default" > <span 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 href={archiveUrl(archive.format)} rel="external noopener noreferrer" class="flex flex-1 items-center justify-center gap-xs rounded-sm 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></Dropdown>