aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components/post/post.svelte
blob: dfabdce94ff62317d579cedf63c8a74de228e722 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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>