feature(documentation-website): add language switch on footer (#702)

documentation-website/language/en.yml

@@ -500,3 +500,10 @@ cookie-consent:
     youtube:
       title: "YouTube"
       description: "We will load videos from www.youtube-nocookie.com to directly play on the site."
+
+language-switch:
+  aria: "Language switch"
+
+languages:
+  en: "English"
+  fr: "Français"

documentation-website/src/components/footer.tsx

@@ -4,10 +4,14 @@ import {
   NavLink,
 } from 'react-router-dom';
 import CookieConsent from './cookie-consent.tsx';
+import LanguageSwitch from './language-switch.tsx';
 
 const Footer = () => <footer>
   <span>©2020-2024 Björn Büttner and contributors.</span>
   <ul>
+    <li>
+      <LanguageSwitch />
+    </li>
     <li>
       <CookieConsent />
     </li>

documentation-website/src/components/language-switch.scss

@@ -0,0 +1,4 @@
+select.language-switch {
+  appearance: auto;
+  cursor: pointer;
+}

documentation-website/src/components/language-switch.tsx

@@ -0,0 +1,57 @@
+import React, {
+  lazy,
+  Suspense,
+  useState,
+} from 'react';
+import Lang from './lang.tsx';
+import languages from '../locales/languages';
+import languageKey from '../locales/language-key.ts';
+import t from './t.ts';
+import Window from './window.ts';
+import './language-switch.scss';
+
+const LanguageSwitch = () => {
+  const that: Window = window as unknown as Window;
+
+  const [
+    language,
+    setLanguage,
+  ] = useState<string>(() => that?.localStorage?.getItem('language',) ?? 'en',);
+
+  const changeLanguage = (newLanguage: string,) => {
+    setLanguage(newLanguage,);
+    that?.localStorage?.setItem('language', newLanguage,);
+    // reload page
+    that?.location?.reload();
+  };
+
+  const EL = lazy(async() => {
+    const ariaLabel = await t('language-switch.aria',);
+    return {
+      default: () => <select
+        className='language-switch'
+        aria-label={ ariaLabel }
+        value={ language }
+        onChange={ (event,) => changeLanguage(event.target.value,) }
+      >{
+          languages.map((lang,) => <option
+            key={ lang }
+            value={ lang }
+          >
+            <Lang lnkey={`languages.${ lang }` as languageKey}/>
+          </option>,)
+        }
+      </select>,
+    };
+  },);
+
+  return <Suspense fallback={
+    <select className='language-switch'>{ languages.map((lang,) => <option
+      key={ lang }
+      value={ lang }
+    >{ lang }</option>,) }</select>}>
+    <EL/>
+  </Suspense>;
+};
+
+export default LanguageSwitch;

documentation-website/src/components/t.ts

@@ -12,8 +12,11 @@ export default async(lnkey: languageKey, global?: object,): Promise<string> => {
     return '';
   }
   const that: Window = (global ?? window) as Window;
-  const language = (that?.Navigator?.language ?? 'en')
-    .replace(/-.*$/u, '',);
+  const language = (
+    (that?.localStorage?.getItem('language',) || 'en')
+    ?? that?.Navigator?.language
+    ?? 'en'
+  ).split('-',)[FIRST_ELEMENT];
   const main = lnkey.split('.',)[FIRST_ELEMENT];
   if (! files.includes(`en-${ main }`,)) {
     return lnkey;

documentation-website/src/components/window.ts

@@ -1,4 +1,7 @@
 interface Window {
+  location: {
+    reload(): void,
+  },
   localStorage: {
     getItem(key: string): string,
     setItem(key: string, value: string): string

documentation-website/src/index.scss

@@ -560,7 +560,9 @@ header #medium img {
   header {
     grid-template-columns: 30% auto 5%;
   }
+}
 
+@media only screen and (width >= 950px) {
   footer {
     flex-direction: row;
     justify-content: space-between;