Add internationalization support

8 files changed, 137 insertions, 3 deletions

diff --git a/app/components/error_block/error_block.svelte b/app/components/error_block/error_block.svelte
index d649fb4..e46afa1 100644
--- a/app/components/error_block/error_block.svelte
+++ b/app/components/error_block/error_block.svelte
@@ -1,11 +1,11 @@
 <script>
   import { _ } from 'svelte-i18n';
-  export let message = $_('error.generic.message');
+  export let message;
 </script>
 
 <div>
   <h2>{$_('error.generic.title')}</h2>
-  <p>{message}</p>
+  <p>{message || $_('error.generic.message')}</p>
 </div>
 
 <style>
diff --git a/app/components/footer/footer.svelte b/app/components/footer/footer.svelte
new file mode 100644
index 0000000..2d45cef
--- /dev/null
+++ b/app/components/footer/footer.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { _ } from 'svelte-i18n';
+
+  import LanguageSelector from '../language_selector/language_selector.svelte';
+
+  const licenseUrl = 'https://gitlab.com/rbdr/forum/';
+</script>
+
+<footer title="Toolbar">
+  <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;
+  }
+
+  .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/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte
index c218bac..5ce4dc1 100644
--- a/app/components/forum_list/forum_list.svelte
+++ b/app/components/forum_list/forum_list.svelte
@@ -13,7 +13,7 @@
       <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>
+          <span class="navigation-label">{$_(forum.label)}</span>
         </a>
       </li>
     {/each}
diff --git a/app/components/language_selector/language_selector.svelte b/app/components/language_selector/language_selector.svelte
new file mode 100644
index 0000000..67c0814
--- /dev/null
+++ b/app/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/app/config/i18n.js b/app/config/i18n.js
index e00adb5..25ffc45 100644
--- a/app/config/i18n.js
+++ b/app/config/i18n.js
@@ -1,8 +1,10 @@
 import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n';
 
 import en from './translations/en.json';
+import es from './translations/es.json';
 
 addMessages('en', en);
+addMessages('es', es);
 
 init({
   fallbackLocale: 'en',
diff --git a/app/config/translations/en.json b/app/config/translations/en.json
index 935f4fe..468bdc1 100644
--- a/app/config/translations/en.json
+++ b/app/config/translations/en.json
@@ -5,9 +5,30 @@
       "message": "Unknown error has occurred. Panic!"
     }
   },
+  "footer": {
+    "choose_language": "Choose your language",
+    "license": "Forum is <a href=\"{licenseUrl}\">open source.</a>"
+  },
   "forum_list": {
     "error": {
       "unavailable": "Forum list unavailable."
     }
+  },
+  "forum": {
+    "name": {
+      "everything": "Everything",
+      "us": "Us",
+      "words": "Words",
+      "sound": "Sounds",
+      "structure": "Structure",
+      "interaction": "Interaction",
+      "emotion": "Emotion",
+      "movement": "Movement",
+      "belief": "Belief",
+      "experience": "Experience",
+      "online": "Online",
+      "the_world": "The World",
+      "life": "Life"
+    }
   }
 }
diff --git a/app/config/translations/es.json b/app/config/translations/es.json
new file mode 100644
index 0000000..8831d2a
--- /dev/null
+++ b/app/config/translations/es.json
@@ -0,0 +1,34 @@
+{
+  "error": {
+    "generic": {
+      "title": "Error!",
+      "message": "Hubo un error desconocido. Entra en pánico!"
+    }
+  },
+  "footer": {
+    "choose_language": "Escoge un lenguaje",
+    "license": "Forum es <a href=\"{licenseUrl}\">software libre.</a>"
+  },
+  "forum_list": {
+    "error": {
+      "unavailable": "Lista de foros no disponible."
+    }
+  },
+  "forum": {
+    "name": {
+      "everything": "Todo",
+      "us": "Nosotros",
+      "words": "Palabras",
+      "sound": "Sonidos",
+      "structure": "Estructura",
+      "interaction": "Interacción",
+      "emotion": "Emoción",
+      "movement": "Movimiento",
+      "belief": "Creencia",
+      "experience": "Experiencia",
+      "online": "En Línea",
+      "the_world": "El Mundo",
+      "life": "Vida"
+    }
+  }
+}
diff --git a/app/forum.svelte b/app/forum.svelte
index d83438d..d2a6e1b 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -9,6 +9,7 @@
 
   import ForumList from './components/forum_list/forum_list.svelte';
   import Header from './components/header/header.svelte';
+  import Footer from './components/footer/footer.svelte';
 
   // Routed Components
   import Author from './components/author/author.svelte';
@@ -53,6 +54,7 @@
   <svelte:component this={ page } params={ params } />
 </main>
 <ForumList />
+<Footer />
 
 <style>
   main {