# Heading 1

## Heading 2
### Heading 3

*italic* or _italic_
**bold** or __bold__
**_combined_**
`inline code`

* Unordered Item
  * Nested Item

1. Ordered Item
   1. Nested Item

[Link Text](https://example.com)
[Link with 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

# Development Server
npm run dev

# Production Build
npm run build && npm start

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

Inline: `code here`

```language
// Code block
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: 'Event', content: '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" />
  Fallback Text
</video>

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

<StaticTweet id="1973332823126974657" />

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

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

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

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

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

# 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

# Visualisation Libraries
npm install mermaid recharts

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

# Utilities
npm install clsx

## Component Registration

```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'
// ... additional imports

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

## GDPR Compliance

| Embed | Strategy |
|-------|-----------|
| **YouTube** | No cookies without user consent, youtube-nocookie.com |
| **Twitter** | Static rendering without tracking |
| **GitHub** | Server-side fetching, no browser requests |
| **Podcast** | Two-click solution with consent dialogue |

---

## Technical Advantages

- **Server-First Architecture**: Minimal client JavaScript load
- **Type Safety**: Full TypeScript integration
- **Performance**: Optimised for Core Web Vitals
- **Accessibility**: WCAG 2.1 AA compliant
- **GDPR**: Privacy-by-design approach
- **Responsive**: Mobile-first design
- **Theming**: Brand colours integrated

---

## LLM Guide: Creating Blog Content

<Callout type="info" title="For AI Assistants">
This section is aimed at LLMs and AI assistants creating blog articles for webconsulting.at. Follow these guidelines for consistent, high-quality content.
</Callout>

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

### Writing Style & Tone

**Role:** Act as a Senior Copywriter for a leading, innovative IT company.

<Accordion items={[
  {
    title: "Tone Guidelines",
    content: (
      <ul className="space-y-2">
        <li>Confident & future-oriented (active voice, no subjunctive mood)</li>
        <li>Tech flair without buzzword bingo (technical terms yes, empty phrases no)</li>
        <li>Demonstrate expertise (concrete examples, measurable results)</li>
        <li>Dynamic & persuasive (call-to-actions, benefit-oriented)</li>
      </ul>
    )
  },
  {
    title: "Gender-Inclusive Language",
    content: (
      <ul className="space-y-2">
        <li>Established terms: Students, employees, participants, team, professionals</li>
        <li>Colon notation: Users (Nutzer:innen), developers (Entwickler:innen), administrators (Administrator:innen)</li>
        <li>Prefer neutral phrasing: 'The development team implements...', 'Those who use the API benefit from...'</li>
      </ul>
    )
  }
]} />

<CardGrid columns={2}>
  <Card title={<span className="flex items-center gap-2"><CheckCircle2 className="w-5 h-5 text-green-600" />Good Style</span>} variant="bordered">
    "Server Components reduce the bundle size by up to 40% – measurable in Lighthouse scores."
  </Card>
  <Card title={<span className="flex items-center gap-2"><XCircle className="w-5 h-5 text-red-600" />To Avoid</span>} variant="bordered">
    "One could potentially improve performance by implementing various optimisations."
  </Card>
</CardGrid>

### Content Structure

<CardGrid columns={2}>
  <Card title={<><Icon name="FileText" className="inline w-4 h-4 mr-2" />Introduction</>} variant="bordered">
    2-3 sentences, outline the problem/solution, arouse curiosity
  </Card>
  <Card title={<><Icon name="LayoutGrid" className="inline w-4 h-4 mr-2" />Main Body</>} variant="bordered">
    Logically structured, H2/H3 hierarchy, code examples
  </Card>
  <Card title={<><Icon name="Target" className="inline w-4 h-4 mr-2" />Conclusion</>} variant="bordered">
    Key takeaways, next steps, call-to-action
  </Card>
  <Card title={<><Icon name="BarChart2" className="inline w-4 h-4 mr-2" />Visualisation</>} variant="bordered">
    Diagrams, charts, screenshots where appropriate
  </Card>
</CardGrid>

### Which Component to Use When?

| Component | Use for | Do not use for | Example |
|------------|---------------|---------------------|----------|
| **Callout** | Important notices, warnings, tips | Normal text paragraphs, optional info | GDPR notice, deprecation warning |
| **Tooltip** | Short definitions, abbreviations | Long explanations, important info | Technical terms, acronyms |
| **Blockquote** | Quotes, external statements | Personal opinions, code | Expert quotes, study results |
| **Abbreviation** | Technical abbreviations | Commonly known terms | HTML, CSS, API, REST |
| **CodeBlock** | Syntax-highlighted code with a title | Inline code, pseudo-code | API examples, config files |
| **DataTable** | Structured data, API references | Simple lists | Feature matrix, props documentation |
| **ComparisonTable** | Feature comparisons, pros/cons | Sequential data | CMS comparison, framework selection |
| **Chart** | Trends, distributions, metrics | Few data points | Performance history, traffic statistics |
| **Tabs** | Parallel alternatives, variants | Sequential steps | TypeScript vs JavaScript, OS-specific |
| **Accordion** | FAQs, optional details, long lists | Important info, short content | Troubleshooting, advanced options |
| **Timeline** | Chronological processes, roadmaps | Unordered events | Project phases, release history |
| **CardGrid** | Feature overviews, categories | Continuous text, sequential content | Product features, service overview |
| **MermaidDiagram** | Processes, architectures, flows | Simple lists | CI/CD pipeline, system architecture |
| **YouTubeEmbed** | Video tutorials, conference talks | Short clips, audio-only | Tech talks, product demos |
| **SpotifyEmbed** | Podcasts, music references | Video content | Tech podcasts, background music |
| **GitHubRepoCard** | Open-source references, tools | Private repos, code snippets | Framework recommendations |
| **StaticTweet** | Social proof, announcements | Personal statements | Community feedback, release news |
| **ImageGallery** | Multiple connected images | Single images, screenshots | Event photos, design variants |
| **Citation** | Inline source citations with database ID | Articles without DB references | Academic citations, factual evidence |
| **ReferencesSearch** | Interactive source search | Simple articles | Tool pages, bibliographies |
| **TechResourceCallout** | Developer resources, skills, API docs | General info | GitHub skills, technical deep dives |

### Decision Guide: Common Scenarios

<Accordion items={[
  {
    title: "I want to show code examples",
    content: <ul className="space-y-0.5">
      <li><strong>Single code block:</strong> Use <code>CodeBlock</code> with title and language</li>
      <li><strong>Multiple languages/variants:</strong> Use <code>Tabs</code> with one <code>CodeBlock</code> per tab</li>
      <li><strong>Inline code:</strong> Use simple backticks in Markdown</li>
      <li><strong>Long code files:</strong> Use <code>CodeBlock</code> with <code>collapsible={'{true}'}</code></li>
    </ul>
  },
  {
    title: "I want to compare data",
    content: <ul className="space-y-0.5">
      <li><strong>Feature comparison (Yes/No):</strong> <code>ComparisonTable</code> with boolean support</li>
      <li><strong>Numerical data:</strong> <code>DataTable</code> with sorting</li>
      <li><strong>Trends over time:</strong> <code>Chart</code> of type <code>line</code> or <code>area</code></li>
      <li><strong>Categorical comparisons:</strong> <code>Chart</code> of type <code>bar</code></li>
      <li><strong>Proportions/distributions:</strong> <code>Chart</code> of type <code>pie</code></li>
    </ul>
  },
  {
    title: "I want to explain a process",
    content: <ul className="space-y-0.5">
      <li><strong>Sequential workflow:</strong> <code>MermaidDiagram</code> with flowchart</li>
      <li><strong>API interactions:</strong> <code>MermaidDiagram</code> with sequence diagram</li>
      <li><strong>Chronological progression:</strong> <code>Timeline</code> Component</li>
      <li><strong>Decision tree:</strong> <code>MermaidDiagram</code> with flowchart and conditions</li>
      <li><strong>System architecture:</strong> <code>MermaidDiagram</code> with C4 or architecture diagram</li>
    </ul>
  },
  {
    title: "I want to highlight important info",
    content: <ul className="space-y-0.5">
      <li><strong>Warning/Error:</strong> <code>Callout</code> with type <code>warning</code> or <code>error</code></li>
      <li><strong>Tip/Best Practice:</strong> <code>Callout</code> with type <code>tip</code></li>
      <li><strong>General info:</strong> <code>Callout</code> with type <code>info</code></li>
      <li><strong>Success/Confirmation:</strong> <code>Callout</code> with type <code>success</code></li>
      <li><strong>Short contextual info:</strong> <code>Tooltip</code> for inline explanations</li>
    </ul>
  },
  {
    title: "I want to embed external content",
    content: <ul className="space-y-0.5">
      <li><strong>YouTube video:</strong> <code>YouTubeEmbed</code> (GDPR-compliant with lazy load)</li>
      <li><strong>Spotify/Podcast:</strong> <code>SpotifyEmbed</code> for tracks, albums, or episodes</li>
      <li><strong>Tweet/X-Post:</strong> <code>StaticTweet</code> for server-side rendering without tracking</li>
      <li><strong>GitHub Repo:</strong> <code>GitHubRepoCard</code> for automatic repo info</li>
      <li><strong>PDF download:</strong> <code>PDFDownload</code> with description</li>
    </ul>
  },
  {
    title: "I want to structure content",
    content: <ul className="space-y-0.5">
      <li><strong>Parallel options:</strong> <code>Tabs</code> for equivalent alternatives</li>
      <li><strong>Optional details:</strong> <code>Accordion</code> for FAQ style</li>
      <li><strong>Feature list:</strong> <code>CardGrid</code> with <code>Card</code> components</li>
      <li><strong>Key figures:</strong> <code>StatList</code> for KPIs and metrics</li>
      <li><strong>Chronology:</strong> <code>Timeline</code> for chronological sequences</li>
      <li><strong>Navigation:</strong> <code>SubpageNavigator</code> for series/chapters</li>
    </ul>
  },
  {
    title: "I want to cite sources",
    content: <ul className="space-y-0.5">
      <li><strong>Inline citation:</strong> <code>Citation</code> with <code>id="db-123"</code></li>
      <li><strong>Complete list at the end:</strong> Automatically via <code>ArticleReferencesSection</code> in the blog wrapper</li>
      <li><strong>Manual reference list:</strong> <code>AllReferencesFlat</code> with <code>pageFilter</code></li>
      <li><strong>Interactive search:</strong> <code>ReferencesSearch</code> for tool pages</li>
    </ul>
  }
]} />

### Article Template

```jsx
// File: 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: 'Meaningful Title with Keyword',
  description: 'Meta description (150-160 characters) with main keyword and value proposition.',
  author: 'Kurt Dirnbauer',
}

{/* Introduction: Problem → Solution → Benefit */}

Modern web applications face the challenge of uniting performance and developer experience. 
With **Server Components** and **Streaming**, Next.js 15 provides the tools 
to achieve both goals.

<Callout type="info" title="What You Will Learn">
- How to use Server Components optimally
- Implement streaming for a better UX
- Measure performance gains
</Callout>

## Main Body with a Clear H2 Structure

### Subsection for Details

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

{/* Visual enhancement with diagrams */}
<MermaidDiagram
  chart={\`flowchart LR
    Request --> Server
    Server --> Streaming
    Streaming --> Browser\`}
  caption="Request flow with streaming"
/>

## Conclusion

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

**Key takeaways:**
- Server Components reduce client-side JavaScript
- Streaming improves Time to First Byte
- Measurable performance gains from day 1

For individual consultation regarding your migration: [Get in touch](/kontakt)

export default withBlogLayout(article)