From 3fd43b09a44be86d9a41caafec7145f0f4705f58 Mon Sep 17 00:00:00 2001 From: evlist Date: Wed, 30 Nov 2022 13:58:55 +0100 Subject: [PATCH] i18n --- cSpell.json | 3 +++ package-lock.json | 9 +++++++ package.json | 1 + src/components/infos/Infos.tsx | 8 +++++- .../map-tile-provider/MapTileProvider.tsx | 9 ++++++- src/i18n/en.ts | 9 +++++++ src/i18n/fr.ts | 11 ++++++++ src/i18n/index.ts | 6 +++++ src/index.tsx | 27 ++++++++++++++++++- 9 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 cSpell.json create mode 100644 src/i18n/en.ts create mode 100644 src/i18n/fr.ts create mode 100644 src/i18n/index.ts diff --git a/cSpell.json b/cSpell.json new file mode 100644 index 0000000..b9c8591 --- /dev/null +++ b/cSpell.json @@ -0,0 +1,3 @@ +{ + "overrides": [{ "filename": "**/fr.*", "language": "fr" }] +} diff --git a/package-lock.json b/package-lock.json index 415ef88..6a8b2cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@capacitor/ios": "^3.4.3", "@esbuild-plugins/node-globals-polyfill": "^0.1.1", "@esbuild-plugins/node-modules-polyfill": "^0.1.4", + "@solid-primitives/i18n": "^1.1.2", "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", "@suid/material": "^0.8.0", @@ -1011,6 +1012,14 @@ "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==", "dev": true }, + "node_modules/@solid-primitives/i18n": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@solid-primitives/i18n/-/i18n-1.1.2.tgz", + "integrity": "sha512-eLTqmDKorLa99cXrgS4DgTqrk0n/F4rB0YR76A6gr90by5TLE+HSZ0agiZVBIUGs2g5EFeEnLqwxKsM+F5hcJQ==", + "peerDependencies": { + "solid-js": "^1.5.0" + } + }, "node_modules/@solidjs/router": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz", diff --git a/package.json b/package.json index bd6f40d..270d1f1 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@capacitor/ios": "^3.4.3", "@esbuild-plugins/node-globals-polyfill": "^0.1.1", "@esbuild-plugins/node-modules-polyfill": "^0.1.4", + "@solid-primitives/i18n": "^1.1.2", "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", "@suid/material": "^0.8.0", diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index 6a816a0..e1fdb81 100644 --- a/src/components/infos/Infos.tsx +++ b/src/components/infos/Infos.tsx @@ -3,6 +3,11 @@ import { Feature } from 'ol'; import { Geometry } from 'ol/geom'; import { Component, createSignal, For } from 'solid-js'; import { unwrap } from 'solid-js/store'; +import { + I18nContext, + createI18nContext, + useI18n, +} from '@solid-primitives/i18n'; import CloseIcon from '@suid/icons-material/Close'; import { tree } from '../map'; import style from './Infos.module.css'; @@ -49,6 +54,7 @@ export const clickHandler = (event: any) => { }; const Infos: Component<{}> = (props) => { + const [t, { add, locale, dict }] = useI18n(); const handleClickOpen = () => { setOpen(true); }; @@ -59,7 +65,7 @@ const Infos: Component<{}> = (props) => { return ( -
Nearby
+
{t('nearby')}
diff --git a/src/components/map-tile-provider/MapTileProvider.tsx b/src/components/map-tile-provider/MapTileProvider.tsx index 4a1db29..b06e84e 100644 --- a/src/components/map-tile-provider/MapTileProvider.tsx +++ b/src/components/map-tile-provider/MapTileProvider.tsx @@ -1,6 +1,11 @@ import OSM from 'ol/source/OSM'; import XYZ from 'ol/source/XYZ'; import { Component, createSignal, For } from 'solid-js'; +import { + I18nContext, + createI18nContext, + useI18n, +} from '@solid-primitives/i18n'; import style from './MapTileProvider.module.css'; import LayersIcon from '@suid/icons-material/Layers'; @@ -84,6 +89,8 @@ const MapTilesProvider: Component<{}> = (props) => { const params = useParams(); + const [t] = useI18n(); + const handleChange = (ev: any) => { navigate( `/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}` @@ -100,7 +107,7 @@ const MapTilesProvider: Component<{}> = (props) => { -
Choose your map
+
{t('chooseYourMap')}
diff --git a/src/i18n/en.ts b/src/i18n/en.ts new file mode 100644 index 0000000..c8c0761 --- /dev/null +++ b/src/i18n/en.ts @@ -0,0 +1,9 @@ +const dict = { + close: 'Close', + + chooseYourMap: 'Choose your map', + + nearby: 'Nearby', +}; + +export default dict; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts new file mode 100644 index 0000000..8a1004c --- /dev/null +++ b/src/i18n/fr.ts @@ -0,0 +1,11 @@ +// cSpell:includeRegExp string + +const dict = { + close: 'Quitter', + + chooseYourMap: 'Choisissez votre carte', + + nearby: 'À proximité', +}; + +export default dict; diff --git a/src/i18n/index.ts b/src/i18n/index.ts new file mode 100644 index 0000000..0e959c6 --- /dev/null +++ b/src/i18n/index.ts @@ -0,0 +1,6 @@ +import en from './en'; +import fr from './fr'; + +export const dict = { en, fr }; + +export default dict; diff --git a/src/index.tsx b/src/index.tsx index 7c386cf..a4154a4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,15 @@ /* @refresh reload */ import { render } from 'solid-js/web'; import { Router, hashIntegration } from '@solidjs/router'; +import { + I18nContext, + createI18nContext, + useI18n, +} from '@solid-primitives/i18n'; +import dict from './i18n'; import App from './App'; +import { Language } from '@suid/icons-material'; // See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator const requestWakeLock = async () => { @@ -32,10 +39,28 @@ const handleVisibilityChange = () => { document.addEventListener('visibilitychange', handleVisibilityChange, false); requestWakeLock(); +const getLanguage = () => { + for (const i in navigator.languages) { + const language = navigator.languages[i]; + if (language in dict) { + return language; + } + const shortLanguage = language.slice(0, 2); + if (shortLanguage in dict) { + return shortLanguage; + } + } + return undefined; +}; + +const i18nDict = createI18nContext(dict, getLanguage()); + render( () => ( - + + + ), document.getElementById('root') as HTMLElement