Update to SvelteKit

12 files changed, 340 insertions, 0 deletions

diff --git a/src/components/author/author.svelte b/src/components/author/author.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/author/author.svelte
diff --git a/src/components/error_block/error_block.svelte b/src/components/error_block/error_block.svelte
new file mode 100644
index 0000000..e46afa1
--- /dev/null
+++ b/src/components/error_block/error_block.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  export let message;
+</script>
+
+<div>
+  <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;
+    padding: 100px 5px;
+    text-align: center;
+  }
+
+  h2, p {
+    background-color: black;
+    font-size: 1em;
+  }
+
+  h2 {
+    text-transform: uppercase;
+  }
+</style>
+
diff --git a/src/components/footer/footer.svelte b/src/components/footer/footer.svelte
new file mode 100644
index 0000000..3587aab
--- /dev/null
+++ b/src/components/footer/footer.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import LanguageSelector from '../language_selector/language_selector.svelte';
+
+  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>
+
+<style>
+  footer {
+    grid-column: col-start 1 / span 12;
+    border-top: 1px solid black;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li {
+    display: inline;
+    margin: 5px;
+  }
+
+  a {
+    text-decoration: none;
+    line-height: 3em;
+    display: inline-block;
+  }
+</style>
diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
new file mode 100644
index 0000000..174ae25
--- /dev/null
+++ b/src/components/forum_list/forum_list.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import { forums } from '../../stores/forums.js';
+  import ErrorBlock from '../error_block/error_block.svelte';
+</script>
+
+<nav title="{$_('forum_list.title')}">
+  {#if !$forums.length}
+    <ErrorBlock message={$_('forum_list.error.unavailable')} />
+  {/if}
+  <ul>
+    {#each $forums 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;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li {
+    display: block;
+    text-align: left;
+    margin-bottom: 20px;
+  }
+
+  .navigation-glyph {
+    font-size: 1.5rem;
+    display: block;
+  }
+
+  .☽ {
+    font-size: 2rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
new file mode 100644
index 0000000..e4b9166
--- /dev/null
+++ b/src/components/glyph/glyph.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import { getGlyphHash } from '../../utils/glyph_hash';
+
+  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>
+
+<style>
+  .glyphicon {
+    border: 1px solid black;
+    display: inline-block;
+    font-size: 1.4rem;
+    height: 48px;
+    margin-top: 5px;
+    width: 48px;
+  }
+
+  span {
+    display: block;
+    float: left;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+  }
+
+  .☽ {
+    font-size: 2rem;
+    line-height: 19px;
+  }
+</style>
diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
new file mode 100644
index 0000000..36d4d50
--- /dev/null
+++ b/src/components/header/header.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import { version } from '$config/config';
+</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>
+    <li><a href="/reply" aria-label="{$_('header.action.reply.title')}">{@html $_('header.action.reply.display')}</a></li>
+    <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;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  .action-key {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  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/components/home/home.svelte b/src/components/home/home.svelte
new file mode 100644
index 0000000..7000137
--- /dev/null
+++ b/src/components/home/home.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { _ } from 'svelte-i18n';
+</script>
+
+<h1>{$_('home.title')}</h1>
+<p>{$_('home.content')}</p>
diff --git a/src/components/invalid_route/invalid_route.svelte b/src/components/invalid_route/invalid_route.svelte
new file mode 100644
index 0000000..aaf7927
--- /dev/null
+++ b/src/components/invalid_route/invalid_route.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { _ } from 'svelte-i18n';
+</script>
+
+<h1>{$_('error.invalid_url.title')}</h1>
+<p>{$_('error.invalid_url.message')}</p>
diff --git a/src/components/language_selector/language_selector.svelte b/src/components/language_selector/language_selector.svelte
new file mode 100644
index 0000000..67c0814
--- /dev/null
+++ b/src/components/language_selector/language_selector.svelte
@@ -0,0 +1,28 @@
+<script>
+  import { locale, locales } from 'svelte-i18n';
+  import { getLangNameFromCode } from 'language-name-map';
+
+  $: namedLocales = $locales
+    .map((locale) => ({
+      code: locale,
+      ...getLangNameFromCode(locale)
+    }))
+    .sort((a, b) => a.native - b.native);
+
+  let selected = $locale;
+
+  $: {
+    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}
+</select>
+
+<style>
+</style>
+
diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
new file mode 100644
index 0000000..4720533
--- /dev/null
+++ b/src/components/post/post.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import Glyph from '../glyph/glyph.svelte';
+</script>
+
+<aside class="post-meta" title="{$_('post.metadata_title', { values: { count: 2, total: 2 } })}">
+  <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
+  <span class="h-card">
+    {$_('post.author_credit')} <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
+  </span>
+  <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+    <a href="/p/da9910f3febde91948000ce1535ea">
+      2018-08-15 04:10:00
+    </a>
+  </time>
+</aside>
+<article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'time4carrots' } })}">
+  <p>It's just how it is...</p>
+</article>
+<hr/>
+
+<style>
+  .post-meta * {
+    vertical-align: top;
+  }
+</style>
diff --git a/src/components/topic/topic.svelte b/src/components/topic/topic.svelte
new file mode 100644
index 0000000..2aff79a
--- /dev/null
+++ b/src/components/topic/topic.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import Glyph from '../glyph/glyph.svelte';
+</script>
+
+<div class="h-entry" title="{$_('topic.title')}">
+  <h1 class="p-name">This is a post in the forum.</h1>
+  <aside class="topic-meta" title="{$_('topic.metadata_title')}">
+    <span class="topic-location">{$_('topic.category_location')} <a href="/f/interaction"
+        class="p-category">{$_('forum.name.interaction')}</a>.</span>
+    <span class="topic-ttl"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/2a3fc567af8c897ca6f55fb5fj">{$_('topic.remaining_time', { values: { remaining: $_('time.days', { values: { count: 3 } }) } })}</a>.</span>
+  </aside>
+  <aside class="topic-tags" title="{$_('topic.tags_title')}">
+    {$_('topic.tags_location')}
+    <a href="/g/question" class="p-category">question<span class="tag-weight">(5)</span></a>
+    <a href="/g/meta" class="p-category">meta<span class="tag-weight">(34)</span></a>
+    <a href="/g/carrots" class="p-category">carrots<span class="tag-weight">(1)</span></a>
+    <a href="/g/tpbo" class="p-category">tpbo<span class="tag-weight">(2)</span></a>
+  </aside>
+  <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: 1, total: 2 } })}">
+    <Glyph uuid="3cd8c84e18144a2da71f6bace9392abc" />
+    <span class="h-card">
+      {$_('post.author_credit')} <a href="/a/rbdr" class="p-nickname u-url">rbdr</a>.
+    </span>
+    <time role="presentation" class="dt-published" datetime="2018-08-14T03:32:10.929Z">
+      <a title="{$_('post.permalink_title')}" href="/p/a80c70ea0120387123097ce1907ff">
+        2018-08-14 03:32:10
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'rbdr' } })}">
+    <p>This is a main topic in the forum. Does that abstraction still even make sense?</p>
+    <p>Is this really it??</p>
+    <p>This might all be fake but at least the links look purple when visited</p>
+  </article>
+  <hr/>
+  <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: 2, total: 2 } })}">
+    <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
+    <span class="h-card">
+      {$_('post.author_credit')} <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
+    </span>
+    <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
+      <a href="/p/da9910f3febde91948000ce1535ea">
+        2018-08-15 04:10:00
+      </a>
+    </time>
+  </aside>
+  <article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'time4carrots' } })}">
+    <p>It's just how it is...</p>
+  </article>
+  <hr/>
+</div>
+
+<style>
+  .post-meta * {
+    vertical-align: top;
+  }
+</style>
diff --git a/src/components/topic_index/topic_index.svelte b/src/components/topic_index/topic_index.svelte
new file mode 100644
index 0000000..3de83bb
--- /dev/null
+++ b/src/components/topic_index/topic_index.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let params;
+  import ErrorBlock from '../error_block/error_block.svelte';
+</script>
+
+<ErrorBlock />
+<h1>Topic Index.</h1>
+<p>This component lists topics for category or tag with id: {params.id}</p>