MDC-Komponenten

Autorenreferenz für die kanonischen Ginko-Docs-Prose-Komponenten und ihre zwei Erscheinungsbilder.

Ginko Docs stellt für jedes verfasste Konzept genau einen kanonischen Tag bereit. Für Prosa, Überschriften, Listen, Links, Bilder, Code-Fences und GFM-Hinweise bleibt natives Markdown der Standard.

Verwende inline nur statische skalare Props. Arrays, Objekte und boolesche Werte gehören in YAML-Frontmatter innerhalb der Komponente. Dynamische Bindings, Events, Direktiven, beliebige Styles und bloße boolesche Attribute werden abgelehnt.

Erscheinungsbild

Oberflächenkomponenten akzeptieren appearance="quiet" oder appearance="tint". Die Komponenten-Prop überschreibt die Familienkonfiguration, diese wiederum die globale Einstellung:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    prose: {
      appearance: "quiet",
      components: {
        callout: "tint",
        aside: "tint",
        excerpt: "tint",
        tabs: "tint",
      },
    },
  },
});

Die Familien Callouts, Aside, Excerpt, Cards, Read-more, Accordion, Tabs, Code, Files, API, Figure, Quiz, Steps und Timeline unterstützen beide Erscheinungsbilder.

Hinweise und ergänzende Prosa

Nutze GFM-Hinweise, wenn eine der fünf portablen Bedeutungen passt:

content/docs/routen.md

> [!WARNING]
> Halte übersetzte numerische Identitäten gleich.

Tag	Props	Inhalt
`note`, `info`, `success`, `warning`, `error`, `idea`	`title?`, `icon?`, `appearance?`	Prosa
`aside`	`label?`, `appearance?`	Prosa
`excerpt`	`label?`, `source?`, `appearance?`	Zitierte Prosa
`dropcap`	`lines?: 2 \| 3 \| 4`	Prosa
`kbd`	—	Inline-Tastenbezeichnung

Verwende :kbd[⌘] für eine Taste. Gewöhnliche >-Blockquotes bleiben Zitaten ohne Hinweisbedeutung vorbehalten.

Tag	Props	Inhalt
`accordion`	`type?`, `collapsible?`, `defaultValue?`, `appearance?`	`accordion-item`-Kinder
`accordion-item`	`value?`, `title?`, `content?`	Prosa
`tabs`	`layout?: separate \| line`, `padded?`, `appearance?`	`tab`-Kinder
`tab`	`label?`, `icon?`	Prosa
`read-more`	`title?`, `links: json`, `appearance?`	Kein Prosa-Slot
`toc`	`title?`, `depth?`, `open?`	Kein Prosa-Slot

Boolesche Werte wie collapsible und padded gehören in YAML.

Karten und Layout

Tag	Props	Inhalt
`cards`	`cols?: 1 \| 2 \| 3`, `appearance?`	`card`-Kinder
`card`	`title?`, `description?`, `footer?`, `to?`, `target?`, `icon?`, `iconColor?`, `img?`, `showLinkIcon?`, `horizontal?`, `appearance?`	Prosa und benannte Slots
`layout`	`type?`	`column`-Kinder
`column`	`size?: sm \| md \| lg`	Prosa
`center`	`size?`, `max?`, `type?`	Prosa

content/docs/auswahl.md

::cards{cols="2"}
:::card{title="Verfassen" icon="lucide:file-pen-line" to="/docs/authoring"}
Schreibe kanonisches Markdown.
:::
:::card{title="Veröffentlichen" icon="lucide:rocket" to="/docs/deployment"}
Baue Leser- und Agentenausgaben.
:::
::

Sequenzen

Tag	Props	Inhalt
`steps`	`mode?: icons \| numbered`, `appearance?`	Überschriften der Ebene drei mit vollständigem Markdown
`timeline`	`appearance?`	`timeline-item`-Kinder
`timeline-item`	`date?`, `label?`, `title?`, `icon?`, `active?`	Prosa

content/docs/installation.md

::steps{mode="numbered"}
### Installieren

Füge die Pakete hinzu.

### Konfigurieren

Erweitere den Layer.
::

Setze active: true für einen Timeline-Eintrag in dessen YAML-Block.

Code und Dateien

Tag	Props	Inhalt
`code-group`	`appearance?`	Beschriftete Code-Fences
`code-tree`	`defaultValue?`, `expandAll?`, `appearance?`	Beschriftete Code-Fences
`collapse`	`appearance?`	Langer Prosa- oder Code-Block
`files`	`active?`, `annotations?`, `appearance?`	Eine verschachtelte Markdown-Liste

content/docs/projektstruktur.md

::files
---
active: app/app.config.ts
annotations:
  app/app.config.ts: Website-Identität
---
- `app`
  - `app.config.ts`
  - `components`
    - `FeaturePanel.vue`
::

Code-Fences verwenden nur Sprache, [Dateiname] und Zeilenmarkierungen. Für übergeordnetes Verhalten dienen collapse, code-group und code-tree.

API-Daten

api akzeptiert title?, icon?, method?, path?, groups? und appearance?. Schreibe die bestehende groups-Struktur direkt in das Komponenten-YAML:

content/docs/api.md

::api{title="figure" icon="lucide:image"}
---
groups:
  - label: Props
    entries:
      - name: src
        annotation: asset
        required: true
        description: Öffentliche Bildreferenz.
---
::

Bilder

Verfasse gewöhnliche Bilder mit Markdown. Nutze figure nur für explizite Caption, Abmessungen, Bleed, Seitenverhältnis, Fit, Zoom oder Appearance.

Tag	Props
`figure`	`src`, `alt`, `caption?`, `width?`, `height?`, `bleed?`, `aspect?`, `fit?`, `zoom?`, `appearance?`

Boolesche zoom-Werte gehören in YAML. Ohne Override folgen Figures ginkoDocs.images.zoom.

Quiz

Tag	Props	Inhalt
`quiz`	Labels, Titel, Beschreibung, `appearance?`	`quiz-question`-Kinder
`quiz-question`	`question`, `type?`, `options?`, optionale Interaktionslabels	Erklärende Prosa

content/docs/pruefung.md

::quiz{title="Verständnis prüfen"}
:::quiz-question
---
question: Welches Paket besitzt die Dokumentidentität?
options:
  - text: Ginko Content
    correct: true
  - text: Ginko Docs
    correct: false
---
Ginko Content besitzt kanonische Dokumentidentität und Routen.
:::
::

Tag-Map erweitern

Führe ginkoDocsComponentTags und ginkoDocsComponentPolicy aus @lupinum/ginko-docs/components zusammen, wenn du eine verfassbare Komponente hinzufügst. Registriere ihre Vue-Komponente global und ergänze einen Agent-Serializer, wenn die standardmäßige XML-Darstellung nicht genügt.