refactor: 💡 move about messages to their own dir (not working)

example/messages/default.json

@@ -1,10 +1,7 @@
 {
   "title": {
-    "about": "About",
     "index": "Sapper project template!"
   },
-  "about_this_site": "About this site",
-  "about_content": ["This is the 'about' page. There's not much here."],
   "messages": {
     "success": "Great success!",
     "high_five": "High five",

example/messages/en-US.json

@@ -1,10 +1,7 @@
 {
   "title": {
-    "about": "About",
     "index": "Sapper project template!"
   },
-  "about_this_site": "About this site",
-  "about_content": ["This is the 'about' page. There's not much here."],
   "messages": {
     "success": "Great success!",
     "high_five": "High five",

example/messages/es-ES.json

@@ -1,10 +1,7 @@
 {
   "title": {
-    "about": "Acerca de",
     "index": " Plantilla de proyecto Sapper!"
   },
-  "about_this_site": " Acerca de este sitio",
-  "about_content": ["Esta es la página 'acerca de'. No hay mucho aquí."],
   "messages": {
     "success": "Gran éxito!",
     "high_five": "Cinco altos",

example/messages/pt-BR.json

@@ -1,10 +1,7 @@
 {
   "title": {
-    "about": "Sobre",
     "index": "Modelo de projeto em Sapper!"
   },
-  "about_this_site": "Sobre este site",
-  "about_content": ["Esta é a página 'sobre'. Não há muito aqui."],
   "messages": {
     "success": "Suuuucesso!",
     "high_five": "Toca aqui",

example/src/routes/_layout.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-  import { locale, getClientLocale } from 'svelte-i18n'
+  import { locale, locales, getClientLocale } from 'svelte-i18n'
 
   export async function preload() {
     return locale.set(getClientLocale({ default: 'en-US', navigator: true }))
@@ -9,7 +9,7 @@
 <script>
   import Nav from '../components/Nav.svelte'
 
-  const locales = {
+  const localeLabels = {
     'pt-BR': 'Português',
     'en-US': 'English',
     'es-ES': 'Espanõl',
@@ -33,8 +33,8 @@
 
 <main>
   <select bind:value={$locale}>
-    {#each Object.entries(locales) as [locale, label]}
-      <option value={locale}>{label}</option>
+    {#each $locales as locale}
+      <option value={locale}>{localeLabels[locale]}</option>
     {/each}
   </select>
   <slot />

example/src/routes/about.svelte

@@ -1,15 +0,0 @@
-<script>
-  import { _ } from 'svelte-i18n'
-</script>
-
-<svelte:head>
-  <title>{$_('title.about', { default: 'About' })}</title>
-</svelte:head>
-
-<h1>{$_('about_this_site', { default: 'About this site' })}</h1>
-
-<p>
-  {$_('about_content[0]', {
-    default: "This is the 'about' page. There's not much here.",
-  })}
-</p>

example/src/routes/about/_locales/default.json

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "About"
+  },
+  "about_this_site": "About this site",
+  "about_content": ["This is the 'about' page. There's not much here."]
+}

example/src/routes/about/_locales/en-US.json

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "About"
+  },
+  "about_this_site": "About this site",
+  "about_content": ["This is the 'about' page. There's not much here."]
+}

example/src/routes/about/_locales/es-ES.json

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "Acerca de"
+  },
+  "about_this_site": " Acerca de este sitio",
+  "about_content": ["Esta es la página 'acerca de'. No hay mucho aquí."]
+}

example/src/routes/about/_locales/pt-BR.json

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "Sobre"
+  },
+  "about_this_site": "Sobre este site",
+  "about_content": ["Esta é a página 'sobre'. Não há muito aqui."]
+}

example/src/routes/about/index.svelte

@@ -0,0 +1,27 @@
+<script context="module">
+  // import { partial } from 'svelte-i18n'
+
+  export async function preload() {
+    // return partial({
+    //   'en-US': () => import('./_locales/en-US.json'),
+    //   'pt-BR': () => import('./_locales/pt-BR.json'),
+    //   'es-ES': () => import('./_locales/es-ES.json'),
+    // })
+  }
+</script>
+
+<script>
+  import { _ } from 'svelte-i18n'
+</script>
+
+<svelte:head>
+  <title>{$_('title.about', { default: 'About' })}</title>
+</svelte:head>
+
+<h1>{$_('about_this_site', { default: 'About this site' })}</h1>
+
+<p>
+  {$_('about_content[0]', {
+    default: "This is the 'about' page. There's not much here.",
+  })}
+</p>