DSL-Referenz & Demo

Block-Direktiven

Block-Direktiven sind die maechtigsten Bausteine des CMS-Markdown-DSL. Sie umschliessen Inhalte mit :::name{attrs} am Anfang und ::: am Ende und erzeugen komplexe, strukturierte Layouts. Von mehrspaltigem Text ueber interaktive Tabs bis hin zu aufklappbaren Akkordeons — Block-Direktiven verwandeln einfaches Markdown in reichhaltige, interaktive Dokumentationsseiten.

Insgesamt stehen 21 Block-Direktiven zur Verfuegung. Jede Direktive hat einen eindeutigen Namen, optionale Attribute in geschweiften Klammern und kann beliebigen Markdown-Inhalt enthalten — einschliesslich anderer Direktiven, Code-Bloecke, Tabellen, Mathematik und Bilder.

Block-Direktiven werden vom remark-directive-Plugin als Container-Direktiven geparst und vom CMSViewer ueber die getDirectiveRenderer-Funktion den entsprechenden React-Komponenten zugeordnet. Die Zuordnung erfolgt anhand des Namens nach dem ::: Praefix.

Columns

Das Spaltenlayout ist eines der am haeufigsten genutzten Elemente. Mit :::columns{cols=N} und ::col als Trenner lassen sich Inhalte nebeneinander anzeigen. Die Spalten sind vollstaendig responsiv — auf Mobilgeraeten werden sie automatisch untereinander gestapelt, auf dem Desktop nebeneinander dargestellt. Jede Spalte kann beliebigen Markdown-Inhalt enthalten: Text, Code-Bloecke, Bilder, Listen, Tabellen und sogar verschachtelte Direktiven.

Das cols-Attribut akzeptiert Werte von 2 bis 4. Standard ist 2 Spalten. Das zugrunde liegende CSS-Grid verteilt die verfuegbare Breite gleichmaessig auf alle Spalten mit einem konsistenten Abstand von 1.5rem zwischen den Spalten.

void MovementSystem::tick(Registry& r, float dt) {
    for (auto [e, pos, vel] : r.view<Position, Velocity>().each()) {
        pos.x += vel.dx * dt;
        pos.y += vel.dy * dt;
        pos.z += vel.dz * dt;
    }
}

@system(s => s.after(NetworkInputSystem))
export class MovementSystem extends System {
    private readonly query = this.query(
        q => q.current.with(Position, Velocity).write
    );

    execute(): void {
        for (const entity of this.query.current) {
            const pos = entity.write(Position);
            const vel = entity.read(Velocity);
            pos.x += vel.dx * this.delta;
        }
    }
}

Cards

Karten eignen sich hervorragend fuer Feature-Uebersichten, Modulbeschreibungen oder konzeptuelle Zusammenfassungen. Jede Karte hat ein NerdFont-Icon und einen Titel als Header, gefolgt von einer kurzen Beschreibung als Body-Text. Das cols-Attribut des :::cards-Containers bestimmt die Spaltenanzahl (Standard: 3). Karten nutzen ein Compose-Stil-Layout mit Hover-Animation und dezenter Rand-Hervorhebung.

Figure

Mit :::figure lassen sich Bilder mit Bildunterschrift und optionaler Positionierung einbetten. Das align-Attribut unterstuetzt left, right und center — bei left und right wird das Bild floated, sodass umgebender Text daneben fliessen kann. Das width-Attribut akzeptiert jeden CSS-Laengenwert. Die Bildunterschrift wird automatisch aus dem letzten *kursiven* Element innerhalb des Containers extrahiert.

Volle Breite (Standard)

Ohne width-Attribut nutzt die Figure die gesamte verfuegbare Breite des Containers — ideal fuer Banner, Panoramen und Hintergrundbilder.

Reduzierte Breite (60%)

Mit width="60%" wird das Bild zentriert mit begrenzter Breite dargestellt — gut fuer Screenshots und Detail-Aufnahmen.

Links gefloated

Mit align="left" wird das Bild links floated und der Text fliesst rechts daneben. Ideal fuer Inline-Illustrationen innerhalb von Absaetzen.

Die Hausbau-Simulation in ASE ermoeglicht es Spielern, Strukturen an jedem Punkt der Welt zu platzieren. Durch das Entity-per-Item-Muster wird jedes Bauelement — jede Wand, jedes Fenster, jede Tuer — als eigene Entitaet verwaltet. Das erlaubt praezise Physik-Interaktionen, selektive Zerstoerung und dynamische Beleuchtungsaenderungen pro Element. Terrain-Anpassungen werden persistent gespeichert und ueber den Hub an alle verbundenen Clients repliziert. Die Kombination aus Voxel-basiertem Terrain und Entity-basierter Architektur schafft eine nahtlose Uebergangszone zwischen natuerlicher Landschaft und Spieler-Bauwerken.

