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
  21                                         href="/f/{topic.forum.id}"
  22                                         class="p-category underline text-blue-600 visited:text-purple-500"
  23                                 >
  24                                         {topic.forum.glyph}
  25                                         {$_(topic.forum.label)}
  26                                 </a>.
  27                         </span>
  28                 {/if}
  29                 <span class="topic-ttl">
  30                         <a
  31                                 class="u-url u-uid underline text-blue-600 visited:text-purple-500"
  32                                 title={$_('topic.permalink_title')}
  33                                 href="/t/{topic.id}"
  34                         >
  35                                 ({$_('topic.remaining_time', {
  36                                         values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
  37                                 })})
  38                         </a>
  39                 </span>
  40         </aside>
  41         {#if topic.tags}
  42                 <aside class="topic-tags" title={$_('topic.tags_title')}>
  43                         {$_('topic.tags_location')}
  44                         {#each topic.tags as tag}
  45                                 <a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
  46                                         {tag.tag}<span class="tag-weight">({tag.count})</span></a
  47                                 >{' '}
  48                         {/each}
  49                 </aside>
  50         {/if}
  51         {#if topic.posts}
  52                 {#each topic.posts as post, index}
  53                         <Post {post} {index} count={topic.posts.length} />
  54                 {/each}
  55         {/if}
  56 </div>