MDX erweitert Markdown um React Components und ermöglicht damit die nahtlose Integration interaktiver Elemente in statische Inhalte. Diese Architektur verbindet die Einfachheit von Markdown mit der Flexibilität moderner Frontend-Frameworks.

Inhaltsverzeichnis 

Teil 1: Markdown Basics 

Headings 

Heading 1 

Heading 2 

Heading 3 

Heading 4

Heading 5

Heading 6

# Heading 1
## Heading 2
### Heading 3

Text Formatting 

Ein Paragraph mit kursivem Text, fettem Text und inline Code.

Dies ist ein neuer Paragraph mit kombiniertem fetten und kursiven Text.

*kursiv* oder _kursiv_
**fett** oder __fett__
**_kombiniert_**
`inline code`

Abbreviations 

Abkürzungen mit Tooltip-Erklärung für bessere Accessibility.

Die HTML-Spezifikation wird vom W3C gepflegt. Moderne Websites nutzen CSS für Styling und JS für Interaktivität.

Für SEO ist semantisches HTML wichtig. Die API kommuniziert via REST oder GraphQL.

<abbr title="Hypertext Markup Language">HTML</abbr>
<abbr title="World Wide Web Consortium">W3C</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Application Programming Interface">API</abbr>

Tipp: Hover über die Abkürzungen zeigt die vollständige Bedeutung.

Language Spans 

Fremdsprachige Begriffe korrekt auszeichnen für Screenreader und Suchmaschinen.

Das User Interface sollte eine gute User Experience bieten. Wir folgen dem Don't Repeat Yourself-Prinzip (DRY).

Der Pull Request wurde nach dem Code Review gemerged. Das Deployment erfolgt via Continuous Integration.

Im Café gibt es Cappuccino und Croissants.

<!-- Englische Begriffe -->
<span lang="en">User Experience</span>
<span lang="en">Pull Request</span>
<span lang="en">Code Review</span>

<!-- Andere Sprachen -->
<span lang="fr">Café</span>
<span lang="it">Cappuccino</span>
<span lang="de">Gemütlichkeit</span>

Vorteile: Screenreader können die korrekte Aussprache wählen, Suchmaschinen verstehen den Sprachkontext.

Listen 

Unordered List:

• Erstes Element
• Zweites Element
  • Verschachteltes Element
  • Noch ein verschachteltes Element

Ordered List:

1. Erster Schritt
2. Zweiter Schritt
   1. Verschachtelter Schritt
   2. Noch ein verschachtelter Schritt

* Unordered Item
  * Nested Item

1. Ordered Item
   1. Nested Item

Links und Bilder 

Ein Link zu unserer Website und ein Link mit Title.

[Link Text](https://example.com)
[Link mit Title](https://example.com "Hover Title")
![Alt Text](/path/to/image.png)

Blockquotes 

Block Quotes eignen sich ideal für Zitate, wichtige Aussagen oder hervorgehobene Informationen.

Beispiel 1: Einfaches Zitat

Dies ist ein Block Quote. Er kann verwendet werden für Zitate, wichtige Hinweise oder hervorgehobene Aussagen.

Block Quotes können mehrere Paragraphs enthalten.

Beispiel 2: Experten-Zitat

"The best way to predict the future is to invent it."

— Alan Kay, Computer Scientist

Beispiel 3: Wichtiger Hinweis

Wichtig: Server Components in Next.js 15 erfordern eine strikte Trennung zwischen Server- und Client-Code. Achten Sie darauf, dass keine Browser-APIs in Server Components verwendet werden.

> Dies ist ein Block Quote.
> 
> Mit mehreren Paragraphs.

> "Zitat hier"
> 
> — Autor

> **Wichtig:** Hervorgehobener Hinweis mit **fetter Schrift**.

Code Blocks 

Code-Blöcke mit Syntax-Highlighting für verschiedene Programmiersprachen.

Inline Code: const x = 42 oder npm install react

Beispiel 1: TypeScript

interface User {
  id: number
  name: string
  email: string
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
}

Beispiel 2: React Component (JSX)

export default function BlogPost({ title, content }) {
  return (
    <article>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  )
}

Beispiel 3: CSS Styling

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

Beispiel 4: Shell Commands

# Installation
npm install next@latest react@latest

# Development Server
npm run dev

# Production Build
npm run build && npm start

Beispiel 5: JSON Configuration

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Markdown Syntax:

Inline: `code hier`

```language
// Code Block
const example = 'syntax highlighting'
```

Teil 2: Interaktive UI Components 

Tabs 

Tabs strukturieren verwandte Inhalte und reduzieren die initiale Page-Komplexität.

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url)
  if (!response.ok) throw new Error('Request failed')
  return response.json()
}

