]>
Commit | Line | Data |
---|---|---|
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> |