Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194<script lang="ts"> import GitBranch from "$icon/git-branch"; import Logs from "$icon/logs"; import Tags from "$icon/tags"; import TriangleAlert from "$icon/triangle-alert"; import BranchList from "$lib/components/repo/BranchList.svelte"; import CommitList from "$lib/components/repo/CommitList.svelte"; import EmptyRepo from "$lib/components/repo/EmptyRepo.svelte"; import FileTree from "$lib/components/repo/FileTree.svelte"; import LanguageBar from "$lib/components/repo/LanguageBar.svelte"; import PanelHeader from "$lib/components/repo/PanelHeader.svelte"; import Readme from "$lib/components/repo/Readme.svelte"; import RepoIndexPanelSkeleton from "$lib/components/repo/RepoIndexPanelSkeleton.svelte"; import RepoReadmeSkeleton from "$lib/components/repo/RepoReadmeSkeleton.svelte"; import TagList from "$lib/components/repo/TagList.svelte"; import RepoToolbar from "$lib/components/repo/RepoToolbar.svelte"; import Spinner from "$lib/components/ui/Spinner.svelte"; import Pending from "$lib/components/ui/Pending.svelte"; import Card from "$lib/components/ui/Card.svelte"; import type { Settled } from "$lib/api/load"; import { withImportAvailability, type loadRepoIndex } from "$lib/api/repoIndex"; import type { ImportState } from "$lib/api/repo"; import type { CommitStatuses } from "$lib/api/commitStatuses"; import type { RepoInfo } from "$lib/components/repo/types";
interface Props { repo: RepoInfo; data: Settled<Awaited<ReturnType<typeof loadRepoIndex>>>; bobbinUrl: string; pipelineStatuses?: Promise<CommitStatuses | undefined>; importStatus?: ImportState | null; }
let { repo, data, bobbinUrl, pipelineStatuses, importStatus = null }: Props = $props();
const base = $derived(`/${repo.ownerHandle}/${repo.name}`);</script>
<Pending> {#snippet skeleton()} <RepoIndexPanelSkeleton /> {/snippet}
{@const content = await data.content} {@const availability = withImportAvailability(content.availability, importStatus)} <Card class="relative mx-auto w-full"> {#if availability === "needs-upgrade"} <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> <div> <span class="flex items-center justify-center gap-xs"> <TriangleAlert class="size-5 shrink-0" aria-hidden="true" /> The knot hosting this repository needs an upgrade. </span> <p class="mt-xs"> This repository is currently unavailable. <a href="https://docs.tangled.org/migrating-knots-and-spindles.html" rel="external noopener noreferrer" class="underline">Read the upgrade guide</a > </p> </div> </div> {:else if availability === "unreachable"} <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> <span class="flex items-center gap-xs"> <TriangleAlert class="size-5 shrink-0" aria-hidden="true" /> The knot hosting this repository is unreachable. </span> </div> {:else if availability === "importing"} <div class="flex h-96 items-center justify-center text-center"> <span class="flex items-center gap-2"> <Spinner class="size-5 shrink-0" /> This repository is still importing from {repo.importSource ?? "its source"}. Its content will appear here as it lands. </span> </div> {:else if availability === "import-failed"} <div class="flex h-96 items-center justify-center text-center text-foreground-danger"> <div> <span class="flex items-center justify-center gap-2"> <TriangleAlert class="size-5 shrink-0" aria-hidden="true" /> The import from {repo.importSource ?? "its source"} failed. </span> {#if importStatus?.reason} <p class="mt-2 text-foreground-muted"> {importStatus.reason} </p> {/if} </div> </div> {:else if availability === "empty"} <EmptyRepo {repo} /> {:else} <!-- fills in silently, it's a thin strip --> <Pending> {@const languages = await data.languages} {#if languages.length > 0} <LanguageBar {languages} /> {/if} </Pending>
<RepoToolbar {repo} ref={content.ref} refs={content.refs} totalCommits={content.totalCommits} totalBranches={content.totalBranches} totalTags={content.totalTags} {bobbinUrl} /> <div class="grid grid-cols-1 gap-xs md:grid-cols-2"> <div class="min-w-0 pr-md md:border-r md:border-border-default"> <FileTree ownerHandle={repo.ownerHandle} repoName={repo.name} ref={content.ref} entries={content.files} /> </div>
<div class="hidden md:block"> {#if content.commits.length > 0} <div class="border-border-default pr-xs pb-md md:px-xs"> <PanelHeader title="Commits" icon={Logs} href={`${base}/commits/${encodeURIComponent(content.ref)}`} count={content.totalCommits} /> <CommitList ownerHandle={repo.ownerHandle} repoName={repo.name} commits={content.commits} tagsByCommit={content.tagsByCommit} {pipelineStatuses} /> </div> {/if}
{#if content.branches.length > 0} <div class="border-t border-border-default py-md pr-xs md:px-xs"> <PanelHeader title="Branches" icon={GitBranch} href={`${base}/branches`} count={content.totalBranches} /> <BranchList ownerHandle={repo.ownerHandle} repoName={repo.name} currentRef={content.ref} branches={content.branches} /> </div> {/if}
{#if content.tags.length > 0} <div class="border-t border-border-default py-md pr-xs md:px-xs"> <PanelHeader title="Tags" icon={Tags} href={`${base}/tags`} count={content.totalTags} /> <TagList ownerHandle={repo.ownerHandle} repoName={repo.name} tags={content.tags} /> </div> {/if} </div> </div> {/if} </Card></Pending>
<Pending> {#snippet skeleton()} <RepoReadmeSkeleton /> {/snippet}
{@const readme = (await data.content).readme} {#if readme} <Readme filename={readme.filename} contents={readme.contents} html={await data.readmeHtml} /> {/if}</Pending>