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