hugo mag functional components

.idea/.name

@@ -0,0 +1 @@
+hugos_flugzeuge

.idea/csv-plugin.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CsvFileAttributes">
+    <option name="attributeMap">
+      <map>
+        <entry key="\src\App.js">
+          <value>
+            <Attribute>
+              <option name="separator" value=";" />
+            </Attribute>
+          </value>
+        </entry>
+        <entry key="\src\app.css">
+          <value>
+            <Attribute>
+              <option name="separator" value=":" />
+            </Attribute>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>

README.md

@@ -1 +1,3 @@
-# hugo
+# hugo
+
+Besuche Hugo auf https://nilstrieb.github.io/hugos-lieblingsflugzeuge/

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Hugos Lieblingsflugzeuge"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/App.js

@@ -1,89 +1,81 @@
 import React from 'react';
-import {
-    Route, NavLink, HashRouter
-} from 'react-router-dom'
+import {HashRouter, NavLink, Route} from 'react-router-dom'
 import './app.css';
-import './template.css'
-import Modern from "./Militaer";
-import Home from "./Home";
+import PlaneList from './PlaneList';
+import Home from './Home';
+import UeberHugo from './UeberHugo'
+import Planes from "./PlaneInfo";
 
-class App extends React.Component {
-    render() {
-        return (
-            <HashRouter>
-                <div id="parent">
-                    <header>
-                        <Navigation/>
-                        <h1>Hugos Lieblingsflugzeuge</h1>
-                    </header>
-                    <main>
-                        <Route exact path="/" component={Home}/>
-                        <Route path="/flieger-modern" component={Modern}/>
-                    </main>
-                    <Footer/>
-                </div>
-            </HashRouter>
-        );
-    }
-}
+const App = () => (
+    <HashRouter>
+        <div id="parent">
+                <header>
+                    <h1>&#9992;&#65039;Hugos Lieblingsflugzeuge&#9992;&#65039;</h1>
+                    <Navigation/>
+                </header>
+            <main>
+                <Route exact path="/" component={Home}/>
+                <Route exact path="/hugo" component={UeberHugo}/>
+                <Route path="/flugzeuge" component={PlaneList}/>
+                <Route path="/flugzeug" component={Planes}/>
+            </main>
+            <Footer/>
+        </div>
+    </HashRouter>
+);
 
 export default App;
 
-class Navigation extends React.Component {
-    render() {
-        return (
-            <nav>
-                <ul>
-                    <li>
-                        <NavLink to="/">Start</NavLink>
-                    </li>
-                    <li>
-                        <NavLink to="/">Militärflugzeuge</NavLink>
-                        <div className="content">
-                            <NavLink to="/">Erste Weltkrieg</NavLink>
-                            <NavLink to="/">Zwischenkriegszeit</NavLink>
-                            <NavLink to="/">Zweiter Weltkrieg</NavLink>
-                            <NavLink to="/">Kalter Krieg</NavLink>
-                            <NavLink to="/flieger-modern">Moderne</NavLink>
-                        </div>
-                    </li>
-                    <li>
-                        <NavLink to="/">Airliner</NavLink>
-                        <div className="content">
-                            <NavLink to="/">Boeing</NavLink>
-                            <NavLink to="/">Airbus</NavLink>
-                            <NavLink to="/">Andere</NavLink>
-                        </div>
-                    </li>
-                    <li>
-                        <NavLink to="/">Sportflugzeuge</NavLink>
-                        <div className="content">
-                            <NavLink to="/">Doppeldecker</NavLink>
-                            <NavLink to="/">Propellerflugzeuge</NavLink>
-                            <NavLink to="/">Segelflugzeuge</NavLink>
-                            <NavLink to="/">Andere</NavLink>
-                        </div>
-                    </li>
-                    <li>
-                        <NavLink to="/">Spezielle</NavLink>
-                        <div className="content">
-                            <NavLink to="/">Helikopter</NavLink>
-                            <NavLink to="/">Zeppeline</NavLink>
-                            <NavLink to="/">Andere</NavLink>
-                        </div>
-                    </li>
-                </ul>
-            </nav>
-        )
-    }
-}
+const Navigation = () => (
+    <nav>
+        <ul>
+            <li>
+                <NavLink to="/">Start</NavLink>
+            </li>
+            <li>
+                <NavLink to="/hugo">Über Hugo</NavLink>
+            </li>
+            <li>
+                <NavLink to="/flugzeuge/militaer">Militär</NavLink>
+                <div className="content">
+                    <NavLink to="/flugzeuge/militaer/erster_weltkrieg">Erster Weltkrieg</NavLink>
+                    <NavLink to="/flugzeuge/militaer/zwischenkriegszeit">Zwischenkriegs&#8203;zeit</NavLink>
+                    <NavLink to="/flugzeuge/militaer/zweiter_weltkrieg">Zweiter Weltkrieg</NavLink>
+                    <NavLink to="/flugzeuge/militaer/kalter_krieg">Kalter Krieg</NavLink>
+                    <NavLink to="/flugzeuge/militaer/modern">Moderne</NavLink>
+                </div>
+            </li>
+            <li>
+                <NavLink to="/flugzeuge/airliner">Airliner</NavLink>
+                <div className="content">
+                    <NavLink to="/flugzeuge/airliner/boeing">Boeing</NavLink>
+                    <NavLink to="/flugzeuge/airliner/airbus">Airbus</NavLink>
+                    <NavLink to="/flugzeuge/airliner/andere">Andere</NavLink>
+                </div>
+            </li>
+            <li>
+                <NavLink to="/flugzeuge/sport">Sport</NavLink>
+                <div className="content">
+                    <NavLink to="/flugzeuge/sport/doppeldecker">Doppeldecker</NavLink>
+                    <NavLink to="/flugzeuge/sport/propellerflugzeuge">Propeller</NavLink>
+                    <NavLink to="/flugzeuge/sport/segelflugzeug">Segel</NavLink>
+                    <NavLink to="/flugzeuge/sport/andere">Andere</NavLink>
+                </div>
+            </li>
+            <li>
+                <NavLink to="/flugzeuge/spezielle">Spezielle</NavLink>
+                <div className="content">
+                    <NavLink to="/flugzeuge/spezielle/helikopter">Helikopter</NavLink>
+                    <NavLink to="/flugzeuge/spezielle/zeppeline">Zeppeline</NavLink>
+                    <NavLink to="/flugzeuge/spezielle/andere">Andere</NavLink>
+                </div>
+            </li>
+        </ul>
+    </nav>
+)
 
