webpage models

webpage/content/3-strapi/2-models.typ

@@ -4,7 +4,7 @@
 
 == Modelle
 
-=== Global
+=== Global <global>
 Im @single-type *Global* können Werte hinterlegt werden, die im Kontext der gesamten Website zur Verfügung stehen sollen. Diese Einträge umfassen die Navigationsleiste, die Fußzeile und SEO, welche die Anzeige in einer Suchmaschine steuern. Diese Werte müssen definiert werden, damit die Webseite funktionsfähig angezeigt werden kann.
 \
 \
@@ -57,46 +57,101 @@ Die Fußzeile kann mit Verweisen auf den Betreiber und eigenen Links definiert w
 Der Abschnitt SEO ist optional und kann verwendet werden, um den Titel der Registerkarte und die Beschreibung der Seite festzulegen. Dies optimiert die Ergebnisse in Suchmaschinen, da u.a. die Beschreibung direkt angezeigt wird. 
 
 === Startseite
-@single-type *Startseite*
+#figure(
+  image("../../images/homepage.png", width: 100%),
+)
 
-Hier können die Inhalte der Startseite angepasst werden.
-- BackdropBildschirmfüllendes Bild, das im Hintergrund angezeigt wird.
-- Das in Global angegebene Logo wird unten im Eck über den Backdrop gelegt.
+Der @single-type *Startseite* definiert die Startseite. Diese ist immer fest und muss konfiguriert werden, damit die Website funktionsfähig ist.
 
-=== Sammlungs Referenz
-@collection-type *Sammlungs Referenz*
+Die Startseite besteht aus einem Bild, das über der Navigationsleiste angezeigt werden kann. Die Funktionalität, dass etwas über der Navigationsleiste angezeigt wird, kann auch über `hide_backdrop` deaktiviert werden.
 
-Verwaltung und Erstellung von Referenzen auf Artikel, Einsätze, Termine und Fahrzeuge.
-- Image ItemSoll das Element in der Liste ein Bild anzeigen.
-- Date ListSollen die Listenelemente gruppiert nach Jahren angezeigt und navigiert werden.
-- Numbered ItemSoll bei den ListenElementen ohne Bild statt dem Tag als große Zahl eine Nummerierung erfolgen.
-- Inverse CountSoll die Zählweise umgekehrt sein. (Sinnvoll bei Einsätzen)
+Das Logo, das auch auf der Startseite verwendet wird, ist das gleiche, das unter Global (@global) angegeben wurde.
+
+Die Erstellung von Inhalten mit Hilfe von Komponenten wird unter Verwendung in @usage erläutert. Die Startseite ist eine vollwertige Seite wie die Seiten (@page), jedoch mit erweiterten Darstellungsmöglichkeiten, um die Startseite hervorzuheben.
+
+=== Sammlungs Referenz <reference>
+#figure(
+  image("../../images/collection-ref.png", width: 100%),
+)
+Der @collection-type *Collection Reference* definiert, wie die definierten Listen für Artikel, Einsätze, Termine und Fahrzeuge angezeigt werden sollen. Damit wird auch festgelegt, dass der Inhalt bei jeder Verwendung einheitlich ist.
+
+Damit eine Liste wie Artikel, Einsätze, Termine oder Fahrzeuge auf den Seiten verwendet werden kann, muss eine Sammlungsreferenz erstellt worden sein.
+\
+\
+- `image_item`: Wenn das Element in der Liste ein Bild anzeigen soll.
+- `date_list`: Sollen die Listenelemente nach Jahren gruppiert angezeigt und navigiert werden. Die Elemente werden durch einen Text mit dem Monat getrennt.
+- `numbered_item`: Sollen die Listenelemente ohne Bild anstelle des Tages als große Zahl durchnummeriert werden?
+- `inverse_count`: Soll die Anzeige umgekehrt werden (neueste oder älteste zuerst). Bei der Verwendung von `numbered_item` wird dadurch die Nummerierung geändert.
 
 === Seiten <page>
