Layouts, Components & Template Engine

In dieser Sektion wollen wir uns näher mit Components, Layouts und der Template Engine vertraut machen.

Aufgaben - Layouts

Erstelle eine neues Layout für Blogposts. Nutze als Basis das HTML Grundgerüst aus dem Appendix.
Erstelle eine neue Astro Page, die dein neues Layout benutzt und den Content der Astro Page im <body> ausgibt.
Das neue Layout soll nun erweitert werden mit der Möglichkeit einen title (Typ: string) zu konfigurieren, der dann im <title> Tag im <head> das Layouts ausgegeben werden soll. Nutze dazu die Props von Astro, um dein Layout konfigurierbar zu machen. Setze anschließend einen Title für Deine Astro Page.
Zusätzlich wollen wir eine description (Typ: string) als Konfiguration für das Layout ermöglichen. Die description soll optional sein. Nur wenn die description gesetzt ist, soll der Inhalt in folgendem Element im <head> ausgegeben werden: <meta name="description" content="[description_inhalt_hier]">.

Aufgaben - Components

Wir wollen eine neue Component entwickeln, die eine Navigation anzeigt.
Man soll für Component beliebig viele Navigationseinträge über die Props konfigurieren können. Die Datenstruktur für einen Navigationseintrag soll wie folgt aussehen:

export interface NavEntry {
    label: string;
    href: string;
}

Die von außen konfigurierten Navigationseinträge sollen als Liste mit Links im Template der Component angezeigt werden. Beispiel:
- ```
<ul>
   <li><a href="href">label</a></li>
</ul>
```
Binde die neue Component in eine Astro Page deiner Wahl ein und konfiguriere einige Navigationseinträge.

Appendix

Layout

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Blogpost</title>
</head>
<body>

</body>
</html>