Rechts gefloated

Mit align="right" fliesst der Text links neben dem Bild. Nuetzlich fuer ergaenzende Visualisierungen.

Das Ausruestungssystem in ASE folgt strikt dem Entity-per-Item-Muster: Jedes Ruestungsteil ist eine eigene Entitaet mit Referenz auf den Traeger. Ein Pferd mit voller Ruestung besteht aus dutzenden verknuepfter Entitaeten — Helm, Brustpanzer, Beinschuetzer, Sattel, Zuegel — die unabhaengig voneinander beschaedigt, repariert oder ausgetauscht werden koennen. Tags steuern die Sichtbarkeit und das Verhalten: EquippedTag, DamagedTag, EnchantedTag. Kein Array, kein Count-Feld — reine Entity-Komposition.

Weitere Projektbilder

Aside

Die Aside-Direktive erzeugt eine stilisierte Seitenleiste fuer ergaenzende Informationen, Hintergrundwissen oder interessante Fakten, die den Lesefluss des Haupttextes nicht unterbrechen sollen. Der optionale title-Attribut erscheint als Ueberschrift der Box. Aside-Bloecke haben einen dezenten linken Rand in PANEL_CYAN und einen leicht abgehobenen Hintergrund.

Gallery

Die Gallery-Direktive erzeugt ein responsives Bildergitter. Mit dem lightbox-Flag-Attribut (ohne Wert) wird eine Vollbild-Lightbox aktiviert — ein Klick auf ein Bild oeffnet es als Overlay ueber der gesamten Seite mit gedimmtem Hintergrund. Die Navigation zwischen Bildern erfolgt ueber Pfeiltasten oder Klick auf Vorwaerts/Rueckwaerts-Bereiche. Das cols-Attribut bestimmt die Spaltenanzahl (Standard: 3).

Author

Die Author-Direktive erzeugt eine professionelle Profilkarte mit Avatar-Bild, Name und Rolle. Ideal fuer Dokumentationsseiten, Blog-Eintraege oder Team-Vorstellungen. Der Body-Text erscheint als Biographie unterhalb des Namens. Alle drei Attribute (name, avatar, role) werden als separate UI-Elemente gerendert.

Accordion

Aufklappbare Sektionen mit :::accordion als Container und ::panel{title="..."} als Marker fuer jedes Panel. Nur ein Panel ist gleichzeitig geoeffnet — das Oeffnen eines Panels schliesst automatisch das zuvor geoeffnete. Der Titel erscheint als klickbare Leiste mit Plus/Minus-Icon. Der Content wird erst beim Aufklappen sichtbar und ist kleiner als der Header-Text fuer klare visuelle Hierarchie.

Tabs

Registerkarten sind ideal fuer Plattformvergleiche, Sprachvarianten oder alternative Implementierungen desselben Konzepts. Jeder Tab hat ein label-Attribut, das als Reitertext angezeigt wird. Nur der aktuell ausgewaehlte Tab zeigt seinen Inhalt. Tabs koennen beliebigen Markdown-Inhalt enthalten, einschliesslich Code-Bloecke, Tabellen und verschachtelte Direktiven.

Das Tab-System nutzt intern ein aehnliches Gruppierungsmuster wie das Accordion: ::tab{label="..."} ist eine Leaf-Direktive, deren folgender Inhalt automatisch dem jeweiligen Tab zugeordnet wird.

// Component: reine Datenstruktur, header-only
struct TerrainChunkComponent {
    float height_map[64 * 64] = {};  // 64x64 Hoehenkarte
    uint32_t chunk_x = 0;            // Chunk-Position X
    uint32_t chunk_z = 0;            // Chunk-Position Z
    bool dirty = false;               // Aenderungs-Flag
};

// System: zustandslose Logik
class TerrainMutSystem : public ecs::System {
public:
    const char* name() const override { return "TerrainMutSystem"; }

    void tick(Registry& registry, float dt) override {
        auto view = registry.view<TerrainChunkComponent, TerrainMutReqComponent>();
        for (auto [entity, chunk, req] : view.each()) {
            apply_heightmap_mutation(chunk, req);
            chunk.dirty = true;
            registry.remove<TerrainMutReqComponent>(entity);
        }
    }
};

