git.r.bdr.sh - rbdr/forum/blob - src/components/post_content/post_content.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   <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: index + 1, total: count } })}">
  12     <Glyph uuid={post.author.id} />
  13     <span class="h-card">
  14       {$_('post.author_credit')} <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
  15     </span>
  16     <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
  17       <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
  18         {timestampToISO(post.created_at)}
  19       </a>
  20     </time>
  21     {#if post.topic}
  22     <span class="h-card">
  23       ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
  24     </span>
  25     {/if}
  26   </aside>
  27   <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
  28     {post.text}
  29   </article>
  30   <hr/>
  31
  32 <style>
  33   .post-meta * {
  34     vertical-align: top;
  35   }
  36
  37   article {
  38     white-space: pre;
  39   }
  40 </style>