]> git.r.bdr.sh - rbdr/forum/blob - src/components/post_content/post_content.svelte
671c07c02b7dc180329eda07ef459070646f0b3d
[rbdr/forum] / src / components / post_content / post_content.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 <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: index + 1, total: count } })}">
12 <Glyph uuid={post.author.id} />
13 <span class="h-card">
14 {$_('post.author_credit')} <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
15 </span>
16 <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
17 <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
18 {timestampToISO(post.created_at)}
19 </a>
20 </time>
21 {#if post.topic}
22 <span class="h-card">
23 ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
24 </span>
25 {/if}
26 </aside>
27 <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
28 {post.text}
29 </article>
30 <hr/>
31
32 <style>
33 .post-meta * {
34 vertical-align: top;
35 }
36
37 article {
38 white-space: pre;
39 }
40 </style>