<script lang="ts">
- export let post;
+ 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) => new Date(timestamp).toISOString();
+ 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} />
- <span class="h-card">
- {$_('post.author_credit')}
- <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
- </span>
+ <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')} href="/p/{post.id}">
+ <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 href="/t/{post.topic.id}">{post.topic.title}</a>.)
- </span>
- {/if}
+ {#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"
+ class="e-content whitespace-pre"
title={$_('post.title', {
- values: { count: index + 1, total: count, author: post.author.handle }
+ values: { count: index + 1, total: count, author: post.author?.handle || '????' }
})}
>
{post.text}