i18n, so far supports en_US and pt_BR

Signed-off-by: lucasew <[email protected]>

src/App.svelte

@@ -4,18 +4,19 @@
   import { Github } from "@icons-pack/svelte-simple-icons";
   import Themes from "./components/Themes.svelte";
   import type { Maybe, Theme } from "./Model";
+import { i18nString } from "./i18n";
   let location = new URL(window.location.href);
   locationStore.subscribe((_location) => (location = _location));
   let themes: Maybe<Record<string, Theme>> = null;
   themeStore.subscribe((_themes) => (themes = _themes));
 </script>
 
 <svelte:head>
-  <title>Base16 theme showcase</title>
+  <title>{i18nString('title')}</title>
 </svelte:head>
 
 <h1>
-  Base16 theme showcase
+  {i18nString('title')}
   <a
     id="github-link"
     href="https://github.com/lucasew/base16-showcase"
@@ -28,13 +29,10 @@
 {#if themes != null}
   <Themes />
 {:else}
-  <h2>No themes loaded</h2>
-  <p>You can load a nix-colors structured JSON or a base16 YAML file.</p>
-  <p>Some other details may be covered by this app.</p>
-  <p>
-    You can drag-and-drop the files or double-click anywhere in the app to open
-    a file selector.
-  </p>
+  <h2>{i18nString('no_themes_loaded')}</h2>
+  <p>{i18nString('instruction_supported_formats')}</p>
+  <p>{i18nString('instruction_other_details')}</p>
+  <p>{i18nString('instruction_ingestion')}</p>
 {/if}
 <input type="file" id="data-input" multiple/>
 

src/i18n.ts

@@ -1,4 +1,4 @@
-let i18n: Record<string, i18Led> = {
+const i18n = {
   loading: {
     en_US: "Loading...",
     pt_BR: "Carregando...",
@@ -11,8 +11,30 @@ let i18n: Record<string, i18Led> = {
     en_US: "Load",
     pt_BR: "Carregar",
   },
+  no_themes_loaded: {
+    en_US: "No themes loaded",
+    pt_BR: "Nenhum tema carregado"
+  },
+  title: {
+     en_US: "Base16 theme showcase",
+     pt_BR: "Demonstração de temas Base16"
+  },
+  instruction_supported_formats: {
+    en_US: "You can load a nix-colors structured JSON or a base16 YAML theme file.",
+    pt_BR: "Você pode carregar um JSON estruturado de acordo com o nix-colors ou um tema YAML no formato do base16"
+  },
+  instruction_other_details: {
+    en_US: "Some other details may be covered by this app.",
+    pt_BR: "Alguns outros detalhes podem ser cobertos por este app."
+  },
+  instruction_ingestion: {
+    en_US: "You can drag-and-drop the files or double-click anywhere in the app to open a file selector.",
+    pt_BR: "Você pode arrastar e soltar os arquivos ou dar um duplo clique em qualquer lugar do app para abrir um seletor de arquivos."
+  }
 };
 
+export type i18nKeys = keyof typeof i18n
+
 export type i18Led = Record<string, string> | string;
 
 export function i18nGet(txt: i18Led) {
@@ -21,4 +43,8 @@ export function i18nGet(txt: i18Led) {
   return txt[locale.replaceAll("-", "_")] || txt;
 }
 
+export function i18nString(label: i18nKeys) {
+    return i18nGet(i18n[label])
+}
+
 export default i18n;