Merge branch 'main' of github.com:CyberAula/cyberaula.github.io

app/i18n.js

@@ -0,0 +1,32 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { en } from '../constants/langs/en';
+import { es } from '../constants/langs/es';
+
+i18n
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: {}});
+
+    i18n.addResourceBundle('en', 'translation', {
+        ...en
+    });
+    i18n.addResourceBundle('es', 'translation', {
+        ...es
+    });
+
+
+
+export default i18n;

app/layout.js

@@ -5,6 +5,9 @@ import './sass/main.scss';
 import "./globals.sass";
 // import 'bootstrap/dist/css/bootstrap.min.css';
 
+// import i18n (needs to be bundled ;))
+import './i18n';
+
 const montserrat = Montserrat({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {

app/page.js

@@ -11,8 +11,13 @@ import BulletElement from "@/components/BulletElement";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAward } from '@fortawesome/free-solid-svg-icons';
 
+import { useTranslation } from 'react-i18next';
+
+
 export default function Home() {
   const [carousel, setCarousel] = useState(mycarousel);
+  const { t } = useTranslation();
+
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -28,8 +33,7 @@ export default function Home() {
               <div className="head">
                 <div className="group_description">
                   <h1>
-                    <b>Bienvenido a cyberaula, </b>la iniciativa de innovación
-                    educativa de la UPM.
+                    <b>{t('front.title')}, </b>{t('front.title2')}
                   </h1>
                 </div>
               </div>

components/Header.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import LangSwitcher  from "./LangSwitcher";
 
 const routes = [
   //{route: "/", title: "Home"},
@@ -33,6 +34,9 @@ export default function Header(props) {
           </div>
         </div>
       </a>
+
+      <LangSwitcher />
+
       <div className="menu_icon">
         <i
           className={

components/LangSwitcher.js

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+
+
+const lngs = {
+    en: { nativeName: 'English' },
+    es: { nativeName: 'Spanish' }
+  };
+
+
+export default function LangSwitcher() {
+    const { i18n } = useTranslation();
+    return (
+        <div>
+        {Object.keys(lngs).map((lng) => (
+            <button
+            key={lng}
+            style={{
+                fontWeight: i18n.language === lng ? 'bold' : 'normal',
+            }}
+            type="submit"
+            onClick={() => i18n.changeLanguage(lng)}
+            >
+            {lngs[lng].nativeName}
+            </button>
+        ))}
+        </div>
+    );
+}

constants/langs/en.js

@@ -0,0 +1,15 @@
+export const en = {
+    "header": {
+        "publicationstab": "Publications"
+    },
+    "front": {
+        "title": "Welcome to CyberAula",
+        "title2": "innovation group of the UPM"
+    },
+    "publications": {
+        "title": "Publications"
+    },
+    "cursos": {
+        "title": "Courses"
+    }
+}

constants/langs/es.js

@@ -0,0 +1,15 @@
+export const es = {
+    "header": {
+        "publicationstab": "Publicaciones"
+    },
+    "front": {
+        "title": "Bienvenido a CyberAula",
+        "title2": "grupo de innovación educativa de la UPM"
+    },
+    "publications": {
+        "title": "Publicaciones"
+    },
+    "cursos": {
+        "title": "Cursos"
+    }
+}