Folge 023: Neue Features: Demo-Seite, Einstellungen und CMS-Bausteine

Viel passiert in GitHub-Issues und Milestones: bei hautuu sind in einem Meilenstein dutzende Tickets erledigt (rund 39 abgeschlossene Issues). Wichtiger für dich: was die Site heute kann. Dafür gibt es die Features-Seite und zum Vorschauen die Demo (eine Unterseite von Features). Agenten-Output prüfst du wie in Folge 022.

Das Video zu dieser Folge

Du hast noch keinen ZugangsCode? Dann melde dich bei mir!

Demo: Markdown und Toolbar

Die Demo ist eine normale Seite (pages). Du siehst Markdown (Listen, Codeblock, Tabelle) und die Toolbar-Komponenten:

• Button / Button-Gruppe
  Stil ausgefüllt oder Kontur, Farbe z. B. primär oder „danger“, Ziel-URL, optional volle Breite auf Mobile
• Logo
  Site-Logo mit Breite und Ausrichtung
• Trennlinie
  Höhe, Breite, Farbe (Standard-Randfarbe)
• Abstandshalter
  Höhe in Pixel
• Kontakt-E-Mail
  {{contact-email}} für Impressum/README-Links ohne Klartext im Repo
• Repo-Dokument
  Hinweisbox zu Dateien unter docs/
• Baustein
  Wiederverwendbarer Text (Folge 020)
• Listings
  Artikel, Kategorien, Tags, Autoren, Glossar; Tagwolke
• Video / Video-Freischaltung widerrufen
  siehe Abschnitt Video unten

Tabellen im Inhalt: kein eigener Toolbar-Button. Die Beispiel-Tabelle steht in der Markdown-Datei der Demo im Repo: src/content/pages/demo/index.md (Abschnitt mit der Pipe-Tabelle). Dort kannst du nachsehen, wie die Syntax aussieht.

Überschriften: h1 blendet das CMS aus (Titel steht im Hero); im Inhalt nur h2–h6. Größen und Schrift unter Einstellungen → Design → Schrift.

Video: Consent, Widerruf, selbst gehostete Dateien

YouTube / Vimeo im Embed {{video …}}: Zuerst nur eine Facade (Platzhalter), kein Player und keine Verbindung zu Google/Vimeo. Besucher klicken „Video von YouTube laden“ bzw. „Video von Vimeo laden“ (Text in VideoEmbed.astro). Die Einwilligung (Consent) gilt site-weit im Browser (localStorage, Schlüssel hautuu-video-consent): beim nächsten Video musst du nicht jedes Mal neu zustimmen.

• Privacy page unter Einstellungen → General: Relation zur Datenschutz-Seite. Der Hinweis im Player verlinkt dorthin (Anker eingebettete-videos), auch wenn deine Seite anders heißt als „Datenschutz“.
• Widerruf: Embed Video-Freischaltung widerrufen ({{video-consent-reset}}) auf der Datenschutz-Seite oder wo du willst. Danach sind Player wieder gesperrt, bis erneut geladen wird.

Selbst gehostete MP4 (provider="file"): kein YouTube/Vimeo-Consent-Schalter; Auslieferung z. B. über Cloudflare R2. In Einstellungen → Content → Medien → Video-Basis-URL (videoBaseUrl) die öffentliche Basis-URL setzen, damit große Dateien nicht in die Mediathek / ins Git-Repo wandern.

