johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import { isMarkdown, plural, repoHref, urlPath } from '#lib/format.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import FileViews from '#lib/molecules/FileViews.svelte';
	import BlameView from '#lib/organisms/BlameView.svelte';
	import Toolbar from '#lib/organisms/Toolbar.svelte';
	import RepoPage from '#lib/templates/RepoPage.svelte';
	let { data } = $props();
	const b = $derived(data.blame);
	const r = $derived(data.repo);
	const at = (view: string) =>
		repoHref(data.authority, r.name, `/${view}/${urlPath(b.ref)}/${urlPath(b.path)}`);
	const markdown = $derived(isMarkdown(b.path));
</script>

<RepoPage repo={r} tab="code" title="Blame · {b.path} · {r.name}">
	<Toolbar
		authority={data.authority}
		name={r.name}
		rev={b.ref}
		view="blame"
		path={b.path}
		branches={data.branches}
		head={r.defaultBranch}
		tags={data.tags}
	/>
	<div class="box">
		<div class="boxhead">
			<FileViews
				preview={markdown ? at('blob') : undefined}
				code={markdown ? `${at('blob')}?plain=1` : at('blob')}
				blame={at('blame')}
				current="blame"
			/>
			<span class="mute"
				>{`${plural(b.lines, 'line', 'lines')} · ${plural(b.commits.length, 'commit', 'commits')}`}</span
			>
			<span class="end"></span>
			<a class="btn" href={at('raw')} data-sveltekit-reload>Raw</a>
			<a class="btn" href={at('commits')}><Icon name="history" />History</a>
		</div>
		<BlameView
			authority={data.authority}
			name={r.name}
			text={b.text}
			lines={b.lines}
			ranges={b.ranges}
			hunks={b.hunks}
			commits={b.commits}
		/>
	</div>
</RepoPage>