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