From 7f614fb4e4c3134b477eddfd0034106b9cb01a00 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 12:49:34 -0500
Subject: setup localization & load locales

---
 src/lib/i18n.js            | 15 +++++++++++++++
 src/locales/en.json        |  3 +++
 src/locales/fr.json        |  3 +++
 src/routes/__layout.svelte |  2 ++
 4 files changed, 23 insertions(+)
 create mode 100644 src/lib/i18n.js
 create mode 100644 src/locales/en.json
 create mode 100644 src/locales/fr.json

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
new file mode 100644
index 00000000..e0387fb4
--- /dev/null
+++ b/src/lib/i18n.js
@@ -0,0 +1,15 @@
+import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
+
+let localeCodes = ['en', 'fr'];
+
+// load locales
+function addLocale(localeCode) {
+  register(localeCode, () => import('../locales/' + localeCode + '.json'));
+  console.log("Loaded locale '" + localeCode + "'");
+}
+localeCodes.forEach(addLocale);
+
+init({
+  fallbackLocale: 'en',
+  initialLocale: getLocaleFromNavigator(),
+});
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 00000000..b7c7f102
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "langname": "English"
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
new file mode 100644
index 00000000..265783e9
--- /dev/null
+++ b/src/locales/fr.json
@@ -0,0 +1,3 @@
+{
+  "langname": "Français"
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index f5576edd..ed1ad188 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -3,6 +3,8 @@
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 
+  import '$lib/i18n';
+
 	onMount(connect);
 </script>
 
-- 
cgit v1.2.3


From 0f767571be758ec7eb3c11c5bcd608adfbb9328b Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 12:56:23 -0500
Subject: localized landing header

---
 src/components/LandingHeader.svelte | 12 +++++++-----
 src/locales/en.json                 |  7 ++++++-
 src/locales/fr.json                 |  7 ++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 4da9a17e..b0ac0a9d 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -3,6 +3,8 @@
 	import { scroll } from '$lib/utils';
 	import { Icon } from '$comp';
 
+  import { _ } from 'svelte-i18n';
+
 	export let howItWorks;
 	export let faq;
 </script>
@@ -14,17 +16,17 @@
 		</a>
 
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-			<button on:click={() => scroll(howItWorks)}>How It Works</button>
-			<button on:click={() => scroll(faq)}>FAQ</button>
-			<button>About</button>
+			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
+			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
+			<button>{$_('about')}</button>
 			<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-				>Start in Seconds</button
+				>{$_('startInSeconds')}</button
 			>
 			<button
 				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 				on:click={() => goto('/login')}
 			>
-				Sign in
+        {$_('signIn')}
 			</button>
 		</div>
 	</nav>
diff --git a/src/locales/en.json b/src/locales/en.json
index b7c7f102..97ae2cd3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,3 +1,8 @@
 {
-  "langname": "English"
+  "langname": "English",
+  "howItWorks": "How It Works",
+  "faq": "FAQ",
+  "about": "About",
+  "startInSeconds": "Start in Seconds",
+  "signIn": "Sign In"
 }
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 265783e9..ec0b5016 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,3 +1,8 @@
 {
-  "langname": "Français"
+  "langname": "Français",
+  "howItWorks": "Comment Ça Fonctionne",
+  "faq": "FAQ",
+  "about": "À Propos",
+  "startInSeconds": "Commence en Secondes",
+  "signIn": "Connexion"
 }
-- 
cgit v1.2.3


From b57597a0487ea5d6451ea43c32d083df40fd9353 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 13:15:27 -0500
Subject: added a temporary locale selector to the top bar

---
 src/components/AppHeader.svelte     | 8 ++++++++
 src/components/LandingHeader.svelte | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9998a4f6..d329dff5 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -3,10 +3,18 @@
 
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
+
+  import { locale, locales } from 'svelte-i18n';
 </script>
 
 <header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
+    <select bind:value={$locale}>
+      {#each $locales as locale}
+        <option value={locale}>{locale}</option>
+      {/each}
+    </select>
+
 		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
 			><Icon icon="numpad" style="mx-auto" /></button
 		>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index b0ac0a9d..5faebb59 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -3,7 +3,7 @@
 	import { scroll } from '$lib/utils';
 	import { Icon } from '$comp';
 
-  import { _ } from 'svelte-i18n';
+  import { _, locale, locales } from 'svelte-i18n';
 
 	export let howItWorks;
 	export let faq;
@@ -15,6 +15,12 @@
 			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
 
+    <select bind:value={$locale}>
+      {#each $locales as locale}
+        <option value={locale}>{locale}</option>
+      {/each}
+    </select>
+
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
 			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
-- 
cgit v1.2.3


From b9fff25b8ecb0aad18aa7d7f7b853cc5527f1c00 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 13:56:46 -0500
Subject: If regional locale not found, uses language locale instead

(e.g. uses en if en-US is not available)
---
 src/lib/i18n.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index e0387fb4..2d44a767 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -9,7 +9,32 @@ function addLocale(localeCode) {
 }
 localeCodes.forEach(addLocale);
 
+// determine locale
+function pickLocale(navigatorLocale, availableLocales) {
+  // determine langugage part of locale
+  // (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
+  let dashIndex = navigatorLocale ? navigatorLocale.indexOf("-") : -1;
+  let languageCode; // navigator locale without the regional part
+  if (dashIndex === -1) {
+    languageCode = navigatorLocale;
+  } else {
+    languageCode = navigatorLocale.slice(0, dashIndex);
+  }
+
+  // get locale
+  if (availableLocales.includes(navigatorLocale)) {
+    return navigatorLocale;
+  } else if (availableLocales.includes(languageCode)) {
+    return languageCode;
+  } else {
+    return null;
+  }
+}
+
+let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
+console.log("Selected locale '" + initialLocale + "'");
+
 init({
   fallbackLocale: 'en',
-  initialLocale: getLocaleFromNavigator(),
+  initialLocale: initialLocale,
 });
-- 
cgit v1.2.3


From a77b4bf481cee57e7a5150c41e3bca703f800475 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 14:01:21 -0500
Subject: i18n setup uses a function instead of an import

---
 src/lib/i18n.js            | 20 +++++++++++---------
 src/routes/__layout.svelte |  3 ++-
 2 files changed, 13 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 2d44a767..95bf7013 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,13 +1,12 @@
 import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
-let localeCodes = ['en', 'fr'];
+// list of locales to load
+const localeCodes = ['en', 'fr'];
 
 // load locales
 function addLocale(localeCode) {
   register(localeCode, () => import('../locales/' + localeCode + '.json'));
-  console.log("Loaded locale '" + localeCode + "'");
 }
-localeCodes.forEach(addLocale);
 
 // determine locale
 function pickLocale(navigatorLocale, availableLocales) {
@@ -31,10 +30,13 @@ function pickLocale(navigatorLocale, availableLocales) {
   }
 }
 
-let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
-console.log("Selected locale '" + initialLocale + "'");
+// setup internationalization
+export function setupI18n() {
+  localeCodes.forEach(addLocale);
+  let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
 
-init({
-  fallbackLocale: 'en',
-  initialLocale: initialLocale,
-});
+  init({
+    fallbackLocale: 'en',
+    initialLocale: initialLocale,
+  });
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index ed1ad188..76b19234 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -3,9 +3,10 @@
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 
-  import '$lib/i18n';
+  import { setupI18n } from '$lib/i18n';
 
 	onMount(connect);
+  setupI18n();
 </script>
 
 <slot />
-- 
cgit v1.2.3


From f542f2f59eb1d4d6b1e04973d134901c2f9d02be Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 14:34:45 -0500
Subject: use template strings to determine locale filepath

---
 src/lib/i18n.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 95bf7013..d3db2454 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -5,7 +5,7 @@ const localeCodes = ['en', 'fr'];
 
 // load locales
 function addLocale(localeCode) {
-  register(localeCode, () => import('../locales/' + localeCode + '.json'));
+  register(localeCode, () => import(`../locales/${localeCode}.json`));
 }
 
 // determine locale
-- 
cgit v1.2.3


From 11c725b7ac41fe75b54732b19814cffafdb2e7f9 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 15:27:20 -0500
Subject: Documented locale code

---
 src/lib/i18n.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index d3db2454..2d39e292 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,14 +1,25 @@
 import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
-// list of locales to load
+/** The list of locales to look for */
 const localeCodes = ['en', 'fr'];
 
-// load locales
+/** The directory where locale files are stored */
+const localeDirectory = "../locales";
+
+/**
+ * Adds a new locale from the appropriate JSON file
+ * @param {string} localeCode - the code of the locale to add
+ */
 function addLocale(localeCode) {
-  register(localeCode, () => import(`../locales/${localeCode}.json`));
+  register(localeCode, () => import(`${localeDirectory}/${localeCode}.json`));
 }
 
-// determine locale
+/**
+ * Determines the default locale.
+ * @param {string} navigatorLocale - the locale given by the navigator
+ * @param {array<string>} avalableLocales - a list of the available locales
+ * @returns {string} chosen default locale
+ */
 function pickLocale(navigatorLocale, availableLocales) {
   // determine langugage part of locale
   // (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
@@ -30,7 +41,9 @@ function pickLocale(navigatorLocale, availableLocales) {
   }
 }
 
-// setup internationalization
+/**
+ * Loads all of the locales, picks a default locale, and sets up internationalization in that locale.
+ */
 export function setupI18n() {
   localeCodes.forEach(addLocale);
   let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
-- 
cgit v1.2.3


From 5535adee8c980ed142d6d3e3178df04e6f51eb4d Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 15:52:21 -0500
Subject: reverted function commit (broke localization)

---
 src/lib/i18n.js            | 18 +++++++-----------
 src/routes/__layout.svelte |  3 +--
 2 files changed, 8 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 2d39e292..5232a399 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -41,15 +41,11 @@ function pickLocale(navigatorLocale, availableLocales) {
   }
 }
 
-/**
- * Loads all of the locales, picks a default locale, and sets up internationalization in that locale.
- */
-export function setupI18n() {
-  localeCodes.forEach(addLocale);
-  let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
+// add locales
+localeCodes.forEach(addLocale);
 
-  init({
-    fallbackLocale: 'en',
-    initialLocale: initialLocale,
-  });
-}
+let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
+init({
+  fallbackLocale: 'en',
+  initialLocale: initialLocale,
+});
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 76b19234..ed1ad188 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -3,10 +3,9 @@
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 
-  import { setupI18n } from '$lib/i18n';
+  import '$lib/i18n';
 
 	onMount(connect);
-  setupI18n();
 </script>
 
 <slot />
-- 
cgit v1.2.3


From 0eb0e93e24ad553c01ea30851f64efa0b390afd3 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 15:54:30 -0500
Subject: made the locale selector its own component

---
 src/components/AppHeader.svelte      | 8 ++------
 src/components/LandingHeader.svelte  | 8 ++------
 src/components/LocaleSelector.svelte | 9 +++++++++
 src/components/index.js              | 1 +
 4 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 src/components/LocaleSelector.svelte

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index d329dff5..249e2826 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -2,18 +2,14 @@
 	// we will want to dynamically use the users avatar on this screen if they have uploaded one
 
 	import { goto } from '$app/navigation';
-	import { Icon } from '$comp';
+	import { Icon, LocaleSelector } from '$comp';
 
   import { locale, locales } from 'svelte-i18n';
 </script>
 
 <header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-    <select bind:value={$locale}>
-      {#each $locales as locale}
-        <option value={locale}>{locale}</option>
-      {/each}
-    </select>
+    <LocaleSelector />
 
 		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
 			><Icon icon="numpad" style="mx-auto" /></button
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 5faebb59..ca9d431e 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { scroll } from '$lib/utils';
-	import { Icon } from '$comp';
+	import { Icon, LocaleSelector } from '$comp';
 
   import { _, locale, locales } from 'svelte-i18n';
 
@@ -15,11 +15,7 @@
 			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
 
-    <select bind:value={$locale}>
-      {#each $locales as locale}
-        <option value={locale}>{locale}</option>
-      {/each}
-    </select>
+    <LocaleSelector />
 
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
new file mode 100644
index 00000000..39d1791f
--- /dev/null
+++ b/src/components/LocaleSelector.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { _, dictionary, locale, locales } from 'svelte-i18n';
+</script>
+
+<select bind:value={$locale}>
+  {#each $locales as locale}
+      <option value={locale}>{locale}</option>
+  {/each}
+</select>
diff --git a/src/components/index.js b/src/components/index.js
index febf8dac..f0e86183 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
+export { default as LocaleSelector } from './LocaleSelector.svelte';
-- 
cgit v1.2.3


From 92d79f9900298e3e775d7089b25e815077f4c0f7 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 15:56:34 -0500
Subject: Removed unneeded import

---
 src/components/LocaleSelector.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index 39d1791f..a3531ec5 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { _, dictionary, locale, locales } from 'svelte-i18n';
+  import { _, locale, locales } from 'svelte-i18n';
 </script>
 
 <select bind:value={$locale}>
   {#each $locales as locale}
-      <option value={locale}>{locale}</option>
+    <option value={locale}>{locale}</option>
   {/each}
 </select>
-- 
cgit v1.2.3


From 3b216dd6c170a7d71d21a391098c554008c8bdb4 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Fri, 29 Jul 2022 16:03:54 -0500
Subject: Removed i18n.js documentation (am going to do it a different way)

---
 src/lib/i18n.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 5232a399..0600a2a8 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,25 +1,17 @@
 import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
-/** The list of locales to look for */
+// The list of locales to look for
 const localeCodes = ['en', 'fr'];
 
-/** The directory where locale files are stored */
+// The directory where locale files are stored
 const localeDirectory = "../locales";
 
-/**
- * Adds a new locale from the appropriate JSON file
- * @param {string} localeCode - the code of the locale to add
- */
+// Adds a new locale based on its code
 function addLocale(localeCode) {
   register(localeCode, () => import(`${localeDirectory}/${localeCode}.json`));
 }
 
-/**
- * Determines the default locale.
- * @param {string} navigatorLocale - the locale given by the navigator
- * @param {array<string>} avalableLocales - a list of the available locales
- * @returns {string} chosen default locale
- */
+// Picks the default locale based on navigator locale and the list of available locales
 function pickLocale(navigatorLocale, availableLocales) {
   // determine langugage part of locale
   // (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
-- 
cgit v1.2.3


From 7031160fd2c093ca43205db543dd75b90581da4d Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Thu, 4 Aug 2022 12:32:13 -0500
Subject: Possible fix for the page breaking the first time you open it

---
 src/lib/i18n.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 0600a2a8..4cbb9a5d 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -6,6 +6,9 @@ const localeCodes = ['en', 'fr'];
 // The directory where locale files are stored
 const localeDirectory = "../locales";
 
+// the default locale to use if none was found
+const defaultLocale = "en";
+
 // Adds a new locale based on its code
 function addLocale(localeCode) {
   register(localeCode, () => import(`${localeDirectory}/${localeCode}.json`));
@@ -13,6 +16,11 @@ function addLocale(localeCode) {
 
 // Picks the default locale based on navigator locale and the list of available locales
 function pickLocale(navigatorLocale, availableLocales) {
+  // locale can be null the first time you load this
+  // return the default locale in that case - reloading should fix this
+  if (!navigatorLocale)
+    return defaultLocale;
+
   // determine langugage part of locale
   // (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
   let dashIndex = navigatorLocale ? navigatorLocale.indexOf("-") : -1;
@@ -38,6 +46,6 @@ localeCodes.forEach(addLocale);
 
 let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
 init({
-  fallbackLocale: 'en',
+  fallbackLocale: defaultLocale,
   initialLocale: initialLocale,
 });
-- 
cgit v1.2.3


From ffc36d48b11045708967637832d959cade58b8eb Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Mon, 8 Aug 2022 07:34:17 -0500
Subject: Removed vite build warning by hardcoding locale import directory

---
 src/lib/i18n.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 4cbb9a5d..79d179d5 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -3,15 +3,12 @@ import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 // The list of locales to look for
 const localeCodes = ['en', 'fr'];
 
-// The directory where locale files are stored
-const localeDirectory = "../locales";
-
 // the default locale to use if none was found
 const defaultLocale = "en";
 
 // Adds a new locale based on its code
 function addLocale(localeCode) {
-  register(localeCode, () => import(`${localeDirectory}/${localeCode}.json`));
+  register(localeCode, () => import(`../locales/${localeCode}.json`));
 }
 
 // Picks the default locale based on navigator locale and the list of available locales
-- 
cgit v1.2.3


From b1a0f70705091480a5578881f239ab53552ed6cd Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Mon, 8 Aug 2022 14:22:01 -0500
Subject: first draft of i18n instructions

---
 README.md                    |  65 +++++++++++++++++++++++++++++++++++++++++++
 img/add_locale_github.png    | Bin 0 -> 99036 bytes
 img/create_locale_github.png | Bin 0 -> 64118 bytes
 img/translate_github.png     | Bin 0 -> 78506 bytes
 src/lib/i18n.js              |   3 +-
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 img/add_locale_github.png
 create mode 100644 img/create_locale_github.png
 create mode 100644 img/translate_github.png

(limited to 'src')

diff --git a/README.md b/README.md
index 5ab2c1f6..6e8a36ec 100644
--- a/README.md
+++ b/README.md
@@ -9,3 +9,68 @@ this repository is the front-end code for the coinos web application, it uses `s
 ## commands
 
 to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get your dev environment setup, and `pnpm format` to format the codebase when making changes.
+
+# Internationalization
+
+CoinOS can be translated into other languages by editing JSON files.  You do not need programming knowledge to do this, or to use these instructions.  Here are instructions on how to internationalize CoinOS:
+
+## Required Background Knowledge
+
+### Language Codes
+
+Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language.  This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`).  You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`).  A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language.
+
+### Locale Files
+
+Each translation of CoinOS is stored in a special *locale file*.  These files can be found in the `src/locales` folder in the CoinOS directory.  The name of these files is the language code plus "`.json`".  A file might look something like this:
+
+```JSON
+{
+  "howItWorks": "How It Works",
+  "faq": "FAQ",
+  "about": "About",
+  "startInSeconds": "Start in Seconds",
+  "signIn": "Sign In"
+}
+```
+
+Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**.  All lines other than the last end in a comma.  The text name is a word that is the same in all translations, and is used by the code to access that string.  **Both the text name and translated text must be inside quotation marks (`"`).**
+
+### The Language List
+
+At the top of the file `src/lib/i18n.js`, there is a list of translations that looks something like this:
+
+```js
+// The list of locales to look for
+// ADD ALL NEW LOCALES TO THIS LIST
+const localeCodes = ["en", "fr"];
+```
+
+In order for a translation to be recognized by the CoinOS system, you need to add it to this list.  At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks.
+
+## Creating a New Translation
+
+Follow these steps to create a new translation.  You will need a GitHub account to do this:
+1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
+2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub.
+[](./img/create_locale_github.png)
+3. Copy the text from `en.json` into this new file.
+4. Translate all of the strings on the right.  **Do not translate or alter in any way the strings on the left!**
+[](./img/translate_github.png)
+5. Scroll down and use the green button to commit the file.
+6. Go to the `src` folder again, then `lib`, then `i18n.js`.
+7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list.
+[](./img/add_locale_github.png)
+8. Commit your changes like you did in step 5.
+
+## Adding to an Existing Translation
+
+Follow these steps to add to an existing translation.  You will also need a GitHub account to do this:
+1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
+2. Go to the `src` folder, then `locales`, then `en.json`.
+3. Find the line with the string that you want to translate.
+4. Find your translation's file, at `src/locales/xx.json`.
+5. Add the line from step 3 to the file, in between the `{}` braces.  Make sure the previous line has a comma at the end.
+6. Use the pencil icon on the top-right to edit the file.  Translate the string on the right, keeping the quotes surrounding it.  **Do not translate or alter in any way the strings on the left!**
+7. Repeat steps 3-6 for every string you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased).
+8. Scroll down and use the green button to commit the file.
diff --git a/img/add_locale_github.png b/img/add_locale_github.png
new file mode 100644
index 00000000..1a75b223
Binary files /dev/null and b/img/add_locale_github.png differ
diff --git a/img/create_locale_github.png b/img/create_locale_github.png
new file mode 100644
index 00000000..538124da
Binary files /dev/null and b/img/create_locale_github.png differ
diff --git a/img/translate_github.png b/img/translate_github.png
new file mode 100644
index 00000000..22e33174
Binary files /dev/null and b/img/translate_github.png differ
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 79d179d5..bf8ed173 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,7 +1,8 @@
 import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
 // The list of locales to look for
-const localeCodes = ['en', 'fr'];
+// ADD ALL NEW LOCALES TO THIS LIST
+const localeCodes = ["en", "fr"];
 
 // the default locale to use if none was found
 const defaultLocale = "en";
-- 
cgit v1.2.3


From 7f49e33feeec4952b3423373638db3eb81a7b3a1 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Mon, 8 Aug 2022 14:43:22 -0500
Subject: second draft of i18n instructions

---
 README.md       | 23 ++++++++++++-----------
 src/lib/i18n.js |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/README.md b/README.md
index 6e8a36ec..052da5a5 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Each translation of CoinOS is stored in a special *locale file*.  These files ca
 }
 ```
 
-Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**.  All lines other than the last end in a comma.  The text name is a word that is the same in all translations, and is used by the code to access that string.  **Both the text name and translated text must be inside quotation marks (`"`).**
+Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**.  All lines other than the last end in a comma.  The text name is a word that is the same in all translations, and is used by the code to access that piece of text.  **Both the text name and translated text must be inside quotation marks (`"`).**
 
 ### The Language List
 
@@ -42,7 +42,7 @@ At the top of the file `src/lib/i18n.js`, there is a list of translations that l
 
 ```js
 // The list of locales to look for
-// ADD ALL NEW LOCALES TO THIS LIST
+// ADD ALL NEW LANGUAGE CODES TO THIS LIST
 const localeCodes = ["en", "fr"];
 ```
 
@@ -53,14 +53,14 @@ In order for a translation to be recognized by the CoinOS system, you need to ad
 Follow these steps to create a new translation.  You will need a GitHub account to do this:
 1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
 2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub.
-[](./img/create_locale_github.png)
+![Creating a new translation in GitHub](./img/create_locale_github.png)
 3. Copy the text from `en.json` into this new file.
-4. Translate all of the strings on the right.  **Do not translate or alter in any way the strings on the left!**
-[](./img/translate_github.png)
+4. Translate all of the pieces of text on the right.  **Do not translate or alter in any way the pieces of text on the left!**
+![Translating in GitHub](./img/translate_github.png)
 5. Scroll down and use the green button to commit the file.
 6. Go to the `src` folder again, then `lib`, then `i18n.js`.
 7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list.
-[](./img/add_locale_github.png)
+![Adding a new translation in GitHub](./img/add_locale_github.png)
 8. Commit your changes like you did in step 5.
 
 ## Adding to an Existing Translation
@@ -68,9 +68,10 @@ Follow these steps to create a new translation.  You will need a GitHub account
 Follow these steps to add to an existing translation.  You will also need a GitHub account to do this:
 1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
 2. Go to the `src` folder, then `locales`, then `en.json`.
-3. Find the line with the string that you want to translate.
+3. Find the line with the piece of text that you want to translate.
 4. Find your translation's file, at `src/locales/xx.json`.
-5. Add the line from step 3 to the file, in between the `{}` braces.  Make sure the previous line has a comma at the end.
-6. Use the pencil icon on the top-right to edit the file.  Translate the string on the right, keeping the quotes surrounding it.  **Do not translate or alter in any way the strings on the left!**
-7. Repeat steps 3-6 for every string you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased).
-8. Scroll down and use the green button to commit the file.
+5. Use the pencil icon on the top-right to edit the file.
+6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces.  Make sure the previous line has a comma at the end.
+7. Translate the piece of text on the right, keeping the quotes surrounding it.  **Do not translate or alter in any way the piece of text on the left!**
+8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased).
+9. Scroll down and use the green button to commit the file.
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index bf8ed173..44d06287 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,7 +1,7 @@
 import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
 // The list of locales to look for
-// ADD ALL NEW LOCALES TO THIS LIST
+// ADD ALL NEW LANGUAGE CODES TO THIS LIST
 const localeCodes = ["en", "fr"];
 
 // the default locale to use if none was found
-- 
cgit v1.2.3


From b156efdf1f0647dc296c4237cf8eb12d8c4d0503 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Mon, 8 Aug 2022 15:55:46 -0500
Subject: tweaked locale selection & added i18n technical documentation

---
 README.md             |  2 +-
 doc/i18n-technical.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 doc/i18n.md           |  2 +-
 src/lib/i18n.js       |  2 +-
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 doc/i18n-technical.md

(limited to 'src')

diff --git a/README.md b/README.md
index ff746922..738b0a81 100644
--- a/README.md
+++ b/README.md
@@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get
 
 ## Internationalization
 
-CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n).  For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md).
+CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n).  For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md).  For technical details, click [here](./doc/i18n-technical.md).
diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md
new file mode 100644
index 00000000..ea28627e
--- /dev/null
+++ b/doc/i18n-technical.md
@@ -0,0 +1,46 @@
+# CoinOS Internationalization - Technical Information
+
+*NOTE: This documentation was written for people with a technical background.  If you do not have a technical background, consider reading [this guide](./i18n.md) instead.*
+
+Last Updated: 2022-08-08
+
+## Dependencies
+
+CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n).  Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this.
+
+## Internationalization Code
+
+The main code for CoinOS's internationalization is at `src/lib/i18n.js`.  When imported, it does the following:
+1. Load all of the locales [asynchronously](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md#32-asynchronous).
+2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`.  Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale.
+3. Initialize `svelte-i18n`.
+
+It also defines important constants, including the list of available locales and the default locale.  This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`.
+
+## Locale Files
+
+Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`.  Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`.  It is simply a file that maps string IDs to translated strings.  Here is an example of `en.json`:
+
+```json
+{
+  "howItWorks": "How It Works",
+  "faq": "FAQ",
+  "about": "About",
+  "startInSeconds": "Start in Seconds",
+  "signIn": "Sign In"
+}
+```
+
+## Internationalizing Strings
+
+Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function.  A localized string looks like this:
+
+```
+{$_('stringID')}
+```
+
+(`$_` is a convenient alias for `$format`.)
+
+## The Locale Selector
+
+CoinOS also has a `LocaleSelector` component, which should be used to select locales.  It is a dropdown that allows you to select & update the locale.
diff --git a/doc/i18n.md b/doc/i18n.md
index b8727524..b1cbd78e 100644
--- a/doc/i18n.md
+++ b/doc/i18n.md
@@ -2,7 +2,7 @@
 
 CoinOS can be translated into other languages by editing JSON files.  You do not need programming knowledge to do this, or to use these instructions.  Here are instructions on how to internationalize CoinOS:
 
-*NOTE: This guide was written for people without a technical background.*
+*NOTE: This guide was written for people without a technical background.  If you want more technical details, click [here](./i18n-technical.md)*
 
 ## Required Background Knowledge
 
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 44d06287..fdf5de3c 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -35,7 +35,7 @@ function pickLocale(navigatorLocale, availableLocales) {
   } else if (availableLocales.includes(languageCode)) {
     return languageCode;
   } else {
-    return null;
+    return navigatorLocale;
   }
 }
 
-- 
cgit v1.2.3


From 51b32916d6acd077a01de25577618de27ae7d142 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 9 Aug 2022 16:11:27 -0500
Subject: Right-aligned the locale selector, and put it in the mobile menu

---
 src/components/LandingHeader.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 9c4d43a8..3d8a07ea 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -23,10 +23,10 @@
 		</a>
 		<Icon icon="logo" style="block md:hidden ml-5 w-48" />
 
-    <LocaleSelector />
-
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
+      <LocaleSelector />
+
 			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
 			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
 			<button on:click={() => scroll(about)}>{$_('about')}</button>
@@ -68,6 +68,8 @@
 				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
+        <LocaleSelector />
+
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
 					>{$_('howItWorks')}</button
 				>
@@ -77,7 +79,7 @@
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/register')}
-						>{$_('startInSeconds')}
+						>{$_('signIn')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
@@ -99,7 +101,6 @@
 					</button>
 				{/if}
 			</div>
->>>>>>> master
 		</div>
 	</nav>
 </header>
-- 
cgit v1.2.3


From 9ac3945baa265097603bd9d409d130bb82005394 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:56:47 -0600
Subject: move lang selector from app header into settings page

---
 src/components/AppHeader.svelte       | 4 +---
 src/routes/[username]/settings.svelte | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9ebf28bf..dd09d536 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -4,7 +4,7 @@
 	import OutClick from 'svelte-outclick';
 	import { user, newPayment, colorTheme } from '$lib/store';
 	import { goto } from '$app/navigation';
-	import { Icon, LocaleSelector } from '$comp';
+	import { Icon } from '$comp';
 
 	export let avatarPosition = 'left-[calc(50vw-48px)]';
 
@@ -30,7 +30,6 @@
 
 <header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-    <LocaleSelector />
 		{#if $user}
 			<a href={`/${$user.username}/receive`}>
 				<button class="bg-white p-2 rounded-full w-12 h-12"
@@ -89,7 +88,6 @@
 				<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm">Sign in </button>
 			</a>
 		{/if}
->>>>>>> master
 	</nav>
 	<div
 		class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24"
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 5abe58e0..11e0977a 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { AppHeader, Icon, Toggle } from '$comp';
+	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme } from '$lib/store';
 
 	let setting = 'account';
@@ -44,6 +44,11 @@
 		</div>
 
 		{#if setting === 'account'}
+		<div>
+      <label for="language" class="font-bold block mb-1">Language</label>
+  <LocaleSelector style='block py-3 w-full'/>
+    </div>
+
 			<div>
 				<label for="username" class="font-bold mb-1 block">Username</label>
 				<input
-- 
cgit v1.2.3


From db141889868ac99ef3248ebf89101f19167569cb Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:57:02 -0600
Subject: add style prop to locale selector comp

---
 src/components/LocaleSelector.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index a3531ec5..3f173109 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,8 +1,9 @@
 <script>
   import { _, locale, locales } from 'svelte-i18n';
+  export let style
 </script>
 
-<select bind:value={$locale}>
+<select name='language' bind:value={$locale} class={style}>
   {#each $locales as locale}
     <option value={locale}>{locale}</option>
   {/each}
-- 
cgit v1.2.3


From cf4dc80dc041e6038dee068689971406ba51b2f6 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:57:23 -0600
Subject: add categories to locale json files

---
 src/locales/en.json | 3 +++
 src/locales/fr.json | 3 +++
 2 files changed, 6 insertions(+)

(limited to 'src')

diff --git a/src/locales/en.json b/src/locales/en.json
index 97ae2cd3..c5c36c4b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,8 +1,11 @@
 {
   "langname": "English",
+  "nav": {
   "howItWorks": "How It Works",
   "faq": "FAQ",
   "about": "About",
   "startInSeconds": "Start in Seconds",
   "signIn": "Sign In"
 }
+
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index ec0b5016..d2c9d758 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,8 +1,11 @@
 {
   "langname": "Français",
+"nav": {
   "howItWorks": "Comment Ça Fonctionne",
   "faq": "FAQ",
   "about": "À Propos",
   "startInSeconds": "Commence en Secondes",
   "signIn": "Connexion"
 }
+
+}
-- 
cgit v1.2.3


From 43159f41602cb1502fabe240d30c5d5f87ce3581 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:57:55 -0600
Subject: wait on locale load to render app

---
 src/routes/__layout.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 158397c5..c5234c7d 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,3 +1,12 @@
+<script context="module">
+  import { waitLocale } from 'svelte-i18n'
+
+  export async function preload() {
+    // awaits for the loading of the 'en-US' and 'en' dictionaries
+    return waitLocale()
+  }
+</script>
+
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
-- 
cgit v1.2.3


From 94bb8a163f2d1197544977bdbd3c225a815f9c0e Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:58:34 -0600
Subject: update styling and placment on selector in nav and update json
 strings

---
 src/components/LandingHeader.svelte | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 3d8a07ea..544e2a9d 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -18,27 +18,29 @@
 
 <header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90">
 	<nav class="block xl:flex flex-wrap justify-between items-center">
+<div class='flex justify-start md:justify-center items-center md:space-x-10'>
 		<a href="/" class="hidden md:block">
-			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
+			<Icon icon="logo" style="mb-5 xl:mb-0" />
 		</a>
 		<Icon icon="logo" style="block md:hidden ml-5 w-48" />
-
+<LocaleSelector style='hidden md:block py-1 mb-5 xl:mb-0' />
+</div>
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-      <LocaleSelector />
 
-			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
-			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
-			<button on:click={() => scroll(about)}>{$_('about')}</button>
+
+			<button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button>
+			<button on:click={() => scroll(faq)}>{$_('nav.faq')}</button>
+			<button on:click={() => scroll(about)}>{$_('nav.about')}</button>
 			{#if !$user}
 				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-					>{$_('startInSeconds')}
+					>{$_('nav.startInSeconds')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/login')}
 				>
-					{$_('signIn')}
+					{$_('nav.signIn')}
 				</button>
 			{:else}
 				<button
@@ -53,6 +55,7 @@
 					Sign out
 				</button>
 			{/if}
+
 		</div>
 
 		<!-- mobile nav -->
@@ -68,24 +71,24 @@
 				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
-        <LocaleSelector />
+
 
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
-					>{$_('howItWorks')}</button
+					>{$_('nav.howItWorks')}</button
 				>
-				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('FAQ')}</button>
-				<button on:click={() => mobileMenuButtonClick(about)} class="block">{$_('about')}</button>
+				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button>
+				<button on:click={() => mobileMenuButtonClick(about)} class="block">{$_('nav.about')}</button>
 				{#if !$user}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/register')}
-						>{$_('signIn')}
+						>{$_('nav.startInSeconds')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/login')}
 					>
-            {$_('startInSeconds')}
+            {$_('nav.signIn')}
 					</button>
 				{:else}
 					<button
@@ -100,6 +103,8 @@
 						Sign out
 					</button>
 				{/if}
+
+ <LocaleSelector style='py-1' />
 			</div>
 		</div>
 	</nav>
-- 
cgit v1.2.3


From c26e004f4a05f231242587c1265a620b7fcd873a Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:59:19 -0600
Subject: run format

---
 README.md                             |  2 +-
 doc/i18n-technical.md                 | 27 ++++++++---------
 doc/i18n.md                           | 36 ++++++++++++-----------
 src/components/LandingHeader.svelte   | 29 +++++++++---------
 src/components/LocaleSelector.svelte  | 12 ++++----
 src/lib/i18n.js                       | 55 +++++++++++++++++------------------
 src/locales/en.json                   | 17 +++++------
 src/locales/fr.json                   | 17 +++++------
 src/routes/[username]/settings.svelte |  8 ++---
 src/routes/__layout.svelte            | 12 ++++----
 10 files changed, 106 insertions(+), 109 deletions(-)

(limited to 'src')

diff --git a/README.md b/README.md
index 738b0a81..f86424f0 100644
--- a/README.md
+++ b/README.md
@@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get
 
 ## Internationalization
 
-CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n).  For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md).  For technical details, click [here](./doc/i18n-technical.md).
+CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md).
diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md
index ea28627e..6c45ee01 100644
--- a/doc/i18n-technical.md
+++ b/doc/i18n-technical.md
@@ -1,39 +1,40 @@
 # CoinOS Internationalization - Technical Information
 
-*NOTE: This documentation was written for people with a technical background.  If you do not have a technical background, consider reading [this guide](./i18n.md) instead.*
+_NOTE: This documentation was written for people with a technical background. If you do not have a technical background, consider reading [this guide](./i18n.md) instead._
 
 Last Updated: 2022-08-08
 
 ## Dependencies
 
-CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n).  Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this.
+CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this.
 
 ## Internationalization Code
 
-The main code for CoinOS's internationalization is at `src/lib/i18n.js`.  When imported, it does the following:
+The main code for CoinOS's internationalization is at `src/lib/i18n.js`. When imported, it does the following:
+
 1. Load all of the locales [asynchronously](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md#32-asynchronous).
-2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`.  Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale.
+2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`. Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale.
 3. Initialize `svelte-i18n`.
 
-It also defines important constants, including the list of available locales and the default locale.  This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`.
+It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`.
 
 ## Locale Files
 
-Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`.  Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`.  It is simply a file that maps string IDs to translated strings.  Here is an example of `en.json`:
+Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`. It is simply a file that maps string IDs to translated strings. Here is an example of `en.json`:
 
 ```json
 {
-  "howItWorks": "How It Works",
-  "faq": "FAQ",
-  "about": "About",
-  "startInSeconds": "Start in Seconds",
-  "signIn": "Sign In"
+	"howItWorks": "How It Works",
+	"faq": "FAQ",
+	"about": "About",
+	"startInSeconds": "Start in Seconds",
+	"signIn": "Sign In"
 }
 ```
 
 ## Internationalizing Strings
 
-Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function.  A localized string looks like this:
+Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function. A localized string looks like this:
 
 ```
 {$_('stringID')}
@@ -43,4 +44,4 @@ Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https:
 
 ## The Locale Selector
 
-CoinOS also has a `LocaleSelector` component, which should be used to select locales.  It is a dropdown that allows you to select & update the locale.
+CoinOS also has a `LocaleSelector` component, which should be used to select locales. It is a dropdown that allows you to select & update the locale.
diff --git a/doc/i18n.md b/doc/i18n.md
index e1ed304a..d6f2b4ff 100644
--- a/doc/i18n.md
+++ b/doc/i18n.md
@@ -1,18 +1,18 @@
 # CoinOS Internationalization
 
-CoinOS can be translated into other languages by editing JSON files.  You do not need programming knowledge to do this, or to use these instructions.  Here are instructions on how to internationalize CoinOS:
+CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS:
 
-*NOTE: This guide was written for people without a technical background.  If you want more technical details, click [here](./i18n-technical.md).*
+_NOTE: This guide was written for people without a technical background. If you want more technical details, click [here](./i18n-technical.md)._
 
 ## Required Background Knowledge
 
 ### Language Codes
 
-Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language.  This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`).  You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`).  A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language.
+Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language.
 
 ### Locale Files
 
-Each translation of CoinOS is stored in a special *locale file*.  These files can be found in the `src/locales` folder in the CoinOS directory.  The name of these files is the language code plus "`.json`".  A file might look something like this:
+Each translation of CoinOS is stored in a special _locale file_. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this:
 
 ```JSON
 {
@@ -24,7 +24,7 @@ Each translation of CoinOS is stored in a special *locale file*.  These files ca
 }
 ```
 
-Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**.  All lines other than the last end in a comma.  The text name is a word that is the same in all translations, and is used by the code to access that piece of text.  **Both the text name and translated text must be inside quotation marks (`"`).**
+Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).**
 
 ### The Language List
 
@@ -33,35 +33,37 @@ At the top of the file `src/lib/i18n.js`, there is a list of translations that l
 ```js
 // The list of locales to look for
 // ADD ALL NEW LANGUAGE CODES TO THIS LIST
-const localeCodes = ["en", "fr"];
+const localeCodes = ['en', 'fr'];
 ```
 
-In order for a translation to be recognized by the CoinOS system, you need to add it to this list.  At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks.
+In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks.
 
 ## Creating a New Translation
 
-Follow these steps to create a new translation.  You will need a GitHub account to do this:
-1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
+Follow these steps to create a new translation. You will need a GitHub account to do this:
+
+1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
 2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub.
-![Creating a new translation in GitHub](./img/create_locale_github.png)
+   ![Creating a new translation in GitHub](./img/create_locale_github.png)
 3. Copy the text from `en.json` into this new file.
-4. Translate all of the pieces of text on the right.  **Do not translate or alter in any way the pieces of text on the left!**
-![Translating in GitHub](./img/translate_github.png)
+4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!**
+   ![Translating in GitHub](./img/translate_github.png)
 5. Scroll down and use the green button to commit the file.
 6. Go to the `src` folder again, then `lib`, then `i18n.js`.
 7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list.
-![Adding a new translation in GitHub](./img/add_locale_github.png)
+   ![Adding a new translation in GitHub](./img/add_locale_github.png)
 8. Commit your changes like you did in step 5.
 
 ## Adding to an Existing Translation
 
-Follow these steps to add to an existing translation.  You will also need a GitHub account to do this:
-1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).  For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
+Follow these steps to add to an existing translation. You will also need a GitHub account to do this:
+
+1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to.
 2. Go to the `src` folder, then `locales`, then `en.json`.
 3. Find the line with the piece of text that you want to translate.
 4. Find your translation's file, at `src/locales/xx.json`.
 5. Use the pencil icon on the top-right to edit the file.
-6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces.  Make sure the previous line has a comma at the end.
-7. Translate the piece of text on the right, keeping the quotes surrounding it.  **Do not translate or alter in any way the piece of text on the left!**
+6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end.
+7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!**
 8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased).
 9. Scroll down and use the green button to commit the file.
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 544e2a9d..b6519ca9 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -3,7 +3,7 @@
 	import { scroll } from '$lib/utils';
 	import { Icon, LocaleSelector } from '$comp';
 	import { user } from '$lib/store';
-  import { _ } from 'svelte-i18n';
+	import { _ } from 'svelte-i18n';
 
 	export let howItWorks;
 	export let faq;
@@ -18,17 +18,15 @@
 
 <header class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90">
 	<nav class="block xl:flex flex-wrap justify-between items-center">
-<div class='flex justify-start md:justify-center items-center md:space-x-10'>
-		<a href="/" class="hidden md:block">
-			<Icon icon="logo" style="mb-5 xl:mb-0" />
-		</a>
-		<Icon icon="logo" style="block md:hidden ml-5 w-48" />
-<LocaleSelector style='hidden md:block py-1 mb-5 xl:mb-0' />
-</div>
+		<div class="flex justify-start md:justify-center items-center md:space-x-10">
+			<a href="/" class="hidden md:block">
+				<Icon icon="logo" style="mb-5 xl:mb-0" />
+			</a>
+			<Icon icon="logo" style="block md:hidden ml-5 w-48" />
+			<LocaleSelector style="hidden md:block py-1 mb-5 xl:mb-0" />
+		</div>
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-
-
 			<button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button>
 			<button on:click={() => scroll(faq)}>{$_('nav.faq')}</button>
 			<button on:click={() => scroll(about)}>{$_('nav.about')}</button>
@@ -55,7 +53,6 @@
 					Sign out
 				</button>
 			{/if}
-
 		</div>
 
 		<!-- mobile nav -->
@@ -71,13 +68,13 @@
 				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
-
-
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
 					>{$_('nav.howItWorks')}</button
 				>
 				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button>
-				<button on:click={() => mobileMenuButtonClick(about)} class="block">{$_('nav.about')}</button>
+				<button on:click={() => mobileMenuButtonClick(about)} class="block"
+					>{$_('nav.about')}</button
+				>
 				{#if !$user}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
@@ -88,7 +85,7 @@
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/login')}
 					>
-            {$_('nav.signIn')}
+						{$_('nav.signIn')}
 					</button>
 				{:else}
 					<button
@@ -104,7 +101,7 @@
 					</button>
 				{/if}
 
- <LocaleSelector style='py-1' />
+				<LocaleSelector style="py-1" />
 			</div>
 		</div>
 	</nav>
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index 3f173109..2ae65986 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { _, locale, locales } from 'svelte-i18n';
-  export let style
+	import { _, locale, locales } from 'svelte-i18n';
+	export let style;
 </script>
 
-<select name='language' bind:value={$locale} class={style}>
-  {#each $locales as locale}
-    <option value={locale}>{locale}</option>
-  {/each}
+<select name="language" bind:value={$locale} class={style}>
+	{#each $locales as locale}
+		<option value={locale}>{locale}</option>
+	{/each}
 </select>
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index fdf5de3c..3105c709 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -2,41 +2,40 @@ import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
 // The list of locales to look for
 // ADD ALL NEW LANGUAGE CODES TO THIS LIST
-const localeCodes = ["en", "fr"];
+const localeCodes = ['en', 'fr'];
 
 // the default locale to use if none was found
-const defaultLocale = "en";
+const defaultLocale = 'en';
 
 // Adds a new locale based on its code
 function addLocale(localeCode) {
-  register(localeCode, () => import(`../locales/${localeCode}.json`));
+	register(localeCode, () => import(`../locales/${localeCode}.json`));
 }
 
 // Picks the default locale based on navigator locale and the list of available locales
 function pickLocale(navigatorLocale, availableLocales) {
-  // locale can be null the first time you load this
-  // return the default locale in that case - reloading should fix this
-  if (!navigatorLocale)
-    return defaultLocale;
-
-  // determine langugage part of locale
-  // (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
-  let dashIndex = navigatorLocale ? navigatorLocale.indexOf("-") : -1;
-  let languageCode; // navigator locale without the regional part
-  if (dashIndex === -1) {
-    languageCode = navigatorLocale;
-  } else {
-    languageCode = navigatorLocale.slice(0, dashIndex);
-  }
-
-  // get locale
-  if (availableLocales.includes(navigatorLocale)) {
-    return navigatorLocale;
-  } else if (availableLocales.includes(languageCode)) {
-    return languageCode;
-  } else {
-    return navigatorLocale;
-  }
+	// locale can be null the first time you load this
+	// return the default locale in that case - reloading should fix this
+	if (!navigatorLocale) return defaultLocale;
+
+	// determine langugage part of locale
+	// (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
+	let dashIndex = navigatorLocale ? navigatorLocale.indexOf('-') : -1;
+	let languageCode; // navigator locale without the regional part
+	if (dashIndex === -1) {
+		languageCode = navigatorLocale;
+	} else {
+		languageCode = navigatorLocale.slice(0, dashIndex);
+	}
+
+	// get locale
+	if (availableLocales.includes(navigatorLocale)) {
+		return navigatorLocale;
+	} else if (availableLocales.includes(languageCode)) {
+		return languageCode;
+	} else {
+		return navigatorLocale;
+	}
 }
 
 // add locales
@@ -44,6 +43,6 @@ localeCodes.forEach(addLocale);
 
 let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
 init({
-  fallbackLocale: defaultLocale,
-  initialLocale: initialLocale,
+	fallbackLocale: defaultLocale,
+	initialLocale: initialLocale
 });
diff --git a/src/locales/en.json b/src/locales/en.json
index c5c36c4b..a44c202f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,11 +1,10 @@
 {
-  "langname": "English",
-  "nav": {
-  "howItWorks": "How It Works",
-  "faq": "FAQ",
-  "about": "About",
-  "startInSeconds": "Start in Seconds",
-  "signIn": "Sign In"
-}
-
+	"langname": "English",
+	"nav": {
+		"howItWorks": "How It Works",
+		"faq": "FAQ",
+		"about": "About",
+		"startInSeconds": "Start in Seconds",
+		"signIn": "Sign In"
+	}
 }
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d2c9d758..9adc9488 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,11 +1,10 @@
 {
-  "langname": "Français",
-"nav": {
-  "howItWorks": "Comment Ça Fonctionne",
-  "faq": "FAQ",
-  "about": "À Propos",
-  "startInSeconds": "Commence en Secondes",
-  "signIn": "Connexion"
-}
-
+	"langname": "Français",
+	"nav": {
+		"howItWorks": "Comment Ça Fonctionne",
+		"faq": "FAQ",
+		"about": "À Propos",
+		"startInSeconds": "Commence en Secondes",
+		"signIn": "Connexion"
+	}
 }
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 11e0977a..e4d7b0bf 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -44,10 +44,10 @@
 		</div>
 
 		{#if setting === 'account'}
-		<div>
-      <label for="language" class="font-bold block mb-1">Language</label>
-  <LocaleSelector style='block py-3 w-full'/>
-    </div>
+			<div>
+				<label for="language" class="font-bold block mb-1">Language</label>
+				<LocaleSelector style="block py-3 w-full" />
+			</div>
 
 			<div>
 				<label for="username" class="font-bold mb-1 block">Username</label>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c5234c7d..5f9f1456 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,16 +1,16 @@
 <script context="module">
-  import { waitLocale } from 'svelte-i18n'
+	import { waitLocale } from 'svelte-i18n';
 
-  export async function preload() {
-    // awaits for the loading of the 'en-US' and 'en' dictionaries
-    return waitLocale()
-  }
+	export async function preload() {
+		// awaits for the loading of the 'en-US' and 'en' dictionaries
+		return waitLocale();
+	}
 </script>
 
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
-  import '$lib/i18n';
+	import '$lib/i18n';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 	import { user, token } from '$lib/store';
-- 
cgit v1.2.3


From 2f6d8b73e2188b617ab91aa99fbd9824053a7a77 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 16 Aug 2022 11:02:27 -0600
Subject: spaces

---
 src/components/LandingHeader.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index b6519ca9..cc743b79 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -25,6 +25,7 @@
 			<Icon icon="logo" style="block md:hidden ml-5 w-48" />
 			<LocaleSelector style="hidden md:block py-1 mb-5 xl:mb-0" />
 		</div>
+
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>{$_('nav.howItWorks')}</button>
@@ -100,7 +101,6 @@
 						Sign out
 					</button>
 				{/if}
-
 				<LocaleSelector style="py-1" />
 			</div>
 		</div>
-- 
cgit v1.2.3


From d9cc47891f458ffb1426e3c0fd38c1c917a618ba Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 16 Aug 2022 13:32:11 -0500
Subject: import i18n before waiting for locale

---
 src/routes/__layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 5f9f1456..7c373879 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,5 +1,6 @@
 <script context="module">
 	import { waitLocale } from 'svelte-i18n';
+ import '$lib/i18n';
 
 	export async function preload() {
 		// awaits for the loading of the 'en-US' and 'en' dictionaries
@@ -10,7 +11,6 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
-	import '$lib/i18n';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 	import { user, token } from '$lib/store';
-- 
cgit v1.2.3


From c68876ac739bf18400ea0d44f525799c8bd885ed Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 16 Aug 2022 13:37:07 -0500
Subject: revert locale-load-waiting commit

---
 src/routes/__layout.svelte | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7c373879..c228ce4c 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,15 +1,6 @@
-<script context="module">
-	import { waitLocale } from 'svelte-i18n';
- import '$lib/i18n';
-
-	export async function preload() {
-		// awaits for the loading of the 'en-US' and 'en' dictionaries
-		return waitLocale();
-	}
-</script>
-
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
+ import '$lib/i18n';
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
-- 
cgit v1.2.3


From 644ce1fb994870edef42a47ccf37b63988506665 Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 16 Aug 2022 13:54:30 -0500
Subject: add load-waiting using $isLoading

---
 src/routes/__layout.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index c228ce4c..907badc5 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,7 +1,8 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
- import '$lib/i18n';
-	import '../app.css';
+  import '$lib/i18n';
+  import { isLoading } from 'svelte-i18n';
+  import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 	import { user, token } from '$lib/store';
@@ -33,6 +34,8 @@
 {#if ready}
 	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 	<slot />
+{:else if $isLoading}
+  The page is still loading.  Please reload the page.
 {:else}
 	<LoadingSplash />
 {/if}
-- 
cgit v1.2.3


From eb19aedebd591cce1d7d52b350cd66c94ae5a05d Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 16 Aug 2022 13:56:08 -0500
Subject: combined $isLoading and ready conditions

---
 src/routes/__layout.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 907badc5..0efe74bc 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -31,11 +31,9 @@
 	});
 </script>
 
-{#if ready}
+{#if ready && !$isLoading}
 	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 	<slot />
-{:else if $isLoading}
-  The page is still loading.  Please reload the page.
 {:else}
 	<LoadingSplash />
 {/if}
-- 
cgit v1.2.3


From 6af45235e86686b2ea1ca54fe061e0f230a644fc Mon Sep 17 00:00:00 2001
From: Adrien Hopkins <ahopk127@my.yorku.ca>
Date: Tue, 16 Aug 2022 14:58:11 -0500
Subject: persist locale using localStorage

---
 src/routes/__layout.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 0efe74bc..8ac6f20f 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
   import '$lib/i18n';
-  import { isLoading } from 'svelte-i18n';
+  import { isLoading, locale } from 'svelte-i18n';
   import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
@@ -17,6 +17,14 @@
 	let ready = false;
 
 	onMount(() => {
+    // get locale from local storage
+    let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
+    if (localStorageLocale) locale.set(localStorageLocale);
+
+    locale.subscribe((lng) => {
+      if (lng) localStorage.setItem('svelte-i18n-locale', lng);
+    });
+
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
-- 
cgit v1.2.3