# Heading 1

## Überschrift 2
### Überschrift 3

## Texte formatieren

Dies ist ein Absatz. 
Er enthält *kursiven Text*. 
Kursiv bedeutet schräg. 
Er enthält auch **fetten Text**. 
Zudem gibt es kurzen `Code im Text`.

Dies ist ein neuer Absatz. 
Dieser Text ist **_fett und kursiv zugleich_**.

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

* Unordered Item
  * Nested Item

1. Ordered Item
   1. Nested Item

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

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

> "Zitat hier"
> 
> — Autor

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

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

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

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

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

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

# Installation
npm install next@latest react@latest

# Server für die Entwicklung
npm run dev

# Fertige Version bauen
npm run build && npm start

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

Im Text: `code hier`

```language
// Codeblock
const example = 'syntax highlighting'
```

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

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

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

<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"
/>

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

<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" />
  Ersatztext
</video>

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

<StaticTweet id="1973332823126974657" />

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

// Liste mit Musik
<SpotifyEmbed uri="37i9dQZF1DXcBWIGoYBM5M" type="playlist" />

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

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

// Kleine Ansicht (Höhe: 80 Pixel)
<SpotifyEmbed uri="4cOdK2wGLETKBW3PvgPWqT" type="track" compact />

<Callout type="info" title="Titel">
  Inhalt hier...
</Callout>

<PDFDownload 
  url="/path/to/file.pdf"
  title="Titel für den Download"
  description="Zusätzliche Beschreibung"
  fileSize="2.3 MB"
  variant="default"  // 'default' | 'compact' | 'card'
/>

<SubpageNavigator
  items={[
    {
      title: "Seitentitel",
      href: "/path/to/page",
      description: "Beschreibung",
      number: "01"  // Freiwillig
    }
  ]}
  columns={2}  // 1, 2 oder 3
/>

# Wichtige MDX Erweiterungen
npm install remark-gfm remark-math rehype-katex
npm install rehype-slug rehype-autolink-headings

# Für fremde Inhalte
npm install react-lite-youtube-embed react-tweet

# Für Schaubilder
npm install mermaid recharts

# Für die Bildergalerie
npm install yet-another-react-lightbox

# Nützliche Werkzeuge
npm install clsx

## Component-Registrierung