// Component: becsy-Deklaration mit @field-Dekoratoren
@component
export class TerrainChunkComponent {
    @field.float32 declare heightMap: Float32Array;
    @field.uint32 declare chunkX: number;
    @field.uint32 declare chunkZ: number;
    @field.boolean declare dirty: boolean;
}

// System: becsy-System mit Queries als Klassenmitglieder
@system(s => s
    .after(TerrainNetworkInputSystem)
    .inAnyOrderWithWritersOf(TerrainChunkComponent)
)
export class TerrainRenderSyncSystem extends System {
    private readonly dirtyChunks = this.query(
        q => q.current.with(TerrainChunkComponent).write
            .addedOrChanged
    );

    execute(): void {
        for (const entity of this.dirtyChunks.current) {
            const chunk = entity.write(TerrainChunkComponent);
            if (chunk.dirty) {
                this.updateMesh(chunk);
                chunk.dirty = false;
            }
        }
    }
}

// Module schreiben in den Hub (ase-pl-sky)
void SkyCalcSystem::tick(Registry& r, float dt) {
    auto view = r.view<SkyManagerTag, SkyStatComponent>();
    for (auto [e, stat] : view.each()) {
        // Ergebnisse in Hub schreiben
        hub::set("sky.sun_altitude", stat.sun_altitude);
        hub::set("sky.brightness", stat.zenith_brightness);
        hub::set("sky.temperature", stat.color_temperature);
    }
}

// Andere Module lesen vom Hub (ase-terrain)
void TerrainLightSystem::tick(Registry& r, float dt) {
    float sun_alt = hub::get<float>("sky.sun_altitude");
    float brightness = hub::get<float>("sky.brightness");
    // Terrain-Beleuchtung basierend auf Himmelsdaten
    auto view = r.view<TerrainChunkComponent, TerrainLightComponent>();
    for (auto [e, chunk, light] : view.each()) {
        light.ambient = calculate_ambient(sun_alt, brightness);
    }
}

{
    "module": "ase-terrain",
    "layer": 3,
    "dependencies": ["ase-ecs", "ase-math", "ase-hub"],
    "systems": [
        {
            "name": "TerrainChkSystem",
            "schedule": "Dynamics",
            "tier": 9,
            "reads": ["TerrainChunkComponent"],
            "writes": ["TerrainChkResultComponent"]
        },
        {
            "name": "TerrainMutSystem",
            "schedule": "Dynamics",
            "tier": 9,
            "run_after": "TerrainChkSystem",
            "reads": ["TerrainMutReqComponent"],
            "writes": ["TerrainChunkComponent"]
        }
    ],
    "hub_outputs": [
        "terrain.chunk_count",
        "terrain.active_mutations",
        "terrain.loaded_area"
    ]
}

Timeline

Die Timeline-Direktive erzeugt eine vertikale Zeitleiste mit Datumsangaben, Icons und Beschreibungstexten. Jedes ::event hat ein date-Attribut (frei formatierbarer Text) und ein optionales icon-Attribut (NerdFont-Iconname). Die Events werden durch eine vertikale Verbindungslinie optisch verbunden und in der Reihenfolge ihrer Definition dargestellt.

Quote

Stilisiertes Zitat mit Autorenangabe. Die :::quote-Direktive erzeugt eine optisch hervorgehobene Zitatbox mit grossem linken Anfuehrungszeichen, dem Zitattext und einer Autorenzeile mit Name und Rolle. Ideal fuer Leitsprueche, Designprinzipien oder markante Aussagen.

Stats

Grosse Zahlen-Kacheln fuer beeindruckende Kennzahlen und Metriken. Jede ::stat hat einen value (die grosse Zahl), ein label (Beschreibung), ein icon (NerdFont) und eine color (aus der PANEL_*-Palette). Das Grid passt sich ueber das cols-Attribut an. Stats eignen sich hervorragend fuer Dashboard-artige Uebersichten am Seitenanfang.

Steps

Nummerierte Schrittfolgen mit automatischer Durchnummerierung. Ideal fuer Tutorials, Installationsanleitungen oder Arbeitsablaeufe. Jeder ::step{title="..."} markiert den Beginn eines neuen Schritts — der folgende Inhalt wird als Beschreibung des Schritts angezeigt. Die Nummerierung erfolgt automatisch und beruecksichtigt die Reihenfolge der Definition.

Compare

