Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144<script lang="ts"> import { resolve } from "$app/paths"; import GitFork from "$icon/git-fork"; import Globe from "$icon/globe"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Button from "$lib/components/ui/Button.svelte"; import ButtonGroup from "$lib/components/ui/ButtonGroup.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"; import SubscribeButton from "$lib/components/repo/SubscribeButton.svelte"; import { formatCount } from "$lib/format"; interface Props { repo: RepoInfo; counts: RepoCounts | Promise<RepoCounts>; viewerStarRkey?: string | null | Promise<string | null>; source?: RepoSource | null | Promise<RepoSource | null>; }
let { repo, counts, viewerStarRkey, source }: Props = $props();
const base = $derived(`/${repo.ownerHandle}/${repo.name}`); const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, ""); const topics = $derived([...new Set(repo.topics ?? [])]);</script>
{#snippet repoActions(className: string)} <div class={className}> <StarButton subject={{ kind: "repo", did: repo.repoDid ?? "", ownerHandle: repo.ownerHandle, name: repo.name }} initialCount={counts} initialRkey={viewerStarRkey} class="flex-1" /> <ButtonGroup class="flex-1"> <Button href={resolve(`${base}/fork` as "/")} variant="default" insetShadow={true} icon={GitFork} class="flex-1" > Fork </Button> <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> </ButtonGroup> <SubscribeButton repoDid={repo.repoDid ?? ""} /> </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"> <div class="flex flex-wrap items-center gap-xs typography-paragraph-large font-normal"> <a href={resolve(`/${repo.ownerHandle}` as "/")} class="flex items-center gap-xs text-foreground-default no-underline hover:underline" > <Avatar did={repo.ownerDid} handle={repo.ownerHandle} size="large" /> {repo.ownerHandle} </a> <span class="text-foreground-subtle select-none">/</span> <a href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")} class="font-bold text-foreground-default no-underline hover:underline" > {repo.name} </a> </div> </div>
{@render repoActions("hidden shrink-0 items-start gap-xs sm:flex")} </div>
<div class="flex flex-col gap-2xs"> <div class="flex flex-wrap items-center gap-x-md gap-y-2xs typography-paragraph-small text-foreground-muted" > {#if repo.description} <span>{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>forked from</span> <a href={resolve( `/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/" )} class="underline" > {resolvedSource.ownerHandle}/{resolvedSource.name} </a> </span> {:else if !repo.description && !repo.website && topics.length === 0} <span class="italic">This repository has no description</span> {/if} </Pending>
{#if repo.website} <span class="flex items-center gap-2xs"> <Globe class="size-3.5 shrink-0" aria-hidden="true" /> <a href={repo.website} rel="external ugc nofollow noopener noreferrer" >{trimScheme(repo.website)}</a > </span> {/if} </div>
<TopicList {topics} /> </div>
{@render repoActions("mt-xs flex flex-wrap items-start justify-end gap-xs sm:hidden")}</section>