-class Footer extends React.Component {
-    render() {
-        return (
-            <footer>
-                <div>hi</div>
-            </footer>
-        )
-    }
-}
+const Footer = () => (
+    <footer>
+        <div>&copy; Hugo</div>
+    </footer>
+)

src/Home.js

@@ -1,11 +1,27 @@
-import React, {Component} from "react";
+import React from 'react';
+import ModelImage from './PlanePreview';
+import planes from './planes.json'
 
-class Home extends Component {
-    render() {
-        return (
-            <h1>Willkommen bei Hugos Lieblingsflugzeugen!</h1>
-        )
-    }
+const Home = () => {
+    const favs = planes.filter(isFavPlane)
+        .map(p => <ModelImage src={p.category + p.img} name={p.name} cat={p.category} key={p.category + p.name}/>);
+
+    const all = planes
+        .map(x => <ModelImage src={x.category + x.img} name={x.name} cat={x.category} key={x.category + x.name}/>);
+
+    return (
+        <div>
+            <h2>Hugos Favoriten</h2>
+            {favs}
+            <h2>Alle Flugzeuge</h2>
+            {all}
+        </div>
+    );
+
+}
+
+function isFavPlane(plane) {
+    return plane.tags.includes('fav');
 }
 
 export default Home;

src/Militaer.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import f22 from './img/raptor-1040097_1920.png'
-import harrier from './img/av-8b-harrier-1986422_1920.jpg'
-
-class Modern extends React.Component {
-    render() {
-        const items = Array(100).fill(1).map((x, y) => x + y)
-            .map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
-
-        return (
-            <div>
-                {items}
-                <ModelImage img={harrier} name="AV-8B Harrier"/>
-            </div>
-        )
-    }
-}
-
-class ModelImage extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            img: '',
-            name: '',
-        }
-    }
-
-    static getDerivedStateFromProps(props) {
-        return {img: props.img, name: props.name};
-    }
-
-    render() {
-        return (
-            <div className="model">
-                <img src={this.state.img} alt={this.state.name}/>
-                <div>{this.state.name}</div>
-            </div>
-        );
-    }
-}
-
-export default Modern;

