Use tailwind, reference types

21 files changed, 100 insertions, 117 deletions

diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte
index a3cba3b..9a9cd7e 100644
--- a/src/lib/components/actions/topic.svelte
+++ b/src/lib/components/actions/topic.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { TopicAction } from '$lib/stores/action';
+	import type { TopicAction } from '$lib/stores/actions';
 	export let actions: TopicAction;
 
 	import { _ } from 'svelte-i18n';
diff --git a/src/lib/components/error_block/error_block.svelte b/src/lib/components/error_block/error_block.svelte
index d25f507..9fad768 100644
--- a/src/lib/components/error_block/error_block.svelte
+++ b/src/lib/components/error_block/error_block.svelte
@@ -5,36 +5,16 @@
 	import { blink } from '$lib/animations/blink';
 </script>
 
-<div transition:blink>
-	<h2>{$_('error.generic.title')}</h2>
-	<p>{message || $_('error.generic.message')}</p>
+<div
+	class="font-sans overflow-hidden text-center border-4 border-solid border-red-500 text-amber-300 mx-2.5"
+	transition:blink
+>
+	<h2 class="bg-black text-base uppercase mt-24 mx-1 mb-2.5">{$_('error.generic.title')}</h2>
+	<p class="bg-black text-base mt-2.5 mx-1 mb-24">{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;
-	}
-
-	h2,
-	p {
-		background-color: black;
-		font-size: 1em;
-	}
-
-	h2 {
-		text-transform: uppercase;
-		margin: 100px 5px 10px;
-	}
-
-	p {
-		margin: 10px 5px 100px;
 	}
 </style>
diff --git a/src/lib/components/footer/footer.svelte b/src/lib/components/footer/footer.svelte
index 5c171d2..e2db937 100644
--- a/src/lib/components/footer/footer.svelte
+++ b/src/lib/components/footer/footer.svelte
@@ -6,25 +6,12 @@
 	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>
+<footer
+	class="col-start-1 col-span-12 border-t-2 border-t-black border-solid"
+	title={$_('footer.title')}
+>
+	<ul class="p-0">
+		<li class="inline m-1">{@html $_('footer.license', { values: { licenseUrl } })}</li>
+		<li class="inline m-1">{$_('footer.choose_language')}: <LanguageSelector /></li>
 	</ul>
 </footer>
-
-<style>
-	footer {
-		grid-column: col-start 1 / span 12;
-		border-top: 1px solid black;
-	}
-
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: inline;
-		margin: 5px;
-	}
-</style>
diff --git a/src/lib/components/forum/forum.svelte b/src/lib/components/forum/forum.svelte
index b886428..bcd23a3 100644
--- a/src/lib/components/forum/forum.svelte
+++ b/src/lib/components/forum/forum.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let forum;
+	import type { Forum } from '$lib/data/types';
+
+	export let forum: Forum;
 
 	import { _ } from 'svelte-i18n';
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 81a5e4f..250e36e 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { _ } from 'svelte-i18n';
-	export let forums;
+	import type { Forum } from '$lib/data/types';
+
+	export let forums: Forum[];
 
+	import { _ } from 'svelte-i18n';
 	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
 </script>
 
diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index 51df1c2..3d08913 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -5,59 +5,44 @@
 	import TopicActions from '$lib/components/actions/topic.svelte';
 </script>
 
-<header title={$_('header.title')}>
-	<ul>
-		<li>
+<header
+	class="col-start-1 col-span-12 border-b-2 border-b-black border-solid"
+	title={$_('header.title')}
+>
+	<ul class="p-0">
+		<li class="inline m-1">
 			<strong
-				><a href="/" title={$_('header.long_version', { values: { version } })}
+				><a
+					class="inline-block leading-10 underline text-blue-600"
+					href="/"
+					title={$_('header.long_version', { values: { version } })}
 					>{$_('header.short_version', { values: { version } })}</a
 				></strong
 			>
 		</li>
