Init i18next

web/app/i18n.ts

@@ -0,0 +1,23 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+const resources = {
+  en: {
+    translation: {
+      index: {
+        title: "classified.ink",
+        description: "Truly secure and private note-taking for everyone.",
+      },
+    },
+  },
+};
+
+await i18n.use(initReactI18next).init({
+  fallbackLng: "en",
+  resources,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

web/app/index.tsx

@@ -5,6 +5,8 @@ import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { routeTree } from "@/app/pages.gen.ts";
 import "@/app/globals.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@/app/i18n.ts";
 
 const router = createRouter({ routeTree });
 
@@ -14,7 +16,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
+        <I18nextProvider i18n={i18n}>
+          <RouterProvider router={router} />
+        </I18nextProvider>
       </QueryClientProvider>
     </ThemeProvider>
   </React.StrictMode>,

web/package.json

@@ -16,10 +16,10 @@
     "@tanstack/router-cli": "^1.37.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "i18next": "^23.11.5",
     "lucide-react": "^0.396.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zustand": "^4.5.2"

web/pages/index.tsx

@@ -3,6 +3,7 @@ import { Route as RootRoute } from "@/pages/__root";
 import { Suspense, useEffect, useState } from "react";
 import { api } from "@/app/utils.ts";
 import { toast } from "@/components/ui/use-toast.ts";
+import { useTranslation } from "react-i18next";
 
 export const Route = createRoute({
   getParentRoute: () => RootRoute,
@@ -11,13 +12,13 @@ export const Route = createRoute({
 });
 
 function Component() {
+  const { t } = useTranslation();
+
   return (
     <div className="flex flex-col flex-grow items-center justify-center">
       <div className="my-24 mx-8 flex flex-col gap-5 items-center">
-        <h1 className="text-[min(4rem,13vw)] font-bold">classified.ink</h1>
-        <p className="text-[min(1.5rem,5vw)]">
-          Truly secure and private note-taking for everyone.
-        </p>
+        <h1 className="text-[min(4rem,13vw)] font-bold">{t("index.title")}</h1>
+        <p className="text-[min(1.5rem,5vw)]">{t("index.description")}</p>
         <Suspense fallback={<></>}>
           <UserCount />
         </Suspense>