src/PlaneInfo.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useLocation} from 'react-router-dom';
+import planes from './planes.json';
+import './plane.css';
+
+const Planes = () => {
+    const route = useLocation().pathname.replaceAll("/flugzeug/", "");
+
+    const plane = planes.find(p => p.category + p.name === route);
+    const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
+
+    return (
+        <div>
+            {
+                plane ?
+                    <>
+                        <h2>{plane.name}</h2>
+                        <img src={imgPath} alt={'Bild von ' + plane.name} className="plane-image"/>
+                        <p>{plane.description}</p>
+                    </>
+                    :
+                    <h2>Flugzeug nicht gefunden.</h2>
+            }
+        </div>
+    );
+}
+
+
+export default Planes;

src/PlaneList.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ModelImage from './PlanePreview'
+import planes from './planes.json';
+import {useLocation} from "react-router-dom";
+
+
+const PlaneList = () => {
+    const route = useLocation().pathname.replaceAll("/flugzeuge/", "");
+
+    const matches = planes
+        .filter(e => e.category.startsWith(route))
+        .map(x => <ModelImage src={x.category + x.img} name={x.name} cat={x.category}
+                              key={x.category + x.name}/>);
+
+    return (
+        <div>
+            {matches}
+        </div>
+    )
+}
+
+
+export default PlaneList;

src/PlanePreview.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {NavLink} from 'react-router-dom'
+import './plane_preview.css'
+
+
+const ModelImage = props => (
+    <NavLink to={'/flugzeug/' + props.cat + props.name} className="model">
+        <img src={process.env.PUBLIC_URL + '/img/' + props.src} alt={props.name}/>
+        <div className="model-info">
+            <span className="model-info-text">{props.name}</span>
+        </div>
+    </NavLink>
+);
+
+
+export default ModelImage;

src/UeberHugo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const UeberHugo = () => (
+    <div>
+        <h1>Hugo Boss</h1>
+        <p>Hugo Boss ist ein begeisterter Modellbauer und Gründungsmitglied
+            vom Modellbauverein Winterthur.</p>
+        <p>Am liebsten baut er Flugzeuge, sie haben ihn schon sein ganzes Leben fasziniert und er wollte immer Pilot
+            werden.
+            Das hat er zwar nicht geschafft, aber das Modellbauen ermöglicht es ihm, seine Leidenschaft trotzdem
+            auszuleben.
+            Auf dieser Website präsentiert Hugo seine liebsten Flugzeuge, die er am liebsten alle nachbauen
+            würde.</p>
+        <img src={process.env.PUBLIC_URL + '/img/hugo.jpg'} alt="Hugo Boss" width="1500px"/>
+    </div>
+)
+
+export default UeberHugo;

src/app.css

@@ -10,21 +10,118 @@ body {
     color: white;
 }
 
-#parent {
-    display: grid;
-    grid-template-rows: 150px auto;
-    grid-template-areas: "header"
-                        "main";
+p {
+    width: 1000px;
 }
 
 main {
     grid-area: main;
+    margin-top: 100px;
 }
 
