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

   1 <script>
   2         export let post;
   3         export let index = 0;
   4         export let count = 1;
   5
   6         import { _ } from 'svelte-i18n';
   7         import Glyph from '$/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   <span>
  27     ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
  28   </span>
  29 </aside>
  30 <article
  31         class="e-content"
  32         title={$_('post.title', {
  33                 values: { count: index + 1, total: count, author: post.author.handle }
  34         })}
  35 >
  36         {post.text}
  37 </article>
  38 <hr />
  39
  40 <style>
  41         .post-meta * {
  42                 vertical-align: top;
  43         }
  44
  45         article {
  46                 white-space: pre;
  47         }
  48 </style>