packages/webapp/src/@types/i18next.d.ts

@@ -1,8 +1,10 @@
-import type { resources } from "@/i18n"
+import type { defaultNS, resources } from "@/i18n"
 
 
 declare module "i18next" {
     interface CustomTypeOptions {
+        enableSelector: true
+        defaultNS: typeof defaultNS
         resources: typeof resources["en"]
     }
 }

packages/webapp/src/i18n/en.ts

@@ -1,4 +1,5 @@
 export const en = {
+    common: {},
     nav: {
         gitRepos: "Git repositories",
         sourceCode: "Source code",

packages/webapp/src/i18n/fr.ts

@@ -2,6 +2,7 @@ import type { en } from "./en"
 
 
 export const fr = {
+    common: {},
     nav: {
         gitRepos: "Dépôts Git",
         sourceCode: "Code source",

packages/webapp/src/i18n/index.ts

@@ -5,6 +5,7 @@ import { en } from "./en"
 import { fr } from "./fr"
 
 
+export const defaultNS = "common"
 export const resources = { en, fr } as const
 
 await i18n
@@ -12,6 +13,7 @@ await i18n
     .use(LanguageDetector)
     .init({
         supportedLngs: ["en", "fr"],
+        defaultNS,
         resources,
         interpolation: {
             escapeValue: false

packages/webapp/src/routes/__root.tsx

@@ -18,11 +18,11 @@ function RootComponent() {
         <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-center gap-20">
             <div className="flex flex-row items-center justify-center gap-2">
                 <Button asChild>
-                    <a href="https://git.valverde.cloud"><DiGit /> {t("nav:gitRepos")}</a>
+                    <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos, { ns: "nav" })}</a>
                 </Button>
 
                 <Button asChild>
-                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t("nav:sourceCode")}</a>
+                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode, { ns: "nav" })}</a>
                 </Button>
 
                 <Button>Resumé</Button>