Implement site navigation

frontend/package.json

@@ -20,9 +20,11 @@
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/mdx-js__react": "1.5.3",
 
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "@mdx-js/react": "1.6.22",
 
     "sass": "^1.32.5",
     "typescript": "^4.1.3",
@@ -46,7 +48,7 @@
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
 
-    "eslint": "7.19.0",
+    "eslint": "7.23.0",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "eslint-plugin-import": "^2.22.1",

frontend/src/components/mdx/style-wrapper/defaults.module.scss

@@ -0,0 +1,65 @@
+@use '../../style/globals.scss';
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+// Wrapper for all mdx content
+
+.global-wrapper {
+  margin: 1rem;
+}
+
+
+// Primitive textual elements
+@mixin textual-element {
+  font-family: "Montserrat", sans-serif;
+}
+
+.a-wrapper {
+  @include textual-element();
+
+  text-decoration: underline;
+  color: globals.$color-font-primary;
+}
+
+.p-wrapper {
+  @include textual-element();
+}
+
+
+// Headline elements
+.h1-wrapper, .h2-wrapper, .h3-wrapper, .h4-wrapper, .h5-wrapper, .h6-wrapper {
+  @include textual-element();
+}
+
+
+// Table elements
+.table-wrapper {
+  border-collapse: collapse;
+}
+
+.tr-wrapper {
+  border: 3px solid black;
+
+  border-left: none;
+  border-right: none;
+
+  &:last-child {
+    border: none;
+  }
+
+  &:nth-child(even) {
+    background-color: globals.$color-focus;
+  }
+}
+
+.td-wrapper, .th-wrapper {
+  padding: 1rem;
+}
+
+
+// List elements
+.ul-wrapper, .ol-wrapper, .contains-task-list {
+  @include textual-element();
+
+  list-style-type: upper-roman;
+}

frontend/src/components/mdx/style-wrapper/defaults.tsx

@@ -0,0 +1,55 @@
+import { MDXProvider, MDXProviderProps } from '@mdx-js/react';
+import * as React from 'react';
+
+import mdxWrapperStyles from './defaults.module.scss';
+
+/* eslint-disable react/display-name */
+export function MdxPlaceDescriptionFormatter(props: React.PropsWithChildren<unknown>): React.ReactElement {
+  function buildWrapper<E extends keyof React.ReactHTML>(
+    elementName: E
+  ): (props: MDXProviderProps) => React.ReactElement {
+    const className = (mdxWrapperStyles as any)?.[`${elementName}-wrapper`];
+
+    return (props: MDXProviderProps) => (<div className={mdxWrapperStyles["global-wrapper"]}>
+      {React.createElement<React.HTMLAttributes<E>>(
+      elementName, { className, ...props }, props.children)}
+    </div>
+    );
+  }
+
+  function buildNotImplementedWrapper(
+    elementName: keyof React.ReactHTML
+  ): (props: MDXProviderProps) => React.ReactElement {
+    return () => {
+      throw new Error(`Unimplemented element "${elementName}"`);
+    };
+  }
+
+  return <MDXProvider components={{
+    // Primitive textual elements
+    a: buildWrapper("a"),
+    p: buildWrapper("p"),
+
+    // Headline elements
+    h1: buildWrapper("h1"),
+    h2: buildWrapper("h2"),
+    h3: buildWrapper("h3"),
+    h4: buildWrapper("h4"),
+    h5: buildWrapper("h5"),
+    h6: buildWrapper("h6"),
+
+    // Table elements
+    table: buildWrapper("table"),
+    td: buildWrapper("td"),
+    th: buildWrapper("th"),
+    tr: buildWrapper("tr"),
+
+    // List elements
+    ul: buildWrapper("ul"),
+    ol: buildWrapper("ol"),
+    li: buildWrapper("li"),
+
+    // Unsupported elements
+    code: buildNotImplementedWrapper("code")
+  }}>{props.children}</MDXProvider>;
+}

