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

   1 <script lang="ts">
   2         export let post;
   3         export let index = 0;
   4         export let count = 1;
   5
   6         import { _ } from 'svelte-i18n';
   7         import Glyph from '$lib/components/glyph/glyph.svelte';
   8
   9         const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
  10 </script>
  11
  12 <aside
  13         class="post-meta"
  14         title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
  15 >
  16         <Glyph uuid={post.author.id} />
  17         <span class="h-card">
  18                 {$_('post.author_credit')}
  19                 <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
  20         </span>
  21         <time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
  22                 <a title={$_('post.permalink_title')} href="/p/{post.id}">
  23                         {timestampToISO(post.created_at)}
  24                 </a>
  25         </time>
  26         {#if post.topic}
  27                 <span>
  28                         ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
  29                 </span>
  30         {/if}
  31 </aside>
  32 <article
  33         class="e-content"
  34         title={$_('post.title', {
  35                 values: { count: index + 1, total: count, author: post.author.handle }
  36         })}
  37 >
  38         {post.text}
  39 </article>
  40 <hr />
  41
  42 <style>
  43         .post-meta * {
  44                 vertical-align: top;
  45         }
  46
  47         article {
  48                 white-space: pre;
  49         }
  50 </style>