From 58f7d52150456713d3132408668a92d0f6f3d084 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Thu, 15 Apr 2021 23:06:26 +0200
Subject: Port to sveltekit

---
 src/components/error_block/error_block.svelte      | 54 ++++++------
 src/components/footer/footer.svelte                | 44 +++++-----
 src/components/forum/forum.svelte                  | 33 ++------
 src/components/forum_list/forum_list.svelte        | 88 ++++++++++----------
 src/components/glyph/glyph.svelte                  | 62 +++++++-------
 src/components/header/header.svelte                | 95 +++++++++++++---------
 src/components/home/home.svelte                    |  2 +-
 src/components/invalid_route/invalid_route.svelte  |  2 +-
 .../language_selector/language_selector.svelte     | 33 ++++----
 src/components/loader/loader.svelte                |  2 +-
 src/components/post/post.svelte                    | 63 ++++++++++----
 src/components/post_content/post_content.svelte    | 74 +++++++++--------
 src/components/tag/tag.svelte                      | 32 ++------
 src/components/topic/topic.svelte                  | 80 +++++++++---------
 src/components/topic_summary/topic_summary.svelte  | 24 ++++--
 15 files changed, 357 insertions(+), 331 deletions(-)

(limited to 'src/components')

diff --git a/src/components/error_block/error_block.svelte b/src/components/error_block/error_block.svelte
index b85a2ea..3a43a1e 100644
--- a/src/components/error_block/error_block.svelte
+++ b/src/components/error_block/error_block.svelte
@@ -1,38 +1,40 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  export let message;
+	import { _ } from 'svelte-i18n';
+	export let message;
 
-  import { blink } from '$/animations/blink';
+	import { blink } from '$/animations/blink';
 </script>
 
 <div transition:blink>
-  <h2>{$_('error.generic.title')}</h2>
-  <p>{message || $_('error.generic.message')}</p>
+	<h2>{$_('error.generic.title')}</h2>
+	<p>{message || $_('error.generic.message')}</p>
 </div>
 
 <style>
-  div {
-    background: repeating-linear-gradient( -45deg, red, red 5px, black 5px, black 10px );
-    border: 5px solid red;
-    color: yellow;
-    font-family: 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
-    margin: 0 10px 0 0;
-    text-align: center;
-    overflow: hidden;
-  }
+	div {
+		background: repeating-linear-gradient(-45deg, red, red 5px, black 5px, black 10px);
+		border: 5px solid red;
+		color: yellow;
+		font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体',
+			YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3,
+			'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
+		margin: 0 10px 0 0;
+		text-align: center;
+		overflow: hidden;
+	}
 
-  h2, p {
-    background-color: black;
-    font-size: 1em;
-  }
+	h2,
+	p {
+		background-color: black;
+		font-size: 1em;
+	}
 
-  h2 {
-    text-transform: uppercase;
-    margin: 100px 5px 10px;
-  }
+	h2 {
+		text-transform: uppercase;
+		margin: 100px 5px 10px;
+	}
 
-  p {
-    margin: 10px 5px 100px;
-  }
+	p {
+		margin: 10px 5px 100px;
+	}
 </style>
-
diff --git a/src/components/footer/footer.svelte b/src/components/footer/footer.svelte
index 317319e..2d5f8ff 100644
--- a/src/components/footer/footer.svelte
+++ b/src/components/footer/footer.svelte
@@ -1,36 +1,30 @@
 <script>
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 
-  import LanguageSelector from '$/components/language_selector/language_selector.svelte';
+	import LanguageSelector from '$/components/language_selector/language_selector.svelte';
 
-  const licenseUrl = 'https://gitlab.com/rbdr/forum/';
+	const licenseUrl = 'https://gitlab.com/rbdr/forum/';
 </script>
 
