]> git.r.bdr.sh - rbdr/forum/blob - src/lib/components/post/post.svelte
b0f99e44163da2a38a55af209ecaf935f76a7a64
[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 href="/a/{post.author.handle}" class="p-nickname u-url underline text-blue-600 visited:text-purple-500">{post.author.handle}</a>.
23 </span>
24 {:else}
25 <span>????</span>
26 {/if}
27 <time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
28 <a title={$_('post.permalink_title')} class="underline text-blue-600 visited:text-purple-500" href="/p/{post.id}">
29 {timestampToISO(post.created_at)}
30 </a>
31 </time>
32 {#if post.topic}
33 <span>
34 ({$_('post.topic_location')} <a class="text-blue-600 underline visited:text-purple-500" href="/t/{post.topic.id}">{post.topic.title}</a>.)
35 </span>
36 {/if}
37 </aside>
38 <article
39 class="e-content whitespace-pre"
40 title={$_('post.title', {
41 values: { count: index + 1, total: count, author: post.author?.handle || '????' }
42 })}
43 >
44 {post.text}
45 </article>
46 <hr />
47
48 <style>
49 .post-meta * {
50 vertical-align: top;
51 }
52
53 article {
54 white-space: pre;
55 }
56 </style>