johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { fences } from '#lib/highlight.ts';
	import { diagrams } from '#lib/mermaid.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import { ago } from '#lib/format.ts';
	import Time from '#lib/atoms/Time.svelte';
	import Person from '#lib/molecules/Person.svelte';
	import { tasked, type Ticking } from '#lib/tasks.ts';
	/**
	 * Something said on a pull or an issue: who said it, when, whether they
	 * changed it since, and what; `end` beside who said it, then `menu`, of
	 * what can be done with it, and `below` under what it says, for what
	 * others made of it. `id` is its anchor on the page. Its task boxes
	 * strike through what they tick; with `body`, what `html` was drawn
	 * from, and `tick`, its author's, they can be ticked, `tick` keeping
	 * the body each makes.
	 */
	let {
		id,
		author,
		did,
		avatar,
		bot,
		said,
		createdAt,
		updatedAt,
		html,
		end,
		menu,
		below,
		body,
		tick
	}: {
		id?: string;
		author: string;
		did?: string;
		avatar?: string | null;
		/** Whether the author says it is a bot. */
		bot?: boolean;
		said: string;
		createdAt: string;
		updatedAt?: string | null;
		html: string;
		end?: Snippet;
		menu?: Snippet;
		below?: Snippet;
		body?: string | null;
		tick?: Ticking;
	} = $props();
</script>

<div class="box comment" {id}>
	<div class="boxhead">
		<Avatar name={author} {did} src={avatar} />
		<span class="byline"
			><Person handle={author} {bot} /><span class="mute"
				>{`${said} `}<Time at={createdAt} show={(t) => ago(t, 'on ')} />{updatedAt
					? ', edited'
					: ''}</span
			></span
		>
		{#if end}<span class="end">{@render end()}</span>{/if}
		{#if menu}<span class:end={!end}>{@render menu()}</span>{/if}
	</div>
	<div
		class="prose"
		use:diagrams={html}
		use:fences={html}
		{@attach tasked(body ?? '', html, body ? tick : undefined)}
	>
		{@html html}
	</div>
	{#if below}{@render below()}{/if}
</div>