i18n

cSpell.json

@@ -0,0 +1,3 @@
+{
+  "overrides": [{ "filename": "**/fr.*", "language": "fr" }]
+}

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",

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",

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 (
     <Dialog onClose={handleClose} open={open()} class={style.dialog}>
       <DialogTitle class={style.title}>
-        <div class={style['title-text']}>Nearby</div>
+        <div class={style['title-text']}>{t('nearby')}</div>
         <IconButton onClick={handleClose} class={style.close}>
           <CloseIcon />
         </IconButton>

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) => {
       </div>
       <Dialog onClose={handleClose} open={open()} class={style.dialog}>
         <DialogTitle class={style.title}>
-          <div class={style['title-text']}>Choose your map</div>
+          <div class={style['title-text']}>{t('chooseYourMap')}</div>
           <IconButton onClick={handleClose} class={style.close}>
             <CloseIcon />
           </IconButton>

src/i18n/en.ts

@@ -0,0 +1,9 @@
+const dict = {
+  close: 'Close',
+
+  chooseYourMap: 'Choose your map',
+
+  nearby: 'Nearby',
+};
+
+export default dict;

src/i18n/fr.ts

@@ -0,0 +1,11 @@
+// cSpell:includeRegExp string
+
+const dict = {
+  close: 'Quitter',
+
+  chooseYourMap: 'Choisissez votre carte',
+
+  nearby: 'À proximité',
+};
+
+export default dict;

src/i18n/index.ts

@@ -0,0 +1,6 @@
+import en from './en';
+import fr from './fr';
+
+export const dict = { en, fr };
+
+export default dict;

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(
   () => (
     <Router>
+      <I18nContext.Provider value={i18nDict}>
         <App />
+      </I18nContext.Provider>
     </Router>
   ),
   document.getElementById('root') as HTMLElement