presseportale/_docs/COMPONENT_DOCUMENTATION.md

Komponenten-Dokumentation

Diese Dokumentation beschreibt alle wiederverwendbaren Blade-Komponenten für die Presseecho und Businessportal24 Themes.

Inhaltsverzeichnis

1. Layout-Komponenten
2. Navigation-Komponenten
3. Content-Komponenten
4. Card-Komponenten
5. Verwendungsbeispiele

---

Layout-Komponenten

Content-Layout

Pfad: resources/views/components/web/content-layout.blade.php

Hauptlayout für Unterseiten mit optionaler Sidebar.

Props:

• $sidebar (slot): Sidebar-Inhalt (optional)
• $sidebarPosition (string): Position der Sidebar - 'left' oder 'right' (default: 'right')

Beispiel ohne Sidebar:

<x-web.content-layout>
    <article>
        <!-- Ihr Content hier -->
    </article>
</x-web.content-layout>

Beispiel mit Sidebar:

<x-web.content-layout>
    <x-slot name="sidebar">
        <x-web.sidebar-widget title="Filter">
            <!-- Sidebar-Inhalte -->
        </x-web.sidebar-widget>
    </x-slot>
    
    <article>
        <!-- Hauptcontent -->
    </article>
</x-web.content-layout>

Page Header

Pfad: resources/views/components/web/page-header.blade.php

Header für Unterseiten mit Titel, Subtitle und optionalem Bild.

Props:

• $title (string, required): Hauptüberschrift
• $subtitle (string, optional): Untertitel
• $meta (slot, optional): Meta-Informationen (Badges, Datum, etc.)
• $image (string, optional): URL für Header-Bild
• $compact (bool): Kompakte Version (default: false)

Beispiel:

<x-web.page-header 
    title="Die Zukunft der KI"
    subtitle="Exklusive Einblicke in die Herausforderungen">
    <x-slot name="meta">
        <span class="badge badge-primary">Exklusiv-Interview</span>
        <span>17. Oktober 2024</span>
    </x-slot>
</x-web.page-header>

---

Navigation-Komponenten

Main Navigation

Pfad: resources/views/components/web/main-navigation.blade.php

Sticky Navigation für verschiedene Themes.

Props:

• $theme (string): Theme-Name - 'presseecho' oder 'businessportal24' (default: 'presseecho')
• $items (array, optional): Custom Navigation-Items

Beispiel Standard:

<x-web.main-navigation theme="presseecho" />

Beispiel Custom Items:

<x-web.main-navigation 
    theme="presseecho"
    :items="[
        ['label' => 'Kategorien', 'url' => '/kategorien'],
        ['label' => 'Autoren', 'url' => '/autoren'],
    ]" 
/>

Breadcrumb

Pfad: resources/views/components/web/breadcrumb.blade.php

Breadcrumb-Navigation für Unterseiten.

Props:

• $items (array, required): Array von Breadcrumb-Items

Beispiel:

<x-web.breadcrumb :items="[
    ['label' => 'Themendossiers', 'url' => '/themendossiers'],
    ['label' => 'KI & Innovation', 'url' => '/themendossiers/ki'],
    ['label' => 'Artikel-Titel']
]" />

---

Content-Komponenten

Section Header

Pfad: resources/views/components/web/section-header.blade.php

Header für Content-Sections.

Props:

• $title (string, required): Section-Titel
• $subtitle (string, optional): Subtitle
• $size (string): Größe - 'small', 'medium', 'large' (default: 'medium')

Beispiel:

<x-web.section-header 
    title="Neueste Analysen"
    subtitle="Fundierte Einschätzungen von Branchenexperten"
    size="medium" 
/>

Hero Banner

Pfad: resources/views/components/web/hero-banner.blade.php

Hero-Section für Startseiten.

Props:

• $theme (string): Theme-Name (default: 'presseecho')
• $title (slot): Hero-Titel
• $subtitle (slot): Hero-Subtitle

Beispiel:

<x-web.hero-banner theme="presseecho">
    <x-slot name="title">
        Exklusive Fachmeldungen <span class="opacity-50">für Ihre Recherche</span>
    </x-slot>
    <x-slot name="subtitle">
        Exklusive Wirtschaftsinformationen für Journalisten
    </x-slot>
