]> git.r.bdr.sh - rbdr/forum/blob - src/lib/components/post/post.svelte
d909be1c02936119e6f7a4249517f5f12ac97929
[rbdr/forum] / src / lib / components / post / post.svelte
1 <script lang="ts">
2 export let post;
3 export let index = 0;
4 export let count = 1;
5
6 import { _ } from 'svelte-i18n';
7 import Glyph from '$lib/components/glyph/glyph.svelte';
8
9 const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
10 </script>
11
12 <aside
13 class="post-meta"
14 title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
15 >
16 <Glyph uuid={post.author.id} />
17 <span class="h-card">
18 {$_('post.author_credit')}
19 <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
20 </span>
21 <time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
22 <a title={$_('post.permalink_title')} href="/p/{post.id}">
23 {timestampToISO(post.created_at)}
24 </a>
25 </time>
26 {#if post.topic}
27 <span>
28 ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
29 </span>
30 {/if}
31 </aside>
32 <article
33 class="e-content"
34 title={$_('post.title', {
35 values: { count: index + 1, total: count, author: post.author.handle }
36 })}
37 >
38 {post.text}
39 </article>
40 <hr />
41
42 <style>
43 .post-meta * {
44 vertical-align: top;
45 }
46
47 article {
48 white-space: pre;
49 }
50 </style>