-		<li>
-			<a href="/new" title={$_('header.action.new.title')}
-				>{@html $_('header.action.new.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/new"
+				title={$_('header.action.new.title')}>{@html $_('header.action.new.display')}</a
 			>
 		</li>
 		{#if $topicActions}
 			<TopicActions actions={$topicActions} />
 		{/if}
-		<li>
-			<a href="/search" title={$_('header.action.search.title')}
-				>{@html $_('header.action.search.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/search"
+				title={$_('header.action.search.title')}>{@html $_('header.action.search.display')}</a
 			>
 		</li>
-		<li>
-			<a href="/logout" title={$_('header.action.log_out.title')}
-				>{@html $_('header.action.log_out.display')}</a
+		<li class="inline m-1">
+			<a
+				class="inline-block leading-10 no-underline"
+				href="/logout"
+				title={$_('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;
-	}
-
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: inline;
-		margin: 5px;
-	}
-
-	a {
-		text-decoration: none;
-		line-height: 3em;
-		display: inline-block;
-	}
-
-	strong a {
-		color: blue;
-		text-decoration: underline;
-	}
-</style>
diff --git a/src/lib/components/language_selector/language_selector.svelte b/src/lib/components/language_selector/language_selector.svelte
index 4e245f8..c1b8f35 100644
--- a/src/lib/components/language_selector/language_selector.svelte
+++ b/src/lib/components/language_selector/language_selector.svelte
@@ -7,7 +7,17 @@
 			code,
 			...getLangNameFromCode(code)
 		}))
-		.sort((a, b) => a.native - b.native);
+		.sort((a, b) => {
+			if (a.native > b.native) {
+				return 1;
+			}
+
+			if (a.native < b.native) {
+				return -1;
+			}
+
+			return 0;
+		});
 
 	let selected = $locale;
 
diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte
index d909be1..535f7ac 100644
--- a/src/lib/components/post/post.svelte
+++ b/src/lib/components/post/post.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	export let post;
+	import type { Post } from '$lib/data/types';
+
+	export let post: Post;
 	export let index = 0;
 	export let count = 1;
 
 	import { _ } from 'svelte-i18n';
 	import Glyph from '$lib/components/glyph/glyph.svelte';
 
-	const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
+	const timestampToISO = (timestamp: number) => new Date(timestamp).toISOString();
 </script>
 
 <aside
diff --git a/src/lib/components/tag/tag.svelte b/src/lib/components/tag/tag.svelte
index 86d0b82..b3fe806 100644
--- a/src/lib/components/tag/tag.svelte
+++ b/src/lib/components/tag/tag.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let tag;
+	import type { Tag } from '$lib/data/types';
+
+	export let tag: Tag;
 
 	import { _ } from 'svelte-i18n';
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index 5b5ed0b..ec89876 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let topic;
+	import type { Topic } from '$lib/data/types';
+
+	export let topic: Topic;
 
 	import { _ } from 'svelte-i18n';
 	import Post from '$lib/components/post/post.svelte';
diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
index 39dad08..337a064 100644
--- a/src/lib/components/topic_summary/topic_summary.svelte
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let topic;
+	import type { Topic } from '$lib/data/types';
+
+	export let topic: Topic;
 
 	import { _ } from 'svelte-i18n';
 	import { readableTime } from '$lib/utils/readable_time';
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index 2f6edb8..5f7eda1 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -6,7 +6,11 @@ import es from './translations/es.json';
 addMessages('en', en);
 addMessages('es', es);
 
+const fallbackLocale = 'en';
+const browserLocale: string = getLocaleFromNavigator();
+const initialLocale = browserLocale ? browserLocale.replace(/-[A-Z]{2}$/, '') : fallbackLocale;
+
 init({
-	fallbackLocale: 'en',
-	initialLocale: getLocaleFromNavigator().replace(/-[A-Z]{2}$/, '')
+	fallbackLocale,
+	initialLocale
 });
diff --git a/src/lib/stores/forums.ts b/src/lib/stores/forums.ts
index ab02066..8a395b3 100644
--- a/src/lib/stores/forums.ts
+++ b/src/lib/stores/forums.ts
@@ -1,6 +1,9 @@
 import { store } from './apollo';
 import { GET_FORUM, GET_FORUMS } from '$lib/data/queries';
 
+import type { Forum } from '$lib/data/types';
+
 export const getForum = (id: string) =>
-	store({ key: 'forum', query: GET_FORUM, variables: { id } });
-export const getForums = () => store({ key: 'forums', query: GET_FORUMS, initialValue: [] });
+	store<Forum>({ key: 'forum', query: GET_FORUM, variables: { id } });
+export const getForums = () =>
+	store<Forum[]>({ key: 'forums', query: GET_FORUMS, initialValue: [] });
diff --git a/src/lib/stores/posts.ts b/src/lib/stores/posts.ts
index 0d3dec3..718e1e5 100644
--- a/src/lib/stores/posts.ts
+++ b/src/lib/stores/posts.ts
@@ -1,4 +1,7 @@
 import { store } from './apollo';
 import { GET_POST } from '$lib/data/queries';
 
-export const getPost = (id: string) => store({ key: 'post', query: GET_POST, variables: { id } });
+import type { Post } from '$lib/data/types';
+
+export const getPost = (id: string) =>
+	store<Post>({ key: 'post', query: GET_POST, variables: { id } });
diff --git a/src/lib/stores/tags.ts b/src/lib/stores/tags.ts
index 79f017e..c96da2d 100644
--- a/src/lib/stores/tags.ts
+++ b/src/lib/stores/tags.ts
@@ -1,4 +1,6 @@
 import { store } from './apollo';
 import { GET_TAG } from '$lib/data/queries';
 
-export const getTag = (id: string) => store({ key: 'tag', query: GET_TAG, variables: { id } });
+import type { Tag } from '$lib/data/types';
+
+export const getTag = (id: string) => store<Tag>({ key: 'tag', query: GET_TAG, variables: { id } });
diff --git a/src/lib/stores/topics.ts b/src/lib/stores/topics.ts
index 8d69d80..0e39769 100644
--- a/src/lib/stores/topics.ts
+++ b/src/lib/stores/topics.ts
@@ -1,5 +1,7 @@
 import { store } from './apollo';
 import { GET_TOPIC } from '$lib/data/queries';
 
+import type { Topic } from '$lib/data/types';
+
 export const getTopic = (id: string) =>
-	store({ key: 'topic', query: GET_TOPIC, variables: { id } });
+	store<Topic>({ key: 'topic', query: GET_TOPIC, variables: { id } });
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 62881f2..0077810 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -21,10 +21,13 @@
 	<Loader />
 {:else}
 	<Header />
-	<main>
+	<main class="col-start-2 col-span-11">
 		<slot />
 	</main>
-	<nav title={$_('forum_list.title')}>
+	<nav
+		class="col-start-1 row-start-2 border-r-2 border-2-black border-solid"
+		title={$_('forum_list.title')}
+	>
 		{#if $store.loading}
 			<Loader />
 		{/if}
@@ -37,11 +40,3 @@
 	</nav>
 	<Footer />
 {/if}
-
-<style>
-	nav {
-		grid-column: col-start 1;
-		grid-row: 2;
-		border-right: 1px solid black;
-	}
-</style>
diff --git a/src/routes/f/[id].svelte b/src/routes/f/[id].svelte
index b235e21..fc103d2 100644
--- a/src/routes/f/[id].svelte
+++ b/src/routes/f/[id].svelte
@@ -12,7 +12,7 @@
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 
-	export let id;
+	export let id: string;
 
 	import { getForum } from '$lib/stores/forums';
 	$: store = getForum(id);
diff --git a/src/routes/g/[id].svelte b/src/routes/g/[id].svelte
index a82e488..0419362 100644
--- a/src/routes/g/[id].svelte
+++ b/src/routes/g/[id].svelte
@@ -12,7 +12,7 @@
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 	import Tag from '$lib/components/tag/tag.svelte';
-	export let id;
+	export let id: string;
 
 	$: store = getTag(id);
 	$: tag = $store.data;
diff --git a/src/routes/p/[id].svelte b/src/routes/p/[id].svelte
index 82d8045..8efd8c1 100644
--- a/src/routes/p/[id].svelte
+++ b/src/routes/p/[id].svelte
@@ -13,7 +13,7 @@
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 
-	export let id;
+	export let id: string;
 
 	$: store = getPost(id);
 	$: post = $store.data;
diff --git a/src/routes/t/[id].svelte b/src/routes/t/[id].svelte
index e04f473..d60946b 100644
--- a/src/routes/t/[id].svelte
+++ b/src/routes/t/[id].svelte
@@ -16,7 +16,7 @@
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 
-	export let id;
+	export let id: string;
 
 	$: store = getTopic(id);
 	$: topic = $store.data;