]> git.r.bdr.sh - rbdr/forum/blob - src/components/post/post.svelte
Add tests for first batch of components
[rbdr/forum] / src / components / post / post.svelte
1 <script>
2 export let post;
3 export let index = 0;
4 export let count = 1;
5
6 import { _ } from 'svelte-i18n';
7 import Glyph from '$/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 <span>
27 ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
28 </span>
29 </aside>
30 <article
31 class="e-content"
32 title={$_('post.title', {
33 values: { count: index + 1, total: count, author: post.author.handle }
34 })}
35 >
36 {post.text}
37 </article>
38 <hr />
39
40 <style>
41 .post-meta * {
42 vertical-align: top;
43 }
44
45 article {
46 white-space: pre;
47 }
48 </style>