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

   1 <script lang="ts">
   2         import type { Topic } from '$lib/data/types';
   3
   4         export let topic: Topic;
   5
   6         import { _ } from 'svelte-i18n';
   7         import Post from '$lib/components/post/post.svelte';
   8         import { readableTime } from '$lib/utils/readable_time';
   9
  10         $: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
  11         $: remaining = readableTime(remainingTime);
  12 </script>
  13
  14 <div class="h-entry" title={$_('topic.title')}>
  15         <h1 class="py-4 font-bold text-3xl p-name">{topic.title}</h1>
  16         <aside class="topic-meta" title={$_('topic.metadata_title')}>
  17                 {#if topic.forum}
  18                         <span class="topic-location">
  19                                 {$_('topic.category_location')}
  20                                 <a href="/f/{topic.forum.id}" class="p-category underline text-blue-600 visited:text-purple-500">
  21                                         {topic.forum.glyph}
  22                                         {$_(topic.forum.label)}
  23                                 </a>.
  24                         </span>
  25                 {/if}
  26                 <span class="topic-ttl">
  27                         <a class="u-url u-uid underline text-blue-600 visited:text-purple-500" title={$_('topic.permalink_title')} href="/t/{topic.id}">
  28                                 ({$_('topic.remaining_time', {
  29                                         values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
  30                                 })})
  31                         </a>
  32                 </span>
  33         </aside>
  34         {#if topic.tags}
  35                 <aside class="topic-tags" title={$_('topic.tags_title')}>
  36                         {$_('topic.tags_location')}
  37                         {#each topic.tags as tag}
  38                                 <a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
  39                                         {tag.tag}<span class="tag-weight">({tag.count})</span></a
  40       >{' '}
  41                         {/each}
  42                 </aside>
  43         {/if}
  44         {#if topic.posts}
  45     {#each topic.posts as post, index}
  46       <Post {post} {index} count={topic.posts.length} />
  47     {/each}
  48         {/if}
  49 </div>