feat(i18n): add english translation for home chapter

apps/demol/src/app/app.tsx

@@ -8,14 +8,16 @@ import { Nav, Chapter, AppContext } from '@gerdesque/ui';
 import { ChapterProps } from '@gerdesque/data';
 import './app.scss';
 
-import app from './app.json';
+import appDe from './app.json';
+import appEn from './app_en.json';
 import { API_URL } from '@gerdesque/data';
 
 (window as any).soundManager.setup({debugMode: false});
 
 export const App = () => {
   const [character, setCharacter] = usePersistedState('character', 'default');
-  const [chapters, setChapters] = useState(app.chapters);
+  const [language, setLanguage] = usePersistedState('language', 'de');
+  const [chapters, setChapters] = useState(language === 'de' ? appDe.chapters : appEn.chapters);
 
   useEffect(() => {
     fetch(`${API_URL}/chapters`)
@@ -30,10 +32,10 @@ export const App = () => {
   }
 
   return (
-    <AppContext.Provider value={[character, setCharacter]}>
+    <AppContext.Provider value={[character, setCharacter, language, setLanguage]}>
     <BrowserRouter basename="/demokratieerleben2020"> 
       <div className="app">
-        <Nav chapters = {app.chapters}/>
+        <Nav chapters = {chapters}/>
         <ScrollIntoView>
         <div className="app-content">
           <Switch>

libs/home/src/lib/home.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Chapter } from '@gerdesque/ui';
+import React, { useContext } from 'react';
+import { AppContext, Chapter } from '@gerdesque/ui';
 import { ChapterProps } from '@gerdesque/data';
 import './home.scss';
 
-const home:ChapterProps = {
+const homeDe:ChapterProps = {
   link: "home",
   name: "Demokratie erLeben",
   groups: [{
@@ -81,10 +81,89 @@ const home:ChapterProps = {
   ]
 };
 
-export const Home = () => {
+const homeEn:ChapterProps = {
+  link: "home",
+  name: "Living Democracy",
+  groups: [{
+    "grouped": false,
+    "background": "2_31_b",
+    "content": [{
+      "type": "text",
+      "value": "This website tells the story of Anna, Karl and Gerda. All three live in the Weimar Republic and come from the working class. At the end of the 1920s they dream of a better future. Accompany them on their way to a camp of the social democratic organisation of the 'Friends of the Children' (Reichsarbeitsgemeinschaft der Kinderfreunde). In this so-called 'Children's Republic' they experience many exciting things and learn about democracy through their own actions.",
+      "option": "reveal"
+    }]
+  },
+  {
+    "grouped": true,
+    "content": [{
+      "type": "redirect",
+      "value": "chapter/daheim",
+      "option": "big",
+      "title": "Start the adventure here!"
+    },
+    {
+      "type": "image",
+      "value": "02_1455_(114)",
+      "option": "third"
+    }
+  ]
+},
+{
+  "grouped": true,
+    "content": [{
+      "type": "text",
+      "value": "The trip to the Children's Republic would not have been possible for Anna, Karl and Gerda without Anne Mühlich and Gerd Müller. As part of the 2019 'Coding da Vinci Westphalia-Ruhr Region' cultural hackathon, the two developed this scrollytelling website based on photos and material from the Archive of the Workers' Youth Movement. In 2020, as part of a Coding da Vinci grant, they completed and expanded the website for the purposes of the archive."
+    }]
+  },
+  {
+    "grouped": true,
+    "content": [{
+    "type": "text",
+    "value": "The two were supported by the wonderful team of Coding da Vinci, the colleagues of the Archive of the Workers' Youth Movement and especially by the energetic cooperation of the following people:"
+      },
+      {
+      "type": "image",
+      "value": "B41ABEA7-64DA-4D8E-8E1B-F55A38DD6E37",
+      "option": "second"
+      },
+      {
+      "type": "text",
+      "value": "Julia Kothe, Lars Tunçay, Nina Heinke, Felix Werthschulte, Luise & John",
+      "option": "third"
+      }]
+    },
+    {
+      "grouped": true,
+      "content": [{
+        "type": "text",
+        "value": "The website is aimed at all those who want to playfully explore the topic of 'Children's Republics' and participatory youth work in the first half of the 20th century and learn how such tent camps worked as a form of early and practical education for democracy. In times like today, when more and more people are turning away from democratic institutions, it is worthwhile to take a look back and see how education for democracy worked in the past, especially for less educated classes, and to what extent we can learn something for today."
+      },
+      {
+        "type": "text",
+        "option": "link",
+        "value": "Feedback, ideas and hints are welcome and can be sent to the <a href='mailto:[email protected]' target='_blank' rel='noopener noreferrer'>Archive of the Workers' Youth Movement</a>."
+      }]
+    },
+    {
+      "grouped": true,
+      "content": [{
+        "type": "text",
+        "option": "link",
+        "value": "This website was created as part of the <a href='https://codingdavinci.de/' target='_blank' rel='noopener noreferrer'>Coding da Vinci grant</a> between April and June 2020. The photographs and images were provided by the <a href='https://arbeiterjugend.de/' target='_blank' rel='noopener noreferrer'>Archive of the Workers' Youth Movement</a> under a CC BY-SA 3.0 EN licence. Sounds from the <a href='http://www.soundsofchanges.eu/' target='_blank' rel='noopener noreferrer'>Sounds of Changes</a> project collection (CC BY 4.0 licence), the audio database <a href='https://www.hoerspielbox.de/' target='_blank' rel='noopener noreferrer'>Hörspielbox</a> and the <a href='http://bbcsfx.acropolis.org.uk/' target='_blank' rel='noopener noreferrer'>BBC Sound Effects</a> archive were also used as well as images from <a href='https://commons.wikimedia.org' target='_blank' rel='noopener noreferrer'>Wikimedia Commons</a>."
+      },
+      {
+        "type": "text",
+        "value":"The source code runs under an MIT licence. The story and the media files created especially for the project are published under a CC BY-SA 3.0 licence."
+      }]
+    }
+  ]
+};
 
+export const Home = () => {
+  const [,,language] = useContext(AppContext);
+  const homeContent = language === 'de' ? homeDe : homeEn;
   return (
-    <Chapter {...home} />
+    <Chapter {...homeContent} />
   );
 };
 

libs/ui/src/lib/language/language.tsx

@@ -1,14 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext } from 'react';
+import { AppContext } from '../chapter/context';
 import './language.scss';
 
-/* eslint-disable-next-line */
-export interface LanguageProps {}
-
-let language = 'de';
-
-export const Language = (props: LanguageProps) => {
-  const changeLanguage = (lng) => {
-    language = lng;
+export const Language = () => {
+  const [,,language, setLanguage] = useContext(AppContext);
+  const changeLanguage = (language) => {
+    setLanguage(language)
   }
   return (
     <Fragment>

libs/ui/src/lib/nav/nav.scss

@@ -31,7 +31,7 @@
 	height: 100%;
 	left: 0;
 	outline: none;
-	text-indent: -15em;
+	text-indent: -16em;
 	top: 0;
 	transition: background 0.3s ease;
 	width: 100%;