Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137<script lang="ts"> import { resolve } from "$app/paths"; import { getAuth } from "$lib/auth.svelte"; import { createBobbinClient } from "$lib/api/client"; import { count } from "$lib/api/count"; import { createLoad } from "$lib/action.svelte"; import StepMarker from "$lib/components/ui/StepMarker.svelte"; import type { RepoInfo } from "$lib/components/repo/types";
interface Props { repo: RepoInfo; /** * Overrides the SSH key lookup, for deterministic stories/tests or when preloaded. * Left unset in real usage, in which case it's figured out from the API. */ hasSshKey?: boolean; defaultBranch?: string; }
let { repo, hasSshKey, defaultBranch }: Props = $props();
const auth = getAuth(); const isOwner = $derived(auth.currentDid === repo.ownerDid); // same host rewrite as the clone urls const sshHost = $derived( (repo.knot === "knot1.tangled.sh" ? "tangled.org" : repo.knot) .replace(/^[a-z]+:\/\//, "") .split(/[:/]/)[0] ); const remote = $derived(`git@${sshHost}:${repo.repoDid ?? `${repo.ownerHandle}/${repo.name}`}`);
let customBranch = $state<string | undefined>(); $effect(() => { if (!defaultBranch) { void repo.defaultBranch.then((b) => { customBranch = b; }); } }); const resolvedBranch = $derived(defaultBranch ?? customBranch ?? "main");
// Only load on demand if hasSshKey was not provided const keyStatus = createLoad(async (): Promise<boolean | undefined> => { if (hasSshKey !== undefined) return hasSshKey; const owner = isOwner; const did = auth.currentDid; const serviceUrl = auth.bobbinUrl; if (!owner || !did) return undefined; try { const ctx = createBobbinClient({ serviceUrl }); const result = await count(ctx, "sh.tangled.publicKey.countKeys", did); return result.count > 0; } catch { return false; } });
const ownerHasKey = $derived(hasSshKey !== undefined ? hasSshKey : keyStatus.data); const loadingKey = $derived( hasSshKey === undefined && (keyStatus.loading || keyStatus.data === undefined) );</script>
{#snippet bullet(n: number)} <StepMarker class="mr-xs inline-flex align-middle">{n}</StepMarker>{/snippet}
{#snippet codeBlock(lines: string[])} <pre class="overflow-x-auto rounded-sm bg-background-inset p-sm typography-monospace-small">{lines.join( "\n" )}</pre>{/snippet}
{#if isOwner} {#if loadingKey} <div class="py-xl" aria-hidden="true"></div> {:else if ownerHasKey} <div class="flex w-full place-content-center"> <div class="flex w-fit flex-col gap-lg py-xl typography-paragraph-small"> <p>This is an empty repository.</p> <div class="flex flex-col gap-xs"> <p class="text-foreground-subtle"> …create a new repository on the command line </p> {@render codeBlock([ `echo "# ${repo.name}" >> README.md`, "git init", "git add README.md", 'git commit -m "initial commit"', `git branch -M ${resolvedBranch}`, `git remote add origin ${remote}`, `git push -u origin ${resolvedBranch}` ])} </div> <div class="flex flex-col gap-xs"> <p class="text-foreground-subtle"> …or push an existing repository from the command line </p> {@render codeBlock([ `git remote add origin ${remote}`, `git branch -M ${resolvedBranch}`, `git push -u origin ${resolvedBranch}` ])} </div> </div> </div> {:else} <div class="flex w-full place-content-center"> <div class="flex w-fit flex-col gap-md py-xl typography-paragraph-small"> <p>This is an empty repository. To get started:</p> <p> {@render bullet(1)}First, generate a new <a href="https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key" rel="noopener" class="underline">SSH key pair</a >. </p> <p> {@render bullet(2)}Then add the public key from the <a href={resolve("/settings/keys")} class="underline">keys page</a> in your settings. </p> <p> {@render bullet(3)}Configure your remote to <code class="rounded-sm bg-background-inset px-2xs typography-monospace-regular" >{remote}</code > </p> <p>{@render bullet(4)}Push!</p> </div> </div> {/if}{:else} <p class="py-xl text-center text-foreground-subtle">This is an empty repository.</p>{/if}