johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { CommitView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type * as getBlame from '#lib/lexicons/dev/knotless/getBlame.ts';
	import { age, repoHref, subject, urlPath, whenCommitted } from '#lib/format.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import Time from '#lib/atoms/Time.svelte';
	import CodeView from './CodeView.svelte';
	/**
	 * A text file with who last changed each run of its lines beside them:
	 * when, by whom, and the commit's subject, linked to it; and, where the
	 * file was there before the commit, a link to blame it again as it was.
	 */
	let {
		authority,
		name,
		text,
		lines,
		ranges,
		hunks,
		commits
	}: {
		authority: string;
		name: string;
		text: string;
		lines: number;
		ranges?: string | null;
		hunks: getBlame.Hunk[];
		commits: CommitView[];
	} = $props();
	const by = $derived(new Map(commits.map((c) => [c.sha, c])));
	const href = (tail: string) => repoHref(authority, name, tail);
</script>

{#snippet gutter()}
	<div class="blame-runs">
		{#each hunks as h (h.start)}
			{@const c = by.get(h.sha)}
			<div class="blame-run" style="--run:{h.count}">
				{#if c}
					<div class="blame-head">
						<a class="blame-when" href={href(`/commit/${c.sha}`)}
							><Time at={whenCommitted(c)} show={age} /></a
						>
						<span class="blame-who" title={c.author.name}
							><Avatar
								name={c.author.name}
								did={c.author.actor?.did}
								src={c.author.actor?.avatar}
							/></span
						>
						<a class="blame-subject clip" href={href(`/commit/${c.sha}`)} title={subject(c.message)}
							>{subject(c.message)}</a
						>
						{#if h.previous}<a
								class="blame-prior"
								href={href(`/blame/${h.previous.sha}/${urlPath(h.previous.path)}`)}
								title="Blame before this commit"
								aria-label="Blame before this commit"><Icon name="versions" /></a
							>{/if}
					</div>
				{/if}
			</div>
		{/each}
	</div>
{/snippet}

<CodeView {text} {lines} {ranges} {gutter} />