Komponenten

Dieser Bereich gibt dir einen schnellen Überblick über häufig genutzte Komponenten aus @document-writing-tools/kernux-nextra-theme.

Import

import {
  CallToAction,
  Faqs,
  Features,
  Feedback,
  ReviewCarousel,
  LogoCloud,
} from '@document-writing-tools/kernux-nextra-theme'

CallToAction

Verwendbar für Handlungsaufforderungen am Seitenende oder zwischen Inhaltsblöcken.

Parameter:

• headline (optional): Überschrift
• description (optional): Beschreibungstext
• linkLabel (optional) + link (optional): Link-Button (nur sichtbar, wenn link gesetzt ist)
• actionLabel (optional) + action (optional): Action-Button/Callback (nur sichtbar, wenn action gesetzt ist)
• btnClassName (optional): Eigene Klassen für Buttons
• className (optional): Eigene Klassen für den Wrapper

<CallToAction
  headline="Jetzt starten"
  description="Lege dein erstes Dokumentationsprojekt an."
  linkLabel="Zum Leitfaden"
  link="/fuer-entwickler-innen"
/>

Faqs

Für strukturierte Frage-Antwort-Bereiche.

Parameter:

• faqs (optional): Array mit { question, answer }
• headline (optional): Überschrift
• actionLabel (optional) + actionHref (optional): CTA unter der Überschrift
• className (optional): Eigene Klassen für den Wrapper

<Faqs
  headline="Häufige Fragen"
  faqs={[
    {
      question: 'Wie starte ich lokal?',
      answer: 'Mit npm run dev im Theme-Repository und verlinkten Paketen.',
    },
  ]}
  actionLabel="Alle FAQs"
  actionHref="/faq"
/>

Features

Für Feature-Listen oder Funktionsübersichten.

Parameter:

• headline (optional): Überschrift
• features (optional): Array mit { title, description, img, safariImg, alt }
• actionLabel (optional) + actionHref (optional): CTA-Button
• btnClassName (optional): Eigene Klassen für den CTA-Button
• className (optional): Eigene Klassen für den Wrapper

<Features
  headline="Funktionsumfang"
  features={[
    {
      title: 'Suche',
      description: 'Volltextsuche über Inhalte',
      img: '//assets/features/suche.svg',
      safariImg: '//assets/features/suche-fallback.png',
      alt: 'Feature Suche',
    },
    {
      title: 'Navigation',
      description: 'Sidebar und TOC',
      img: '//assets/features/navigation.svg',
      safariImg: '//assets/features/navigation-fallback.png',
      alt: 'Feature Navigation',
    },
  ]}
  actionLabel="Mehr erfahren"
  actionHref="/fuer-entwickler-innen"
/>

Feedback

Für integriertes Seitenfeedback (abhängig von Projektkonfiguration).

Nutzung

1. Automatisch über theme.config

   • Definiere die feedback-Props in der Theme-Konfiguration.
   • Die Feedback-Sektion wird dann automatisch am Seitenende vor dem Footer gerendert.

2. Manuell pro Seite mit <Feedback />

   • Importiere die Komponente direkt in einer Seite und übergib die benötigten Props.
   • Damit steuerst du die Position der Sektion im Seiteninhalt selbst.

Top-Level-Parameter:

• feedbackServerUrl (required): URL des Feedback-Servers
• gitlabProjectId (required): Zielprojekt-ID in GitLab
• labels (required): Labels für das erstellte Issue
• requiredText (required): Hinweistext über Pflichtfelder
• fields (required): Feldkonfiguration (mindestens email und message)
• privacyConsent (required): Text- und Link-Konfiguration für die Datenschutz-Einwilligung
• afterSubmit (required): Texte nach dem Senden (Success/Error und optionaler Button-Label)
• headline (optional): Überschrift des Feedback-Bereichs
• description (optional): Einleitungstext über dem Formular
• buttonText (optional): Beschriftung des Submit-Buttons,
  Default: "Absenden"
• shouldCreateConfidentialIssue (optional): Steuert, ob ein vertrauliches oder öffentliches Issue erzeugt wird; Default: false
• notice (conditionally required): Hinweisbox bei öffentlichen Issues.
  Wenn shouldCreateConfidentialIssue = false, sollte notice mit allen Unterfeldern gesetzt werden
• Styling-Klassen (alle optional): className, headlineClassName, descriptionClassName, inputClassName, inputLabelClassName, textareaClassName, checkboxClassName, btnClassName

Objekt-Props im Detail:

