docs: add RTL to example (#61)

* Added RTL (arabic) language

* changed home, about, contact words (update from native speaker)

example/messages/ar.json

@@ -0,0 +1,22 @@
+{
+  "title": {
+    "index": "Sapper project template!"
+  },
+  "nav": {
+    "home": "الرئيسية",
+    "about": "من نحن",
+    "blog": "اتصل بنا"
+  },
+  "messages": {
+    "success": "عظيم",
+    "high_five": "خمسة",
+    "try_editing": "حاول تحرير هذا الملف (src/routes/index.svelte) لاختبار إعادة التحميل المباشر."
+  },
+  "languages": {
+    "en": "English",
+    "pt_BR": "Português",
+    "es_ES": "Espanol",
+    "ar": "عربى"
+  },
+  "direction": "rtl"
+}

example/messages/en.json

@@ -13,8 +13,10 @@
     "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
   },
   "languages": {
-    "pt_BR": "Portugues",
     "en": "English",
-    "es_ES": "Spanish"
+    "pt_BR": "Português",
-  }
+    "es_ES": "Espanol",
+    "ar": "عربى"
+  },
+  "direction": "ltr"
 }

example/messages/es-ES.json

@@ -13,8 +13,10 @@
     "try_editing": " Intente editar este archivo (src/routes/index.svelte) para probar la recarga en vivo."
   },
   "languages": {
-    "pt_BR": "Portugués",
+    "en": "English",
-    "en": "Ingles",
+    "pt_BR": "Português",
-    "es_ES": "Espanol"
+    "es_ES": "Espanol",
-  }
+    "ar": "عربى"
+  },
+  "direction": "ltr"
 }

example/messages/pt-BR.json

@@ -13,8 +13,10 @@
     "try_editing": "Tente editar este arquivo (src/routes/index.svelte) para testar o recarregamento ao vivo."
   },
   "languages": {
+    "en": "English",
     "pt_BR": "Português",
-    "en": "Inglês",
+    "es_ES": "Espanol",
-    "es_ES": "Espanhol"
+    "ar": "عربى"
-  }
+  },
+  "direction": "ltr"
 }

example/src/components/Nav.svelte

@@ -51,10 +51,14 @@
     padding: 1em 0.5em;
     display: block;
   }
+  .rtl {
+    direction: rtl;
+    display: flex;
+  }
 </style>
 
-<nav>
+<nav class={$_('direction')}>
-  <ul>
+  <ul class={$_('direction')}>
     <li>
       <a class:selected={segment === undefined} href=".">{$_('nav.home')}</a>
     </li>
@@ -78,7 +82,7 @@
           class:selected={$locale.includes(item)}
           href={`#!${item}`}
           on:click={() => ($locale = item)}>
-          {item.replace('-', '_')}
+          {$_('languages.' + item.replace('-', '_'))}
         </span>
       </li>
     {/each}

example/src/i18n.js

@@ -3,6 +3,7 @@ import { register, init, getLocaleFromNavigator } from 'svelte-i18n'
 register('en', () => import('../messages/en.json'))
 register('pt-BR', () => import('../messages/pt-BR.json'))
 register('es-ES', () => import('../messages/es-ES.json'))
+register('ar', () => import('../messages/ar.json'))
 
 init({
   fallbackLocale: 'en',

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

@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "About"
+  },
+  "about_this_site": "عن هذا الموقع",
+  "about_content": ["هذه هي صفحة 'حول'. ليس هناك الكثير هنا."]
+}

example/src/routes/about/index.svelte

@@ -4,6 +4,7 @@
   register('en', () => import('./_locales/en.json'))
   register('pt-BR', () => import('./_locales/pt-BR.json'))
   register('es-ES', () => import('./_locales/es-ES.json'))
+  register('ar', () => import('./_locales/ar.json'))
 
   export async function preload(page, session) {
     return waitLocale()
@@ -14,10 +15,17 @@
   import { _ } from 'svelte-i18n'
 </script>
 
+<style>
+  .rtl {
+    direction: rtl;
+  }
+</style>
+
 <svelte:head>
   <title>{$_('title.about')}</title>
 </svelte:head>
 
-<h1>{$_('about_this_site')}</h1>
+<div class={$_('direction')}>
-
+  <h1>{$_('about_this_site')}</h1>
-<p>{$_('about_content.0')}</p>
+  <p>{$_('about_content.0')}</p>
+</div>