fix: use proper way to require express-handlebars

import Fragment from react (#3133)

Switched twitch iframe from `twitch.tv` to `player.twitch.tv` (#3023)

added next-i18next

fixed errors to run i18next

added more translations

added next-i18next

fixed errors to run i18next

added more translations

removed de language

fixed translation

attempting to use i18 without next

added language routing

prettier fix

renamed component

fixed typo

revert formatting in package.json

revert formatting in package.json

removed extra css

Update type

Co-authored-by: Josue <[email protected]>

cleaned code

updated pnpm-lock.yaml

added language array for rendering list of languages

coding fixes

added key

Revert "fix: use proper way to require express-handlebars"

This reverts commit 83b9631.

fix: use proper way to require express-handlebars

import Fragment from react (#3133)

Switched twitch iframe from `twitch.tv` to `player.twitch.tv` (#3023)

added next-i18next

fixed errors to run i18next

added more translations

added next-i18next

fixed errors to run i18next

added more translations

removed de language

fixed translation

attempting to use i18 without next

added language routing

prettier fix

renamed component

fixed typo

revert formatting in package.json

revert formatting in package.json

removed extra css

Update type

Co-authored-by: Josue <[email protected]>

cleaned code

updated pnpm-lock.yaml

added language array for rendering list of languages

coding fixes

added key

added getlang fn

moved translation to about page

revert capital

added CSS to selectbox

new pnpm-lock

restored bannerbuttons file

src/web/package.json

@@ -20,13 +20,16 @@
     "dotenv": "10.0.0",
     "formik": "2.2.9",
     "highlight.js": "11.4.0",
+    "i18next": "21.6.12",
+    "i18next-browser-languagedetector": "6.1.3",
     "jwt-decode": "3.1.2",
     "nanoid": "3.2.0",
     "next": "12.0.9",
     "next-compose-plugins": "2.2.1",
     "next-pwa": "5.4.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-i18next": "11.15.5",
     "react-icons": "4.3.1",
     "react-lite-youtube-embed": "2.2.1",
     "react-transition-group": "4.4.2",

src/web/src/components/AboutPage.tsx

@@ -1,4 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
+import LanguageSelector from './LanguageSelector';
 
 const useStyles = makeStyles((theme) => {
   return {
@@ -52,14 +54,22 @@ const useStyles = makeStyles((theme) => {
         color: theme.palette.primary.main,
       },
     },
+    languageSelector: {
+      position: 'absolute',
+      right: '10rem',
+    },
   };
 });
 
 const AboutPage = () => {
+  const { t } = useTranslation();
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      <h1>About</h1>
+      <div className={classes.languageSelector}>
+        <LanguageSelector />
+      </div>
+      <h1> {t('about')}</h1>
       <p>
         One of the key features of Seneca&apos;s open source involvement has been the emphasis on
         sharing what we&apos;re working on, teaching, and learning through blogging. We believe that

src/web/src/components/LanguageSelector.tsx

@@ -0,0 +1,67 @@
+import { createContext, ChangeEvent, useState } from 'react';
+import { FormControl, Grid, InputLabel, MenuItem, Select } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { setLang, getLang } from '../translations/i18n';
+
+export interface TranslationInterface {
+  currentLanguage: string;
+}
+
+export const translationInterface = createContext<TranslationInterface>({
+  currentLanguage: 'en',
+});
+
+const languages: Array<{ name: string; code: string }> = [
+  { name: 'English', code: 'en' },
+  { name: 'Español', code: 'es' },
+];
+
+const useStyles = makeStyles((theme) => {
+  return {
+    selectBox: {
+      width: '10rem',
+      fontFamily: 'sans-serif',
+    },
+  };
+});
+
+const LanguageSelector = () => {
+  const classes = useStyles();
+
+  // sets the state to use the current i18 language. i18 remembers the language for the page,
+  // and is not effected by rendering.
+  const [language, setLanguage] = useState(getLang());
+
+  const changeLanguage = (
+    e: ChangeEvent<{ name?: string | undefined; value: string | unknown }>
+  ) => {
+    e.preventDefault();
+    setLanguage(e.target.value as string);
+    setLang(e.target.value);
+  };
+
+  return (
+    <Grid container>
+      <FormControl>
+        <InputLabel>Language</InputLabel>
+        <Select
+          className={classes.selectBox}
+          value={language}
+          label="Language"
+          onChange={changeLanguage}
+        >
+          {languages.map((lang) => {
+            return (
+              <MenuItem key={lang.code} value={lang.code}>
+                {lang.name}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </FormControl>
+    </Grid>
+  );
+};
+
+export default LanguageSelector;

src/web/src/translations/en/translations.js

@@ -0,0 +1,8 @@
+const TRANSLATIONS_EN = {
+  about: 'About',
+  aboutUs: 'About Us',
+  signIn: 'Sign In',
+  signOut: 'Sign out',
+};
+
+export default TRANSLATIONS_EN;

src/web/src/translations/es/translations.js

@@ -0,0 +1,8 @@
+const TRANSLATIONS_ES = {
+  about: 'Acerca de',
+  aboutUs: 'Sobre nosotros',
+  signIn: 'Iniciar sesión',
+  signOut: 'Cerrar sesión',
+};
+
+export default TRANSLATIONS_ES;

src/web/src/translations/i18n.js

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import TRANSLATIONS_ES from './es/translations';
+import TRANSLATIONS_EN from './en/translations';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: TRANSLATIONS_EN,
+      },
+      es: {
+        translation: TRANSLATIONS_ES,
+      },
+    },
+  });
+
+// function to set the language for i18n
+export const setLang = (language) => {
+  i18n.changeLanguage(language);
+};
+
+// function to return the current language selected for i18n
+export function getLang() {
+  return i18n.language || 'en';
+}