Seite-an-Seite-Vergleich zweier Optionen. Das highlight-Flag-Attribut hebt die bevorzugte Option mit einem cyan-farbenen Rand hervor. Ideal fuer Architekturentscheidungen, Technologievergleiche oder Pro/Contra-Gegenuberstellungen. Jede ::option enthaelt eine Liste mit NerdFont-Icons fuer visuelle Bewertung.

Team

Team-Mitglieder-Karten mit Avatar, Name und Rolle. Das cols-Attribut des :::team-Containers bestimmt die Spaltenanzahl (Standard: 4). Optionales link-Attribut fuer externe Profile.

Changelog

Versionsblock mit farbigen Labels fuer verschiedene Aenderungstypen. Das version-Attribut zeigt die Versionsnummer, date das Veroeffentlichungsdatum. Im Body werden Aenderungen als Listen aufgefuehrt — Items mit Added erhalten gruene Farbe, Fixed orange und Changed cyan. Diese Farbgebung erfolgt automatisch anhand des fetten Praefix-Textes.

Matrix

Strukturierte Vergleichstabelle mit benannten Spalten und Zeilen. Die Spaltenkoepfe werden ueber das cols-Attribut als kommaseparierte Liste definiert. Jede ::row hat benannte Attribute, die den Spalten entsprechen (Kleinschreibung). Werte, die mit nf- beginnen, werden automatisch als NerdFont-Icons gerendert — ideal fuer Statusanzeigen.

Terminal

Terminal-Block mit dunklem Hintergrund und gruenen Befehlszeilen. Zeilen, die mit $ beginnen, werden als Eingabebefehle mit gruener Prompt-Farbe hervorgehoben. Alle anderen Zeilen werden als Programmausgabe in hellem Grau dargestellt. Das title-Attribut erscheint als Fensterleiste ueber dem Terminal-Inhalt.

Code (Datei-Stil)

Code-Block mit VS-Code-artigem Dateinamen-Tab oben. Ideal fuer die Darstellung von Quellcode-Dateien mit Kontext. Das file-Attribut zeigt den Dateinamen als Tab-Beschriftung, lang bestimmt die Syntax-Hervorhebung. Unterscheidet sich von normalen Fenced Code Blocks durch den visuellen Dateinamen-Header.

Callout (Custom)

Benutzerdefinierte Callout-Box fuer Faelle, in denen die vier Standard-Callouts (INFO, WARNING, TIP, NOTE) nicht ausreichen. Die Farbe wird aus der PANEL_*-Palette gewaehlt, das Icon ist ein beliebiges NerdFont-Icon. Ideal fuer experimentelle Features, Deprecation-Hinweise oder spezielle Kategorien.

Leaf-Direktiven

Leaf-Direktiven stehen als einzelne Zeile mit ::name{attrs} und erzeugen eigenstaendige UI-Elemente ohne umschlossenen Inhalt. Im Gegensatz zu Block-Direktiven haben sie kein schliessendes ::: und keinen Body-Text. Sie werden vom Markdown-Parser als Block-Level-Elemente behandelt (eigene Zeile erforderlich), koennen aber durch die Badge-Vorverarbeitung auch inline verwendet werden.

Insgesamt stehen 10 Leaf-Direktiven zur Verfuegung — von farbigen Badges ueber Fortschrittsbalken bis hin zu Video-Einbettungen und Download-Buttons.

Badge

Farbige Inline-Kennzeichnungen mit eckigem Design. Mehrere Badges auf einer Zeile werden nebeneinander angezeigt. Die verfuegbaren Farben entsprechen der PANEL_*-Palette: cyan, green, orange, purple, red, yellow. Badges eignen sich fuer Statusanzeigen, Versionsnummern, Kategorien oder Tags.

::badge{text="Stabil" color="green"} ::badge{text="00.16.32" color="cyan"} ::badge{text="Alpha" color="orange"} ::badge{text="Beta" color="purple"} ::badge{text="Neu" color="red"} ::badge{text="Geplant" color="yellow"}

Divider

Ein horizontaler Trennstrich mit dezentem Farbverlauf — subtiler als die Standard-Markdown-Trennlinie (---) und optisch besser integriert in das CMS-Design. Keine Attribute erforderlich.

Spacer

Vertikaler Leerraum mit konfigurierbarer Hoehe. Das h-Attribut gibt die Hoehe in rem an (Standard: 2). Nuetzlich fuer visuelles Spacing zwischen Sektionen, wo ein --- zu prominent waere.

Text vor dem Spacer — dieser Absatz steht direkt ueber dem Spacer-Element und dient als Referenz fuer den visuellen Abstand.

