Use tailwind, reference types

diff --git a/src/lib/components/actions/topic.svelte b/src/lib/components/actions/topic.svelte
index a3cba3b7e92186419b4a5ecb53894773d073b383..9a9cd7e9963a2ac8b37e3c567cfe7f94f77cd075 100644 (file)
--- 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 d25f507b63a83817e77bfe2d2438d69bb64ed7fe..9fad768f7b88a8856c87027aef9c72b38da69909 100644 (file)
--- 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 5c171d270864278d133e10e7f951f1ba35ceda0d..e2db937f1a2edb97d724d8f92a05396515273d6e 100644 (file)
--- 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 b8864288c0a83feb47aa298924402a55ef369e49..bcd23a357af11c9ef39c98fa8ee5e4e9c1022418 100644 (file)
--- 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 81a5e4f8de5693037ea8076d30369fdfcf1900d0..250e36ea8dd69f8466d7df2e2e5dfb6afd088525 100644 (file)
--- 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 51df1c27bd35426e2f68a156ac3569355439e789..3d089130c256c4f5c311ece77db18aabe87c6b21 100644 (file)
--- 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 4e245f83d4ceb8b89817d720296ad44222d263d8..c1b8f35e4e320963b5f32d9ab4929479786ef1be 100644 (file)
--- 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 d909be1c02936119e6f7a4249517f5f12ac97929..535f7ace32c94cd29bfb58b906bbc1e582ae73d4 100644 (file)
--- 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 86d0b8290c30543b8b2922c0c0589f2f61f64da3..b3fe806a12757dd37a5fdf43954319a43083298f 100644 (file)
--- 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 5b5ed0b3d2ffb54631cc7774d588e7c3e099710b..ec89876590d44f25f1475db9f804777c45b3e20b 100644 (file)
--- 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 39dad0805234eab1161b3b6808c1f652b0c5456d..337a064e3a9f8f1aed9dc66d4394bd55297c5769 100644 (file)
--- 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 2f6edb889c3763ea7318f73d7e25361e570eb8ff..5f7eda1e410f60d8198e5ff40c2f50af99a1c268 100644 (file)
--- 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 ab0206610a5e4d3b5ca2d887c207624d07ee8449..8a395b329d2c29df02b9c4dec704c4adccf5374f 100644 (file)
--- 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 0d3dec305c9356cae33cba2a802cb8030ac0dbb3..718e1e581cb19c408024783274e7999f10a5948f 100644 (file)
--- 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 79f017e5108dbebf91dac1443215b50c559aaf37..c96da2d0a8c92f7c042968c01716b8f89229618f 100644 (file)
--- 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 8d69d801341d7ba2da5d4e642b7901a27038f3d5..0e39769cb78ddfa2f4245c9740397f150066a3a4 100644 (file)
--- 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 62881f25defb19d3752c9152263788844e2e854d..007781075796fd16a0ca4aba114d78676e6ebc56 100644 (file)
--- 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 b235e21ecb02d58d12a94a53651d9d4c0fb65cfa..fc103d22533f8f5fade4ea7b919ccbea0e6cce27 100644 (file)
--- 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 a82e48825f66a659387932e330a2ecdaeb2f545f..04193628474420f2971f8455db27a78cd837601f 100644 (file)
--- 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 82d8045a7c8c71d88bbd6f80ce33949d4fafa2d1..8efd8c1031621b99bb6dc9e63d39e76377430cac 100644 (file)
--- 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 e04f473a001375f5ea6506db5e2133fe5f5db6f2..d60946b31a231081a5b036eebfff2d6f8a8d4e59 100644 (file)
--- 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;