[rbdr/forum] / src / lib / components / post / post.svelte

<script lang="ts">
        import type { Post } from '$lib/data/types';

        export let post: Post;
        export let index = 0;
        export let count = 1;

        import { _ } from 'svelte-i18n';
        import Glyph from '$lib/components/glyph/glyph.svelte';

        const timestampToISO = (timestamp: number) => new Date(timestamp).toISOString();
</script>

<aside
        class="post-meta"
        title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
>
        <Glyph uuid={post.author_id} />
        {#if post.author}
                <span class="h-card">
                        {$_('post.author_credit')}
                        <a
                                href="/a/{post.author.handle}"
                                class="p-nickname u-url underline text-blue-600 visited:text-purple-500"
                                >{post.author.handle}</a
                        >.
                </span>
        {:else}
                <span>????</span>
        {/if}
        <time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
                <a
                        title={$_('post.permalink_title')}
                        class="underline text-blue-600 visited:text-purple-500"
                        href="/p/{post.id}"
                >
                        {timestampToISO(post.created_at)}
                </a>
        </time>
        {#if post.topic}
                <span>
                        ({$_('post.topic_location')}
                        <a class="text-blue-600 underline visited:text-purple-500" href="/t/{post.topic.id}"
                                >{post.topic.title}</a
                        >.)
                </span>
        {/if}
</aside>
<article
        class="e-content whitespace-pre"
        title={$_('post.title', {
                values: { count: index + 1, total: count, author: post.author?.handle || '????' }
        })}
>
        {post.text}
</article>
<hr />

<style>
        .post-meta * {
                vertical-align: top;
        }

        article {
                white-space: pre;
        }
</style>