Text nach dem Spacer — 3rem Abstand trennt diesen Absatz vom vorherigen. Der Spacer selbst ist unsichtbar und erzeugt reinen vertikalen Freiraum.

Progress

Horizontale Fortschrittsbalken mit Prozentanzeige. Jeder Balken hat einen value (aktueller Wert), max (Maximum), label (Beschreibung) und color (PANEL_*-Farbe). Ideal fuer Projektfortschritt, Feature-Completion oder Systemauslastung.

Video

Video-Einbettung mit Unterstuetzung fuer YouTube, Vimeo (iframe-basiert) und lokale MP4-Dateien (HTML5 video). Bei lokalen Videos koennen die Attribute autoplay, muted und loop als Flags gesetzt werden. Das title-Attribut erscheint als Beschriftung unter dem Video.

Audio

HTML5-Audio-Player mit Titel und Kuenstlerangabe. Das src-Attribut zeigt auf die Audio-Datei, title und artist erscheinen als Beschriftung. Der Browser-native Audio-Player bietet Play/Pause, Lautstaerke und Zeitleiste.

Embed

Sandboxed iFrame fuer die Einbettung externer Webseiten. Das height-Attribut bestimmt die Hoehe in Pixeln (Standard: 400), title erscheint als Fensterleiste ueber dem iFrame. Die Sandbox-Attribute beschraenken die Berechtigungen des eingebetteten Inhalts auf ein Minimum.

Download

Stilisierter Download-Button mit Icon, Beschriftung und Dateigroesse. Das file-Attribut zeigt auf die herunterzuladende Datei, label ist der Buttontext, icon ein NerdFont-Icon (Standard: nf-fa-download) und size die angezeigte Dateigroesse.

Preview

Link-Vorschaukarte, die den Hostname und die URL eines externen Links in einer kompakten Kartenansicht darstellt. Nuetzlich fuer wichtige externe Referenzen, die visuell hervorgehoben werden sollen.

Kbd

Tastenkuerzel im Key-Cap-Stil. Das keys-Attribut akzeptiert einzelne Tasten oder Kombinationen mit + als Trenner. Jede Taste wird als individuelle Key-Cap-Grafik gerendert mit erhabenem 3D-Effekt. Kbd-Elemente koennen auch inline im Fliesstext verwendet werden.

Wichtige Tastenkuerzel: Druecke fuer die Befehlspalette, fuer einen Hard-Refresh, fuer die Entwicklertools, zum Speichern oder , , fuer den Sprachwechsel zwischen Englisch, Deutsch und Portugiesisch.

Inline-Erweiterungen

Inline-Erweiterungen werden direkt im Fliesstext verwendet — sie benoetigen keine eigene Zeile und erzeugen verlinkte, hervorgehobene oder dynamische Textelemente innerhalb von Absaetzen. Sie werden von vier spezialisierten remark-Plugins verarbeitet: remark-wiki-link, remark-glossary, remark-inline-ext und remark-auto-glossary.

Insgesamt stehen 6 Inline-Erweiterungen zur Verfuegung. Sie erweitern Standard-Markdown um semantische Verlinkungen, Fachbegriff-Tooltips, Icons, Querverweise und dynamische Werte.

Wiki-Links

Interne Verlinkung mit [[pfad|Anzeigetext]]. Links werden gegen die CMS-Navigation (cms-tree.json) aufgeloest und als violette Textlinks mit gepunkteter Unterstreichung und Wiki-Icon dargestellt. Die einfache Form [[Seitentitel]] sucht nach dem Titel in der Navigation; die erweiterte Form [[pfad|Text]] verlinkt explizit auf einen Pfad.

Siehe [[feat/ecs|ECS-Architektur]] fuer Details zum Entity-Component-System, [[feat/net|Multiplayer-Netzwerk]] fuer die Transport-Schicht mit WebRTC DataChannel, oder die [[index|Hauptseite]] fuer einen vollstaendigen Ueberblick ueber alle verfuegbaren CMS-Inhalte.

Glossar

Fachbegriff-Referenz mit {{Begriff}}. Beim Hovern ueber einen Glossar-Term erscheint eine Tooltip-Definition, die aus der glossary.json-Datei geladen wird. Die Darstellung erfolgt als unterstrochener Text mit gepunkteter Linie. Das remark-auto-glossary-Plugin scannt zusaetzlich den gesamten Text und markiert bekannte Begriffe automatisch — explizite {{}} haben dabei Vorrang.

