src/components/topic/topic.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<script>
  export let id;

  import { _ } from 'svelte-i18n';
  import { getTopic } from '$/stores/topic';

  import ErrorBlock from '$/components/error_block/error_block.svelte';
  import Loader from '$/components/loader/loader.svelte';
  import PostContent from '$/components/post_content/post_content.svelte';
  import { readableTime } from '$/utils/readable_time.js';

  $: store = getTopic(id);
  $: topic = $store.data;
  $: remainingTime = topic ? (topic.updated_at + topic.ttl) - Date.now() : 0;
  $: remaining = readableTime(remainingTime);
</script>

{#if $store.loading}
  <Loader />
{/if}
{#if $store.error}
  <ErrorBlock message={$_('topic.error.unavailable')} />
{/if}
{#if topic}
  <div class="h-entry" title="{$_('topic.title')}">
    <h1 class="p-name">{topic.title}</h1>
    <aside class="topic-meta" title="{$_('topic.metadata_title')}">
      {#if topic.forum}
      <span class="topic-location">{$_('topic.category_location')} <a href="/f/{topic.forum.id}"
          class="p-category">{topic.forum.glyph} {$_(topic.forum.label)}</a>.</span>
      {/if}
      <span class="topic-ttl"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/{topic.id}">({$_('topic.remaining_time', { values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } })})</a>.</span>
    </aside>
    {#if topic.tags.length > 0}
      <aside class="topic-tags" title="{$_('topic.tags_title')}">
        {$_('topic.tags_location')}
        {#each topic.tags as tag}
          <a href="/g/{tag.id}" class="p-category">{tag.id}<span class="tag-weight">({tag.weight})</span></a>{' '}
        {/each}
      </aside>
    {/if}
    {#each topic.posts as post, index}
      <PostContent post={post} index={index} count={topic.posts.length} />
    {/each}
  </div>
{/if}