-<footer title="{$_('footer.title')}">
-  <ul>
-    <li>{@html $_('footer.license', { values: { licenseUrl } })}</li>
-    <li>{$_('footer.choose_language')}: <LanguageSelector /></li>
-  </ul>
+<footer title={$_('footer.title')}>
+	<ul>
+		<li>{@html $_('footer.license', { values: { licenseUrl } })}</li>
+		<li>{$_('footer.choose_language')}: <LanguageSelector /></li>
+	</ul>
 </footer>
 
 <style>
-  footer {
-    grid-column: col-start 1 / span 12;
-    border-top: 1px solid black;
-  }
+	footer {
+		grid-column: col-start 1 / span 12;
+		border-top: 1px solid black;
+	}
 
-  ul {
-    padding: 0;
-  }
+	ul {
+		padding: 0;
+	}
 
-  li {
-    display: inline;
-    margin: 5px;
-  }
-
-  a {
-    text-decoration: none;
-    line-height: 3em;
-    display: inline-block;
-  }
+	li {
+		display: inline;
+		margin: 5px;
+	}
 </style>
diff --git a/src/components/forum/forum.svelte b/src/components/forum/forum.svelte
index 8fc0538..ea9b206 100644
--- a/src/components/forum/forum.svelte
+++ b/src/components/forum/forum.svelte
@@ -1,28 +1,13 @@
 <script>
-  export let id;
+	export let forum;
 
-  import { _ } from 'svelte-i18n';
-  import { getForum } from '$/stores/forum';
-  import ErrorBlock from '$/components/error_block/error_block.svelte';
-  import Loader from '$/components/loader/loader.svelte';
-
-  import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
-
-  $: store = getForum(id);
-  $: forum = $store.data;
+	import { _ } from 'svelte-i18n';
+	import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
 </script>
 