<Tabs>
<Tab label="TypeScript">
  ```typescript
  async function fetchData<T>(url: string): Promise<T> {
    const response = await fetch(url)
    if (!response.ok) throw new Error('Request failed')
    return response.json()
  }
  ```
</Tab>
<Tab label="JavaScript">
  ```javascript
  async function fetchData(url) {
    const response = await fetch(url)
    if (!response.ok) throw new Error('Request failed')

Accordion 

Accordion-Pattern für FAQ-Sections und strukturierte Informationsarchitektur.

<Accordion
  items={[
    { title: 'Frage 1', content: 'Antwort 1' },
    { title: 'Frage 2', content: 'Antwort 2' },
  ]}
/>

Progress Bars 

Skill-Levels, Prozessfortschritt oder Performance-Metriken visuell darstellen.

<ProgressList
  items={[
    { label: 'React / Next.js', percentage: 95, color: 'teal' },
    { label: 'TypeScript', percentage: 90, color: 'blue' },
  ]}
/>

Timeline 

Projekt-Milestones, Release-History oder Entwicklungs-Roadmaps strukturiert präsentieren.

<Timeline
  items={[
    { date: 'Q4 2024', title: 'Event', content: 'Beschreibung...' },
  ]}
/>

Card Grid 

Cards für Features, Services oder strukturierte Informationen.

<CardGrid columns={3}>
<Card title="Performance" variant="elevated">
  Server Components reduzieren JavaScript-Bundle-Size um bis zu 40%.
</Card>
<Card title="Type Safety" variant="elevated">
  Vollständige TypeScript-Integration mit automatischer Type-Inference.
</Card>
<Card title="Developer Experience" variant="elevated">
  Hot Module Replacement, ESLint und Prettier-Support.
</Card>
</CardGrid>

Tooltip 

Tooltips bieten kontextuelle Informationen ohne den Lesefluss zu unterbrechen.

Tooltips sind besonders nützlich für technische Abkürzungen oder Fachbegriffe.

{/* Inline Tooltip */}
<Tooltip content="TYPO3 ist ein Enterprise Content Management System" side="bottom">
technische Abkürzungen
</Tooltip>

{/* Button Tooltips */}
<div className="flex flex-wrap gap-4 my-8">
<Tooltip content="Tooltip oben" side="top">
  <button className="px-4 py-2 bg-neutral-100 rounded hover:bg-neutral-200">Top</button>
</Tooltip>
<Tooltip content="Tooltip unten" side="bottom">
  <button className="px-4 py-2 bg-neutral-100 rounded hover:bg-neutral-200">Bottom</button>
</Tooltip>
<Tooltip content="Tooltip links" side="left">
  <button className="px-4 py-2 bg-neutral-100 rounded hover:bg-neutral-200">Left</button>

Features: WCAG 2.1 AA konform, Keyboard Navigation, Touch-Support für Mobile, Smart Positioning

Teil 3: Datenvisualisierung 

Charts 

Interaktive Diagramme basierend auf der Recharts-Library.

Line Chart 

// Daten
const salesData = [
{ month: 'Jan', revenue: 45000, profit: 12000 },
{ month: 'Feb', revenue: 52000, profit: 15800 },
{ month: 'Mar', revenue: 48000, profit: 14200 },
{ month: 'Apr', revenue: 61000, profit: 19500 },
{ month: 'Mai', revenue: 58000, profit: 17800 },
{ month: 'Jun', revenue: 69000, profit: 22100 },
]

// Component
<Chart 
data={salesData} 
type="line" 
xAxisKey="month" 

Bar Chart 

// Daten
const performanceData = [
{ week: 'W1', lcp: 2.4, fcp: 1.8, tti: 3.2 },
{ week: 'W2', lcp: 2.1, fcp: 1.5, tti: 2.8 },
{ week: 'W3', lcp: 1.8, fcp: 1.2, tti: 2.4 },
{ week: 'W4', lcp: 1.5, fcp: 0.9, tti: 2.0 },
]

// Component
<Chart 
data={performanceData} 
type="bar" 
xAxisKey="week" 
bars={['lcp', 'fcp', 'tti']} 
height={300}

Area Chart 

// Daten
const trafficData = [
{ day: 'Mo', visitors: 3200, pageviews: 8500, conversions: 145 },
{ day: 'Di', visitors: 4100, pageviews: 10200, conversions: 189 },
{ day: 'Mi', visitors: 3800, pageviews: 9400, conversions: 165 },
{ day: 'Do', visitors: 4500, pageviews: 11800, conversions: 210 },
{ day: 'Fr', visitors: 5200, pageviews: 14200, conversions: 245 },
]

// Component
<Chart 
data={trafficData} 
type="area" 
xAxisKey="day" 
areas={['visitors', 'pageviews', 'conversions']} 

Pie Chart 

// Daten
const marketShareData = [
{ name: 'TYPO3', value: 35 },
{ name: 'WordPress', value: 28 },
{ name: 'Drupal', value: 20 },
{ name: 'Andere', value: 17 },
]

// Component
<Chart 
data={marketShareData} 
type="pie" 
dataKey="value" 
xAxisKey="name" 
height={300}

Props:

• type: 'line' | 'bar' | 'area' | 'pie'
• data: Array von Datenobjekten
• xAxisKey: Key für X-Achse
• lines/bars/areas: Array von Data-Keys
• dotShapes: Custom Punkt-Formen ('circle', 'cross', 'diamond', 'square', 'star', 'triangle')
• colors: Custom Color-Array
• height, showGrid, showLegend, yAxisUnit

Data Tables 

Formatierte Tabellen mit verschiedenen Varianten.

Standard Markdown Table 

<StarRating rating={5} size="sm" />
<StarRating rating={4} size="md" color="teal" />
<StarRating rating={3} max={5} size="lg" />

DataTable Component 

<DataTable
  columns={[
    { key: 'metric', label: 'Metric', align: 'left' },
    { key: 'before', label: 'Before', align: 'right' },
    { key: 'after', label: 'After', align: 'right' },
    { key: 'improvement', label: 'Improvement', align: 'center' },
  ]}
  data={[
    { metric: 'First Contentful Paint', before: '2.4s', after: '0.8s', improvement: '+67%' },
    { metric: 'Largest Contentful Paint', before: '4.2s', after: '1.2s', improvement: '+71%' },
    { metric: 'Time to Interactive', before: '5.8s', after: '2.1s', improvement: '+64%' },
  ]}
  variant="striped"
/>

Variants: default, striped, bordered, minimal

Comparison Tables 

Spezialisierte Tabellen für Feature-Vergleiche mit Boolean-Support.

<ComparisonTable
  headers={['Option A', 'Option B']}
  rows={[
    { label: 'Feature 1', values: [true, false] },
    { label: 'Price', values: ['EUR 99', 'EUR 149'] },
  ]}
/>

Teil 4: Mermaid Diagramme 

Technische Diagramme direkt in MDX mit Lightbox-Funktion und WCAG-konformen Farben.

Flowchart 

Prozess- und Entscheidungsflüsse visualisieren.

flowchart TD
  A[Client Request] --> B{Cached?}
  B -->|Yes| C[Return Cache]
  B -->|No| D[Server Render]
  D --> E[Generate HTML]
  E --> F[Cache Result]
  F --> C
  C --> G[Send Response]
  
  style A fill:#0d9488,stroke:#1a1a1a,stroke-width:2px,color:#ffffff
  style G fill:#14b8a6,stroke:#1a1a1a,stroke-width:2px,color:#ffffff
  style B fill:#0d9488,stroke:#1a1a1a,stroke-width:2px,color:#ffffff

Richtungen: TD (Top-Down), LR (Left-Right), BT (Bottom-Top), RL (Right-Left)

Sequence Diagram 

API-Interaktionen und Request-Flows darstellen.

sequenceDiagram
  participant U as User
  participant B as Browser
  participant S as Server
  participant D as Database
  
  U->>B: Enter URL
  B->>S: HTTP Request
  activate S
  S->>D: Query Data
  activate D
  D-->>S: Return Data
  deactivate D
  S->>S: Render HTML
  S-->>B: HTTP Response

Syntax: ->> (solid arrow), -->> (dashed), activate/deactivate für Lebenslinien

Class Diagram 

UML-Klassendiagramme für Software-Architektur.

classDiagram
  class User {
      +int id
      +string name
      +string email
      +login()
      +logout()
  }
  
  class Post {
      +int id
      +string title
      +string content
      +publish()
      +unpublish()

Beziehungen: --> (Association), --|> (Inheritance), ..> (Dependency), --* (Composition)

State Diagram 

Workflow-Management und State-Machine-Modellierung.

stateDiagram-v2
  [*] --> Draft
  
  Draft --> InReview : Submit
  Draft --> Archived : Cancel
  
  InReview --> Approved : Approve
  InReview --> Draft : Request Changes
  InReview --> Rejected : Reject
  
  Approved --> Published : Publish
  Published --> Unpublished : Unpublish
  Published --> Archived : Archive
  
  Unpublished --> Published : Re-publish

Syntax: [*] für Start/End, --> für Übergänge mit Label nach :

Entity Relationship Diagram 

Datenbank-Schemas und Datenmodelle dokumentieren.

erDiagram
  USER ||--o{ POST : creates
  USER ||--o{ COMMENT : writes
  POST ||--o{ COMMENT : contains
  POST }o--|| CATEGORY : belongs_to
  
  USER {
      int id PK
      string name
      string email
      datetime created_at
  }
  
  POST {
      int id PK

Kardinalitäten: || (one), o{ (many), |{ (one or more), o| (zero or one)

User Journey 

Customer Experience und Conversion-Funnels abbilden.

journey
  title User Journey: Website-Besucher zu Kunde
  section Awareness
    Google-Suche: 5: User
    Blog-Artikel lesen: 4: User
  section Interest
    Leistungen ansehen: 5: User
    Referenzen prüfen: 4: User
  section Decision
    Kontakt-Formular: 3: User
    Erstgespräch vereinbaren: 4: User, Team
  section Action
    Meeting durchführen: 5: User, Team
    Vertrag unterschreiben: 5: User, Team

Syntax: section für Phasen, Score (1-5) nach Task, Actors nach Score

Gantt Chart 

Projekt-Zeitpläne und Milestones planen.

gantt
  title TYPO3 Migration Timeline
  dateFormat YYYY-MM-DD
  section Planning
  Requirements Analysis    :done, req, 2024-01-01, 2024-01-15
  Architecture Design      :done, arch, 2024-01-16, 2024-01-31
  section Development
  Backend Migration        :active, back, 2024-02-01, 2024-03-15
  Frontend Implementation  :front, 2024-02-15, 2024-04-01
  section Testing
  QA Testing              :qa, 2024-03-20, 2024-04-15
  User Acceptance         :uat, 2024-04-10, 2024-04-25
  section Deployment
  Go-Live                 :milestone, prod, 2024-05-01, 1d

Status: done, active, crit (critical), milestone

Pie Chart (Mermaid) 

Prozentuale Verteilungen und Statistiken visualisieren.

%%{init: {'theme': 'base', 'themeVariables': {
'pie1': '#0e7490',
'pie2': '#f59e0b', 
'pie3': '#10b981',
'pie4': '#8b5cf6',
'pie5': '#fb7185'
}}}%%
pie showData
  title Browser-Statistiken 2025
  "Chrome" : 65.2
  "Safari" : 18.4
  "Firefox" : 8.9
  "Edge" : 5.1
  "Andere" : 2.4

Option: showData zeigt Prozentwerte an, %%{init}%% für Custom-Farben

Git Graph 

Branching-Strategien und Release-Flows visualisieren.

gitGraph
  commit id: "Initial Setup"
  commit id: "Add Base Components"
  branch feature/authentication
  checkout feature/authentication
  commit id: "Add Login Page"
  commit id: "Add JWT Auth"
  checkout main
  branch feature/dashboard
  checkout feature/dashboard
  commit id: "Create Dashboard"
  commit id: "Add Widgets"
  checkout main
  merge feature/authentication tag: "v1.1.0"
  checkout feature/dashboard

Keywords: branch, checkout, commit, merge, tag, type: HIGHLIGHT

Mindmap 

Wissensstrukturen, Brainstorming und Hierarchien darstellen.

mindmap
root[Webentwicklung]
  Frontend
    React
      Next.js
      Remix
    Vue
      Nuxt 3
    Svelte
      SvelteKit
  Backend
    Node.js
      Express
      Fastify
    PHP

Syntax: Einrückung definiert Hierarchie, root((Text)) für zentralen Knoten

Timeline (Mermaid) 

Chronologische Darstellung von Ereignissen.

timeline
  title Geschichte des World Wide Web
  section 1990er
    1991 : Erste Website geht online
    1993 : Mosaic Browser veröffentlicht
    1995 : JavaScript erfunden
    1996 : CSS 1.0 Standard
  section 2000er
    2004 : Web 2.0 Ära beginnt
    2006 : jQuery revolutioniert Frontend
    2008 : Chrome Browser Launch
  section 2010er
    2013 : React von Facebook
    2014 : Vue.js veröffentlicht
    2016 : Next.js 1.0

Syntax: section für Zeitabschnitte, Jahr : Event für Einträge

Quadrant Chart 

Vier-Felder-Analysen und Priorisierungs-Matrizen.

quadrantChart
  title Technology Adoption Matrix
  x-axis Low Impact --> High Impact
  y-axis Low Effort --> High Effort
  quadrant-1 Plan Carefully
  quadrant-2 Quick Wins
  quadrant-3 Avoid
  quadrant-4 Major Projects
  
  TypeScript: [0.8, 0.3]
  Next.js: [0.9, 0.5]
  GraphQL: [0.6, 0.7]
  Microservices: [0.7, 0.9]
  ESLint: [0.5, 0.1]
  Docker: [0.75, 0.6]

Syntax: Achsen mit x-axis/y-axis, Quadranten 1-4 benennen, Punkte als [x, y] (0-1)

Sankey Diagram 

Flussverteilungen und Ressourcen-Allokation visualisieren.

sankey-beta
Budget,Design,25
Budget,Development,45
Budget,Testing,15
Budget,Launch,15
Design,UX,15
Design,UI,10
Development,Frontend,25
Development,Backend,20
Testing,QA,10
Testing,UAT,5

Syntax: Source,Target,Value – definiert Flüsse zwischen Knoten

Architecture Diagram 

Systemarchitekturen als Flowchart visualisieren.

flowchart TB
  subgraph Client
      Browser[Browser]
      Mobile[Mobile App]
  end
  
  subgraph Edge
      CDN[CDN / Edge Cache]
  end
  
  subgraph Backend
      API[API Gateway]
      Auth[Auth Service]
      Cache[(Redis Cache)]
      App[Application Server]

Syntax: subgraph für Gruppen, TB (Top-Bottom), [()] für Datenbanken/Zylinder

XY Chart 

Datenbeziehungen als Linien- oder Balkendiagramm.

xychart-beta
  title "Website Performance"
  x-axis [Jan, Feb, Mar, Apr, Mai, Jun]
  y-axis "Ladezeit (s)" 0 --> 5
  bar [3.2, 2.8, 2.4, 2.0, 1.8, 1.5]
  line [3.2, 2.8, 2.4, 2.0, 1.8, 1.5]

Syntax: x-axis, y-axis mit Bereichen, bar und line für Datenserien

C4 Diagram 

Software-Architektur auf verschiedenen Abstraktionsebenen (Context, Container, Component).

C4Context
  title System Context Diagram - E-Commerce Platform
  
  Person(customer, "Kunde", "Ein Benutzer der E-Commerce Plattform")
  Person(admin, "Administrator", "Verwaltet Produkte und Bestellungen")
  
  System(ecommerce, "E-Commerce System", "Ermöglicht Kunden, Produkte zu kaufen")
  
  System_Ext(payment, "Payment Provider", "Verarbeitet Zahlungen")
  System_Ext(shipping, "Shipping Service", "Versendet Bestellungen")
  System_Ext(email, "E-Mail Service", "Sendet Benachrichtigungen")
  
  Rel(customer, ecommerce, "Verwendet")
  Rel(admin, ecommerce, "Verwaltet")
  Rel(ecommerce, payment, "Nutzt", "HTTPS/API")

Elemente: Person, System, System_Ext, Container, Component, Rel für Beziehungen

Requirement Diagram 

Anforderungen und deren Beziehungen visualisieren.

flowchart TB
  subgraph Requirements["Security Requirements"]
      REQ001["REQ-001: User Authentication<br/>Risk: High | Verify: Test"]
      REQ002["REQ-002: Session Security<br/>Risk: Medium | Verify: Inspection"]
      REQ003["REQ-003: Password Policy 12+ chars<br/>Risk: Low | Verify: Test"]
  end
  subgraph Implementation["Implementation"]
      AUTH[("Auth Service")]
  end
  AUTH -->|satisfies| REQ001
  AUTH -->|satisfies| REQ002
  REQ003 -.->|derives from| REQ001

Note: Requirement diagrams use flowchart syntax for better MDX compatibility. Use subgraphs to group requirements and elements, with arrows showing relationships like satisfies, derives, etc.

Mermaid Zusammenfassung 

Teil 5: Media & Embeds 

Video Player 

HTML5-Video für lokale Videodateien – ideal für Demos und Tutorials.

<video controls className="w-full rounded-lg shadow-lg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />
  Fallback Text
</video>

Props: controls, poster, autoplay, loop, muted, preload

Image Gallery 

Klickbare Bildgalerien mit Lightbox-Funktionalität via React Context.

St Martin-in-the-Fields, London

Covent Garden Market

Covent Garden Sunset

National Gallery, Trafalgar Square

Nelson's Column

Trafalgar Square Fountain

TYPO3 Camp London Session

London Underground

import { MDXGallery, MDXImage } from '@/components/MDXGallery'

<MDXGallery>
<MDXImage 
  src="/images/photo-01.jpg" 
  alt="Beschreibung für Screenreader" 
  caption="Bildunterschrift" 
/>
<MDXImage 
  src="/images/photo-02.jpg" 
  alt="Zweites Bild" 
  caption="Caption Text" 
/>
</MDXGallery>

Features: Click-to-Open Lightbox, Keyboard Navigation (Arrow Keys, ESC), Swipe auf Mobile, Lazy Loading, Thumbnail-Support

YouTube Embed 

GDPR-konforme Video-Integration ohne Cookie-Tracking vor User-Interaktion.

<YouTubeEmbed id="dQw4w9WgXcQ" title="Video Title" />

Features: react-lite-youtube-embed, youtube-nocookie.com Domain, Hover-Overlay mit Cookie-Warnung

Twitter/X Quote 

Statische Tweet-Darstellung ohne Tracking oder Cookies.

Ivan | AI | Marketing

@aivanlogic

·Follow

I charge $200/hour to fix broken AI agents. Every client has the same problem: poorly structured JSON prompts. Here are the patterns I use to fix them in under 30 minutes:

10:23 AM · Oct 1, 2025

357

Reply

Copy link

Read 24 replies

Statisch gerendert - keine Cookies, kein Tracking

<StaticTweet id="1973332823126974657" />

Features: 100% statisches HTML, Zero Cookies, Sofortiges Rendering, Link zum Original

GitHub Repository Card 

Server-Side Repo-Informationen ohne Client-Side API-Calls.

<GitHubRepoCard owner="TYPO3" repo="typo3" />

Features: Server Component, Revalidierung alle 60 Minuten, Zero Client-JavaScript, ISR Support

Audio & Music Embeds 

Einfache Einbettung von Spotify und YouTube Audio/Video-Inhalten.

Spotify Embed 

Spotify Tracks, Alben, Playlists und Podcasts direkt einbetten:

<SpotifyEmbed uri="4cOdK2wGLETKBW3PvgPWqT" type="track" />

Weitere Beispiele:

// Playlist
<SpotifyEmbed uri="37i9dQZF1DXcBWIGoYBM5M" type="playlist" />

// Album
<SpotifyEmbed uri="4LH4d3cOWNNsVw41Gqt2kv" type="album" />

// Podcast Episode
<SpotifyEmbed uri="4rOoJ6Egrf8K2IrywzwOMk" type="episode" />

// Compact Mode (80px height)
<SpotifyEmbed uri="4cOdK2wGLETKBW3PvgPWqT" type="track" compact />

Props:

• uri: Spotify ID (aus der Spotify URL)
• type: 'track' | 'album' | 'playlist' | 'episode' | 'show'
• height: Höhe in Pixel (optional)
• compact: Kompakter Modus mit 80px Höhe

YouTube Embed 

Für Video- und Audio-Inhalte von YouTube verwenden Sie den YouTubeEmbed Component (siehe Video Player oben).

Teil 6: Content-Strukturierung 

Callout Components 

Hinweise und Markierungen in 5 Varianten.

<Callout type="info" title="Title">
  Content hier...
</Callout>

Types: info, success, warning, error, tip

PDF Download 

Einheitliche Darstellung für PDF-Downloads in drei Varianten.

Default 

Compact (Inline) 

Für inline-Verwendung: Material als PDF(2.3 MB) – ideal für Fließtext.

Card 

<PDFDownload 
  url="/path/to/file.pdf"
  title="Download Title"
  description="Optional description"
  fileSize="2.3 MB"
  variant="default"  // 'default' | 'compact' | 'card'
/>

Subpage Navigator 

Strukturierte Navigation zu verwandten Unterseiten.

<SubpageNavigator
  items={[
    {
      title: "Page Title",
      href: "/path/to/page",
      description: "Description text",
      number: "01"  // Optional
    }
  ]}
  columns={2}  // 1, 2 oder 3
/>

Teil 7: Referenzen & Quellen 

Für wissenschaftliche Artikel und umfangreiche Blog-Posts bieten wir ein System zur Verwaltung von Quellenangaben und Referenzen – mit automatischer Nummerierung und Zwischenüberschriften nach Kapiteln.

Sources (Inline) 

Die Sources-Komponente definiert Quellen direkt im MDX-Content. Ideal für Artikel mit wenigen Quellen pro Kapitel.

<Sources 
chapterId="1.1" 
items={[
  { text: 'Vaswani et al. (2017) – "Attention Is All You Need"', url: 'https://arxiv.org/abs/1706.03762' },
  { text: 'Stanford HAI (2024) – "AI Index Report 2024"', url: 'https://aiindex.stanford.edu/report/' },
]} 
/>

Props:

AllSourcesFlat 

Zeigt alle registrierten Sources am Ende des Artikels – gruppiert nach Kapiteln mit Zwischenüberschriften. Unterstützt Kapitel-Navigation, Filterung und kollabierbare Kapitel.

Basis-Verwendung 

<AllSourcesFlat 
title="Referenzen & Quellen"
description="Diese Analyse basiert auf Quellen aus akademischer Forschung:"
/>

Mit Kapitel-Features 

<AllSourcesFlat 
title="Referenzen & Quellen"
description="Alle zitierten Quellen nach Kapiteln geordnet:"
showChapterNav={true}     // Kapitel-Navigationsleiste anzeigen
collapsible={true}        // Kapitel ein-/ausklappbar
filterable={true}         // Nach Kapitel filtern
initiallyCollapsed={false} // Initial alle Kapitel offen
/>

Mit benutzerdefinierten Kapitelnamen 

{/* Kapitelnamen werden pro Artikel definiert */}
<AllSourcesFlat 
title="Referenzen & Quellen"
chapterNames={{
  '1': 'Primärquellen & Artikel',
  '2': 'Video-Aufzeichnungen',
  '3': 'Technische Dokumentation',
}}
chapterShortNames={{
  '1': 'Artikel',
  '2': 'Videos',
  '3': 'Docs',
}}
/>

Vordefinierte Kapitelnamen (ki-kompendium) 

{/* Für ki-kompendium: Vordefinierte Kapitelnamen verwenden */}
<AllSourcesFlat 
useGenericNames={false}  // Verwendet vordefinierte Namen
/>

Features 

Darstellung mit Zwischenüberschriften:

Die Komponente gruppiert alle Quellen automatisch nach dem Kapitel-Präfix (z.B. "1.1" → "Kapitel 1"):

## Referenzen & Quellen

[Kapitel-Navigation-Leiste mit Filter-Pills]

### Kapitel 1: Grundlagen & Geschichte            [▲]
━━━━━━━━ 12 Quellen

[1] Vaswani et al. (2017) – "Attention Is All You Need"
[2] Stanford HAI (2024) – "AI Index Report 2024"
...

### Kapitel 2: Technologie – Transformer & LLMs   [▲]
━━━━━━━━ 8 Quellen

[13] OpenAI (2023) – "GPT-4 Technical Report"
[14] Anthropic (2024) – "Claude 3 Model Card"
...

Insgesamt 120 Quellen in 7 Kapiteln

Props:

AllReferencesFlat 

Die Datenbank-basierte Variante – lädt Referenzen aus der PostgreSQL-Datenbank und zeigt sie mit Zwischenüberschriften.

<AllReferencesFlat 
title="Referenzen & Quellen"
description="Alle zitierten Quellen nach Kapiteln geordnet:"
pageFilter="/blog/ki-kompendium-business-bildung-2025"
/>

Props:

Vorteile der Datenbank-Variante:

• Zentrale Verwaltung aller Referenzen
• Suche und Filterung via API
• Mehrfachverwendung von Quellen über Artikel hinweg
• BibLaTeX-kompatibles Schema

ReferencesSearch 

Interaktive Suchoberfläche für alle Referenzen in der Datenbank.

<ReferencesSearch 
compact={true}
variant="light"
lang="de"
showStats={false}
/>

Props:

Features:

• Volltextsuche über Beschreibungen und URLs
• Filterung nach Kategorien (12 Kategorien)
• Filterung nach Artikeln/Seiten
• Sortierung (Nummer, Beschreibung, Kategorie)
• Pagination

Datenbank-Import 

Für die Datenbank-basierten Komponenten müssen Referenzen in die PostgreSQL-Datenbank importiert werden.

Datenformat (BibLaTeX-Schema) 

interface CreateReferenceInput {
link: string          // URL der Quelle
description: string   // Formatierter Zitationstext
category?: string     // Kategorie (siehe unten)
}

// Verwendung mit Segment
interface ReferenceWithUsage {
link: string
description: string
category?: string
page: string          // z.B. "/blog/ki-kompendium-2025"
segment_id: string    // z.B. "1.1", "2.3"
}

12 Kategorien 

Import-Befehle 

# 1. Datenbank initialisieren (Tabellen erstellen)
npx tsx scripts/init-references-db.ts

# 2. Import-Vorschau (Dry-Run)
npx tsx scripts/migrate-references-to-db.ts --dry-run

# 3. Tatsächlicher Import aus MDX-Dateien
npx tsx scripts/migrate-references-to-db.ts

# 4. Statistiken anzeigen
npx tsx scripts/init-references-db.ts

API-Zugriff 

Referenzen können auch über die REST-API abgefragt und erstellt werden:

# Alle Referenzen abrufen
curl "https://example.com/api/references?limit=20"

# Nach Seite filtern
curl "https://example.com/api/references?page_filter=/blog/ki-kompendium-2025"

# Nach Kategorie filtern
curl "https://example.com/api/references?category=academic"

# Volltextsuche
curl "https://example.com/api/references?query=transformer"

Wann welche Komponente? 

Teil 8: Installation & Best Practices 

Dependencies 

# Core MDX Plugins
npm install remark-gfm remark-math rehype-katex
npm install rehype-slug rehype-autolink-headings

# Embed Libraries
npm install react-lite-youtube-embed react-tweet

# Visualization Libraries
npm install mermaid recharts

# Image Gallery / Lightbox
npm install yet-another-react-lightbox

# Utilities
npm install clsx

Component-Registrierung 

// mdx-components.tsx
import { Tabs, Tab } from '@/components/Tabs'
import { Accordion } from '@/components/Accordion'
import { Timeline } from '@/components/Timeline'
import { Chart } from '@/components/Chart'
import { DataTable, ComparisonTable } from '@/components/DataTable'
import { MermaidDiagram } from '@/components/MermaidDiagram'
import { SpotifyEmbed } from '@/components/SpotifyEmbed'
// ... weitere imports

export const MDXComponents = {
  Tabs,
  Tab,
  Accordion,
  Timeline,
  Chart,
  DataTable,
  ComparisonTable,
  MermaidDiagram,
  SpotifyEmbed,
  // ...
}

GDPR-Compliance 

Technische Vorteile 

• Server-First Architecture: Minimale Client-JavaScript-Last
• Type Safety: Vollständige TypeScript-Integration
• Performance: Optimiert für Core Web Vitals
• Accessibility: WCAG 2.1 AA konform
• GDPR: Privacy-by-Design Approach
• Responsive: Mobile-First Design
• Theming: Brand-Colors integriert

LLM-Anleitung: Blog-Content erstellen 

Schreibstil & Tonalität 

Rolle: Agiere als Senior Copywriter für ein führendes, innovatives IT-Unternehmen.

Content-Struktur 

Wann welche Komponente? 

Entscheidungshilfe: Häufige Szenarien 

Artikel-Template 

// Datei: src/app/blog/[slug]/page.mdx
import { withBlogLayout } from '@/components/BlogLayout'
import { Callout, CodeBlock, Tabs, Tab, MermaidDiagram } from '@/components/MDXComponents'

export const article = {
  date: '2025-01-15',
  title: 'Aussagekräftiger Titel mit Keyword',
  description: 'Meta-Description (150-160 Zeichen) mit Hauptkeyword und Nutzenversprechen.',
  author: 'Kurt Dirnbauer',
}

{/* Einleitung: Problem → Lösung → Nutzen */}

Moderne Webanwendungen stehen vor der Herausforderung, Performance und Developer Experience 
zu vereinen. Mit **Server Components** und **Streaming** bietet Next.js 15 die Werkzeuge, 
um beide Ziele zu erreichen.

<Callout type="info" title="Was Sie lernen">
- Server Components optimal einsetzen
- Streaming für bessere UX implementieren
- Performance-Gewinne messen
</Callout>

## Hauptteil mit klarer H2-Struktur

### Unterkapitel für Details

{/* Code-Beispiele mit Kontext */}
<CodeBlock language="typescript" title="server-component.tsx">
{\`export default async function Dashboard() {
  const data = await fetchDashboardData()
  return <DashboardView data={data} />
}\`}
</CodeBlock>

{/* Visuelle Auflockerung mit Diagrammen */}
<MermaidDiagram
  chart={\`flowchart LR
    Request --> Server
    Server --> Streaming
    Streaming --> Browser\`}
  caption="Request-Flow mit Streaming"
/>

## Fazit

{/* Key Takeaways + Call-to-Action */}

**Die wichtigsten Erkenntnisse:**
- Server Components reduzieren Client-JavaScript
- Streaming verbessert Time-to-First-Byte
- Messbare Performance-Gewinne ab Tag 1

Für eine individuelle Beratung zur Migration: [Kontakt aufnehmen](/kontakt)

export default withBlogLayout(article)

Komponenten-Beispiele für häufige Szenarien 

<StatList>
  <StatListItem value="40%" label="Weniger JavaScript" />
  <StatListItem value="2.1s" label="Schnellere Ladezeit" />
  <StatListItem value="95+" label="Lighthouse Score" />
</StatList>

<CardGrid columns={3}>
  <Card title="Performance" variant="elevated">
    Server Components reduzieren die Bundle-Size signifikant.
  </Card>
  <Card title="SEO" variant="elevated">
    Vollständiges Server-Side Rendering für optimale Indexierung.
  </Card>
  <Card title="DX" variant="elevated">
    Einfachere Datenzugriffe ohne useEffect-Ketten.
  </Card>
</CardGrid>

Checkliste vor Veröffentlichung 

Ressourcen 

• MDX Documentation
• Next.js MDX Guide
• React Components
• Mermaid.js Documentation – Alle Diagrammtypen
• Recharts Documentation – Chart Library

Für Fragen zur Implementation: office@webconsulting.at