johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { RepoView } from '#lib/lexicons/dev/knotless/defs.ts';
	import { ago, plural, repoHref } from '#lib/format.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import Language from '#lib/atoms/Language.svelte';
	import PrivateTag from '#lib/atoms/PrivateTag.svelte';
	import Time from '#lib/atoms/Time.svelte';
	import type { Snippet } from 'svelte';
	/**
	 * Repositories, each with whose it is, what it is, what it is mostly
	 * written in, its stars and forks where the answer counts them, when it
	 * was made and whether it is private.
	 */
	type Shown = Pick<
		RepoView,
		| 'owner'
		| 'name'
		| 'description'
		| 'createdAt'
		| 'private'
		| 'language'
		| 'starCount'
		| 'forkCount'
	>;
	let { repos, empty }: { repos: Shown[]; empty: Snippet } = $props();
</script>

<div class="box">
	<ul class="list">
		{#each repos as r (r.owner.handle + '/' + r.name)}
			<li>
				<Avatar name={r.owner.handle} size="lg" did={r.owner.did} src={r.owner.avatar} />
				<div class="grow">
					<a class="clip" href={repoHref(r.owner.handle, r.name)}
						><span class="mute">{r.owner.handle}/</span><b>{r.name}</b></a
					>{#if r.private}{' '}<PrivateTag />{/if}
					<div class="meta clip">{r.description ?? 'No description'}</div>
					{#if r.language || r.starCount || r.forkCount}<div class="meta">
							{#if r.language}<Language language={r.language} />{/if}{#if r.starCount}<span
									class="tally"
									role="img"
									aria-label={plural(r.starCount, 'star', 'stars')}
									><Icon name="star" />{r.starCount.toLocaleString('en')}</span
								>{/if}{#if r.forkCount}<span
									class="tally"
									role="img"
									aria-label={plural(r.forkCount, 'fork', 'forks')}
									><Icon name="fork" />{r.forkCount.toLocaleString('en')}</span
								>{/if}
						</div>{/if}
				</div>
				<span class="mute hide-sm"><Time at={r.createdAt} show={ago} /></span>
			</li>
		{:else}
			<li class="blank">{@render empty()}</li>
		{/each}
	</ul>
</div>