Add components to view topics and posts

[rbdr/forum] / src / components / post_content / post_content.svelte

<script>
  export let post;
  export let index = 0;
  export let count = 1;

  import { _ } from 'svelte-i18n';
  import Glyph from '$/components/glyph/glyph.svelte';

  const timestampToISO = (timestamp) => (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>
    <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
      <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
        {timestampToISO(post.created_at)}
      </a>
    </time>
    {#if post.topic}
    <span class="h-card">
      ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
    </span>
    {/if}
  </aside>
  <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
    {post.text}
  </article>
  <hr/>

<style>
  .post-meta * {
    vertical-align: top;
  }

  article {
    white-space: pre;
  }
</style>