enhancement(i18n): Init internationalisation

client/.env

@@ -2,10 +2,9 @@ VITE_API=/api
 VITE_APP_MATOMO_BASE_URL=https://piwik.enseignementsup-recherche.pro
 VITE_APP_NAME="Works magnet 🧲"
 VITE_APP_TAG_LIMIT=3
-VITE_DESCRIPTION="Retrieve the scholarly works of your institution"
 VITE_GIT_REPOSITORY_URL=https://github.com/dataesr/works-magnet
 VITE_HEADER_TAG=
 VITE_HEADER_TAG_COLOR=new
 VITE_MINISTER_NAME="Ministère<br>de l'enseignement<br>supérieur<br>et de la recherche"
 VITE_VERSION=$npm_package_version
-VITE_WS_HOST=wss://works-magnet.dataesr.ovh
+VITE_WS_HOST=wss://works-magnet.dataesr.ovh

client/package.json

@@ -22,6 +22,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intl": "^6.8.7",
     "react-router-dom": "^6.11.1",
     "react-tooltip": "^5.18.1",
     "react-use-websocket": "^4.8.1",

client/src/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "tagline": "Retrieve the scholarly works of your institution"
+}

client/src/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+  "tagline": "Retrouvez les travaux scientifiques de votre institution"
+}

client/src/layout/header.jsx

@@ -4,12 +4,12 @@ import {
   Title,
 } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 
 import Ribbon from '../components/ribbon';
 
 const {
   VITE_APP_NAME,
-  VITE_DESCRIPTION,
   VITE_HEADER_TAG_COLOR,
   VITE_HEADER_TAG,
   VITE_MINISTER_NAME,
@@ -50,7 +50,9 @@ export default function Header({ isExpanded }) {
                     )}
                   </p>
                 </a>
-                <p className="fr-header__service-tagline">{VITE_DESCRIPTION}</p>
+                <p className="fr-header__service-tagline">
+                  <FormattedMessage id="tagline" />
+                </p>
               </div>
             </div>
           </div>

client/src/main.jsx

@@ -8,9 +8,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
+import { IntlProvider } from 'react-intl';
 import { BrowserRouter, Link, useLocation } from 'react-router-dom';
 
 import { ToastContextProvider } from './hooks/useToast';
+import messagesEN from './i18n/en.json';
+import messagesFR from './i18n/fr.json';
 import Router from './router';
 
 import 'react-tooltip/dist/react-tooltip.css';
@@ -55,20 +58,30 @@ function App() {
   useEffect(() => {
     document.documentElement.setAttribute('data-fr-scheme', 'light');
   }, []);
+  const defaultLocale = 'en';
+  let locale = navigator?.language?.slice(0, 2) ?? defaultLocale;
+  const messages = {
+    en: messagesEN,
+    fr: messagesFR,
+  };
+  // If browser language is not an existing translation, fallback to default language
+  if (!Object.keys(messages).includes(locale)) locale = defaultLocale;
 
   return (
     <MatomoProvider value={matomo}>
-      <DSFRConfig routerComponent={RouterLink}>
-        <BrowserRouter>
-          <PageTracker />
-          <ToastContextProvider>
-            <QueryClientProvider client={queryClient}>
-              <ReactQueryDevtools />
-              <Router />
-            </QueryClientProvider>
-          </ToastContextProvider>
-        </BrowserRouter>
-      </DSFRConfig>
+      <IntlProvider messages={messages[locale]} locale={locale} defaultLocale={defaultLocale}>
+        <DSFRConfig routerComponent={RouterLink}>
+          <BrowserRouter>
+            <PageTracker />
+            <ToastContextProvider>
+              <QueryClientProvider client={queryClient}>
+                <ReactQueryDevtools />
+                <Router />
+              </QueryClientProvider>
+            </ToastContextProvider>
+          </BrowserRouter>
+        </DSFRConfig>
+      </IntlProvider>
     </MatomoProvider>
   );
 }