From 7f614fb4e4c3134b477eddfd0034106b9cb01a00 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Fri, 29 Jul 2022 12:49:34 -0500 Subject: setup localization & load locales --- src/routes/__layout.svelte | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/routes') 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); -- cgit v1.2.3 From a77b4bf481cee57e7a5150c41e3bca703f800475 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins 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/routes') 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(); -- cgit v1.2.3 From 5535adee8c980ed142d6d3e3178df04e6f51eb4d Mon Sep 17 00:00:00 2001 From: Adrien Hopkins 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/routes') 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(); -- 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/routes') 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 @@
- 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 @@
{#if setting === 'account'} +
+ + +
+
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/routes') 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 @@ + + - + {#each $locales as locale} + + {/each} 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 @@
{#if setting === 'account'} -
- - -
+
+ + +
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 @@ - -{#if ready} +{#if ready && !$isLoading} -{:else if $isLoading} - The page is still loading. Please reload the page. {:else} {/if} -- cgit v1.2.3 From 6af45235e86686b2ea1ca54fe061e0f230a644fc Mon Sep 17 00:00:00 2001 From: Adrien Hopkins 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/routes') 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 @@