```typescript
// 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 Importe

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

## Regeln für den Datenschutz

| Anbieter | Unsere Lösung |
|-------|-----------|
| **YouTube** | Es gibt keine Cookies ohne Ihre Erlaubnis. Wir nutzen youtube-nocookie.com. |
| **Twitter** | Wir zeigen Beiträge fest an. Wir verfolgen Ihr Verhalten nicht. |
| **GitHub** | Wir laden Daten über unseren Server. Ihr Browser schickt keine Anfragen. |
| **Podcast** | Sie müssen 2 Mal klicken. Ein Fenster fragt nach Ihrer Erlaubnis. |

---

## Technische Vorteile

- **Server-First Architecture**: Der Server macht die meiste Arbeit. Ihr Browser muss nur wenig JavaScript laden.
- **Type Safety**: Das bedeutet sichere Daten. Wir nutzen dafür komplett die Sprache TypeScript.
- **Performance**: Die Internetseite lädt sehr schnell. Sie erfüllt die Google-Regeln für Schnelligkeit. Diese Regeln heißen Core Web Vitals.
- **Accessibility**: Das bedeutet Barrierefreiheit. Die Internetseite erfüllt die offiziellen Regeln dafür. Diese Regeln heißen WCAG 2.1 AA.
- **GDPR**: Das ist der Datenschutz. Die Technik schützt Ihre Daten von Anfang an. Das nennt man Privacy-by-Design.
- **Responsive**: Die Internetseite passt auf jeden Bildschirm. Wir planen sie zuerst für das Handy. Das nennt man Mobile-First.
- **Theming**: Das bedeutet die Gestaltung. Wir bauen die Farben von Ihrer Firma direkt ein.

---

## Anleitung für LLM: Texte für den Blog schreiben

<Callout type="info" title="Für Künstliche Intelligenz">
Dieser Teil ist für LLMs und Assistenten mit Künstlicher Intelligenz. 
Sie schreiben Artikel für den Blog von webconsulting.at. 
Halten Sie sich an diese Regeln. 
Dann werden die Texte gut und einheitlich.
</Callout>

<Citation id="db-104" /> <Citation id="db-546" /> <Citation id="db-259" />

### Schreibstil und Sprache

**Ihre Rolle:** Sie sind ein erfahrener Textschreiber. Sie arbeiten für ein modernes IT-Unternehmen.

<Accordion items={[
  {
    title: "Regeln für die Sprache",
    content: (
      <ul className="space-y-2">
        <li>Schreiben Sie sicher und modern. Nutzen Sie eine aktive Sprache. Verzichten Sie auf die Möglichkeitsform.</li>
        <li>Schreiben Sie über Technik. Nutzen Sie Fachbegriffe richtig. Vermeiden Sie leere Phrasen.</li>
        <li>Zeigen Sie Ihr Fachwissen. Nennen Sie genaue Beispiele. Zeigen Sie klare Ergebnisse.</li>
        <li>Schreiben Sie lebendig. Betonen Sie den Nutzen für die Leser. Fordern Sie die Leser zum Handeln auf.</li>
      </ul>
    )
  },
  {
    title: "Gerechte Sprache für alle Geschlechter",
    content: (
      <ul className="space-y-2">
        <li>Nutzen Sie diese bekannten Begriffe: Studierende, Mitarbeitende, Teilnehmende, Team, Fachleute.</li>
        <li>Nutzen Sie den Doppelpunkt. Zum Beispiel: Nutzer:innen, Entwickler:innen oder Administrator:innen.</li>
        <li>Schreiben Sie möglichst neutral. Zum Beispiel: Das Entwicklungsteam baut etwas ein. Oder: Wer die API nutzt, hat Vorteile.</li>
      </ul>
    )
  }
]} />

<CardGrid columns={2}>
  <Card title={<span className="flex items-center gap-2"><CheckCircle2 className="w-5 h-5 text-green-600" />Guter Stil</span>} variant="bordered">
    "Server Components verkleinern die Bundle-Size um bis zu 40 Prozent. Das zeigt der Lighthouse-Score."
  </Card>
  <Card title={<span className="flex items-center gap-2"><XCircle className="w-5 h-5 text-red-600" />Schlechter Stil</span>} variant="bordered">
    "Man könnte vielleicht die Leistung verbessern. Man muss dafür verschiedene Dinge verändern."
  </Card>
</CardGrid>

### Aufbau der Texte

<CardGrid columns={2}>
  <Card title={<><Icon name="FileText" className="inline w-4 h-4 mr-2" />Einleitung</>} variant="bordered">
    Schreiben Sie 2 bis 3 Sätze. Erklären Sie das Problem und die Lösung. Machen Sie die Leser neugierig.
  </Card>
  <Card title={<><Icon name="LayoutGrid" className="inline w-4 h-4 mr-2" />Hauptteil</>} variant="bordered">
    Ordnen Sie den Text logisch. Nutzen Sie Überschriften. Zeigen Sie Beispiele mit Code.
  </Card>
  <Card title={<><Icon name="Target" className="inline w-4 h-4 mr-2" />Fazit</>} variant="bordered">
    Nennen Sie die wichtigsten Punkte. Erklären Sie die nächsten Schritte. Fordern Sie zum Handeln auf.
  </Card>
  <Card title={<><Icon name="BarChart2" className="inline w-4 h-4 mr-2" />Bilder und Grafiken</>} variant="bordered">
    Nutzen Sie Diagramme. Zeigen Sie Bilder vom Bildschirm. Das hilft beim Verstehen.
  </Card>
</CardGrid>

### Wann nutzen Sie welche Komponente?

| Komponente | Nutzen für | Nicht nutzen für | Beispiel |
|------------|---------------|---------------------|----------|
| **Callout** | Wichtige Hinweise, Warnungen, Tipps | Normale Texte, zusätzliche Infos | Datenschutz-Hinweis, Warnung vor Veraltung |
| **Tooltip** | Kurze Erklärungen, Abkürzungen | Lange Texte, wichtige Infos | Fachbegriffe, Abkürzungen |
| **Blockquote** | Zitate, fremde Aussagen | Eigene Meinungen, Code | Zitate von Fachleuten, Ergebnisse von Studien |
| **Abbreviation** | Technische Abkürzungen | Bekannte Wörter | HTML, CSS, API, REST |
| **CodeBlock** | Farbiger Code mit Titel | Kurzer Code im Text, falscher Code | API-Beispiele, Dateien für Einstellungen |
| **DataTable** | Geordnete Daten, API-Erklärungen | Einfache Listen | Übersicht von Funktionen, Erklärungen für Props |
| **ComparisonTable** | Vergleiche, Vorteile und Nachteile | Daten in einer Reihenfolge | Vergleich von CMS, Wahl vom Framework |
| **Chart** | Entwicklungen, Aufteilungen, Zahlen | Sehr wenig Daten | Verlauf der Leistung, Zahlen zu Besuchern |
| **Tabs** | Mehrere Möglichkeiten, Varianten | Schritte nacheinander | TypeScript oder JavaScript, Systeme |
| **Accordion** | Fragen, zusätzliche Details, lange Listen | Wichtige Infos, kurze Texte | Fehlersuche, weitere Optionen |
| **Timeline** | Zeitliche Abläufe, Pläne | Ungeordnete Ereignisse | Phasen im Projekt, Verlauf von Versionen |
| **CardGrid** | Übersicht von Funktionen, Gruppen | Normaler Text, Abläufe | Funktionen vom Produkt, Übersicht der Dienste |
| **MermaidDiagram** | Prozesse, Aufbau, Abläufe | Einfache Listen | CI/CD Pipeline, Aufbau vom System |
| **YouTubeEmbed** | Lern-Videos, Vorträge | Kurze Videos, nur Ton | Vorträge über Technik, Vorführungen von Produkten |
| **SpotifyEmbed** | Podcasts, Hinweise auf Musik | Inhalte mit Video | Podcasts über Technik, Musik im Hintergrund |
| **GitHubRepoCard** | Verweise auf Open-Source, Werkzeuge | Private Repos, kurzer Code | Tipps für Frameworks |
| **StaticTweet** | Meinungen von anderen, Neuigkeiten | Eigene Aussagen | Rückmeldungen, Neuigkeiten zu Versionen |
| **ImageGallery** | Viele Bilder zu einem Thema | Einzelne Bilder, Bilder vom Bildschirm | Fotos von Veranstaltungen, verschiedene Designs |
| **Citation** | Quellen im Text mit ID | Artikel ohne Datenbank | Zitate aus der Wissenschaft, Beweise für Fakten |
| **ReferencesSearch** | Suche nach Quellen | Einfache Artikel | Seiten für Werkzeuge, Listen mit Quellen |
| **TechResourceCallout** | Hilfen für Entwickler, API-Texte | Allgemeine Infos | GitHub-Wissen, genaue technische Texte |

### Hilfe für Entscheidungen: Bekannte Situationen

<Accordion items={[
  {
    title: "Ich möchte Beispiele mit Code zeigen",
    content: <ul className="space-y-0.5">
      <li><strong>Einzelner Code:</strong> Nutzen Sie <code>CodeBlock</code>. Geben Sie Titel und Sprache an.</li>
      <li><strong>Mehrere Sprachen:</strong> Nutzen Sie <code>Tabs</code>. Nutzen Sie einen <code>CodeBlock</code> für jeden Tab.</li>
      <li><strong>Code im Text:</strong> Nutzen Sie einfache Backticks im Markdown.</li>
      <li><strong>Lange Code-Dateien:</strong> Nutzen Sie <code>CodeBlock</code>. Setzen Sie <code>collapsible={'{true}'}</code>.</li>
    </ul>
  },
  {
    title: "Ich möchte Daten vergleichen",
    content: <ul className="space-y-0.5">
      <li><strong>Vergleich von Funktionen:</strong> Nutzen Sie <code>ComparisonTable</code>.</li>
      <li><strong>Daten mit Zahlen:</strong> Nutzen Sie <code>DataTable</code> mit Sortierung.</li>
      <li><strong>Entwicklungen in der Zeit:</strong> Nutzen Sie <code>Chart</code>. Wählen Sie den Typ <code>line</code> oder <code>area</code>.</li>
      <li><strong>Vergleiche von Gruppen:</strong> Nutzen Sie <code>Chart</code>. Wählen Sie den Typ <code>bar</code>.</li>
      <li><strong>Aufteilungen:</strong> Nutzen Sie <code>Chart</code>. Wählen Sie den Typ <code>pie</code>.</li>
    </ul>
  },
  {
    title: "Ich möchte einen Prozess erklären",
    content: <ul className="space-y-0.5">
      <li><strong>Fester Ablauf:</strong> Nutzen Sie <code>MermaidDiagram</code> mit Flowchart.</li>
      <li><strong>Arbeit mit der API:</strong> Nutzen Sie <code>MermaidDiagram</code> mit Sequence Diagram.</li>
      <li><strong>Zeitlicher Ablauf:</strong> Nutzen Sie die Komponente <code>Timeline</code>.</li>
      <li><strong>Entscheidungen:</strong> Nutzen Sie <code>MermaidDiagram</code>. Nutzen Sie Flowchart und Conditions.</li>
      <li><strong>Aufbau vom System:</strong> Nutzen Sie <code>MermaidDiagram</code>. Wählen Sie C4 oder Architecture Diagram.</li>
    </ul>
  },
  {
    title: "Ich möchte wichtige Infos betonen",
    content: <ul className="space-y-0.5">
      <li><strong>Warnung oder Fehler:</strong> Nutzen Sie <code>Callout</code>. Wählen Sie den Typ <code>warning</code> oder <code>error</code>.</li>
      <li><strong>Tipp oder gute Lösung:</strong> Nutzen Sie <code>Callout</code>. Wählen Sie den Typ <code>tip</code>.</li>
      <li><strong>Allgemeine Info:</strong> Nutzen Sie <code>Callout</code>. Wählen Sie den Typ <code>info</code>.</li>
      <li><strong>Erfolg:</strong> Nutzen Sie <code>Callout</code>. Wählen Sie den Typ <code>success</code>.</li>
      <li><strong>Kurze Erklärung im Text:</strong> Nutzen Sie <code>Tooltip</code>.</li>
    </ul>
  },
  {
    title: "Ich möchte fremde Inhalte einbauen",
    content: <ul className="space-y-0.5">
      <li><strong>Video von YouTube:</strong> Nutzen Sie <code>YouTubeEmbed</code>.</li>
      <li><strong>Spotify oder Podcast:</strong> Nutzen Sie <code>SpotifyEmbed</code>.</li>
      <li><strong>Beitrag von X:</strong> Nutzen Sie <code>StaticTweet</code>.</li>
      <li><strong>GitHub-Repo:</strong> Nutzen Sie <code>GitHubRepoCard</code>.</li>
      <li><strong>Download von einer PDF-Datei:</strong> Nutzen Sie <code>PDFDownload</code>. Schreiben Sie eine Beschreibung dazu.</li>
    </ul>
  },
  {
    title: "Ich möchte Texte ordnen",
    content: <ul className="space-y-0.5">
      <li><strong>Gleichwertige Möglichkeiten:</strong> Nutzen Sie <code>Tabs</code>.</li>
      <li><strong>Zusätzliche Details:</strong> Nutzen Sie <code>Accordion</code>.</li>
      <li><strong>Liste von Funktionen:</strong> Nutzen Sie <code>CardGrid</code> und <code>Card</code>.</li>
      <li><strong>Wichtige Zahlen:</strong> Nutzen Sie <code>StatList</code>.</li>
      <li><strong>Zeitliche Abfolge:</strong> Nutzen Sie <code>Timeline</code>.</li>
      <li><strong>Steuerung durch die Seite:</strong> Nutzen Sie <code>SubpageNavigator</code>.</li>
    </ul>
  },
  {
    title: "Ich möchte Quellen zitieren",
    content: <ul className="space-y-0.5">
      <li><strong>Quelle im Text:</strong> Nutzen Sie <code>Citation</code>. Geben Sie die ID an.</li>
      <li><strong>Liste am Ende:</strong> Das macht <code>ArticleReferencesSection</code> automatisch.</li>
      <li><strong>Liste per Hand:</strong> Nutzen Sie <code>AllReferencesFlat</code> mit <code>pageFilter</code>.</li>
      <li><strong>Eigene Suche:</strong> Nutzen Sie <code>ReferencesSearch</code>.</li>
    </ul>
  }
]} />

### Vorlage für den Artikel

```jsx
// 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: 'Klarer Titel mit wichtigem Suchwort',
  description: 'Kurze Beschreibung. Nutzen Sie maximal 160 Zeichen. Nennen Sie das Suchwort und den Vorteil.',
  author: 'Kurt Dirnbauer',
}

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

