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