chore: 🤖 localize more things on example

example/messages/default.json

@@ -2,6 +2,11 @@
   "title": {
     "index": "Sapper project template!"
   },
+  "nav": {
+    "home": "",
+    "about": "",
+    "blog": ""
+  },
   "messages": {
     "success": "Great success!",
     "high_five": "High five",

example/messages/en-US.json

@@ -1,10 +0,0 @@
-{
-  "title": {
-    "index": "Sapper project template!"
-  },
-  "messages": {
-    "success": "Great success!",
-    "high_five": "High five",
-    "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
-  }
-}

example/messages/en.json

@@ -2,6 +2,11 @@
   "title": {
     "index": "Sapper project template!"
   },
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Great success!",
     "high_five": "High five",

example/messages/es-ES.json

@@ -2,6 +2,11 @@
   "title": {
     "index": " Plantilla de proyecto Sapper!"
   },
+  "nav": {
+    "home": "Inicio",
+    "about": "Acerca",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Gran éxito!",
     "high_five": "Cinco altos",

example/messages/pt-BR.json

@@ -2,6 +2,11 @@
   "title": {
     "index": "Modelo de projeto em Sapper!"
   },
+  "nav": {
+    "home": "Home",
+    "about": "Sobre",
+    "blog": "Blog"
+  },
   "messages": {
     "success": "Suuuucesso!",
     "high_five": "Toca aqui",

example/src/components/Nav.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { _ } from 'svelte-i18n'
+
 	export let segment;
 </script>
 
@@ -50,11 +52,11 @@
 
 <nav>
 	<ul>
-		<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
-		<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
+		<li><a class:selected='{segment === undefined}' href='.'>{$_('nav.home')}</a></li>
+		<li><a class:selected='{segment === "about"}' href='about'>{$_('nav.about')}</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>{$_('nav.blog')}</a></li>
 	</ul>
 </nav>

example/src/i18n.js

@@ -1,6 +1,5 @@
-import { register } from 'svelte-i18n'
+import { register, getClientLocale, locale } from 'svelte-i18n'
 
 register('en', () => import('../messages/en.json'))
 register('pt-BR', () => import('../messages/pt-BR.json'))
-register('en-US', () => import('../messages/en-US.json'))
 register('es-ES', () => import('../messages/es-ES.json'))

example/src/routes/_layout.svelte

@@ -1,9 +1,13 @@
 <script context="module">
-  import { locale, locales, getClientLocale, waitLocale } from 'svelte-i18n'
+  import { locales, locale, waitLocale,getClientLocale } from 'svelte-i18n'
   import Lang from 'svelte-i18n/Lang.svelte'
 
   export async function preload() {
-    return locale.set(getClientLocale({ default: 'pt-BR', navigator: true }))
+    const initialLocale = getClientLocale({
+      default: 'pt-BR',
+      navigator: true
+    })
+    return locale.set(initialLocale)
   }
 </script>
 
@@ -12,7 +16,8 @@
 
   const localeLabels = {
     'pt-BR': 'Português',
-    'en-US': 'English',
+    'en': 'English',
+    'en-US': 'English US',
     'es-ES': 'Espanõl',
   }
 

example/src/routes/about/index.svelte

@@ -1,7 +1,7 @@
 <script context="module">
   import { register, waitLocale } from 'svelte-i18n'
 
-  register('en-US', () => import('./_locales/en-US.json'))
+  register('en', () => import('./_locales/en.json'))
   register('pt-BR', () => import('./_locales/pt-BR.json'))
   register('es-ES', () => import('./_locales/es-ES.json'))
 

test/client/index.test.ts

@@ -147,7 +147,7 @@ describe('utilities', () => {
 
     it('should get the fallback locale', () => {
       window.location.hostname = 'pt.example.com'
-      expect(getClientLocale({ hostname: /^.*?\./ })).toBe('pt')
+      expect(getClientLocale({ hostname: /^(.*?)\./ })).toBe('pt')
     })
   })