Moderne Webanwendungen haben ein Ziel. 
Sie sollen schnell sein. 
Sie sollen auch gut für Entwickler:innen sein. 
Next.js 15 hilft dabei. 
Es bietet **Server Components** und **Streaming** an. 
Damit erreichen Sie beide Ziele.

<Callout type="info" title="Das lernen Sie hier">
- Sie nutzen Server Components richtig.
- Sie bauen Streaming ein. Das verbessert die Erfahrung für Nutzer:innen.
- Sie messen die bessere Leistung.
</Callout>

## Hauptteil mit klarer Struktur

### Unterkapitel für genaue Erklärungen

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

{/* Bilder und Diagramme für leichteres Lesen */}
<MermaidDiagram
  chart={\`flowchart LR
    Request --> Server
    Server --> Streaming
    Streaming --> Browser\`}
  caption="Der Ablauf der Anfrage mit Streaming"
/>

## Fazit

{/* Wichtige Punkte + Aufruf zum Handeln */}

**Die wichtigsten Ergebnisse:**
- Server Components machen das Client-JavaScript kleiner. Das Gerät lädt weniger Code.
- Streaming macht die Time-to-First-Byte besser. Das ist die Wartezeit auf die ersten Daten.
- Sie merken die bessere Performance sofort am ersten Tag. Die Seite ist spürbar schneller.

Sie wollen Ihre Internetseite umstellen? Wir beraten Sie gerne persönlich. [Nehmen Sie Kontakt mit uns auf](/kontakt)

export default withBlogLayout(article)