PlatoMat

Suchbegriff eingeben.

Features

Überblick über die umgesetzten Funktionen von hautuu auf der Website und im Repo.

Hier siehst du, was im Projekt schon gebaut ist (Stand: öffentliches Repo auf main). Details zu Begriffen im Glossar, Antworten in der FAQ, Schritt für Schritt in den Artikeln. Markdown und alle Content-Komponenten zum Anschauen: Demo.

Inhalte und Redaktion

  • Screencast-Folgen als Artikel (001 bis 024): How-tos zu GitHub, Cursor, Cloudflare, Sveltia und Redaktion, mit Teaser, Tags und Querverweisen. Agenten-Output prüfen: Folge 022. Demo und Einstellungen: Folge 023. Eigenes Repo per Template privat: Folge 024.
  • Statische Seiten (Collection pages): Startseite, Artikelübersicht, Tags, Autoren, Glossar, FAQ, Über mich (Autorprofil), Impressum, Datenschutz, diese Features-Seite und die Demo (Parent: Features).
  • Redaktionsregeln im Repo (docs/redaktion/) und als Cursor-Regel: Schema, Stil, SEO-Felder, Bausteine, Querverlinkung, PR-Checkliste.
  • Transkript-basierte Folgen: Speech-to-Text korrigieren, nichts erfinden, Quellkommentar im Artikel (Folge 015).

CMS und Collections