-{#if $store.loading}
-  <Loader />
-{/if}
-{#if $store.error}
-  <ErrorBlock message={$_('forum.error.unavailable')} />
-{/if}
-{#if forum}
-  <h1>{forum.glyph} {$_(forum.label)}</h1>
-  <ul>
-    {#each forum.topics as topic}
-      <TopicSummary topic={topic} />
-    {/each}
-  </ul>
-{/if}
+<h1>{forum.glyph} {$_(forum.label)}</h1>
+<ul>
+	{#each forum.topics as topic}
+		<TopicSummary {topic} />
+	{/each}
+</ul>
diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
index 2998c09..7bfb7b2 100644
--- a/src/components/forum_list/forum_list.svelte
+++ b/src/components/forum_list/forum_list.svelte
@@ -1,56 +1,56 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  import { forums } from '$/stores/forums';
-  import Loader from '$/components/loader/loader.svelte';
-  import ErrorBlock from '$/components/error_block/error_block.svelte';
+	import { _ } from 'svelte-i18n';
+	import { forums } from '$/stores/forums';
+	import Loader from '$/components/loader/loader.svelte';
+	import ErrorBlock from '$/components/error_block/error_block.svelte';
 </script>
 
-<nav title="{$_('forum_list.title')}">
-  {#if $forums.loading}
-    <Loader />
-  {/if}
-  {#if $forums.error}
-    <ErrorBlock message={$_('forum_list.error.unavailable')} />
-  {/if}
-  <ul>
-    {#each $forums.data as forum}
-      <li>
-        <a href="/f/{forum.id}">
-          <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
-          <span class="navigation-label">{$_(forum.label)}</span>
-        </a>
-      </li>
-    {/each}
-  </ul>
+<nav title={$_('forum_list.title')}>
+	{#if $forums.loading}
+		<Loader />
+	{/if}
+	{#if $forums.error}
+		<ErrorBlock message={$_('forum_list.error.unavailable')} />
+	{/if}
+	<ul>
+		{#each $forums.data as forum}
+			<li>
+				<a href="/f/{forum.id}">
+					<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+					<span class="navigation-label">{$_(forum.label)}</span>
+				</a>
+			</li>
+		{/each}
+	</ul>
 </nav>
 
 <style>
-  nav {
-    grid-column: col-start 1;
-    grid-row: 2;
-    border-right: 1px solid black;
-  }
+	nav {
+		grid-column: col-start 1;
+		grid-row: 2;
+		border-right: 1px solid black;
+	}
 
-  ul {
-    padding: 0;
-  }
+	ul {
+		padding: 0;
+	}
 
-  li {
-    display: block;
-    text-align: left;
-    margin-bottom: 20px;
-  }
+	li {
+		display: block;
+		text-align: left;
+		margin-bottom: 20px;
+	}
 
-  .navigation-glyph {
-    font-size: 1.5rem;
-    display: block;
-  }
+	.navigation-glyph {
+		font-size: 1.5rem;
+		display: block;
+	}
 
-  .☽ {
-    font-size: 2rem;
-  }
+	.☽ {
+		font-size: 2rem;
+	}
 
-  a {
-    text-decoration: none;
-  }
+	a {
+		text-decoration: none;
+	}
 </style>
diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
index 32e8ee6..e430d42 100644
--- a/src/components/glyph/glyph.svelte
+++ b/src/components/glyph/glyph.svelte
@@ -1,41 +1,41 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  import { getGlyphHash } from '$/utils/glyph_hash';
+	import { _ } from 'svelte-i18n';
+	import { getGlyphHash } from '$/utils/glyph_hash';
 
-  export let uuid;
+	export let uuid;
 </script>
 
-<div class="glyphicon" aria-hidden="true" title="{$_('glyph.title')}">
-  {#each getGlyphHash(uuid) as fragment}
-    <span class="{fragment.glyph}" style="color: {fragment.color} ">
-      {fragment.glyph}
-    </span>
-  {/each}
+<div class="glyphicon" aria-hidden="true" title={$_('glyph.title')}>
+	{#each getGlyphHash(uuid) as fragment}
+		<span class={fragment.glyph} style="color: {fragment.color} ">
+			{fragment.glyph}
+		</span>
+	{/each}
 </div>
 
 <style>
-  .glyphicon {
-    border: 1px solid black;
-    display: inline-block;
-    font-size: 1.4rem;
-    height: 48px;
-    margin-top: 5px;
-    width: 48px;
-    background-color: white;
-    padding: 2px;
-  }
+	.glyphicon {
+		border: 1px solid black;
+		display: inline-block;
+		font-size: 1.4rem;
+		height: 48px;
+		margin-top: 5px;
+		width: 48px;
+		background-color: white;
+		padding: 2px;
+	}
 
-  span {
-    display: block;
-    float: left;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-  }
+	span {
+		display: block;
+		float: left;
+		width: 24px;
+		height: 24px;
+		text-align: center;
+		line-height: 24px;
+	}
 
-  .☽ {
-    font-size: 2rem;
-    line-height: 19px;
-  }
+	.☽ {
+		font-size: 2rem;
+		line-height: 19px;
+	}
 </style>
diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
index c68a685..f33e77b 100644
--- a/src/components/header/header.svelte
+++ b/src/components/header/header.svelte
@@ -1,51 +1,68 @@
 <script>
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
+	import { version } from '$/config/config';
+	import { actions } from '$/stores/actions';
 
-  import { params } from '@roxi/routify';
-  import { version } from '$/config/config';
+	$: topic_id = $actions.topic_id;
 </script>
 
-<header title="{$_('header.title')}">
-  <ul>
-    <li><strong><a href="/" aria-label="{$_('header.long_version', { values: { version } })}">{$_('header.short_version', { values: { version } })}</a></strong></li>
-    <li><a href="/new" aria-label="{$_('header.action.new.title')}">{@html $_('header.action.new.display')}</a></li>
-    {#if $params.topic_id}
-      <li><a href="/reply/{$params.topic_id}" aria-label="{$_('header.action.reply.title')}">{@html $_('header.action.reply.display')}</a></li>
-    {/if}
-    <li><a href="/search" aria-label="{$_('header.action.search.title')}">{@html $_('header.action.search.display')}</a></li>
-    <li><a href="/logout" aria-label="{$_('header.action.log_out.title')}">{@html $_('header.action.log_out.display')}</a></li>
-  </ul>
+<header title={$_('header.title')}>
+	<ul>
+		<li>
+			<strong
+				><a href="/" aria-label={$_('header.long_version', { values: { version } })}
+					>{$_('header.short_version', { values: { version } })}</a
+				></strong
+			>
+		</li>
+		<li>
+			<a href="/new" aria-label={$_('header.action.new.title')}
+				>{@html $_('header.action.new.display')}</a
+			>
+		</li>
+		{#if topic_id}
+			<li>
+				<a href="/reply/{topic_id}" aria-label={$_('header.action.reply.title')}
+					>{@html $_('header.action.reply.display')}</a
+				>
+			</li>
+		{/if}
+		<li>
+			<a href="/search" aria-label={$_('header.action.search.title')}
+				>{@html $_('header.action.search.display')}</a
+			>
+		</li>
+		<li>
+			<a href="/logout" aria-label={$_('header.action.log_out.title')}
+				>{@html $_('header.action.log_out.display')}</a
+			>
+		</li>
+	</ul>
 </header>
 
 <style>
-  header {
-    grid-column: col-start 1 / span 12;
-    border-bottom: 1px solid black;
-  }
+	header {
+		grid-column: col-start 1 / span 12;
+		border-bottom: 1px solid black;
+	}
 
-  ul {
-    padding: 0;
-  }
+	ul {
+		padding: 0;
+	}
 
-  .action-key {
-    font-weight: bold;
-    text-decoration: underline;
-  }
+	li {
+		display: inline;
+		margin: 5px;
+	}
 
-  li {
-    display: inline;
-    margin: 5px;
-  }
-
-  a {
-    text-decoration: none;
-    line-height: 3em;
-    display: inline-block;
-  }
-
-  strong a {
-    color: blue;
-    text-decoration: underline;
-  }
+	a {
+		text-decoration: none;
+		line-height: 3em;
+		display: inline-block;
+	}
 
+	strong a {
+		color: blue;
+		text-decoration: underline;
+	}
 </style>
diff --git a/src/components/home/home.svelte b/src/components/home/home.svelte
index 7000137..fa4a70e 100644
--- a/src/components/home/home.svelte
+++ b/src/components/home/home.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 </script>
 
 <h1>{$_('home.title')}</h1>
diff --git a/src/components/invalid_route/invalid_route.svelte b/src/components/invalid_route/invalid_route.svelte
index aaf7927..2a3686c 100644
--- a/src/components/invalid_route/invalid_route.svelte
+++ b/src/components/invalid_route/invalid_route.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 </script>
 
 <h1>{$_('error.invalid_url.title')}</h1>
diff --git a/src/components/language_selector/language_selector.svelte b/src/components/language_selector/language_selector.svelte
index 3ac4894..3338810 100644
--- a/src/components/language_selector/language_selector.svelte
+++ b/src/components/language_selector/language_selector.svelte
@@ -1,28 +1,27 @@
 <script>
-  import { locale, locales } from 'svelte-i18n';
-  import { getLangNameFromCode } from 'language-name-map';
+	import { locale, locales } from 'svelte-i18n';
+	import { getLangNameFromCode } from 'language-name-map';
 
-  $: namedLocales = $locales
-    .map((code) => ({
-      code,
-      ...getLangNameFromCode(code)
-    }))
-    .sort((a, b) => a.native - b.native);
+	$: namedLocales = $locales
+	  .map((code) => ({
+	    code,
+	    ...getLangNameFromCode(code)
+	  }))
+	  .sort((a, b) => a.native - b.native);
 
-  let selected = $locale;
+	let selected = $locale;
 
-  $: {
-    console.log(`the current locale is ${selected}`);
-    locale.set(selected);
-  }
+	$: {
+	  console.log(`the current locale is ${selected}`);
+	  locale.set(selected);
+	}
 </script>
 
 <select bind:value={selected}>
-  {#each namedLocales as namedLocale}
-    <option value="{ namedLocale.code }">{ namedLocale.native }</option>
-  {/each}
+	{#each namedLocales as namedLocale}
+		<option value={namedLocale.code}>{namedLocale.native}</option>
+	{/each}
 </select>
 
 <style>
 </style>
-
diff --git a/src/components/loader/loader.svelte b/src/components/loader/loader.svelte
index e9787aa..8d53736 100644
--- a/src/components/loader/loader.svelte
+++ b/src/components/loader/loader.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 </script>
 
 <p>{$_('loader.message')}</p>
diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
index bf2a190..5d8ef1c 100644
--- a/src/components/post/post.svelte
+++ b/src/components/post/post.svelte
@@ -1,23 +1,50 @@
 <script>
-  export let id;
+	export let post;
+	export let index = 0;
+	export let count = 1;
 
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
+	import Glyph from '$/components/glyph/glyph.svelte';
 
-  import { getPost } from '$/stores/post';
-  import PostContent from '$/components/post_content/post_content.svelte';
-  import ErrorBlock from '$/components/error_block/error_block.svelte';
-  import Loader from '$/components/loader/loader.svelte';
-
-  $: store = getPost(id);
-  $: post = $store.data;
+	const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
 </script>
 
-{#if $store.loading}
-  <Loader />
-{/if}
-{#if $store.error}
-  <ErrorBlock message={$_('post.error.unavailable')} />
-{/if}
-{#if post}
-  <PostContent post={post} />
-{/if}
+<aside
+	class="post-meta"
+	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
+>
+	<Glyph uuid={post.author.id} />
+	<span class="h-card">
+		{$_('post.author_credit')}
+		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
+	</span>
+	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
+		<a title={$_('post.permalink_title')} href="/p/{post.id}">
+			{timestampToISO(post.created_at)}
+		</a>
+	</time>
+	{#if post.topic}
+		<span class="h-card">
+			({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+		</span>
+	{/if}
+</aside>
+<article
+	class="e-content"
+	title={$_('post.title', {
+		values: { count: index + 1, total: count, author: post.author.handle }
+	})}
+>
+	{post.text}
+</article>
+<hr />
+
+<style>
+	.post-meta * {
+		vertical-align: top;
+	}
+
+	article {
+		white-space: pre;
+	}
+</style>
diff --git a/src/components/post_content/post_content.svelte b/src/components/post_content/post_content.svelte
index 671c07c..5d8ef1c 100644
--- a/src/components/post_content/post_content.svelte
+++ b/src/components/post_content/post_content.svelte
@@ -1,40 +1,50 @@
 <script>
-  export let post;
-  export let index = 0;
-  export let count = 1;
+	export let post;
+	export let index = 0;
+	export let count = 1;
 
-  import { _ } from 'svelte-i18n';
-  import Glyph from '$/components/glyph/glyph.svelte';
+	import { _ } from 'svelte-i18n';
+	import Glyph from '$/components/glyph/glyph.svelte';
 
-  const timestampToISO = (timestamp) => (new Date(timestamp)).toISOString();
+	const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
 </script>
-  <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: index + 1, total: count } })}">
-    <Glyph uuid={post.author.id} />
-    <span class="h-card">
-      {$_('post.author_credit')} <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
-    </span>
-    <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
-      <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
-        {timestampToISO(post.created_at)}
-      </a>
-    </time>
-    {#if post.topic}
-    <span class="h-card">
-      ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
-    </span>
-    {/if}
-  </aside>
-  <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
-    {post.text}
-  </article>
-  <hr/>
+
+<aside
+	class="post-meta"
+	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
+>
+	<Glyph uuid={post.author.id} />
+	<span class="h-card">
+		{$_('post.author_credit')}
+		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
+	</span>
+	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
+		<a title={$_('post.permalink_title')} href="/p/{post.id}">
+			{timestampToISO(post.created_at)}
+		</a>
+	</time>
+	{#if post.topic}
+		<span class="h-card">
+			({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+		</span>
+	{/if}
+</aside>
+<article
+	class="e-content"
+	title={$_('post.title', {
+		values: { count: index + 1, total: count, author: post.author.handle }
+	})}
+>
+	{post.text}
+</article>
+<hr />
 
 <style>
-  .post-meta * {
-    vertical-align: top;
-  }
+	.post-meta * {
+		vertical-align: top;
+	}
 
-  article {
-    white-space: pre;
-  }
+	article {
+		white-space: pre;
+	}
 </style>
diff --git a/src/components/tag/tag.svelte b/src/components/tag/tag.svelte
index a14cd19..954cdaa 100644
--- a/src/components/tag/tag.svelte
+++ b/src/components/tag/tag.svelte
@@ -1,27 +1,13 @@
 <script>
-  export let id;
+	export let tag;
 
-  import { _ } from 'svelte-i18n';
-  import { getTag } from '$/stores/tag';
-  import ErrorBlock from '$/components/error_block/error_block.svelte';
-  import Loader from '$/components/loader/loader.svelte';
-  import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
-
-  $: store = getTag(id);
-  $: tag = $store.data;
+	import { _ } from 'svelte-i18n';
+	import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
 </script>
 
-{#if $store.loading}
-  <Loader />
-{/if}
-{#if $store.error}
-  <ErrorBlock message={$_('tag.error.unavailable')} />
-{/if}
-{#if tag}
-  <h1>{$_('tag.title')} {tag.id}</h1>
-  <ul>
-    {#each tag.topics as topic}
-      <TopicSummary topic={topic} />
-    {/each}
-  </ul>
-{/if}
+<h1>{$_('tag.title')}: {tag.id}</h1>
+<ul>
+	{#each tag.topics as topic}
+		<TopicSummary {topic} />
+	{/each}
+</ul>
diff --git a/src/components/topic/topic.svelte b/src/components/topic/topic.svelte
index 9be7346..181b429 100644
--- a/src/components/topic/topic.svelte
+++ b/src/components/topic/topic.svelte
@@ -1,46 +1,44 @@
 <script>
-  export let id;
+	export let topic;
 
-  import { _ } from 'svelte-i18n';
-  import { getTopic } from '$/stores/topic';
+	import { _ } from 'svelte-i18n';
+	import Post from '$/components/post/post.svelte';
+	import { readableTime } from '$/utils/readable_time.js';
 
-  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);
+	$: 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}
+<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}
+		<Post {post} {index} count={topic.posts.length} />
+	{/each}
+</div>
diff --git a/src/components/topic_summary/topic_summary.svelte b/src/components/topic_summary/topic_summary.svelte
index 88b2b83..5f2678b 100644
--- a/src/components/topic_summary/topic_summary.svelte
+++ b/src/components/topic_summary/topic_summary.svelte
@@ -1,16 +1,24 @@
 <script>
-  export let topic;
+	export let topic;
 
-  import { _ } from 'svelte-i18n';
-  import { readableTime } from '$/utils/readable_time.js';
+	import { _ } from 'svelte-i18n';
+	import { readableTime } from '$/utils/readable_time.js';
 
-  $: remainingTime = (topic.updated_at + topic.ttl) - Date.now();
-  $: remaining = readableTime(remainingTime);
+	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remaining = readableTime(remainingTime);
 </script>
 
-<li class="h-entry" title="{$_('topic.title')}">
-  <span class="p-name"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/{topic.id}">{topic.title}</a></span>
-  <span class="topic-ttl">({$_('topic.remaining_time', { values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } })})</span>
+<li class="h-entry" title={$_('topic.title')}>
+	<span class="p-name"
+		><a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}"
+			>{topic.title}</a
+		></span
+	>
+	<span class="topic-ttl"
+		>({$_('topic.remaining_time', {
+			values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
+		})})</span
+	>
 </li>
 
 <style>
-- 
cgit