Stable: translation support

The-Best-Codes · The-Best-Codes · commit 43be68ecfcd5 · 2024-08-14T16:13:17.000-05:00
diff --git a/app/i18n.js b/app/i18n.js
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,25 +1,34 @@
-import type { Metadata } from "next";
+"use client";
+
 import { Inter } from "next/font/google";
-import { appWithTranslation } from "./i18n";
-import type { AppProps } from "next/app";
 import "./globals.css";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@/i18n";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
-  title: "CodeQuill",
-  description: "Create, share, and store your codes",
-};
-
-const RootLayout = ({ children }: any) => {
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html lang="en">
-      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      </head>
-      <body className={inter.className}>{children}</body>
-    </html>
+    <I18nextProvider i18n={i18n}>
+      <html lang="en">
+        <head>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <meta name="title" content="CodeQuill" />
+          <meta
+            name="description"
+            content="Create, share, and store your codes"
+          />
+          <title>CodeQuill</title>
+        </head>
+        <body className={inter.className}>{children}</body>
+      </html>
+    </I18nextProvider>
   );
-};
-
-export default appWithTranslation(RootLayout);
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -6,7 +6,7 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Menu } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import axios from "axios";
-import { useTranslation } from "@/app/i18n";
+import { useTranslation } from "next-i18next";
 
 const HomePage = () => {
   const { t } = useTranslation("common");
diff --git a/components/Editor.tsx b/components/Editor.tsx
@@ -13,7 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Check, Info, Loader2 } from "lucide-react";
-import { useTranslation } from "@/app/i18n";
+import { useTranslation } from "next-i18next";
 
 const DEFAULT_LANGUAGE = "html";
 
@@ -51,7 +51,7 @@ const CodeEditor = ({
     getStoredDefaultLanguage()
   );
   const [language, setLanguage] = useState(DEFAULT_LANGUAGE);
-  const [name, setName] = useState("Untitled");
+  const [name, setName] = useState(`${t("untitled") || "Untitled"}`);
   const [showPreview, setShowPreview] = useState(true);
   const [saveSuccess, setSaveSuccess] = useState("");
   const [isSaving, setIsSaving] = useState(false);
@@ -74,17 +74,17 @@ const CodeEditor = ({
           const project = response.data;
           setCode(project.code);
           setLanguage(project.language);
-          setName(project?.name || "Untitled");
+          setName(project?.name || `${t("untitled")}`);
         })
         .finally(() => {
           setIsLoading(false);
         });
     } else {
       setCode("");
       setLanguage(defaultLanguage);
-      setName("Untitled");
+      setName(`${t("untitled")}`);
     }
-  }, [selectedProject, defaultLanguage]);
+  }, [selectedProject, defaultLanguage, t]);
 
   useEffect(() => {
     // Set dark mode based on system preference
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -40,7 +40,7 @@ import {
 } from "@/components/ui/context-menu";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useTranslation } from "@/app/i18n";
+import { useTranslation } from "next-i18next";
 
 interface Project {
   id: number;
diff --git a/i18n.js b/i18n.js
@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import common_en from '@/public/locales/en/common.json';
+import common_es from '@/public/locales/es/common.json';
+import common_fr from '@/public/locales/fr/common.json';
+
+i18n
+    .use(initReactI18next) // Passes i18n down to react-i18next
+    .init({
+        resources: {
+            en: { common: common_en },
+            es: { common: common_es },
+            fr: { common: common_fr },
+        },
+        lng: 'en', // Default language
+        fallbackLng: 'en', // Fallback language
+        interpolation: {
+            escapeValue: false, // React escapes by default
+        },
+    });
+
+export default i18n;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "The-Best-Codes",
   "license": "MIT",
   "description": "Organize, Edit, and Share your Code Snippets",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -33,6 +33,7 @@
     "axios": "^1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "fs": "^0.0.1-security",
     "highlight.js": "^11.10.0",
     "i18next": "^23.12.3",
     "lucide-react": "^0.407.0",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -21,5 +21,6 @@
   "error": "Error",
   "save": "Save",
   "hide-preview": "Hide Preview",
-  "show-preview": "Show Preview"
+  "show-preview": "Show Preview",
+  "untitled": "Untitled"
 }
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -21,5 +21,6 @@
   "error": "Error",
   "save": "Guardar",
   "hide-preview": "Ocultar Vista Previa",
-  "show-preview": "Mostrar Vista Previa"
+  "show-preview": "Mostrar Vista Previa",
+  "untitled": "Sin Título"
 }
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -21,5 +21,6 @@
   "error": "Erreur",
   "save": "Sauvegarder",
   "hide-preview": "Cacher la Prévisualisation",
-  "show-preview": "Afficher la Prévisualisation"
+  "show-preview": "Afficher la Prévisualisation",
+  "untitled": "Sans Nom"
 }

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,6 @@`
`21`	`21`	`"error": "Error",`
`22`	`22`	`"save": "Save",`
`23`	`23`	`"hide-preview": "Hide Preview",`
`24`		`- "show-preview": "Show Preview"`
	`24`	`+ "show-preview": "Show Preview",`
	`25`	`+ "untitled": "Untitled"`
`25`	`26`	`}`