Homescreen and Infoscreen

frontend/src/components/mdx/homescreen/homescreen.module.scss

@@ -0,0 +1,23 @@
+@use '../../style/globals';
+
+.homeContainer {
+  display: grid;
+  place-items: center;
+  position: absolute;
+  bottom: 0;
+  color: black;
+  content: "";
+  z-index: -5;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center 0%;
+}
+
+.homeContainer-inside {
+  background-color: white;
+  color: black;
+  font-size: 40pt;
+  text-align: center;
+  z-index: 1;
+}

frontend/src/components/mdx/homescreen/homescreen.tsx

@@ -0,0 +1,10 @@
+import homescreenStyles from './homescreen.module.scss';
+import React from "react";
+
+export function Homescreen({ src, text }: { src: string, props: string, alt: string, text: string }): React.ReactElement {
+  return <div className={`${homescreenStyles["homeContainer"]}`} style={{backgroundImage: `url(${src})`}} >
+    <div className={`${homescreenStyles["homeContainer-inside"]}`}>
+      {text}
+    </div>
+  </div>;
+}

frontend/src/components/mdx/round-image/roundImage.module.scss → frontend/src/components/mdx/image/image.module.scss

@@ -26,8 +26,16 @@
   &-large {
     @include square-image(15rem);
   }
+
+  &-full {
+    @include square-image(clamp(0px, 100%, 1080px));
+  }
 }
 
 .round {
   border-radius: 50%;
 }
+
+.rectangle {
+  border-radius: 5%;
+}

frontend/src/components/mdx/image/image.tsx

@@ -0,0 +1,13 @@
+import imageStyles from './image.module.scss';
+
+import React from "react";
+
+export type ImageSize = "small" | "medium" | "large" | "full";
+export type ImageShape = "round" | "rectangle";
+
+export function Image({ src, alt, size, shape }: { src: string, alt: string, size?: ImageSize, shape?: ImageShape}): React.ReactElement {
+  const sizeStyleName: keyof typeof imageStyles = `square-${size ?? "medium"}` as const;
+  const shapeStyleName: keyof typeof imageStyles = shape ?? "rectangle" as const;
+
+  return <img src={src} className={`${imageStyles[shapeStyleName]} ${imageStyles[sizeStyleName]}`} alt={alt} />;
+}

frontend/src/components/mdx/info/info.module.scss

@@ -0,0 +1,50 @@
+@use '../../style/globals';
+
+.infoContainer {
+  display: flex;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  color: rgb(0, 0, 0);
+  font-size: 20pt;
+  flex-direction: column;
+  margin-bottom: 25px;
+}
+
+.text {
+  width: 100%;
+}
+
+.image {
+  width: 100%;
+}
+
+.additionalInfo {
+  display: none;
+}
+
+@media (min-width: 450px) {
+  .infoContainer-left {
+    flex-direction: row;
+  }
+
+  .infoContainer-right {
+    flex-direction: row-reverse;
+  }
+
+  .text {
+    width: 65%;
+  }
+
+  .image {
+    width: 25%;
+  }
+  .additionalInfo {
+    width: 15%;
+    font-size: 10pt;
+    display: flex;
+    &:empty {
+      display: none;
+    }
+  }
+}

frontend/src/components/mdx/info/info.tsx

@@ -0,0 +1,22 @@
+import infoStyles from './info.module.scss';
+import { Image } from 'components/mdx/image/image';
+
+import React from "react";
+
+export type ImagePosition = "left" | "right";
+
+export function Info({ src, text, addInfo, imagePosition, alt }
+  :{ src: string, text: string, addInfo: string, propsImage: string, imagePosition?: ImagePosition, alt: string })
+  : React.ReactElement {
+  const position: keyof typeof infoStyles = `infoContainer-${imagePosition ?? "left"}` as const;
+
+  return <div className={`${infoStyles[position]} ${infoStyles["infoContainer"]}`}>
+    <div className={`${infoStyles["additionalInfo"]}`}>{addInfo}</div>
+    <div className={`${infoStyles["image"]}`}>
+      <Image src={src} size="full" shape="rectangle" alt={alt} />
+    </div>
+    <div className={`${infoStyles["text"]}`}>
+      {text}
+    </div>
+  </div>;
+}

frontend/src/content/contentPage.mdx

@@ -0,0 +1,16 @@
+import { Info } from '../components/mdx/info/info';
+import {Homescreen} from '../components/mdx/homescreen/homescreen';
+
+<Homescreen src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
+  propsImage={"image-rectangle image-full"} text={"Willkommen in Karlsruhe"} alt={"A lorem picsum"}/>
+
+
+<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
+  imagePosition={"left"} alt={"A lorem picsum"} text={"Bilder können sowohl links vom Text,"}
+  addInfo={"Hier stehen Öfnnungszeiten, Adresse, o.ä."}/>
+<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
+  imagePosition={"right"} alt={"A lorem picsum"}
+  text={"als auch rechts vom Text sein. Problem ist jetzt nur noch, dass Bilder in Zeilen ohne addInfo ein wenig größer sind."}
+  addInfo={"Zum nächsten Bild gibts keine zusätzlichen Infos, deshalb wird dort nichts angezeigt!"}/>
+<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
+  imagePosition={"left"} alt={"A lorem picsum"} text={"Das ist das Karlsruher Schloss. Gebaut wurde es damals und seitdem steht es da."}/>

frontend/src/content/helloWorld.mdx

@@ -1,8 +1,4 @@
-import { RoundImage } from '../components/mdx/round-image/roundImage';
-
-# Hello world from mdx!
-
-## Regular markdown (GitHub flavor)
+import { Image } from '../components/mdx/image/image';
 
 You can write anything here that is allowed in regulra markdown files as well.
 This includes _italic_, **bold** and ~~struck-through~~ text, [links with a descriptor](https://github.github.com/gfm/) and even tables:
@@ -32,7 +28,7 @@ As a surprise, mdx also supports task list items:
 The following image is a regular React component.
 By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way.
 
-<RoundImage src={"https://picsum.photos/100/200"} alt={"A lorem picsum"} size={"medium"}/>
+<Image src={"https://picsum.photos/100/200"} alt={"A lorem picsum"} size={"medium"}/>
 
 ## A note on styling