Große Screencast-Dateien landen in einem R2-Bucket (Objektspeicher), nicht in GitHub. Du verbindest optional eine Subdomain (z. B. https://media…/videos/), trägst die Basis-URL einmal im CMS ein und bindest im Artikel z. B. {{video provider="file" src="folge-001.mp4"}} ein. Poster-Bilder bleiben klein in der Mediathek. YouTube/Vimeo laufen parallel mit Consent.

Kommt noch: konkrete Screencast-MP4s im Projekt noch über R2 einbinden; Video-Basis-URL und File-Provider sind vorbereitet.

Collections im /admin/

• Seiten / Artikel
  Inhalt, Hero/TOC/Breite überschreiben, Hintergrund, Bildnachweis
• Kategorien
  Hierarchisch (Parent wie bei WordPress), URLs /kategorien/…, Tree in der Artikel-Sidebar (Glossar Kategorie)
• Tags
  Schlagworte; am Artikel Tags anzeigen (Im Hero / Nach dem Inhalt / Hero und nach dem Inhalt)
• Autoren
  Mehrere pro Artikel; Profil unter /autoren/<slug>/ (der Slug ist der Ordnername, z. B. wasilij)
• Glossar
  optional (Lern-Site)
• Bausteine
  z. B. Kontaktanschrift für Impressum + Datenschutz
• Menüs
  main, footer (Brand), footer-legal (Copyright-Zeile)
• Weiterleitungen
  Quellpfade → Ziel, 301 (Glossar Weiterleitung)
• Einstellungen
  general.json, design.json, content.json

Artikel-Listing: Sortierung, Kartenfelder, Filter nach Autor/Kategorie/Tag, UND oder ODER als Verknüpfung der Bedingungen (alle Filter müssen passen vs. eine reicht). Relative Pfade (/kategorien/werkzeuge/) funktionieren lokal und live.

Autoren: Profil, Avatar, Gravatar, Social

Collection Autoren (public/admin/config.yml):

• Name
  Anzeigename
• Kurzbeschreibung
  Kurztext; erscheint im Hero der Profilseite
• Bio
  Längerer Markdown-Text unter dem Hero
• Avatar
  Bild aus der Mediathek (hat Vorrang vor Gravatar)
• Gravatar (E-Mail oder URL)
  E-Mail für Gravatar oder direkte https-URL; Build kann nach src/assets/authors/gravatar/ laden
• Social / Web
  Plattform (Webseite, YouTube, …) + URL + optional Anzeigename
• Social-Links im Hero
  An: Icons nach der Kurzbeschreibung. Aus: nur per Embed Autor Social-Links im Inhalt
• Inhalt
  Freier Body auf der Profilseite (Embeds erlaubt)

Gravatar kurz: Unter gravatar.com meldest du dich an und hinterlegst ein Bild pro E-Mail. Andere Sites holen dasselbe Bild, wenn dieselbe E-Mail sichtbar ist. Nicht besonders datenschutzfreundlich, weil die E-Mail bzw. der Hash den Dienst erreichen kann. Lieber Avatar lokal, wenn du das vermeiden willst.

Global auf Artikeln (Einstellungen → Content → Autoren):

• Autoren auf Artikeln: Nicht anzeigen / Im Hero / Am Ende des Artikels / Hero und am Ende
• Avatar-Form (Artikel): Rund oder Eckig (Profilseiten bleiben rund)

Über mich = Autorenprofil (/autoren/wasilij/): gleicher Link wie „Über mich“ im Menü nach Umbau von der alten Seite Über uns.

Brotkrumen, Suche, Artikel-Meta

• Sitesuche im Header (siehe Features).
• Breadcrumb im Hero: Pfad z. B. Features → Demo oder Kategorien → Werkzeuge → Deploy & Hosting.
• Global pro Collection unter Einstellungen → Design → Hero: Brotkrumen anzeigen, Brotkrumen-Trenner (/, •, →, -).
• Pro Seite/Artikel: Hero überschreiben → Brotkrumen anzeigen (leer = Default). Trennlinie unten global oder individuell je Eintrag überschreiben.
• Artikel: Kategorien immer im Hero; Tags anzeigen wählbar; Autoren-Relation.

Einstellungen → General

Datei src/content/settings/general.json. CMS-Labels (Auszug):

• Website title (Seitentitel im Header, Titel-Suffix, Footer)
• Description (Slogan; HTML erlaubt, z. B. fett oder Links)
• Footer copyright → Claim, Separator (Trenner zwischen Titel und Claim), Show center mark (Mitte: GitHub-Icon wenn GitHub repository gesetzt, sonst Site-Logo zur Startseite)
• Contact email (optional; steht im öffentlichen Repo, wenn gesetzt → besser CONTACT_EMAIL als Umgebungsvariable, Folge 019)
• Privacy page (Datenschutz-Seite für Video-Hinweis)
• GitHub repository (owner/name, nur mit Show center mark)
• Logos → Header (oben, „Ruhe“), Sticky Header (nach Scrollen, kompaktere Leiste), Footer (Mitte/Brand; leer = Fallback wie Header)
• Favicons → Favicon und Favicon (dunkel) für helles/dunkles Browser-Theme (nicht dasselbe wie die drei Logo-Slots, aber gleiche Idee: hell vs. dunkel sichtbar)

Einstellungen → Design

Datei src/content/settings/design.json.

Farbpalette: CSS-Farben inkl. Submenü-Hintergrund und -Text (Lesbarkeit bei transparenten Flächen).

Schrift: Webfonts (z. B. Roboto, Open Sans, Merriweather, Ubuntu), Basisgröße, Gewicht, H1–H6 (Familie, Größe, Stärke, text-transform: uppercase/lowercase/capitalize).

Header:

• Logo-Position: Links / Rechts / Mittig (Menü darunter)
• Inhaltsbreite: Standard (Lesespalte) / Breit / Vollbreit für die Header-Zeile
• Ruhehöhe Desktop/Tablet/Mobile (px) am Seitenanfang
• Sticky auf Desktop/Tablet/Mobile ein/aus
• Höhe sticky Desktop/Tablet/Mobile (px) nach dem Festkleben (schmaler beim Scrollen)

Footer → Brand (oberhalb der Copyright-Zeile):

• Brand-Bereich anzeigen oder nur Copyright-Zeile
• Layout nebeneinander/untereinander, Ausrichtung, Menü-Einträge nebeneinander/untereinander
• Inhaltsbreite Brand-Zeile (Standard/Breit/Vollbreit)
• Logo-Größe (px), Menü-Slug (z. B. footer)
• Bausteine (Reihenfolge): Liste Logo, Beschreibung, Menü per Drag-and-Drop sortieren; Logo z. B. in die Mitte ziehen

Copyright-Zeile → Bar: Inhaltsbreite, Border-Breite (volle Browserbreite vs. wie Zeile)

Hero (pro Collection: Seiten, Artikel, Kategorien, Tags, Autoren, Glossar): Textausrichtung, Brotkrumen anzeigen, Brotkrumen-Trenner, Trennlinie unten.

Inhaltsbreite und Abstand je Collection:

• Breite: Standard / Breit / Vollbreit (Artikel einzeln unter Inhaltsbreite am Eintrag)
• Unter Hero (rem) und Vor Footer (rem) (z. B. 6 rem vor Footer für Luft); pro Seite/Artikel unter Layout-Felder Abstand unter Hero (rem) / Abstand vor Footer (rem) überschreibbar

Einstellungen → Content

Datei src/content/settings/content.json.

Inhaltsverzeichnis (TOC): für Seiten und Artikel jeweils Standardmäßig anzeigen, Ebenen (h2, h3, h4), TOC-Titel. Pro Seite TOC überschreiben (wie bei Features/Demo/FAQ oft nur h2). Leer = globale Defaults.

Medien: Video-Basis-URL (siehe Video oben).

Autoren: Autoren auf Artikeln, Avatar-Form (Artikel) (siehe oben).

Weiterleitung

Beispiel im Repo: Quelle /ueber-uns/ → Ziel /autoren/wasilij/, Status 301, mehrere Quell-URLs möglich. Pfade vom Root (/…), nicht localhost.

Seiten

An jeder Seite: Status, Datum, Parent, Hero überschreiben, TOC überschreiben, Seitenhintergrund einstellen, Bildnachweis, Inhaltsbreite, Inhalt mit Buttons, Bausteinen, Logo-Element usw.

Lokal testen

Im Projektordner npm run dev (Folge 018). Nur ein Dev-Server (Port-Konflikt, wenn Cursor schon einen startet). Einstellungen → Design live im Browser prüfen, dann speichern und optional pushen.

Eigenes Projekt ohne MIT-Lizenz-Inhalte der Vorlage: Folge 024 (Template statt Fork, privat).

Kurz merken

• Demo zeigt Toolbar + Markdown; Features erklärt.
• Video: Consent für YouTube/Vimeo, Privacy page, Widerruf-Embed; R2 über Video-Basis-URL.
• General / Design / Content steuern fast alles Sichtbare; Footer-Brand per Drag-and-Drop.
• Autoren + optional Gravatar; Geheimnisse in ENV.