i18n

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