feat(knowledge-base): Build Web-Engineering-I introduction page with links to slides

.vscode/settings.json

@@ -4,6 +4,7 @@
     "slides",
     "tasks",
     "landing",
-    "build"
+    "build",
+    "knowledge-base"
   ]
 }

src/components/mdx/Card.astro

@@ -0,0 +1,57 @@
+---
+import { Icon } from 'astro-icon/components'
+interface Props {
+  to: string;
+  color?: 'green' | 'rose' | 'violet' | 'blue';
+}
+
+const { color, to } = Astro.props;
+---
+
+<a class:list={["card", color]} href={to}>
+  <slot />
+  <Icon name="arrow" class="icon"/>
+</a>
+
+<style>
+.card {
+  background-color: var(--navigation-background-color);
+  color: var(--foreground-color);
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-radius: 0.25rem;
+  width: 100%;
+  text-decoration: none;
+  font-size: large;
+  font-weight: bold;
+  box-sizing: border-box;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom 100ms ease-in;
+
+  & .icon {
+    font-size: xx-large;
+  }
+  
+  &.green {
+    background-color: #004052;
+  }
+
+  &.violet {
+    background-color: #3a015c;
+  }
+
+  &.rose {
+    background-color: #45040c;
+  }
+
+  &.blue {
+    background-color: #1d2d44;
+  }
+
+  &:hover {
+    border-bottom: 2px solid white;
+  }
+}
+</style>

src/components/mdx/Spacer.astro

@@ -0,0 +1,8 @@
+<div class="spacer"></div>
+
+<style>
+.spacer {
+  width: 100%;
+  height: 40px;
+}
+</style>

src/content/config.ts

@@ -7,6 +7,17 @@ const skillCollection = defineCollection({
   }),  
 });
 
+const dhbwCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    tags: z.array(z.string()),
+    staticPath: z.string(),
+    show: z.optional(z.boolean()),
+  }),
+});
+
 export const collections = {
   'skills': skillCollection,
+  'dhbw': dhbwCollection,
 }

src/content/dhbw/de/web-engineering-i.mdx

