Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141<script lang="ts"> import { resolve } from "$app/paths"; import GitFork from "$icon/git-fork"; import Globe from "$icon/globe"; import Button from "#lib/components/ui/Button.svelte"; import ButtonGroup from "#lib/components/ui/ButtonGroup.svelte"; import OwnerTitle from "#lib/components/repo/OwnerTitle.svelte"; import TopicList from "#lib/components/repo/TopicList.svelte"; import Pending from "#lib/components/ui/Pending.svelte"; import Bones from "#lib/components/ui/Bones.svelte"; import bonesLoadingprimitivesCount from "#lib/bones/bones-loadingprimitives--count.bones.json"; import StarButton from "#lib/components/repo/StarButton.svelte"; import type { RepoCounts, RepoInfo, RepoSource } from "#lib/components/repo/types.ts"; import SubscribeButton from "#lib/components/repo/SubscribeButton.svelte"; import { formatCount } from "#lib/format.ts"; import { safeHref } from "#lib/safeHref.ts"; interface Props { repo: RepoInfo; counts: RepoCounts | Promise<RepoCounts>; viewerStarRkey?: string | null | Promise<string | null>; viewerSubscriptionRkey?: string | null | Promise<string | null>; source?: RepoSource | null | Promise<RepoSource | null>; }
let { repo, counts, viewerStarRkey, viewerSubscriptionRkey, source }: Props = $props();
const base = $derived(`/${repo.ownerHandle}/${repo.name}`); const website = $derived(safeHref(repo.website)); const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, ""); const topics = $derived([...new Set(repo.topics ?? [])]);</script>
{#snippet repoActions(className: string, compact: boolean)} <div class={className}> <StarButton subject={{ kind: "repo", did: repo.repoDid ?? "", ownerHandle: repo.ownerHandle, name: repo.name }} initialCount={counts} initialRkey={viewerStarRkey} count={compact ? "never" : "always"} class={compact ? "min-w-0" : "flex-1"} /> <ButtonGroup class={compact ? "min-w-0" : "flex-1"}> <Button href={resolve(`${base}/fork` as "/")} variant="default" icon={GitFork} disabled={!repo.git} title={repo.git ? undefined : "This repository doesn't support git"} class="flex-1 px-md!" > Fork </Button> {#if !compact} <Button href={resolve(`${base}/forks` as "/")} variant="ghost" title="Forked by"> {#if typeof counts === "object" && counts !== null && "then" in counts} <Pending> {#snippet skeleton()} <Bones capture={bonesLoadingprimitivesCount} class="inline-block w-8 align-middle" /> {/snippet} {formatCount((await counts).forks)} </Pending> {:else} {formatCount(counts.forks)} {/if} </Button> {/if} </ButtonGroup> <SubscribeButton repoDid={repo.repoDid ?? ""} initialRkey={viewerSubscriptionRkey} class={compact ? "min-w-0" : undefined} /> </div>{/snippet}
<section class="mb-xs px-md py-xs"> <div class="mb-xs flex flex-col items-start justify-between gap-md sm:flex-row"> <div class="flex min-w-0 flex-col gap-xs"> <OwnerTitle ownerDid={repo.ownerDid} ownerHandle={repo.ownerHandle} name={repo.name} href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")} /> </div>
{@render repoActions("hidden shrink-0 items-start gap-xs sm:flex", false)} </div>
<div class="flex flex-col gap-2xs"> <div class="flex flex-wrap items-center gap-x-md gap-y-2xs text-foreground-muted" > {#if repo.description} <span data-testid="repoDescription">{repo.description}</span> {/if}
<Pending> {@const resolvedSource = await (source ?? repo.source)} {#if resolvedSource} <span class="flex items-center gap-2xs"> <GitFork class="size-3.5 shrink-0" aria-hidden="true" /> <span data-testid="forkedFromPrefix">forked from</span> <a href={resolve( `/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/" )} class="underline" > {resolvedSource.ownerHandle}/{resolvedSource.name} </a> </span> {:else if !repo.description && !website && topics.length === 0} <span class="italic">This repository has no description</span> {/if} </Pending>
{#if website} <span class="flex items-center gap-2xs"> <Globe class="size-3.5 shrink-0" aria-hidden="true" /> <a href={website} rel="external ugc nofollow noopener noreferrer" >{trimScheme(website)}</a > </span> {/if} </div>
<TopicList {topics} /> </div>
{@render repoActions("mt-xs grid grid-cols-3 gap-xs sm:hidden", true)}</section>