Die {{ECS}}-Architektur der Antares Engine basiert auf dem Prinzip der strikten Datentrennung. Alle Module kommunizieren ueber den {{Hub}} — die zentrale Datenschicht, die hub::get() und hub::set() als einzige API exponiert. Der Multiplayer-Transport nutzt {{WebRTC}} DataChannel fuer latenzarme Peer-to-Peer-Kommunikation direkt im Browser.

Inline-Icons

Explizite Icon-Einfuegung mit :icon{name="nf-fa-name"} an beliebiger Stelle im Fliesstext. Die Icons stammen aus der NerdFont-Bibliothek und werden in der aktuellen Textgroesse gerendert. Verfuegbar sind alle Icons der Font-Awesome-Sammlung innerhalb von NerdFont.

Start und Initialisierung Konfiguration und Setup Validierung erfolgreich Neues Feature verfuegbar Performance-Optimierung Warnung beachten Bekannter Fehler Wartungsarbeiten

Querverweise

Strukturierte Referenz mit :ref{path="pfad" anchor="anker" text="Text"}. Querverweise erzeugen cyan-farbene Links mit einem Pfeil-Icon als Praefix. Sie eignen sich fuer praeezise Verweise auf spezifische Abschnitte anderer CMS-Seiten. Die drei Formen: :ref{path="pfad"} (nur Seite), :ref{path="pfad" anchor="anker"} (Seite + Abschnitt) und :ref{path="pfad" anchor="anker" text="Anzeigetext"} (mit benutzerdefiniertem Text).

Siehe fuer die vollstaendige Referenz der 66 Schedules in 21 Tiers, oder fuer Details zur WebRTC-basierten Transport-Schicht.

Version

Dynamischer Versionsplatzhalter mit {version}. Wird beim Rendering automatisch durch den version-Wert aus dem YAML-Frontmatter der aktuellen Seite ersetzt. Ideal fuer Dokumentationsseiten, die ihre eigene Versionsnummer referenzieren muessen, ohne sie manuell an mehreren Stellen pflegen zu muessen.

Diese Seite dokumentiert Version {version} der DSL-Referenz. Bei jeder Aktualisierung des Frontmatter-Werts wird der Platzhalter automatisch aktualisiert — keine manuelle Suchen-und-Ersetzen-Operation noetig.

Tooltip

Hover-Tooltip mit :tip[Anzeigetext]{content="Tooltip-Inhalt"}. Der Anzeigetext wird mit gepunkteter Unterstreichung dargestellt; beim Hovern erscheint ein positioniertes Tooltip mit dem angegebenen Inhalt. Ideal fuer Abkuerzungen, Fachbegriffe oder kontextuelle Erklaerungen, die den Lesefluss nicht unterbrechen sollen.

Die Antares Simulation Engine ist eine Survival-Simulation der naechsten Generation. Sie nutzt ein datenorientiertes Design, um Milliarden von Entitaeten in Echtzeit zu simulieren.

Universelle Elemente

Diese Elemente funktionieren in beiden Viewern — dem DocViewer fuer die technische Dokumentation und dem CMS PortalViewer fuer die oeffentliche Website. Sie basieren auf Standard-Markdown-Syntax (CommonMark) mit wenigen Erweiterungen und benoetigen keine DSL-Direktiven.

Universelle Elemente werden von Standard-remark/rehype-Plugins verarbeitet (remark-gfm, remark-math, rehype-katex) und funktionieren identisch in beiden Viewern. DSL-Direktiven hingegen werden nur im CMS PortalViewer gerendert — im DocViewer erscheinen sie als Rohtext.

Mathematik

KaTeX-basierte Mathematik-Darstellung in zwei Modi: Inline-Mathematik mit einzelnen Dollar-Zeichen fuer Formeln im Fliesstext, und Display-Mathematik mit doppelten Dollar-Zeichen fuer zentrierte, hervorgehobene Gleichungen.

Inline-Beispiele: Die Position $\vec{p}$ eines Entities aendert sich mit der Geschwindigkeit $\vec{v}$ ueber die Zeitspanne $\Delta t$. Der Streuungswinkel $\theta$ der atmosphaerischen Lichtbrechung wird in $\text{Radiant}$ gemessen und bestimmt die Himmelsfarbe bei Sonnenuntergang. Die Temperatur $T$ in Kelvin beeinflusst die Farbtemperatur des simulierten Sonnenlichts mit $T \approx 5778\,\text{K}$ fuer die reale Sonne.

Display-Gleichungen:

Die Verlet-Integration fuer die Positionsberechnung:

$\vec{p}(t + \Delta t) = \vec{p}(t) + \vec{v}(t) \cdot \Delta t + \frac{1}{2} \vec{a}(t) \cdot \Delta t^2$

Die Rayleigh-Streuung fuer atmosphaerische Farbberechnung:

$I(\lambda, \theta) = I_0 \cdot \frac{\pi^2 (n^2 - 1)^2}{2 N \lambda^4} \cdot (1 + \cos^2 \theta)$

Grundlegende Physik-Formeln die in der Engine verwendet werden:

$E = mc^2 \qquad F = ma \qquad \vec{F} = -k\vec{x} \qquad PV = nRT$

Code-Bloecke

Syntax-hervorgehobene Code-Bloecke mit Sprach-Tags. Unterstuetzte Sprachen: cpp, typescript, bash, cmake, json, yaml, diff, markdown, python, mermaid, ase-math, svgbob. Die Hervorhebung erfolgt ueber react-syntax-highlighter mit einem angepassten Dark-Theme.

// ECS Golden Rule: Components = DATA ONLY
struct WeatherComponent {
    float temperature = 293.15f;    // Kelvin (20°C default)
    float humidity = 0.5f;          // Relative humidity [0..1]
    float wind_speed = 0.0f;        // Meters per second
    float wind_direction = 0.0f;    // Radians (0 = North)
    float precipitation = 0.0f;     // mm/hour
    float cloud_cover = 0.0f;       // Cloud density [0..1]
    uint32_t owner_id = UINT32_MAX; // Chunk entity reference
};

// ECS Golden Rule: Systems = STATELESS LOGIC
class WeatherCalcSystem : public ecs::System {
public:
    const char* name() const override { return "WeatherCalcSystem"; }

    void tick(Registry& registry, float dt) override {
        auto view = registry.view<WeatherComponent, TerrainChunkComponent>();
        for (auto [entity, weather, terrain] : view.each()) {
            // Temperature decreases with altitude
            weather.temperature = base_temp - (terrain.base_height * lapse_rate);
            // Humidity affects precipitation threshold
            if (weather.humidity > 0.85f && weather.cloud_cover > 0.7f) {
                weather.precipitation = calculate_rainfall(weather, dt);
            }
            // Wind simulation via hub constants
            float wind_base = hub::get<float>("weather.wind_base_speed");
            weather.wind_speed = wind_base * terrain_wind_factor(terrain);
        }
    }
};

// becsy Client ECS — Shared Component with Backend parity
@component
export class WeatherComponent {
    @field.float32 declare temperature: number;
    @field.float32 declare humidity: number;
    @field.float32 declare windSpeed: number;
    @field.float32 declare windDirection: number;
    @field.float32 declare precipitation: number;
    @field.float32 declare cloudCover: number;
    @field.uint32 declare ownerId: number;
}

// Client-only render sync system
@system(s => s
    .after(WeatherNetworkInputSystem)
    .inAnyOrderWithWritersOf(WeatherComponent)
)
export class WeatherRenderSyncSystem extends System {
    private readonly weatherQuery = this.query(
        q => q.current.with(WeatherComponent).read
    );

    execute(): void {
        for (const entity of this.weatherQuery.current) {
            const w = entity.read(WeatherComponent);
            this.updateSkyUniforms(w.temperature, w.cloudCover);
            this.updateRainParticles(w.precipitation, w.windDirection);
        }
    }
}

Callout-Boxen

Vier Standard-Callout-Typen mit unterschiedlichen Farben und Icons fuer verschiedene Informationskategorien. Jede Seite sollte mindestens 3 Callouts enthalten (1 WARNING + 2 andere).

Die Antares Simulation Engine verwendet eine strikte 6-Schichten-Architektur, in der jede Schicht ausschliesslich von darunterliegenden Schichten abhaengen darf. Aufwaertsabhaengigkeiten sind architektonisch verboten und werden durch Build-System-Checks erzwungen. Diese Isolation ermoeglicht es, einzelne Schichten unabhaengig zu entwickeln, zu testen und auszutauschen.

Systems duerfen NIEMALS direkt miteinander kommunizieren — der einzige erlaubte Kommunikationskanal sind Components im ECS-Registry und Hub-Werte fuer Inter-Modul-Kommunikation. Direkte System-zu-System-Aufrufe, gespeicherte Referenzen auf andere Systems und Singleton-Muster sind architektonische Verstoesse, die zu enger Kopplung, versteckten Abhaengigkeiten und nicht-deterministischem Verhalten fuehren.