@@ -0,0 +1,120 @@
+---
+title: "Web Engineering I"
+tags: 
+- "dhbw"
+- "web"
+- "engineering"
+- "html"
+- "css"
+- "javascript"
+slug: "web-engineering-i"
+staticPath: "knowledge-base/dhbw/"
+show: true
+---
+import Card from '../../../components/mdx/Card.astro';
+import Spacer from '../../../components/mdx/Spacer.astro';
+
+# Modul: Web Engineering I
+
+In diesem Modul werden die Grundlegenden Konzepte erklärt, aus denen sich moderne Webseiten zusammensetzen. Insgesamt werden die Themen HTML, CSS und JavaScript näher gebracht und wie diese 3 Grundpfeiler miteinander zusammen arbeiten. Neben den eigentlichen Slides, gibt es für bestimmte Themenblöcke Aufgaben zu erledigen, die das Wissen vertiefen sollen.
+
+Kursteilnehmer können folgenden Link nutzen um auf eine Checklist für alle anfallenden Inhalte zu kommen.
+
+<Card to="#" color="violet"><span>Zur *Web-Engineering I* Checkliste</span></Card>
+<div class="mb-1" />
+
+---
+
+## Einführung in HTML
+
+Mithilfe von HTML (Hypertext Markup Language) erzeugt man eine Struktur, in der die Inhalte einer Website platziert werden. Mithilfe verschiedener *"Tags"* werden unterschiedliche Inhalte definiert. Diese beginnen bei Überschriften, und strecken sich über Paragraphen, Visuellen Medien wie Bilder, Formulare, bis hin zu komplexen Grafiken, die aus verschiedenen Daten zusammengesetzt werden.
+<div class="mb-1" />
+
+### # Geschichte der Internets
+
+Von den frühen Tagen, in denen das Internet und dessen Technologien noch in der Kinderschuhen steckten bis zu den rasanten Erweiterungen bis zum Jahr 2000. In diesen Slides gibt es einen schnellen Überblick, wie sich das Web entwickelt hat.
+
+<Card to="/slides/history-of-web" color="blue">Zu den Slides</Card>
+
+<Spacer />
+
+### # Möglichkeiten zum Mitarbeiten (Projekt-Setup)
+
+Abhängig vom aktuellen Thema gibt es verschiedene Arten, um *interaktiv* mitzumachen.  
+Dies beginnt bei einfachen Web-Apps, die eine Sandbox bereit stellen um *schnell* etwas auszuprobieren, bis hin zu einem komplett aufgesetzten Projekt in dem Stück für Stück weitere Inhalte hinzugefügt werden können.
+
+<Card to="/slides/setting-up-a-project" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="violet">Docker Template</Card>
+
+<Spacer />
+
+### # HTML - Basics
+
+Nun aber ans eingemachte! Was genau ist nun HTML? Was sind Tags / Elemente? Wie nutzt man das alles?
+
+Wir werden das Grundgerüst jeder HTML-Seite betrachten und wie wir zusätzliche Attribute setzten können und uns mit dem `head` Element auseinandersetzen.
+
+<Card to="/slides/basics-of-html" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # Die verschiedenen Arten von HTML-Elementen (Tags)
+
+Nachdem das Grundgerüst gebaut wurde, werden wir die HTML-Seite nun endlich mit richtigem Inhalt füllen! Texte mit verschiedenen Nutzungs-Kontexten stehen hier an der Tagesreihe.  
+Weiterhin gibts hier einen Überblick, welche tagtägliche Tags existieren und auch ein paar speziellere für bestimmte Einsatzzwecke betrachtet.
+
+Grundsätzlich findet man in der folgenden Präsentation:
+* Texte
+* Überschriften
+* Aufzählungen
+* Landmarks
+
+<Card to="/slides/html-tags" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="rose">Programmieraufgabe</Card>
+<div class="mb-1" />
+<Card to="#" color="green">Cheat-Sheet</Card>
+<Spacer />
+
+### # Bilder in HTML einbetten
+
+Moderne Webinhalte bestehen nicht nur aus Texten. Nachdem wir uns überwiegend mit Textinhalten auseinander gesetzt haben, nehmen wir nun Bilder unter die Lupe. Was ist notwendig um ein Bild anzuzeigen, welche Attribute sollten mitgegeben werden und wie lassen sich Bilder für schmale und breite Bildschirme optimiert anzeigen?
+
+<Card to="/slides/images" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="rose">Programmieraufgabe</Card>
+<div class="mb-1" />
+<Card to="#" color="green">Cheat-Sheet</Card>
+<Spacer />
+
+### # HTML-Dokumente verlinken
+
+Eine Website spielt sich nicht nur innerhalb einer einzelnen HTML-Datei ab. Eine Website lebt, indem sie Verlinkungen (intern, sowie extern) hat und damit zu weiteren Seiten weiterleitet. Je nachdem, was einen Nutzer der Webseite interessiert.  
+Wir schauen uns an, wie Links eigentlich aufgebaut sind und wie man seine Dateien struktuieren kann beziehungsweise soll.
+
+<Card to="/slides/moving-between-html-documents" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="rose">Programmieraufgabe</Card>
+<div class="mb-1" />
+<Card to="#" color="green">Cheat-Sheet</Card>
+<Spacer />
+
+### # Tabellen
+
+Wenn auch ein etwas älteres "Konstrukt", sind Tabellen immernoch nützlich um große Datenmengen strukturiert anzuzeigen. Durch die natürliche *komplexere* Art von Tabellen, gibt es auch eine Menge Tags, die es zu benutzen gilt um eine Tabelle korrekt aufzubauen.
+
+<Card to="/slides/tables" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="green">Cheat-Sheet</Card>
+<Spacer />
+
+### # Formulare
+
+Im letzten Abschnitt der HTML-Reihe widmen wir uns den ersten *Interaktiven* Elementen einer Webseite: den Formularen. Sei es ein einfaches Kommentarfeld oder ein komplexes Bezahlformular in dem man allerlei Daten angeben muss - Formulare begleiten uns bis in die verstecktesten Ecken des Webs. Hierzu schauen wir uns die von HTML gegeben (und zahlreichen) Möglichkeiten an, wie man Daten eingeben kann.
+
+<Card to="/slides/forms" color="blue">Zu den Slides</Card>
+<div class="mb-1" />
+<Card to="#" color="rose">Programmieraufgabe</Card>
+<div class="mb-1" />
+<Card to="#" color="green">Cheat-Sheet</Card>
+<Spacer />

src/content/dhbw/de/web-engineering-ii.md

@@ -0,0 +1,14 @@
+---
+title: "Web Engineering II"
+tags: 
+- "dhbw"
+- "web"
+- "engineering"
+- "html"
+- "css"
+- "javascript"
+slug: "web-engineering-ii"
+staticPath: "knowledge-base/dhbw/"
+show: false
+---
+# Hallo Welt!

src/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M0,8l0,-2l10,0l0,-3l6,5l-6,5l0,-3l-10,0" fill="currentColor" />
+</svg>

src/pages/knowledge-base/dhbw/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import Layout from '../../../layouts/Layout.astro';
+import { getCollection } from 'astro:content';
+import '../../../styles/markdown.css';
+
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('dhbw');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<Layout title={entry.data.title}>
+  <Content />
+</Layout>

src/styles/markdown.css

@@ -0,0 +1,3 @@
+.mb-1 {
+  margin-bottom: 1rem;
+}