From 2a1bea5559152cf5fc5c3554ac7aa34433f927c0 Mon Sep 17 00:00:00 2001
From: Thatcher <thatcher@peskens.nl>
Date: Sun, 29 Mar 2020 21:40:55 +0200
Subject: [PATCH] docs: add RTL to example (#61)

* Added RTL (arabic) language

* changed home, about, contact words (update from native speaker)
---
 example/messages/ar.json                  | 22 ++++++++++++++++++++++
 example/messages/en.json                  |  8 +++++---
 example/messages/es-ES.json               | 10 ++++++----
 example/messages/pt-BR.json               |  8 +++++---
 example/src/components/Nav.svelte         | 10 +++++++---
 example/src/i18n.js                       |  1 +
 example/src/routes/about/_locales/ar.json |  7 +++++++
 example/src/routes/about/index.svelte     | 14 +++++++++++---
 8 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 example/messages/ar.json
 create mode 100644 example/src/routes/about/_locales/ar.json

diff --git a/example/messages/ar.json b/example/messages/ar.json
new file mode 100644
index 0000000..565be9a
--- /dev/null
+++ b/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"
+}
diff --git a/example/messages/en.json b/example/messages/en.json
index ac0c5e2..6320365 100644
--- a/example/messages/en.json
+++ b/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"
 }
diff --git a/example/messages/es-ES.json b/example/messages/es-ES.json
index 826134b..5a22188 100644
--- a/example/messages/es-ES.json
+++ b/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": "Ingles",
-    "es_ES": "Espanol"
-  }
+    "en": "English",
+    "pt_BR": "Português",
+    "es_ES": "Espanol",
+    "ar": "عربى"
+  },
+  "direction": "ltr"
 }
diff --git a/example/messages/pt-BR.json b/example/messages/pt-BR.json
index 1997c22..6bb89cb 100644
--- a/example/messages/pt-BR.json
+++ b/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": "Espanhol"
-  }
+    "es_ES": "Espanol",
+    "ar": "عربى"
+  },
+  "direction": "ltr"
 }
diff --git a/example/src/components/Nav.svelte b/example/src/components/Nav.svelte
index 3afb4a5..2675190 100644
--- a/example/src/components/Nav.svelte
+++ b/example/src/components/Nav.svelte
@@ -51,10 +51,14 @@
     padding: 1em 0.5em;
     display: block;
   }
+  .rtl {
+    direction: rtl;
+    display: flex;
+  }
 </style>
 
-<nav>
-  <ul>
+<nav class={$_('direction')}>
+  <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}
diff --git a/example/src/i18n.js b/example/src/i18n.js
index cabde68..8a7aa45 100644
--- a/example/src/i18n.js
+++ b/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',
diff --git a/example/src/routes/about/_locales/ar.json b/example/src/routes/about/_locales/ar.json
new file mode 100644
index 0000000..278f608
--- /dev/null
+++ b/example/src/routes/about/_locales/ar.json
@@ -0,0 +1,7 @@
+{
+  "title": {
+    "about": "About"
+  },
+  "about_this_site": "عن هذا الموقع",
+  "about_content": ["هذه هي صفحة 'حول'. ليس هناك الكثير هنا."]
+}
diff --git a/example/src/routes/about/index.svelte b/example/src/routes/about/index.svelte
index dcca175..a494547 100644
--- a/example/src/routes/about/index.svelte
+++ b/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>
-
-<p>{$_('about_content.0')}</p>
+<div class={$_('direction')}>
+  <h1>{$_('about_this_site')}</h1>
+  <p>{$_('about_content.0')}</p>
+</div>