Erstelle EnTT-Views on demand mit registry.view<A, B>(). Views sind extrem guenstig — sie sind im Wesentlichen Iteratoren ueber die internen Sparse-Sets. Das Speichern von Views in Member-Variablen ist nicht nur unnoetig, sondern versteckt Zustand in einem System, das zustandslos sein muss. Jeder view()-Aufruf ist O(1) und cache-freundlich.

Entity 0 ist ein gueltiger Entity in EnTT! Dies ist ein haeufiger Fehler: Entwickler verwenden 0 als "kein Entity", was dazu fuehrt, dass Entity 0 faelschlicherweise als ungueltig behandelt wird. Der korrekte Null-Wert ist UINT32_MAX, definiert als InvalidEntityId in den types.hpp-Dateien der jeweiligen Module. Pruefe immer mit entity != InvalidEntityId statt entity != 0.

Mermaid-Diagramm

Mermaid-Diagramme werden direkt aus Markdown-Code-Bloecken mit dem mermaid-Sprachtag generiert. Unterstuetzte Typen: flowchart, sequenceDiagram, gantt, graph, stateDiagram-v2. Maximale Empfehlung: 20 Knoten pro Diagramm.

graph LR
    subgraph "Layer 3: Module"
        A[SkyCalcSystem] -->|hub::set| H
        B[TerrainMutSystem] -->|hub::set| H
        C[WeatherCalcSystem] -->|hub::set| H
    end

    subgraph "Layer 1: Hub"
        H[Hub Store] -->|hub::get| A
        H -->|hub::get| B
        H -->|hub::get| C
        H -->|serialize| R
    end

    subgraph "Layer 5: Network"
        R[HubNetBctReqSystem] --> S[HubNetBctSndSystem]
        S --> W[WebRTC DataChannel]
    end

    W --> CL[Client Hub Store]

Tabellen

Standard-Markdown-Tabellen mit Header-Zeile und Trennzeile. Spalten koennen links- oder rechtsbuendig ausgerichtet werden. Tabellen werden responsiv mit horizontalem Scrolling bei schmalen Viewports dargestellt.

Listen

Ungeordnete Listen mit NerdFont-Icons fuer visuelle Kategorisierung:

• Entities sind nur IDs — leichtgewichtige numerische Handles ohne eigene Daten
• Components sind reine Daten — keine Methoden, kein Verhalten, header-only
• Systems sind zustandslose Logik — keine Member-Variablen, Views on-demand
• Keine direkte System-zu-System-Kommunikation — nur ueber Components
• Hub fuer Inter-Modul-Kommunikation — hub::get() und hub::set()
• 66 Schedules in 21 Tiers — deklarative Abhaengigkeiten via .run_after()

Geordnete Listen fuer sequentielle Ablaeufe:

1. Voraussetzungen pruefen (CMake, Compiler, Node.js)
2. Repository klonen und Submodule initialisieren
3. C++ Backend konfigurieren und bauen
4. Web-Client-Abhaengigkeiten installieren
5. Entwicklungsserver starten
6. Game-Server starten und verbinden
7. Tests ausfuehren und Ergebnisse verifizieren

Diff-Boxen

Annotierte Aenderungslisten mit farbiger Hervorhebung. Zeilen mit + werden gruen (hinzugefuegt), - rot (entfernt) und -> blau (Information) dargestellt.

+ Added: CMS PortalViewer mit 37 DSL-Erweiterungen
+ Added: Compose-Stil interaktive Cards mit Hover-Animationen
+ Added: Hub-basierte Broadcast-Architektur (ARCH_ASE_HUB_UNI_BCT)
+ Added: Tiered-Scheduling mit 66 Schedules in 21 Tiers
+ Added: Trilinguales CMS (Deutsch, Englisch, Portugiesisch)
- Removed: Statische HTML-Dokumentation
- Removed: Hardcodierte Farbwerte in CMS-Komponenten
- Removed: Direkte System-zu-System-Kommunikation
- Removed: Array-basierte Components (Entity-per-Item stattdessen)
-> Info: Migration auf colors.ts SSOT abgeschlossen
-> Info: Alle Inter-Modul-Kommunikation fliesst durch den Hub
-> Info: Badge-Rendering unterstuetzt jetzt Inline-Nutzung

::badge{text="00.16.32" color="cyan"} ::badge{text="DSL-Demo" color="purple"} ::badge{text="37 Erweiterungen" color="green"} ::badge{text="Deutsch" color="orange"}