frontend/src/components/navbar/managedNavbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { NonEmptyArray } from 'types/utilityTypes';
+import { isNonEmptyArray, NonEmptyArray } from 'types/utilityTypes';
 import Navbar, { NavbarItem, NavbarSection } from './navbar';
 
 export function useManagedNavbar({
@@ -9,8 +9,8 @@ export function useManagedNavbar({
   onSelectionChanged
 }: {
   brandElement: React.ReactElement | string,
-  leftSections: NonEmptyArray<NavbarSection>,
-  rightSections: NonEmptyArray<NavbarSection>,
+  leftSections: NonEmptyArray<Omit<NavbarSection, 'styleOptions'>>,
+  rightSections: NonEmptyArray<Omit<NavbarSection, 'styleOptions'>>,
   onSelectionChanged?: (selection: { section: string, item: string | null } | null) => void
 }): [element: React.ReactElement, selection: { section: string, item: string | null } | null] {
   const [selected, setSelected] = React.useState<{ section: string, item: string | null } | null>(null);
@@ -23,29 +23,44 @@ export function useManagedNavbar({
     }
   }
 
-  function setFocussed(target: NavbarSection | NavbarItem | null | undefined, value: boolean) {
-    if (!target) {
-      return;
+  const [styledLeftSections, styledRightSections] = React.useMemo(() => {
+    function buildFocussed<T extends NavbarSection | NavbarItem>(target: T): T & { styleOptions: { focussed: boolean } } {
+      return { ...target, styleOptions: { focussed: true } };
     }
 
-    if (target.styleOptions) {
-      target.styleOptions.focussed = value;
-    } else {
-      target.styleOptions = { focussed: value };
+    function buildFocussedSection(section: NavbarSection): NavbarSection {
+      const focussedSection = buildFocussed(section);
+
+      // Fast path: No item is selected, so leave items as-is.
+      const selectedItem = selected?.item;
+      if (selectedItem === null) {
+        return focussedSection;
+      }
+
+      return {
+        ...focussedSection,
+        items: focussedSection.items.map(it => it.name === selectedItem ? buildFocussed(it) : it)
+      };
     }
-  }
 
-  if (selected) {
-    const selectedSection = [...leftSections, ...rightSections].find(it => it.name === selected?.section);
-    const selectedItem = selected?.item ? selectedSection?.items.find(it => it.name === selected?.item) : null;
+    const selectedSection = selected?.section;
+    // Fast path: Nothing is selected, so leave sections as-is.
+    if (selectedSection === null) {
+      return [leftSections, rightSections];
+    }
 
-    setFocussed(selectedSection, true);
-    setFocussed(selectedItem, true);
-  }
+    return [
+      leftSections.map(it => it.name === selectedSection ? buildFocussedSection(it) : it),
+      rightSections.map(it => it.name === selectedSection ? buildFocussedSection(it) : it)
+    ];
+  }, [leftSections, rightSections, selected]);
 
+  if (!isNonEmptyArray(styledLeftSections) || !isNonEmptyArray(styledRightSections)) {
+    throw new Error("Sections must not be empty");
+  }
 
   const el = <Navbar brandElement={brandElement}
-    leftSections={leftSections} rightSections={rightSections}
+    leftSections={styledLeftSections} rightSections={styledRightSections}
     onSelection={onSelection}
   />;
 

frontend/src/components/navbar/navbar.module.scss

@@ -11,6 +11,8 @@ nav {
   position: sticky;
   width: 100%;
 
+  box-sizing: border-box;
+
   color: globals.$color-font-secondary;
   background-color: globals.$color-secondary;
 

frontend/src/components/style/globals.scss

@@ -2,6 +2,7 @@ $color-primary: red;
 $color-secondary: black;
 $color-font-primary: black;
 $color-font-secondary: white;
+$color-focus: gray;
 
 html, body, #app {
   font-size: 11pt;

frontend/src/content/contact.content.mdx

@@ -0,0 +1,4 @@
+# Contact information
+
+This site will eventually be run on GitHub pages and is thus required to provide contact information for legal reasons.
+A data privacy notice will also be required.

frontend/src/content/index.ts

@@ -0,0 +1,29 @@
+import * as emaille from './places/emaille.place.mdx';
+import * as extrablatt from './places/extrablatt.place.mdx';
+import * as cafebleu from './places/cafebleu.place.mdx';
+import * as dhbwKa from './places/hochschulen/dhbwKarlsruhe.place.mdx';
+import * as fomHsKa from './places/hochschulen/fomHochschuleKarlsruhe.place.mdx';
+import * as hsKa from './places/hochschulen/hochschuleKarlsruhe.place.mdx';
+import * as karlsHs from './places/hochschulen/karlshochschule.place.mdx';
+import * as kit from './places/hochschulen/kit.place.mdx';
+import * as paedagogischeHs from './places/hochschulen/paedagogischehochschule.place.mdx';
+import * as staatlicheHs from './places/hochschulen/staatlicheHochschule.place.mdx';
+
+export const places = {
+  "restaurants": [
+    { info: emaille.place, content: emaille.default }
+  ],
+  "cafes": [
+    { info: extrablatt.place, content: extrablatt.default },
+    { info: cafebleu.place, content: cafebleu.default }
+  ],
+  "hochschulen": [
+    { info: dhbwKa.place, content: dhbwKa.default },
+    { info: fomHsKa.place, content: fomHsKa.default },
+    { info: hsKa.place, content: hsKa.default },
+    { info: karlsHs.place, content: karlsHs.default },
+    { info: kit.place, content: kit.default },
+    { info: paedagogischeHs.place, content: paedagogischeHs.default },
+    { info: staatlicheHs.place, content: staatlicheHs.default },
+  ]
+};

frontend/src/content/places/cafebleu.place.mdx

@@ -0,0 +1,7 @@
+export const place = {
+  name: "Café Bleu"
+};
+
+# What they offer
+
+Nice coffee, I guess?

frontend/src/content/places/emaille.place.mdx

@@ -0,0 +1,7 @@
+export const place = {
+  name: "Emaille"
+}
+
+# What they offer
+
+Amazing, yet affordable food.

frontend/src/content/places/extrablatt.place.mdx

@@ -0,0 +1,7 @@
+export const place = {
+  name: "Extrablatt"
+};
+
+# What they offer
+
+Great stuff, believe us.

frontend/src/content/places/hochschulen/dhbwKarlsruhe.place.mdx

@@ -0,0 +1,15 @@
+export const place = {
+  name: "Duale Hochschule Baden-Württemberg"
+};
+
+# What they offer
+
+1000 Partnerfirmen, die meisten aus der TechnologieRegion Karlsruhe 
+
+circa 3500 Studierende und rund 700 Lehrbeauftragte 
+
+19 Studiengänge bzw. Studienrichtungen 
+
+Gründung 1979 
+
+Webseite: https://www.karlsruhe.dhbw.de/startseite.html  

frontend/src/content/places/hochschulen/fomHochschuleKarlsruhe.place.mdx

@@ -0,0 +1,15 @@
+export const place = {
+  name: "FOM Hochschule Karlsruhe"
+};
+
+# What they offer
+
+4 Hochschulbereiche (Wirtschaft und Management, Wirtschaft und Psychologie, Wirtschaft und Recht, Gesundheit und Soziales) 
+
+2000 Professoren (deutschlandweit) 
+
+57.000 Studierende (deutschlandweit) 
+
+Größte private HS in Deutschland
+
+Webseite: https://www.fom.de/hochschulzentren/karlsruhe.html  

frontend/src/content/places/hochschulen/hochschuleKarlsruhe.mdx

@@ -0,0 +1,15 @@
+export const place = {
+  name: "Hochschule Karlsruhe - Technik und Wirtschaft"
+}
+
+# What they offer
+
+Circa 8000 Studenten 
+
+1200 Mitarbeiter und Professoren 
+
+6 Fakultäten (Architektur und Bauwesen, Elektro- und Informationstechnik, Informatik und Wirtschaftsinformatik, Informationsmanagement und Medien, Maschinenbau und Mechatronik, Wirtschaftswissenschaften) 
+
+Gründung: 1878 
+
+Webseite: https://www.hs-karlsruhe.de/