From 98e79a3cc155d0c864bbd5dfb6ec14f0117ac6ca Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Tue, 26 Jul 2022 13:46:05 -0500 Subject: add svelte-i18n --- package.json | 5 ++- pnpm-lock.yaml | 114 ++++++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 93 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 2801ff01..89aadbfa 100644 --- a/package.json +++ b/package.json @@ -23,5 +23,8 @@ "tailwindcss": "^3.1.6", "vite": "^3.0.0" }, - "type": "module" + "type": "module", + "dependencies": { + "svelte-i18n": "^3.4.0" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d92f3395..bc6a7109 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,13 +9,17 @@ specifiers: prettier: ^2.6.2 prettier-plugin-svelte: ^2.7.0 svelte: ^3.44.0 + svelte-i18n: ^3.4.0 svelte-preprocess: ^4.10.7 tailwindcss: ^3.1.6 vite: ^3.0.0 +dependencies: + svelte-i18n: 3.4.0_svelte@3.49.0 + devDependencies: - '@sveltejs/adapter-auto': 1.0.0-next.63 - '@sveltejs/kit': 1.0.0-next.394_svelte@3.49.0+vite@3.0.2 + '@sveltejs/adapter-auto': 1.0.0-next.64 + '@sveltejs/kit': 1.0.0-next.395_svelte@3.49.0+vite@3.0.2 autoprefixer: 10.4.7_postcss@8.4.14 got: 12.2.0 postcss: 8.4.14 @@ -32,6 +36,40 @@ packages: resolution: {integrity: sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==} dev: true + /@formatjs/ecma402-abstract/1.11.4: + resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==} + dependencies: + '@formatjs/intl-localematcher': 0.2.25 + tslib: 2.4.0 + dev: false + + /@formatjs/fast-memoize/1.2.1: + resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==} + dependencies: + tslib: 2.4.0 + dev: false + + /@formatjs/icu-messageformat-parser/2.1.0: + resolution: {integrity: sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==} + dependencies: + '@formatjs/ecma402-abstract': 1.11.4 + '@formatjs/icu-skeleton-parser': 1.3.6 + tslib: 2.4.0 + dev: false + + /@formatjs/icu-skeleton-parser/1.3.6: + resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==} + dependencies: + '@formatjs/ecma402-abstract': 1.11.4 + tslib: 2.4.0 + dev: false + + /@formatjs/intl-localematcher/0.2.25: + resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==} + dependencies: + tslib: 2.4.0 + dev: false + /@iarna/toml/2.2.5: resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} dev: true @@ -88,27 +126,27 @@ packages: engines: {node: '>=14.16'} dev: true - /@sveltejs/adapter-auto/1.0.0-next.63: - resolution: {integrity: sha512-9KguXwROEJMyyoKrsizAilVSmtfWxEDn2Hbxk44SP8Kj5cgN7tFCxzbL2kmmqyV1CO1tOh5iNC2oWbyTfikXmw==} + /@sveltejs/adapter-auto/1.0.0-next.64: + resolution: {integrity: sha512-Q8DwcS6wl1GovzS9JJzaD/WL/Lfk1ur4nAF1HtmsUvZDpsPBVDqnK2AhYU4G3oFNiuHstrjAogMy5th8ptSFGw==} dependencies: - '@sveltejs/adapter-cloudflare': 1.0.0-next.30 - '@sveltejs/adapter-netlify': 1.0.0-next.70 - '@sveltejs/adapter-vercel': 1.0.0-next.65 + '@sveltejs/adapter-cloudflare': 1.0.0-next.31 + '@sveltejs/adapter-netlify': 1.0.0-next.71 + '@sveltejs/adapter-vercel': 1.0.0-next.66 transitivePeerDependencies: - encoding - supports-color dev: true - /@sveltejs/adapter-cloudflare/1.0.0-next.30: - resolution: {integrity: sha512-jIclgb58n3Uoo8TTudXSa7wmLP7Rn/ESLQS+zOUe0xsti5DG/eDhELTnSvkoSa2lJY21ym5rej/GSERRyeuBVw==} + /@sveltejs/adapter-cloudflare/1.0.0-next.31: + resolution: {integrity: sha512-HhEFZP72GJ8AZGgFECKIiayDcLaAWi65pI0AnBfiNhCifYSlH/mPNWNVD4AWRDnXnH6XU+FLwhGDnIDwytTyYg==} dependencies: '@cloudflare/workers-types': 3.14.1 esbuild: 0.14.49 worktop: 0.8.0-next.14 dev: true - /@sveltejs/adapter-netlify/1.0.0-next.70: - resolution: {integrity: sha512-lIXY6KIgIFBz4+mdvilx9Ny8oFV7T2iVTKLirJayoI/SqPWGAcxklvWvjGfS4QT8rS9pWKDaKRUQM4M/gl8LlA==} + /@sveltejs/adapter-netlify/1.0.0-next.71: + resolution: {integrity: sha512-la1CGtWO1xul1L3zEoFAoc4EX2uxZjrZcOMS3tkKB8drxhbQsNbnTE6fmSSMFiZXhxaikczrBgQwqIaDkLTmZg==} dependencies: '@iarna/toml': 2.2.5 esbuild: 0.14.49 @@ -116,18 +154,18 @@ packages: tiny-glob: 0.2.9 dev: true - /@sveltejs/adapter-vercel/1.0.0-next.65: - resolution: {integrity: sha512-RV3HL7Ic7pGgIoBSHPwN1pBX96Km1X683oHImPHAKX9h/WOvJZ3bY5+IWNRcR8tx9rPB5gfMRg+msvPSBr3RVw==} + /@sveltejs/adapter-vercel/1.0.0-next.66: + resolution: {integrity: sha512-s3Hcxu9nCG/rR3C3cFbdQGjTa5W4K2kRcc6S5Xefx7itbrw+4v3KpO8ZPB6qM55XDwVxuG7260NMHVI6MUGmSA==} dependencies: - '@vercel/nft': 0.20.1 + '@vercel/nft': 0.21.0 esbuild: 0.14.49 transitivePeerDependencies: - encoding - supports-color dev: true - /@sveltejs/kit/1.0.0-next.394_svelte@3.49.0+vite@3.0.2: - resolution: {integrity: sha512-YfRNSKdbvihHFvmQodaMlChcyf9dfU36FwK8WYQF5jqEmiRajLBb/ooU6RqPA0Z6j5okJHDSYBwxW8TP+nc+gg==} + /@sveltejs/kit/1.0.0-next.395_svelte@3.49.0+vite@3.0.2: + resolution: {integrity: sha512-o8sFZVxUNTwLPs2ZwrKSyZfbU/VIRq2NnaQQ9JcSzr0Bs+M09rrjTuSpFy0sXUCZkBh3oVWFgrVqABwEOEHoSQ==} engines: {node: '>=16.9'} hasBin: true peerDependencies: @@ -217,12 +255,13 @@ packages: '@types/node': 18.0.6 dev: true - /@vercel/nft/0.20.1: - resolution: {integrity: sha512-hSLcr64KHOkcNiTAlv154K4p4faEFBwYIi2eIgu1QCDhB1qyQYvFuEhtw3eaapNjA4/7x/2jcclfCAjILua/ag==} + /@vercel/nft/0.21.0: + resolution: {integrity: sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==} hasBin: true dependencies: '@mapbox/node-pre-gyp': 1.0.9 acorn: 8.7.1 + async-sema: 3.1.1 bindings: 1.5.0 estree-walker: 2.0.2 glob: 7.2.3 @@ -303,6 +342,10 @@ packages: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} dev: true + /async-sema/3.1.1: + resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==} + dev: true + /autoprefixer/10.4.7_postcss@8.4.14: resolution: {integrity: sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==} engines: {node: ^10 || ^12 || >=14} @@ -469,7 +512,6 @@ packages: /deepmerge/4.2.2: resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==} engines: {node: '>=0.10.0'} - dev: true /defer-to-connect/2.0.1: resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==} @@ -749,7 +791,6 @@ packages: /estree-walker/2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} - dev: true /fast-glob/3.2.11: resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==} @@ -865,11 +906,9 @@ packages: /globalyzer/0.1.0: resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} - dev: true /globrex/0.1.2: resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} - dev: true /got/12.2.0: resolution: {integrity: sha512-A81ll5Z8wzeCmSdIlWVMDWFKDo82v2nmOaMZDQNHKGInNqDBcle+CSb6BBiZcn/Aiefz/kSpo520WBKi9QAO/A==} @@ -938,6 +977,15 @@ packages: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} dev: true + /intl-messageformat/9.13.0: + resolution: {integrity: sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==} + dependencies: + '@formatjs/ecma402-abstract': 1.11.4 + '@formatjs/fast-memoize': 1.2.1 + '@formatjs/icu-messageformat-parser': 2.1.0 + tslib: 2.4.0 + dev: false + /is-binary-path/2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -1100,7 +1148,6 @@ packages: /mri/1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} - dev: true /mrmime/1.0.1: resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==} @@ -1411,7 +1458,6 @@ packages: engines: {node: '>=6'} dependencies: mri: 1.2.0 - dev: true /safe-buffer/5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} @@ -1513,6 +1559,21 @@ packages: svelte: 3.49.0 dev: true + /svelte-i18n/3.4.0_svelte@3.49.0: + resolution: {integrity: sha512-590N+YIRlebDT3fXmuAxd4guQZLR3vm4kCs5UhWYmw3SxOlJNZ7HwYYiw6d4jDr7P+Cx7DSopk1Z1K9wn8B6EA==} + engines: {node: '>= 11.15.0'} + hasBin: true + peerDependencies: + svelte: ^3.25.1 + dependencies: + deepmerge: 4.2.2 + estree-walker: 2.0.2 + intl-messageformat: 9.13.0 + sade: 1.8.1 + svelte: 3.49.0 + tiny-glob: 0.2.9 + dev: false + /svelte-preprocess/4.10.7_nxvsp6sjiltnatqa6jdm4mr6zu: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} @@ -1617,7 +1678,6 @@ packages: dependencies: globalyzer: 0.1.0 globrex: 0.1.2 - dev: true /to-regex-range/5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} @@ -1630,6 +1690,10 @@ packages: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} dev: true + /tslib/2.4.0: + resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} + dev: false + /update-browserslist-db/1.0.5_browserslist@4.21.2: resolution: {integrity: sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==} hasBin: true -- cgit v1.2.3 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/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 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); -- cgit v1.2.3 From 0f767571be758ec7eb3c11c5bcd608adfbb9328b Mon Sep 17 00:00:00 2001 From: Adrien Hopkins 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(-) 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; @@ -14,17 +16,17 @@ 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 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(-) 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';