Strukturelemente

Diese Seite bündelt die wiederverwendbaren Inhaltsbausteine der öffentlichen Workspace-Dokumentation. Sie dient als visuelle Referenz für Typografie, Farben, Tabellen, Code und Hinweisboxen.

Inline-Elemente

Inline-Code markiert kurze technische Werte wie config.json, /docs/de/ oder DOCS_SERVER_VERSION direkt im Textfluss.

Tastaturkürzel werden als KBD gerendert: Ctrl K öffnet die Suche, Esc schließt ein Overlay.

Badges verwenden die Monster-Badge-Klassen: Standard Optional Aktiv Prüfen Fehler

API-Endpunkte werden kompakt mit Methode und Pfad dargestellt: GET/api/workspaces POST/api/workspaces DELETE/api/workspaces/{id}

Listen

• Öffentliche Produkttexte verwenden Workspace.
• Beispiele verwenden neutrale, realistisch klingende Platzhalter.
• Links zeigen auf öffentliche Ziele oder kuratierte Assets.

Tabellen

Info-Box

Tipp-Box

Warnungs-Box

Gefahren-Box

Code-Blöcke

Mehrzeilige Code-Blöcke zeigen Befehle, Konfigurationen oder API-Beispiele.

curl -s https://workspace.example/api/status
printf 'Status geprüft\n'

{
  "name": "Workspace Docs",
  "basePath": "/docs/",
  "public": true
}

Code-Tabs

Mehrere gleichwertige Implementierungen werden als monster-tabs gerendert. Das erste Beispiel ist initial aktiv.

curl -H "Accept: application/json" \
  https://workspace.example/api/status

response="$(curl -s https://workspace.example/api/status)"
printf '%s\n' "$response"

resp, err := http.Get("https://workspace.example/api/status")
if err != nil {
  return err
}
defer resp.Body.Close()

$response = file_get_contents('https://workspace.example/api/status');
echo $response;

Diagramme

Diagramme werden als DOT-Codeblock geschrieben und im Build lokal als SVG gerendert. Sie eignen sich für kompakte Architektur- und Betriebsbilder.

Screenshots

Screenshots verwenden den gleichen Filemanager-Rahmen wie Video- und Screenshot-Aufgaben. Jedes Screenshot-Asset braucht ein echtes helles Bild und ein echtes dunkles Bild mit dem Suffix -dark, zum Beispiel workspace-login.png und workspace-login-dark.png. Der Schalter an der Bildbeschriftung tauscht nur die Abbildung und den Rahmen; die Docs-Seite selbst bleibt bei der System-Farbwahl. Ein Klick auf den Screenshot öffnet die Abbildung in einer großen Ansicht. Die Bilder müssen frei von personenbezogenen Daten, internen Hosts und lokalen Zufallsdaten sein.

API-Dokumentationsblock

Ein API-Dokumentationsblock beschreibt einzelne, öffentlich kuratierte Endpunkte. Die Inhalte können aus der OpenAPI-Spezifikation übernommen werden, bleiben aber bewusst redaktionell kontrolliert.

curl -X POST https://workspace.example/api/workspaces \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"Partner Portal","slug":"partner-portal"}'

body := strings.NewReader(`{"name":"Partner Portal","slug":"partner-portal"}`)
req, err := http.NewRequest(http.MethodPost, "https://workspace.example/api/workspaces", body)
if err != nil {
  return err
}
req.Header.Set("Authorization", "Bearer "+token)
req.Header.Set("Content-Type", "application/json")

$payload = json_encode([
    'name' => 'Partner Portal',
    'slug' => 'partner-portal',
]);
$context = stream_context_create([
    'http' => [
        'method' => 'POST',
        'header' => "Authorization: Bearer $token\r\nContent-Type: application/json\r\n",
        'content' => $payload,
    ],
]);
$response = file_get_contents('https://workspace.example/api/workspaces', false, $context);

Überschrift Dritter Ebene

Unterabschnitt

Der Unterabschnitt ist bewusst vorhanden, damit die Seite auch die Inhaltsnavigation mit mehreren Überschriften prüft.