</x-web.hero-banner>

Sidebar Widget

Pfad: resources/views/components/web/sidebar-widget.blade.php

Widget-Container für Sidebar-Elemente.

Props:

• $title (string, optional): Widget-Titel
• $icon (slot, optional): Icon als SVG

Beispiel:

<x-web.sidebar-widget title="Über den Autor">
    <div class="flex items-start gap-4">
        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)]">
            <!-- Avatar -->
        </div>
        <div>
            <h4 class="font-semibold">Dr. Maria Schmidt</h4>
            <p class="text-sm">Expertin für KI</p>
        </div>
    </div>
</x-web.sidebar-widget>

---

Card-Komponenten

Article Card

Pfad: resources/views/components/web/article-card.blade.php

Standard-Karte für Artikel.

Props:

• $article (array, required): Artikel-Daten

Erforderliche Array-Struktur:

$article = [
    'badge' => 'Analyse',
    'badgeType' => 'primary', // primary, secondary, success, warning
    'category' => 'Industrie 4.0',
    'categoryBadgeType' => 'secondary',
    'date' => '2024-10-16',
    'dateFormatted' => '16. Okt 2024',
    'title' => 'Artikeltitel',
    'teaser' => 'Kurzbeschreibung...',
    'author' => 'Thomas Müller',
    'authorInitials' => 'TM',
    'image' => 'https://...',
];

Beispiel:

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach ($articles as $article)
        <x-web.article-card :article="$article" />
    @endforeach
</div>

Dossier Card

Pfad: resources/views/components/web/dossier-card.blade.php

Karte für Themendossiers.

Props:

• $dossier (array, required): Dossier-Daten

Erforderliche Array-Struktur:

$dossier = [
    'title' => 'KI in der Industrie',
    'description' => 'Alle Facetten der künstlichen Intelligenz...',
    'articleCount' => 12,
    'image' => 'https://...',
];

Beispiel:

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach ($dossiers as $dossier)
        <x-web.dossier-card :dossier="$dossier" />
    @endforeach
</div>

Highlight Card

Pfad: resources/views/components/web/highlight-card.blade.php

Karte für Highlights (wird im Slider verwendet).

Props:

• $highlight (array, required): Highlight-Daten

Erforderliche Array-Struktur:

$highlight = [
    'badge' => 'Exklusiv-Interview',
    'badgeType' => 'primary',
    'industry' => 'KI & Innovation',
    'date' => '17. Oktober 2024',
    'title' => 'Die Zukunft der KI',
    'text' => 'Beschreibungstext...',
    'author' => 'Dr. Maria Schmidt',
    'authorRole' => 'Expertin für KI',
    'initials' => 'MS',
    'image' => 'https://...',
];

Highlights Slider

Pfad: resources/views/components/web/highlights-slider.blade.php

Interaktiver Slider für Highlights mit Navigation und Keyboard-Support.

Props:

• $highlights (array, required): Array von Highlight-Daten
• $theme (string): Theme-Name (default: 'presseecho')

Beispiel:

@php
    $highlights = [
        [
            'badge' => 'Exklusiv-Interview',
            'badgeType' => 'primary',
            'industry' => 'KI & Innovation',
            'date' => '17. Oktober 2024',
            'title' => 'Die Zukunft der KI',
            'text' => 'Interview-Text...',
            'author' => 'Dr. Maria Schmidt',
            'authorRole' => 'Expertin',
            'initials' => 'MS',
            'image' => 'https://...',
        ],
        // ... weitere Highlights
    ];
@endphp

<x-web.highlights-slider :highlights="$highlights" theme="presseecho" />

---

Verwendungsbeispiele

Beispiel 1: Artikel-Detailseite

@extends('web.layouts.web-master')

