]>
Commit | Line | Data |
---|---|---|
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> |