• fields (required)

  • email (required): Felddefinition für E-Mail
    • label (required)
    • placeholder (required)
    • type (optional), z. B. "email"
    • required (optional), Default: true
  • message (required): Felddefinition für Nachricht
    • label (required)
    • placeholder (required)
    • type (optional)
  • <customFieldName> (optional): zusätzliche Felder (z. B. organization, department)
    • label (required)
    • placeholder (required)
    • type (optional)
    • required (optional), Default: true

• privacyConsent (required)

  • textBeforeLink (required)
  • link (required)
    • label (required)
    • href (required)
  • textAfterLink (required)

• afterSubmit (required)

  • successText (required)
  • errorText (required)
  • buttonLabel (optional)

• notice (conditionally required, siehe oben)

  • title (required)
  • body (required)
  • link (required)
    • href (required)
    • label (required)

Wichtiges Verhalten:

• Die Feldreihenfolge im Formular entspricht der Reihenfolge der Keys in fields.
• Du kannst die Reihenfolge beliebig ändern, indem du die Keys in fields umsortierst.
• Für alle Felder gilt standardmäßig required = true (außer message, das immer Pflicht ist und nicht umgestellt werden kann).

<Feedback
  feedbackServerUrl="https://deine-feedback-api.beispiel.de"
  gitlabProjectId="12345"
  labels={['dokumentation', 'feedback']}
  requiredText="Pflichtfelder sind mit * markiert"
  fields={{
    organization: {
      label: 'Organisation',
      placeholder: 'Behörde / Team',
      required: false,
    },
    email: {
      label: 'E-Mail',
      placeholder: 'max.mustermann@beispiel.de',
      type: 'email',
    },
    message: {
      label: 'Feedback',
      placeholder: 'Was können wir verbessern?',
    },
  }}
  shouldCreateConfidentialIssue={false}
  notice={{
    title: 'Hinweis zur Veröffentlichung',
    body: 'Dein Feedback wird als öffentliches Issue erstellt. Bitte keine sensiblen Daten teilen. Mehr Infos: ',
    link: { label: 'Sicherheitsleitfaden', href: '/sicherheit' },
  }}
  privacyConsent={{
    textBeforeLink: 'Ich stimme der ',
    link: { label: 'Datenschutzerklärung', href: '/datenschutz' },
    textAfterLink: ' zu.',
  }}
  afterSubmit={{
    successText: 'Vielen Dank für dein Feedback!',
    errorText: 'Beim Senden ist ein Fehler aufgetreten.',
    buttonLabel: 'Feedback anzeigen',
  }}
/>

ReviewCarousel

Zum Anzeigen von Referenzen/Reviews im Carousel.

Parameter:

• reviews (optional): Array mit Review
• cardClassName, blockuoteClassName, authorClassName, titleClassName (alle optional): Styling der Karten
• className (optional): Eigene Klassen für den Wrapper

Review besteht aus:

• quote (required)
• author (required)
• title (required)
• url (required)

<ReviewCarousel
  reviews={[
    {
      quote: 'Sehr gute Entwicklererfahrung.',
      author: 'Max Mustermann',
      title: 'Frontend Entwickler',
      url: '//assets/reviews/max-mustermann.jpg',
    },
    {
      quote: 'Schneller Einstieg in Nextra.',
      author: 'Erika Musterfrau',
      title: 'Tech Writerin',
      url: '//assets/reviews/erika-musterfrau.jpg',
    },
  ]}
/>

LogoCloud

Zum Anzeigen einer Logo-Leiste, z. B. für Partner, Referenzen oder unterstützende Organisationen.

Parameter:

• headline (optional): Überschrift über der Logo-Leiste
• headlineClassName (optional): Eigene Klassen für die Überschrift
• logos (required): Array mit { src (required), alt (required), className (optional), style (optional), href (optional) }
• divider (optional): Trenner-/Layout-Variante (true = mit Divider, false = Grid)
• className (optional): Eigene Klassen für den Wrapper

<LogoCloud
  headline="Unterstützt von"
  divider={true}
  logos={[
    {
      src: '//assets/logos/partner-1.svg',
      alt: 'Partner 1',
      href: 'https://example.org',
    },
    {
      src: '//assets/logos/partner-2.svg',
      alt: 'Partner 2',
    },
  ]}
/>

Hinweis

Die exakten Props können sich je Version ändern. Prüfe bei Bedarf die Typdefinitionen im Quellprojekt und teste Komponenten direkt im Developer Mode.

Zurück zum Überblick.