Files
mintel.me/apps/web/docs/CONTENT_RULES.md
Marc Mintel b15c8408ff
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🧪 QA (push) Failing after 1m48s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
fix(blog): optimize component share logic, typography, and modal layouts
2026-02-22 11:41:28 +01:00

2.6 KiB
Raw Blame History

Content-Regeln für Blog-Post-Generierung

1. Visuelle Balance

  • Max 1 visuelle Komponente pro 34 Textabsätze
  • Visualisierungen dürfen niemals direkt hintereinander stehen
  • Zwischen zwei visuellen Elementen müssen mindestens 2 Textabsätze liegen
  • Nicht mehr als 56 visuelle Komponenten pro Blog-Post insgesamt

Erlaubte visuelle Komponenten

  • Mermaid / DiagramFlow / DiagramSequence — für Prozesse und Architektur
  • ArticleMeme — echte Meme-Bilder (memegen.link), kurze und knackige Texte
  • BoldNumber — einzelne Hero-Statistik mit Quelle
  • PremiumComparisonChart / MetricBar — für Vergleiche
  • WebVitalsScore — für Performance-Audits (max 1x pro Post)
  • WaterfallChart — für Ladezeiten-Visualisierung (max 1x pro Post)
  • StatsGrid — für 24 zusammengehörige Statistiken
  • ComparisonRow — für Vorher/Nachher-Vergleiche

Verboten

  • MemeCard (text-basierte Memes) — nur echte Bild-Memes verwenden
  • AI-generierte Bilder im Content — nur Thumbnails erlaubt
  • DiagramPie — vermeiden, zu generisch

2. Zahlen und Statistiken

  • Niemals nackte Zahlen — jede Statistik braucht Kontext und Vergleich
  • BoldNumber nur für DIE eine zentrale Statistik des Abschnitts
  • Mehrere Zahlen → StatsGrid oder PremiumComparisonChart verwenden
  • Jede Zahl braucht eine Quelle (source + sourceUrl Pflicht)
  • Vergleiche sind immer besser als Einzelwerte: "33% vs. 92%", nicht nur "92%"

3. Zitate und Quellen

  • Alle Zitate brauchen klare Attribution: author, source, sourceUrl
  • Bei übersetzten Zitaten: "(übersetzt)" im Zitat oder als Hinweis
  • ExternalLink für alle externen Referenzen im Fließtext
  • Keine erfundenen Zitate — nur verifizierbare Quellen

4. Mermaid-Diagramme

  • Extrem kompakt halten: Strikt max 34 Nodes pro Diagramm
  • Ausschließlich vertikale Layouts (TD) — besser für Mobile
  • Deutsche Labels verwenden
  • Keine verschachtelten Subgraphs
  • Jedes Diagramm braucht einen aussagekräftigen title

5. Memes

  • Nur echte Bilder via ArticleMeme (memegen.link API)
  • Extreme Sarkasmus-Pflicht — mach dich über schlechte Agentur-Arbeit oder Legacy-Tech lustig
  • Kurze, knackige Captions — max 6 Wörter pro Zeile
  • Deutsche Captions verwenden
  • Bewährte Templates: drake, disastergirl, fine, daily-struggle
  • Max 23 Memes pro Blog-Post

6. Textstruktur

  • Jeder Abschnitt startet mit einer klaren H2/H3
  • LeadParagraph nur am Anfang (12 Stück)
  • Normaler Text in Paragraph-Komponenten
  • Marker sparsam einsetzen — max 23 pro Abschnitt
  • IconList für Aufzählungen mit Pro/Contra