Collections und Relationen

  • pages: Statische Seiten inkl. Start, Legal, Übersichten. Optional Parent-Seite; eigene URL (#3).
  • articles: Screencast-Folgen und Beiträge. Relationen: 0..n Kategorien, Tags, Autoren; Videos nur per Content-Embed ({{video …}} / {{member-video …}}); Titelbild optional nur für Listings, auf der Einzelseite ausblendbar (#98); URL /artikel/<slug>/ (#4).
  • categories: Hierarchische Kategorien. Optional Parent; Relation von Artikeln; URL /kategorien/<slug>/ (#64).
  • tags: Schlagworte. Relation von Artikeln; optional passender Glossar-Slug; URL /tags/<slug>/ (#5).
  • authors: Autorenprofile (Name, Bio, Avatar/Gravatar; Social-/Web-URLs mit Plattform-Icons, optional im Hero; JSON-LD Person mit sameAs; Embed {{author-social}}; freier Inhalt mit Embeds statt Auto-Artikel-Listing). Relation von Artikeln; URL /autoren/<slug>/ (#77, #85, #86).
  • glossar: Begriffsseiten. Relationen: relatedArticles, relatedTags; URL /glossar/<slug>/ (#6).
  • menus: Navigation (main, footer, footer-legal, …) mit Label und Ziel (#13, #81).
  • blocks: Wiederverwendbare Bausteine ohne eigene URL; Einbinden per Content-Komponente {{block}}.
  • redirects: Weiterleitungen (#76). Mehrere Quellen → ein Ziel (301/302); Build erzeugt _redirects.
  • settings: Globale JSON-Einstellungen (General, Design, Content); keine Relationen (#45).

Content-Komponenten (Embeds)

Im Markdown über die Sveltia-Toolbar einfügbar; Speichern als {{…}}-Zeile; Rendering in CmsContent.astro. Jede Komponente allein in einer Zeile (mit Leerzeilen drumherum); Prüfung im Build (check-content-embeds.py). Alle auf der Demo sichtbar.

  • Baustein ({{block id="…"}}): Wiederverwendbarer Inhalt aus der Collection blocks, einmal pflegen und überall einbinden (Folge 020).
  • Artikel-Listing ({{article-listing …}}): Öffentliche Artikel als Grid oder Liste; Anzahl, Sortierung, Kartenfelder über display*-Tokens (Vorschaubild, Titel, Intro, Kategorien, Tags, Datum, Lesezeit, Autoren); Vorschaubild = Titelbild sonst Seitenhintergrund (#95); Bilddarstellung oben/unten/links/rechts × mit Rand/randlos (imageStyle); Filter nach Autoren/Kategorien/Tags (UND/ODER) getrennt von der Anzeige (#78).
  • Kategorie-Listing ({{category-listing …}}): Kategorien als Grid, Liste oder Wolke; optional begrenzt und sortiert.
  • Tag-Listing ({{tag-listing …}}): Genutzte Tags als Wolke, Liste oder Grid; Sortierung nach Titel oder Häufigkeit.
  • Tagwolke ({{tag-cloud}}): Kurzform für Tag-Listing im Layout Wolke.
  • Autoren-Listing ({{author-listing}}): Alle Autoren mit Avatar und Artikelanzahl (z. B. auf /autoren/).
  • Autor Social-Links ({{author-social}}): Social-/Web-Links mit Plattform-Icons; optional author="slug", sonst Profilautor (#86).
  • Glossar-Listing ({{glossar-listing …}}): Glossar-Einträge als Liste oder Grid; Anzahl und Sortierung wählbar.
  • Button ({{button …}}): Einzelner Aktionslink mit Stil (ausgefüllt/Kontur), Farbe, Ziel und Ausrichtung inkl. voller Breite.
  • Button-Gruppe ({{button-group …}}): Mehrere Buttons in einer Gruppe; Layout nebeneinander (mit/ohne Umbruch), mobil untereinander oder immer gestapelt; Ausrichtung der Gruppe; optional volle Breite auf Mobile (#83).
  • Trennlinie ({{separator …}}): Horizontale Linie mit Höhe, Breite und Design-Token-Farbe; optional Logo oder Favicon aus den Einstellungen auf der Linie (Position links/mitte/rechts, Größe in px, Default 24) (#97).
  • Abstandshalter ({{spacer …}}): Vertikaler Leerraum in Pixeln ohne sichtbare Linie.
  • Kontakt-E-Mail ({{contact-email}}): Adresse aus General → Contact email oder Build-Variable CONTACT_EMAIL, obfuscated im Markup.
  • Logo ({{logo …}}): Site-Logo aus General → Logos (Header/Sticky/Footer) mit Breite und Ausrichtung (#79).
  • Video ({{video …}}): YouTube/Vimeo mit Consent-Facade (Datenschutz-Link aus Privacy page); nach Freigabe füllt der Player die 16:9-Box. Alternativ selbst gehostete MP4 über R2. Ecken-Radius aus Design → Ecken abrunden → Videos (gilt auch für {{member-video …}}).
  • Video-Freischaltung widerrufen ({{video-consent-reset}}): Button, der die gespeicherte Video-Einwilligung im Browser löscht.
  • Repo-Dokument ({{repodoc …}}): Hinweisbox mit Link zu einer Datei unter docs/ auf GitHub (main).

Zusätzlich in der Toolbar: Bild und Codeblock (Sveltia-Standard, kein eigenes {{…}}-Embed).

Settings (Konfiguration)

Globale Defaults unter Einstellungen im CMS (settings: General, Design, Content) (#45).

Settings → General

  • Website title und optionale Description / Slogan (#75); Description auch im Footer-Brand.
  • Footer copyright: Claim und Trenner links; Show center mark für das kleine Icon in der Mitte (GitHub-Icon bei gesetztem Repo, sonst Site-Logo).
  • Contact email für {{contact-email}} (sonst Build-Variable CONTACT_EMAIL).
  • Privacy page: Relation zur Datenschutz-Seite (u. a. Link in der Video-Einwilligung).
  • GitHub repository (owner/name) für das Footer-Mitte-Icon, wenn Center mark an ist.
  • Logos aus der Mediathek: Header, optional Sticky, Footer (#79).
  • Favicons aus der Mediathek: Standard und optional dunkel (#80).

Settings → Design

  • Farbpalette (CSS-Variablen, inkl. Alpha für Glas; Untermenü-Hintergrund und -Text separat) (#70, #84).
  • Schrift: Fließtext und Überschriften (Fontsource), Basisgröße, Gewicht, H1–H6 Größe/Transform (#71).
  • Header: Logo-Position links / rechts / mittig (Menü darunter) (#74); Menü aus Collection Menüs wählbar (Standard main, #91); Suchlupe hinter den Menüpunkten; Inhaltsbreite der Header-Zeile (Standard/breit/vollbreit); Ruhehöhe und Sticky ein/aus sowie kompakte Sticky-Höhe pro Breakpoint (#44); Anker-Sprünge (TOC) mit scroll-padding.
  • Footer-Brand oberhalb der Copyright-Zeile (#81): Logo (Größe einstellbar), Description und Menü; Bausteine einzeln und per Drag-and-Drop; Layout Nebeneinander/Untereinander; Menü-Links neben- oder untereinander; Shell-Breiten für Brand und Copyright-Zeile; Hintergrund mit Verlauf von transparent zur Chrome-Farbe (ohne oberen Rand).
  • Footer Copyright-Zeile: Legal-Menü wählbar (Standard footer-legal, wie Brand → Menü) (#96); Shell-Breite und Border-Breite (full / shell).
  • Hero-Defaults pro Collection: Ausrichtung, Brotkrumen, Trenner, Trennlinie unten als Linie / Logo / Favicon (wie Separator-Embed) (#63).
  • Inhaltsbreite Standard / breit / vollbreit für Seiten, Artikel sowie Kategorien, Tags, Autoren und Glossar (#59, #90).
  • Abstand unter Hero und vor Footer, pro Collection (#73).
  • Ecken abrunden: Radius in Pixeln getrennt für Inhalts-Bilder und Videos (inkl. Member-Video).

Settings → Content

  • Inhaltsverzeichnis (TOC): an/aus, Ebenen, Titel für Seiten und Artikel (#51).
  • Autoren: Platzierung auf der Artikel-Einzelseite (Hero / Ende / beides / aus) und Avatar-Form (#77).
  • Medien: Video-Basis-URL für selbst gehostete Dateien (z. B. Cloudflare R2).

Lokale Overrides an Seite und Artikel

  • Hero, TOC, Inhaltsbreite und Abstand überschreibbar; optional Head-Code und Footer-Code (HTML, Highlighting fest auf HTML).

Glossar, Taxonomien und Autoren (Seiten)

  • Glossar mit Kurzdefinition, längerer Erklärung und Querverweisen; viele Begriffe unter /glossar/<slug>/.
  • Erstes sinnvolles Glossar-Vorkommen pro Seite verlinkt; Hilfsskript und Erstlink-Warnung im Build.
  • FAQ als eine lange Seite mit Themengruppen (H2), offen durchsuchbar (kein Accordion).
  • Kategorie-Seiten mit Parent-Brotkrumen, Unterkategorien und Artikel-Grid.
  • Tag-Seiten mit Artikel-Grid; Link zum Glossar, wenn der Slug passt. Am Artikel: tagPlacement (Hero, nach Inhalt oder beides); Kategorien immer im Hero.
  • Autoren-Seiten (Avatar, Bio, Social-Links mit Icons / optional im Hero, freier Inhalt mit Embeds oder Auto-Artikelliste) und Übersicht /autoren/. Embed {{author-social}}; JSON-LD Person inkl. sameAs.
  • Artikel-Übersicht /artikel/ mit Seitenleiste (Kategorie-Tree, genutzte Tags); auf Desktop sticky, wenn die Leiste in den Viewport passt.

SEO und Auffindbarkeit

  • SEO-Objekt pro Page und Artikel: Tab-Titel, Meta-Description, Robots (Folge 004).
  • Open Graph und Twitter Cards: Titel, Beschreibung, Canonical, optional OG-Bild aus dem Seitenhintergrund (1200×630).
  • JSON-LD Person auf Autor-Profilen inkl. sameAs aus Social-/Web-URLs (#86).
  • Lesezeit in Artikel-Meta und auf Listing-Karten.
  • Sitemap ohne Impressum, Datenschutz und /admin; Legal-Seiten mit noindex.
  • llms.txt und agents.txt: automatisch und deterministisch aus veröffentlichten, indexierbaren Collection-Einträgen (#99); Hinweise auch in robots.txt.

Design und Nutzung

  • Suche im Header (MiniSearch): statischer Suchindex beim Build.
  • Dark Theme mit CSS-Variablen, responsive Header mit Mobile-Menü.
  • Farbpalette, Schrift, Sticky Header, Hero, Inhaltsbreite und Abstand redaktionell unter Einstellungen → Design (siehe oben).
  • Brotkrumen mit wählbarem Trenner; Start als Haus-Icon; UI-Icons für Permalink und Kategorie (#31).
  • Breakpoints und gemeinsame Layout-Hilfsklassen (docs/design).
  • Vollbild-Hintergrund optional mit Overlay und Bildnachweis für Seiten, Artikel und Autoren-Profile (#93, #94); Nachweise gesammelt im Impressum.
  • Bilder neben dem Content (Variante B), Astro-Optimierung inkl. CMS-Pfade unter /assets/ (Folge 021).
  • Externe Links öffnen in neuem Tab mit Pfeil-Indikator (nicht Header/Footer).
  • Artikel-Navigation (älter/neuer); Listing-Seiten oft Breite breit.

Deployment und Workflow

Dokumentation, Qualität und Agenten

  • Projekt-Doku unter docs/ (GitHub, Cloudflare, Sveltia, Astro, Redaktion, Sicherheit).
  • Cursor-Regeln in .cursor/rules/.
  • Link-Check im prebuild (check-content-links.py, inkl. Embed-Check).
  • Hilfsskripte z. B. Glossar-Querverweise und SEO-Bulk-Pflege.

Neue Funktionen bitte hier und in der README auf GitHub nachpflegen (siehe Redaktions-Doku).