Use tailwind, reference types

[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} />
	<span class="h-card">
		{$_('post.author_credit')}
		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
	</span>
	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
		<a title={$_('post.permalink_title')} href="/p/{post.id}">
			{timestampToISO(post.created_at)}
		</a>
	</time>
	{#if post.topic}
		<span>
			({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
		</span>
	{/if}
</aside>
<article
	class="e-content"
	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>