aboutsummaryrefslogtreecommitdiff
path: root/src/components/post_content/post_content.svelte
blob: 5d8ef1cb179d1e1bdf6cc033b1078ec7d6c949fb (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
<script>
	export let post;
	export let index = 0;
	export let count = 1;

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

	const timestampToISO = (timestamp) => 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 class="h-card">
			({$_('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>