Don't remember what this WIP was about

[rbdr/forum] / src / lib / components / post / post.svelte

<script lang="ts">
	import type { Post } from '$lib/data/types';

	export let post: Post;
	export let index = 0;
	export let count = 1;

	import { _ } from 'svelte-i18n';
	import Glyph from '$lib/components/glyph/glyph.svelte';

	const timestampToISO = (timestamp: number) => new Date(timestamp).toISOString();
</script>

<aside
	class="post-meta"
	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
>
	<Glyph uuid={post.author_id} />
	{#if post.author}
		<span class="h-card">
			{$_('post.author_credit')}
			<a
				href="/a/{post.author.handle}"
				class="p-nickname u-url underline text-blue-600 visited:text-purple-500"
				>{post.author.handle}</a
			>.
		</span>
	{:else}
		<span>????</span>
	{/if}
	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
		<a
			title={$_('post.permalink_title')}
			class="underline text-blue-600 visited:text-purple-500"
			href="/p/{post.id}"
		>
			{timestampToISO(post.created_at)}
		</a>
	</time>
	{#if post.topic}
		<span>
			({$_('post.topic_location')}
			<a class="text-blue-600 underline visited:text-purple-500" href="/t/{post.topic.id}"
				>{post.topic.title}</a
			>.)
		</span>
	{/if}
</aside>
<article
	class="e-content whitespace-pre"
	title={$_('post.title', {
		values: { count: index + 1, total: count, author: post.author?.handle || '????' }
	})}
>
	{post.text}
</article>
<hr />

<style>
	.post-meta * {
		vertical-align: top;
	}

	article {
		white-space: pre;
	}
</style>