Komponenten-Showcase
Vergleiche alle Ginko-Docs-Prose-Komponenten in Quiet und Tint.
Dieses Labor deckt jeden öffentlichen Autoren-Tag ab. Oberflächen erscheinen in beiden Stilen; strukturelle Helfer einmal.
Hinweise und Prosa
Note
GFM-Hinweise bleiben außerhalb von Ginko Docs lesbar.
Warning
Strukturierte Werte und boolesche Optionen gehören in Komponenten-YAML.
Quiet
Ein Inhaltsmodell
Navigation, Suche und Agenten-Markdown entstehen aus demselben Dokument.
Tint
Ein Inhaltsmodell
Navigation, Suche und Agenten-Markdown entstehen aus demselben Dokument.
Validierung bestanden
Inhalt und übersetzte Identitäten stimmen überein.
Übersetzungen prüfen
Halte entsprechende Sprachbäume strukturell gleich.
Route nicht verfügbar
Die Collection enthält kein passendes Dokument.
Redaktionelle Idee
Beginne mit einem funktionierenden Beispiel.
Quiet
Tint
Auszug
Ein kanonisches Dokument liefert alle Leser- und Agentenausgaben.
Auszug
Ein kanonisches Dokument liefert alle Leser- und Agentenausgaben.
Ginko Docs verwandelt strukturiertes Markdown in eine Dokumentations-Site für Leser und Software-Agenten. Die Initiale gibt längerer Prosa einen deutlichen Einstieg, ohne ihre Quellstruktur zu verändern.
Drücke ⌘ + K, um die Suche zu öffnen.
> [!NOTE]
> Nativer GFM-Hinweis.
::note{title="Semantischer Hinweis" appearance="quiet"}
Prosa bleibt im Slot.
::
::aside{label="Kontext" appearance="tint"}
Ergänzende Prosa.
::
::excerpt{label="Auszug" source="Quellentitel" appearance="tint"}
Zitierte Prosa.
::
::dropcap{lines="3"}
Eröffnungsabsatz.
::
Drücke :kbd[⌘] + :kbd[K].Akkordeons
Quiet
Ginko Content besitzt Identität, Routen, Sprachen, Suche und Agentenausgabe.
Ginko Docs besitzt Shell und Komponentensystem.
Tint
Ginko Content besitzt Identität, Routen, Sprachen, Suche und Agentenausgabe.
Ginko Docs besitzt Shell und Komponentensystem.
Vollständiges Markdown
Akkordeon-Inhalte unterstützen gewöhnliches Markdown und verschachtelte Ginko-Komponenten.
- Listen behalten ihre Struktur.
- Interaktive Kindelemente behalten ihren Zustand, wenn das Akkordeon geschlossen wird.
Inhalt hinzufügen
Schreibe Prosa und verschachtelte Komponenten in den Inhalt des Elements.
Ergebnis prüfen
Schließe und öffne das Akkordeon erneut, ohne den Inhalt zu verlieren.
::accordion{appearance="tint"}
:::accordion-item{value="portable" title="Ist die Syntax portabel?"}
Die Antwort wird als Prosa verfasst.
:::
::Karten und Links
Quiet
Inhalte verfassen
Schreibe stabiles Markdown.
Nutze Komponenten, wenn Struktur das Verständnis verbessert.
Website konfigurieren
Wähle Identität und Navigation.
Consumer-Konfiguration wird mit Layer-Standards zusammengeführt.
Tint
Inhalte verfassen
Schreibe stabiles Markdown.
Nutze Komponenten, wenn Struktur das Verständnis verbessert.
Website konfigurieren
Wähle Identität und Navigation.
Consumer-Konfiguration wird mit Layer-Standards zusammengeführt.
Quiet
Tint
::cards{cols="2" appearance="quiet"}
:::card{title="Inhalte verfassen" icon="lucide:file-pen-line" to="$docs/authoring/write-content"}
Kartenprosa.
:::
::
::read-more{title="Weiterlesen" appearance="tint"}
---
links:
- title: Inhaltskonfiguration
to: $docs/reference/content-config
icon: lucide:database
---
::Layout
Zentrierter Inhalt behält bewusst eine schmale Zeilenlänge.
Inhalt
Markdown definiert veröffentlichte Dokumente.
Darstellung
Der Layer rendert sie durch eine gemeinsame Shell.
::center{size="lg" type="border"}
Zentrierte Prosa.
::
::layout{type="border"}
:::column{size="sm"}
Erste Spalte.
:::
:::column{size="md"}
Zweite Spalte.
:::
::Schritte und Zeitleiste
Quiet
Installieren
Füge die Pakete hinzu.
Konfigurieren
Erweitere den Layer.
Veröffentlichen
Baue die Dokumentation.
Tint
Installieren
Füge die Pakete hinzu.
Konfigurieren
Erweitere den Layer.
Veröffentlichen
Baue die Dokumentation.
Quiet
Konsistente Prosa
September 2026AktivQuiet und Tint teilen Markup, Zustände und Barrierefreiheit.
Veröffentlichen
Als NächstesDas gepackte Release-Gate zertifiziert das Ergebnis.
Tint
Konsistente Prosa
September 2026AktivQuiet und Tint teilen Markup, Zustände und Barrierefreiheit.
Veröffentlichen
Als NächstesDas gepackte Release-Gate zertifiziert das Ergebnis.
::steps{mode="numbered" appearance="quiet"}
### Installieren
Füge die Pakete hinzu.
### Veröffentlichen
Baue die Website.
::
::timeline{appearance="tint"}
:::timeline-item
---
date: Juli 2026
title: Aktiver Meilenstein
active: true
---
Meilenstein-Prosa.
:::
::Tabs und Code
Quiet
Leser erhalten durchsuchbare lokalisierte Seiten.
Tint
Leser erhalten durchsuchbare lokalisierte Seiten.
Line-Layout
Installiere mit
pnpm add -D @lupinum/ginko-docs.Quiet-Codegruppe
pnpm add -D @lupinum/ginko-docsTint-Codegruppe
pnpm add -D @lupinum/ginko-docsQuiet-Collapse
export default defineAppConfig({
ginkoDocs: {
prose: { appearance: "quiet", components: { tabs: "tint" } },
},
});Tint-Collapse
export default defineAppConfig({
ginkoDocs: {
prose: { appearance: "quiet", components: { tabs: "tint" } },
},
});Quiet-Codebaum
export default defineAppConfig({ ginkoDocs: { prose: { appearance: "quiet" } } });Tint-Codebaum
export default defineAppConfig({ ginkoDocs: { prose: { appearance: "quiet" } } });::tabs{layout="line" appearance="quiet"}
:::tab{label="pnpm" icon="logos:pnpm"}
Installationsanleitung.
:::
::
::code-group{appearance="quiet"}
```sh [pnpm]
pnpm add -D @lupinum/ginko-docs
```
::
::collapse{appearance="tint"}
```ts [app.config.ts]
export default defineAppConfig({});
```
::
::code-tree{defaultValue="app.config.ts" appearance="tint"}
```ts [app.config.ts]
export default defineAppConfig({});
```
::Dateien und API
Quiet
- app
- app.config.tsWebsite-Identität
- components
- FeaturePanel.vue
- content
- 1.erste-schritte.md
Tint
- app
- app.config.tsWebsite-Identität
- components
- FeaturePanel.vue
- content
- 1.erste-schritte.md
Quiet
GET/api/content/docs
body: MarkdownRoot required Validierter Markdown-AST.
toc?: TocAbgeleitete Gliederung.
Tint
GET/api/content/docs
body: MarkdownRoot required Validierter Markdown-AST.
toc?: TocAbgeleitete Gliederung.
::files{appearance="tint"}
---
active: content/1.index.md
annotations:
content/1.index.md: Einstiegsdokument
---
- `content`
- `1.index.md`
::
::api{method="GET" path="/api/content/docs" appearance="tint"}
---
groups:
- label: Antwort
entries:
- name: body
annotation: MarkdownRoot
required: true
description: Validierter Markdown-AST.
---
::Bilder
Einfaches Markdown-Bild
Quiet-Figure
Tint-Figure
::figure{src="/images/content-demo-detail.png" alt="Beschreibender Alternativtext" caption="Explizite Caption." aspect="video" fit="cover" appearance="quiet"}
::Quiz
Quiet
Wissenstest
Antworte, um die Erklärung zu sehen.
Welches Paket besitzt die Dokumentidentität?
Tint
Wissenstest
Antworte, um die Erklärung zu sehen.
Welches Paket besitzt die Dokumentidentität?
::quiz{title="Wissenstest" appearance="tint"}
:::quiz-question
---
question: Welche Antwort ist richtig?
options:
- text: Diese
correct: true
- text: Nicht diese
correct: false
---
Der Body erklärt die Antwort.
:::
::Navigation auf der Seite
::toc{title="Auf dieser Seite"}
::