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