Set up translation with i18next

src/main.tsx

@@ -25,10 +25,15 @@ import ReactDOM from "react-dom";
 import { createBrowserHistory } from "history";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
 
 import "./index.css";
 import App from "./App";
 import { init as initRageshake } from "./settings/rageshake";
+import { getUrlParams } from "./UrlParams";
 
 initRageshake();
 
@@ -104,6 +109,35 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector({
+  name: "urlFragment",
+  // Look for a language code in the URL's fragment
+  lookup: () => getUrlParams().lang ?? undefined,
+});
+
+i18n
+  .use(Backend)
+  .use(languageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en-GB",
+    defaultNS: "app",
+    keySeparator: false,
+    nsSeparator: false,
+    pluralSeparator: "|",
+    contextSeparator: "|",
+    interpolation: {
+      escapeValue: false, // React has built-in XSS protections
+    },
+    detection: {
+      // No localStorage detectors or caching here, since we don't have any way
+      // of letting the user manually select a language
+      order: ["urlFragment", "navigator"],
+      caches: [],
+    },
+  });
+
 ReactDOM.render(
   <React.StrictMode>
     <App history={history} />