-@collection-type *Seiten*
+#figure(
+  image("../../images/page.png", width: 100%),
+)
+Der @collection-type *Seiten* speichert alle Seiten, die erreicht werden können. Derzeit ist jede Seite - ob in der Navigation angegeben oder nicht - über den in der URL definierten @slug erreichbar, sofern nicht eine Navigationseinstellung den @slug überlagert. Standardmäßig ist die Erreichbarkeit auf `<meine Domain>/<slug>` gesetzt.
+\
+\
+Der Identifier dient nur zur lesbaren Identifizierung der Seite, wenn sie einem Navigationslink zugeordnet ist. Der @slug speichert den Pfad, der in der URL angezeigt wird.
+\
+\
+#wrap-content(
+  figure(
+    image("../../images/banner.png", width: 6.5cm),
+  ),
+  align: right
+)[
+Eine Seite kann ein Banner (Hero) haben. Dieses Banner wird direkt unter der Navigation angezeigt. Der Hero kann mit einem Untertitel versehen werden.
+
+Ist kein Banner gesetzt, wird direkt unter der Navigation der Kontext der Seite angezeigt.
+\
+\
+Der Hauptteil einer Seite kann mit definierten Komponenten erstellt werden.
+Die Erstellung von Inhalten mit Hilfe von Komponenten wird unter Verwendung in @usage erläutert.
+]
 
-Verwaltung und Erstellung von Seiten mit Dynamischen Inhalten.
-- HeroBild mit Text als Einleitung.
 
 === Artikel
-@collection-type *Artikel*
+#figure(
+  image("../../images/article.png", width: 100%),
+)
+Der @collection-type *Artikel* speichert Beiträge der Website ähnlich wie Artikel in einer Zeitung. Die Art und Weise, wie ein Artikel auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 
 
-Verwaltung und Erstellung von Artikeln.
+Jeder Artikel enthält einen Titel, einen URL-Pfad (@slug), ein Datum und eine Beschreibung.
+
+Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
+Content wird z.B. nur benötigt, wenn ein Artikel geöffnet werden kann. Ob ein Artikel geöffnet werden kann, wird unter Verwendung (@usage) erläutert.
 
 === Einsätze
-@collection-type *Einsätze*
+#figure(
+  image("../../images/operation.png", width: 100%),
+)
+Der @collection-type *Einsätze* speichert vergangene Einsätze ab. Die Art und Weise, wie ein Einsatz auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 
 
-Verwaltung und Erstellung von Einsätzen.
+Jeder Einsatz enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung.
+
+Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
+Content wird z.B. nur benötigt, wenn ein Einsatz geöffnet werden kann. Ob ein Einsatz geöffnet werden kann, wird unter Verwendung (@usage) erläutert.
 
 === Fahrzeuge
-@collection-type *Fahrzeuge*
+#figure(
+  image("../../images/vehicle.png", width: 100%),
+)
+Der @collection-type *Fahrzeuge* speichert Fahrzeuge des Fuhrparks ab. Die Art und Weise, wie ein Fahrzeug auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 
 
-Verwaltung und Erstellung von Fahrzeugen.
+Jeder Einsatz enthält einen Titel, einen URL-Pfad (@slug) und eine Beschreibung.
+
+Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt oder nicht angezeigt, wenn diese optional sind.
+Content wird z.B. nur benötigt, wenn ein Fahrzeug geöffnet werden kann. Ob ein Fahrzeug geöffnet werden kann, wird unter Verwendung (@usage) erläutert.
 
 === Termine:
-@collection-type *Termine*
+#figure(
+  image("../../images/event.png", width: 100%),
+)
+Der @collection-type *Termine* speichert vergangene oder anstehende Termine. Die Art und Weise, wie ein Termin auf der Website angezeigt wird, wird in der Sammlungsreferenz (@reference) festgelegt. 
 
-Verwaltung und Erstellung von Terminen.
+Jeder Termin enthält einen Titel, einen URL-Pfad (@slug), ein Datum mit Uhrzeit und eine Beschreibung.
+
+Die restlichen Felder werden je nach Konfiguration der Sammlungsreferenz (@reference) benötigt.
+Content wird z.B. nur benötigt, wenn ein Termin geöffnet werden kann. Ob ein Termin geöffnet werden kann, wird unter Verwendung (@usage) erläutert.
 
 === User
-Die Verwendung des @collection-type *User* ist nicht erforderlich, da diese nur benötigt wird, wenn sich Besucher der Website auf der Website anmelden können.
+Die Verwendung des @collection-type *User* ist nicht erforderlich, da diese nur benötigt wird, wenn sich Besucher der Website auf der Website anmelden könnten.

webpage/content/3-strapi/3-usage.typ

@@ -1,2 +1,9 @@
 
-== Verwendung
+== Verwendung <usage>
+#figure(
+  image("../../images/dynamic_components.png", width: 100%),
+)
+
+#figure(
+  image("../../images/shared_component.png", width: 100%),
+)