feat: translate the app - two locales available: fr and en

3 files changed, 90 insertions, 0 deletions

diff --git a/htdocs/src/js/i18n/i18n.js b/htdocs/src/js/i18n/i18n.js
new file mode 100644
index 0000000..6bdc7cd
--- /dev/null
+++ b/htdocs/src/js/i18n/i18n.js
@@ -0,0 +1,42 @@
+import I18n from 'i18n-js';
+import en from './locales/en';
+import fr from './locales/fr';
+
+const supportedLanguages = [
+  {
+    code: 'en',
+    label: 'English',
+    translations: en,
+  },
+  {
+    code: 'fr',
+    label: 'Français',
+    translations: fr,
+  },
+];
+
+supportedLanguages.forEach((locale) => {
+  I18n.translations[locale.code] = locale.translations;
+});
+
+function setLocale(locale) {
+  I18n.locale = locale;
+}
+
+function currentLocale() {
+  return I18n.currentLocale();
+}
+
+function translate(name, params = {}) {
+  return I18n.t(name, params);
+}
+
+const { defaultLocale } = I18n;
+
+export {
+  supportedLanguages,
+  setLocale,
+  translate,
+  defaultLocale,
+  currentLocale,
+};
diff --git a/htdocs/src/js/i18n/locales/en.js b/htdocs/src/js/i18n/locales/en.js
new file mode 100644
index 0000000..d8fea40
--- /dev/null
+++ b/htdocs/src/js/i18n/locales/en.js
@@ -0,0 +1,24 @@
+const en = {
+  branding: {
+    description: 'Front-end developer',
+  },
+  nav: {
+    title: 'Apps list:',
+  },
+  main: {
+    instructions:
+      'Select an app inside menu to see a live preview and app details.',
+    project: {
+      details: {
+        about: 'About {{name}}',
+        repo: 'Repositories:',
+        tech: 'Technologies:',
+      },
+    },
+  },
+  footer: {
+    license: 'License MIT',
+  },
+};
+
+export default en;
diff --git a/htdocs/src/js/i18n/locales/fr.js b/htdocs/src/js/i18n/locales/fr.js
new file mode 100644
index 0000000..f44d459
--- /dev/null
+++ b/htdocs/src/js/i18n/locales/fr.js
@@ -0,0 +1,24 @@
+const fr = {
+  branding: {
+    description: 'Intégrateur web',
+  },
+  nav: {
+    title: 'Liste des applications :',
+  },
+  main: {
+    instructions:
+      "Sélectionnez une application dans le menu pour afficher un aperçu en direct et les informations sur l'application.",
+    project: {
+      details: {
+        about: 'À propos de {{name}}',
+        repo: 'Dépôts :',
+        tech: 'Technologies :',
+      },
+    },
+  },
+  footer: {
+    license: 'Licence MIT',
+  },
+};
+
+export default fr;