@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
    <livewire:web.burger-menu />
    <livewire:web.header />
    
    <x-web.main-navigation theme="presseecho" />
    
    <div class="container mx-auto px-4">
        <x-web.breadcrumb :items="[
            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
            ['label' => 'KI & Innovation', 'url' => '/ki'],
            ['label' => 'Artikel-Titel']
        ]" />
    </div>
    
    <x-web.page-header 
        title="Die Zukunft der KI"
        subtitle="Exklusive Einblicke">
        <x-slot name="meta">
            <span class="badge badge-primary">Interview</span>
            <span>17. Oktober 2024</span>
        </x-slot>
    </x-web.page-header>
    
    <x-web.content-layout>
        <x-slot name="sidebar">
            <x-web.sidebar-widget title="Über den Autor">
                <!-- Author Info -->
            </x-web.sidebar-widget>
        </x-slot>
        
        <article class="prose prose-lg">
            <!-- Artikel-Content -->
        </article>
    </x-web.content-layout>
    
    <livewire:web.footer />
</main>
@endsection

Beispiel 2: Kategorie-Übersicht

@extends('web.layouts.web-master')

@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
    <livewire:web.burger-menu />
    <livewire:web.header />
    
    <x-web.main-navigation theme="presseecho" />
    
    <div class="container mx-auto px-4">
        <x-web.breadcrumb :items="[
            ['label' => 'Themendossiers', 'url' => '/themendossiers'],
            ['label' => 'KI & Innovation']
        ]" />
    </div>
    
    <x-web.page-header 
        title="KI & Innovation"
        subtitle="Alle Artikel zum Thema"
        image="https://..." />
    
    <x-web.content-layout>
        <x-slot name="sidebar">
            <x-web.sidebar-widget title="Filter">
                <!-- Filter-Optionen -->
            </x-web.sidebar-widget>
        </x-slot>
        
        <div class="grid md:grid-cols-2 gap-6">
            @foreach ($articles as $article)
                <x-web.article-card :article="$article" />
            @endforeach
        </div>
    </x-web.content-layout>
    
    <livewire:web.footer />
</main>
@endsection

---

CSS-Klassen

Badge-Typen

• badge - Basis-Badge
• badge-primary - Primary-Farbe
• badge-secondary - Secondary-Farbe
• badge-success - Erfolg (Grün)
• badge-warning - Warnung (Gelb)

Button-Typen

• btn-primary - Primary-Button mit Gradient
• btn-secondary - Secondary-Button
• pagination-btn - Pagination-Button
• pagination-active - Aktive Pagination-Seite

Card-Typen

• card - Basis-Karte
• card-hover - Karte mit Hover-Effekt
• highlight-card - Highlight-Karte (Slider)

Layout-Klassen

• section-light-bg - Heller Section-Hintergrund
• section-gradient-bg - Gradient Section-Hintergrund
• page-header - Page-Header-Container
• page-header-compact - Kompakter Page-Header

---

Theme-Anpassung

Alle Komponenten respektieren die Theme-Variablen:

:root {
    --primary: /* HSL-Werte */
    --secondary: /* HSL-Werte */
    --color-primary: /* Hex-Werte */
    --color-secondary: /* Hex-Werte */
}

Presseecho:

• Primary: #345636 (Grün)
• Secondary: #6b8f71 (Hellgrün)

Businessportal24:

• Primary: #cf3628 (Rot)
• Secondary: #f0834a (Orange)

---

Best Practices

1. Komponenten-Verwendung:

   • Nutzen Sie immer die wiederverwendbaren Komponenten
   • Vermeiden Sie duplizierte HTML-Strukturen
   • Verwenden Sie Props für dynamische Inhalte

2. CSS-Klassen:

   • Nutzen Sie die vordefinierten CSS-Klassen aus shared-styles.css
   • Vermeiden Sie Inline-Styles, wo möglich
   • Theme-spezifische Overrides in den jeweiligen Theme-CSS-Dateien

3. Datenstruktur:

   • Halten Sie sich an die definierten Array-Strukturen
   • Verwenden Sie @php-Blöcke für Daten-Definitionen
   • Dokumentieren Sie Custom-Properties

4. Accessibility:

   • Verwenden Sie semantische HTML-Tags
   • Fügen Sie aria-label zu interaktiven Elementen hinzu
   • Testen Sie die Keyboard-Navigation

---

Support

Bei Fragen zur Verwendung der Komponenten:

• Siehe Beispiele unter /resources/views/web/examples/
• Konsultieren Sie diese Dokumentation
• Prüfen Sie die bestehenden Implementierungen in presseecho.blade.php