Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131<script lang="ts"> import { resolve } from "$app/paths"; import GitFork from "$icon/git-fork"; import Globe from "$icon/globe"; import Star from "$icon/star"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Button from "$lib/components/ui/Button.svelte"; import Tag from "$lib/components/ui/Tag.svelte"; import { getAuth } from "$lib/auth.svelte"; import StarButton from "./StarButton.svelte"; import type { RepoCounts, RepoInfo } from "./types";
interface Props { repo: RepoInfo; counts: RepoCounts; viewerStarRkey?: string | null; }
let { repo, counts, viewerStarRkey }: Props = $props();
const auth = getAuth(); const signedIn = $derived(Boolean(auth.currentDid)); const base = $derived(`/${repo.ownerHandle}/${repo.name}`); const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");</script>
<section class="mb-2 px-4 py-2"> <div class="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row"> <div class="flex min-w-0 flex-col gap-2"> <div class="flex flex-wrap items-center gap-2 text-lg"> <a href={resolve(`/${repo.ownerHandle}` as "/")} class="flex items-center gap-2 text-foreground-default no-underline hover:underline" > <Avatar did={repo.ownerDid} handle={repo.ownerHandle} size="size-6" tiny /> {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>
{#if repo.source} <div class="flex flex-wrap items-center gap-1 text-sm text-foreground-muted"> <GitFork class="size-3 shrink-0" aria-hidden="true" /> <span>forked from</span> <a href={resolve(`/${repo.source.ownerHandle}/${repo.source.name}` as "/")} class="underline" > {repo.source.ownerHandle}/{repo.source.name} </a> </div> {/if} </div>
<div class="flex shrink-0 items-start gap-2"> {#if signedIn} <StarButton repoDid={repo.repoDid ?? ""} repoOwnerHandle={repo.ownerHandle} repoName={repo.name} initialCount={counts.stars} initialRkey={viewerStarRkey} /> {:else} <a href={resolve(`${base}/stars` as "/")} class="inline-flex items-center gap-1.5 rounded border border-border-default px-2 py-1 text-sm text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline" title="Starred by" > <Star class="size-4 shrink-0" aria-hidden="true" /> {counts.stars} </a> {/if}
<div class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default" > <Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" class="min-h-7.5 rounded-none border-0 before:rounded-none before:rounded-l-sm" > <GitFork class="size-4 shrink-0" aria-hidden="true" /> <span>Fork</span> </Button> <Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="sm" class="min-h-7.5 rounded-none" title="Forked by" > {counts.forks} </Button> </div> </div> </div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-foreground-muted"> {#if repo.description} <span>{repo.description}</span> {:else} <span class="italic">This repository has no description</span> {/if}
{#if repo.website} <span class="flex items-center gap-1"> <Globe class="size-4 shrink-0" aria-hidden="true" /> <a href={repo.website} rel="external ugc nofollow noopener noreferrer" >{trimScheme(repo.website)}</a > </span> {/if}
{#if repo.topics?.length} <div class="flex flex-wrap items-center gap-1"> {#each repo.topics as topic (topic)} <Tag color="gray">{topic}</Tag> {/each} </div> {/if} </div></section>