-.model {
+:root {
+    --nav-hover-color: #8997b3;
+}
+
+header {
+    grid-area: header;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: #282c34;
+    overflow: visible;
+    display: grid;
+    grid-template-columns: 500px auto;
+    padding-top: 10px;
+    margin-left: 10px;
+
+    height: 50px;
+}
+
+header h1 {
+    margin: 0;
+    width: 500px;
+}
+
+main {
+    margin-left: 10px;
+}
+
+/*Navigation*/
+nav {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
     display: inline-block;
 }
 
-.model img {
-    height: 200px;
+/*main ul*/
+nav ul {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+}
+
+/*nav li item*/
+nav ul li {
+    float: left;
+    position: relative;
+    display: inline-block;
+    width: 200px;
+    font-size: 1.8em;
+    cursor: pointer;
+    margin: auto;
+
+}
+
+
+/*all nav a*/
+nav ul li a {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    transition-duration: 0.3s;
+}
+
+/*all nav a hover*/
+nav ul li a:hover {
+    background-color: var(--nav-hover-color);
+    transition-duration: 0.3s;
+}
+
+/*Only on the top elements*/
+nav ul li > a {
+    border-right: 1px solid gray;
+}
+
+/*don't show border on the right*/
+nav ul li:last-child > a {
+    border: none;
+}
+
+/*drop menu*/
+nav ul li .content {
+    display: none;
+    z-index: 1;
+    width: 100%;
+    background-color: #3b414d;
+}
+
+/*drop menu main hover*/
+nav ul li:hover .content {
+    display: block;
+}
+
+/*drop menu a*/
+nav ul li .content a {
+    padding: 8px 0 8px 0;
+}
+
+footer {
+    margin-left: 10px;
+    margin-bottom: 100px;
 }

src/plane.css

@@ -0,0 +1,3 @@
+.plane-image {
+    height: 500px;
+}

src/plane_preview.css

@@ -0,0 +1,51 @@
+:root {
+    --model-image-height: 200px;
+}
+
+.model {
+    position: relative;
+    text-align: center;
+    color: white;
+    display: inline-block;
+    transform: scale(1);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-out;
+}
+
+.model:hover {
+    color: white;
+    transform: scale(1.02);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-out;
+}
+
+.model .model-info {
+    visibility: hidden;
+
+    height: 100%;
+    width: 100%;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    line-height: var(--model-image-height);
+}
+
+.model:hover .model-info {
+    visibility: visible;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.model img {
+    height: var(--model-image-height);
+}
+
+
+.model-info-text {
+    vertical-align: middle;
+    display: inline-block;
+
+    font-size: 1.5em;
+}

src/planes.json

@@ -0,0 +1,101 @@
+[
+  {
+    "name": "F-22 Raptor",
+    "img": "f22.png",
+    "category": "militaer/modern/",
+    "description": "Die F-22 Raptor ist ein Kampfflugzeug der 6. Generation der USA. Durch seine moderne Computersteuerung und Tarnkappentechnik ist es der Herr der Lüfte",
+    "tags": []
+  },
+  {
+    "name": "AV-8B Harrier",
+    "img": "harrier.jpg",
+    "category": "militaer/kalter_krieg/",
+    "description": "Der Harrier ist ein Britisches Kampflugzeug. Er war der erste Jet (im aktiven Einsatz) mit der Fähigkeit, senkrecht wie ein Helikopter abzuheben und zu landen.",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "Airbus A380",
+    "img": "a380.jpg",
+    "category": "airliner/airbus/",
+    "description": "Die A380 ist das grösste Passagierflugzeug der Welt.",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "Flugzeug Wrack 1",
+    "img": "wrack1.jpg",
+    "category": "spezielle/andere/",
+    "description": "Das Wrack von einem abgestürzten Flugzeug.",
+    "tags": []
+  },
+  {
+    "name": "Doppeldecker 1",
+    "img": "doppeldecker1.jpg",
+    "category": "sport/doppeldecker/",
+    "description": "Ein Doppeldecker. Genauere Details unbekannt.",
+    "tags": []
+  },
+  {
+    "name": "A-10 Thunderbolt II",
+    "img": "a10.jpg",
+    "category": "militaer/kalter_krieg/",
+    "description": "Die A-10 'Warthog' Thunderbolt II ist ein amerikanisches Bodenangriffsflugzeug aus den 70er-Jahren, was auch heute immer noch im Einsatz ist. Es zeichnet sich durch seine Gatling-Gun aus, die mit über 5000 RPM 30mm-Kugeln abfeuert.",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "P-51",
+    "img": "p51.jpg",
+    "category": "militaer/zweiter_weltkrieg/",
+    "description": "Die P-51 ist ein amerikanisches Propellerflugzeug aus dem zweiten Weltkrieg. Auf dem Bild zu sehen mit einer hochmodernen F-35",
+    "tags": [
+      "fav"
+    ]
+  },
+  {
+    "name": "Fokker Dr1",
+    "img": "fokkerdr1.jpg",
+    "category": "militaer/erster_weltkrieg/",
+    "description": "Die Fokker Dr1 ist ein deutsches Dreidecker-Flugzeug aus dem ersten Weltkrieg. Im Bild zu sehen ist ein nachbau der Dr1 vom 'Roten Baron', dem berühmten deutschen Fliegerass.",
+    "tags": []
+  },
+  {
+    "name": "AH-64 Apache",
+    "img": "ah64.jpg",
+    "category": "militaer/kalter_krieg/",
+    "description": "Der amerikanische Boeing AH-64 Apache Kampfhubschrauber ist der wohl beühmsteste Kampfhubschrauber.",
+    "tags": []
+  },
+  {
+    "name": "MiG-19",
+    "img": "mig19.jpg",
+    "category": "militaer/kalter_krieg/",
+    "description": "Die sowjetische Mikojan-Gurewitsch MiG-19 aus dem Jahre 1955 ist ein jetbetriebenes Jagdflugzeug, was auch als Jagdbomber eingesetzt werden kann.",
+    "tags": []
+  },
+  {
+    "name": "Boeing 787 Dreamliner",
+    "img": "787.jpg",
+    "category": "airliner/boeing/",
+    "description": "Der Dreamliner ist ein modernes Passagierflugzeug für 200-300 Personen von Boeing.",
+    "tags": []
+  },
+  {
+    "name": "Segelflugzeug 1",
+    "img": "segel1.jpg",
+    "category": "sport/segelflugzeug/",
+    "description": "Ein kleines Segelflugzeug auf einer Wiese.",
+    "tags": []
+  },
+  {
+    "name": "Eurocopter 145",
+    "img": "ec145.jpg",
+    "category": "spezielle/helikopter/",
+    "description": "Der EC 145 ist ein vielseitig einsetzbarer Leichthubrschrauber.",
+    "tags": []
+  }
+]

src/template.css

@@ -1,97 +0,0 @@
-:root {
-    --nav-color: rgb(176, 194, 206);
-    --nav-hover-color: darkgrey;
-}
-
-header {
-    grid-area: header;
-}
-
-header h1 {
-    margin-top: 50px;
-    text-align: center;
-}
-
-/*Navigation*/
-nav {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    background-color: var(--nav-color);
-    width: 100%;
-
-    position: fixed;
-    top: 0;
-    height: 50px;
-}
-
-/*main ul*/
-nav ul {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-/*nav li item*/
-nav ul li {
-    float: left;
-    border-right: 1px solid gray;
-    height: 100%;
-    width: 15%;
-    position: relative;
-    display: inline-block;
-
-    font-size: 1.5em;
-    background-color: var(--nav-color);
-    cursor: pointer;
-    margin: auto;
-}
-
-/*nav li item on hover*/
-nav ul li:hover {
-    background-color: darkgray;
-    color: var(--nav-hover-color);
-    transition-duration: 0.4s;
-}
-
-/*all nav a*/
-nav ul li a {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    color: black;
-    width: 100%;
-    height: 100%;
-    background-color: var(--nav-color);
-    border: none;
-    cursor: pointer;
-}
-
-/*all nav a focus - remove outline so it looks like a normal link*/
-nav ul li a:focus {
-    outline: 0;
-}
-
-/*all nav a hover*/
-nav ul li a:hover {
-    background-color: var(--nav-hover-color);
-}
-
-/*drop menu*/
-nav ul li .content {
-    display: none;
-    background-color: var(--nav-color);
-    z-index: 1;
-    width: 100%;
-}
-
-/*drop menu main hover*/
-nav ul li:hover .content {
-    display: block;
-}
-
-/*drop menu a*/
-nav ul li .content a {
-    padding: 8px 0 8px 0;
-}

yarn.lock

@@ -1084,6 +1084,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.13.tgz#0a21452352b02542db0ffb928ac2d3ca7cb6d66d"
@@ -2430,7 +2437,7 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@^2.6.2:
+async@^2.6.1, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -3302,7 +3309,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.20.0:
+commander@^2.18.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4182,6 +4189,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+email-addresses@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
+  integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
+
 emittery@^0.7.1:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@@ -4358,7 +4370,7 @@ escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -4878,6 +4890,20 @@ file-uri-to-path@1.0.0:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
+filename-reserved-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz#abf73dfab735d045440abfea2d91f389ebbfa229"
+  integrity sha1-q/c9+rc10EVECr/qLZHzieu/oik=
+
+filenamify@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-4.3.0.tgz#62391cb58f02b09971c9d4f9d63b3cf9aba03106"
+  integrity sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==
+  dependencies:
+    filename-reserved-regex "^2.0.0"
+    strip-outer "^1.0.1"
+    trim-repeated "^1.0.0"
+
 filesize@6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
@@ -5174,6 +5200,19 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gh-pages@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-3.2.3.tgz#897e5f15e111f42af57d21d430b83e5cdf29472c"
+  integrity sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==
+  dependencies:
+    async "^2.6.1"
+    commander "^2.18.0"
+    email-addresses "^3.0.1"
+    filenamify "^4.3.0"
+    find-cache-dir "^3.3.1"
+    fs-extra "^8.1.0"
+    globby "^6.1.0"
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5385,6 +5424,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5394,6 +5445,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6064,6 +6122,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6910,7 +6973,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7116,6 +7179,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -7875,6 +7946,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -8730,7 +8808,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8940,7 +9018,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8955,6 +9033,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.2.tgz#530fd934dfdf31c355e366df40bf488347c28de7"
@@ -9319,6 +9426,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
@@ -10196,6 +10308,13 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-outer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
+  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
 style-loader@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
@@ -10412,6 +10531,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -10488,6 +10617,13 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
+trim-repeated@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
+  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -10829,6 +10965,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"