chadtmiller.com/knotless

<script lang="ts" module>
	export type Tab = 'code' | 'commits' | 'pulls' | 'issues';
</script>

<script lang="ts">
	import type { RepoHead } from '#lib/api/RepoHead.ts';
	import { repoHref, urlPath } from '#lib/format.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import CopyButton from '#lib/atoms/CopyButton.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import TabLink from '#lib/molecules/TabLink.svelte';

	/** What every page about a repository shows above itself: whose it is, how to clone it, and its tabs. */
	let { repo, tab }: { repo: RepoHead; tab: Tab } = $props();
	const href = (tail = '') => repoHref(repo.authority, repo.name, tail);
	const clone = $derived(`git clone knotless://${repo.authority}/${repo.name}`);
</script>

<div class="repohead">
	<div class="about">
		<h1><Avatar name={repo.authority} src={repo.avatar} /><a href="/{urlPath(repo.authority)}">{repo.authority}</a><span class="mute">/</span><a href={href()}><b>{repo.name}</b></a></h1>
		{#if repo.description}<p>{repo.description}</p>{/if}
		{#if repo.forkOf}<p><Icon name="fork" /> Forked from <a href={repo.forkOf.href}>{repo.forkOf.shown}</a></p>{/if}
	</div>
	<div class="get">
		<div class="clone"><code>{clone}</code><CopyButton text={clone} /></div>
		<p>needs the knotless git helper. <a href="/start">set it up</a></p>
	</div>
</div>
<nav class="tabs">
	<TabLink href={href()} icon="code" label="Code" current={tab === 'code'} />
	<TabLink href={href(`/commits/${urlPath(repo.head)}`)} icon="commit" label="Commits" current={tab === 'commits'} />
	<TabLink href={href('/pulls')} icon="pull" label="Pulls" count={repo.pulls} current={tab === 'pulls'} />
	<TabLink href={href('/issues')} icon="issue" label="Issues" count={repo.issues} current={tab === 'issues'} />
</nav>