git.r.bdr.sh - rbdr/forum/blob - src/lib/components/post/post.svelte

   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         <span class="h-card">
  20                 {$_('post.author_credit')}
  21                 <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
  22         </span>
  23         <time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
  24                 <a title={$_('post.permalink_title')} href="/p/{post.id}">
  25                         {timestampToISO(post.created_at)}
  26                 </a>
  27         </time>
  28         {#if post.topic}
  29                 <span>
  30                         ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
  31                 </span>
  32         {/if}
  33 </aside>
  34 <article
  35         class="e-content"
  36         title={$_('post.title', {
  37                 values: { count: index + 1, total: count, author: post.author.handle }
  38         })}
  39 >
  40         {post.text}
  41 </article>
  42 <hr />
  43
  44 <style>
  45         .post-meta * {
  46                 vertical-align: top;
  47         }
  48
  49         article {
  50                 white-space: pre;
  51         }
  52 </style>