Opensophy Hub: SSG/SPA für Markdown-Dokumentation

Opensophy Hub: Statische SSG/SPA-Plattform für erweiterte Markdown-Dokumentation

Opensophy Hub ist eine hybride SSG- und SPA-Plattform, die für die Veröffentlichung technischer Dokumentationen, Artikel und Handbücher konzipiert wurde. Sie löst die Herausforderung, Inhalte mit erweiterten Markdown-Funktionen zu verwalten, ohne MDX oder zusätzliche Plugins zu benötigen. Die Projektstruktur wird direkt aus dem Dateisystem im Docs/-Verzeichnis generiert, wobei Ordner die Navigation definieren: Seitenleiste, Brotkrumen und URLs entstehen automatisch.

Beispielstruktur:

Docs/
├── welcome.md
├── [N][brain]Articles{article}/
│   ├── [C][folder-code]Development{development}/
│   │   └── [A][layers]Stack Selection{webrendering}.md
│   └── [C][signal]Tools{tools}/
│       └── [A][container]Dokploy Overview{dokploy}.md

Drei Hierarchieebenen – Abschnitte ([N]), Kategorien ([C]), Artikel ([A]) – erzeugen Slugs, Icons und Titel ohne manuelle Routing-Einrichtung. Das vereinfacht die Pflege und Skalierung von Inhalten für Mid-Level- und Senior-Entwickler.

Erweiterte Markdown-Funktionen ohne Abhängigkeiten

Hub bringt reiche Blöcke direkt in gängige .md-Dateien: Hinweise, Karten, Spalten, Schritt-Anzeigen, Diagramme, KaTeX-Formeln und Charts aus Tabellen. Statt HTML-Markup mit Klassen setzt es auf einfache syntaktische Konstrukte.

Beispiel-Hinweis in HTML:

<div class="alert alert-warning" role="alert">
  <strong>Ostorozhno!</strong> Udalyonnye cherez <code>rm</code> files not popadayut in korzinu.
</div>

In Hub:

:::caution
Files deleted with `rm` don't go to the trash.
:::

Schritt-für-Schritt-Anleitung (Stepper):

:::steps
:::step[status=done] Installation
`npm install`
:::
:::step[status=active] Setup
Fill out `.env`.
:::
:::step[status=pending] Launch
`npm run dev`
:::
:::

Diese Blöcke werden nativ gerendert, ohne externe Bibliotheken – das reduziert die Build-Komplexität und steigert die Performance im SPA-Modus.

Interaktive Tabellen und UI-Playgrounds

Standard-Markdown-Tabellen werden zu interaktiven Komponenten mit Spaltenfiltern (Multiselect), Suche mit Hervorhebung, Spaltenausblenden, Vollbildmodus, Drag-to-Scroll und Export nach Markdown/Excel.

Zusätzlich lassen sich UI-Bibliotheks-Komponenten mit einer Zeile einbetten:

[uic:blur-text]

Benutzer können Parameter dynamisch anpassen – Skalierung, Farbe, Animation, Geschwindigkeit – und sehen die Ergebnisse in Echtzeit. Ideal, um Komponenten in der Doku zu demonstrieren, ohne separaten Playground.

CMS-Panel für die Bearbeitung

Das integrierte Content-Management-Panel erlaubt Markdown-Bearbeitung mit Live-Vorschau. Erstellen Sie Seiten, Kategorien und Abschnitte direkt in der Oberfläche – kein Neustart von npm run dev oder Skript-Ausführung nötig. Volle Blockformat-Unterstützung sorgt für einen Workflow wie bei einem echten CMS, aber mit statischer Generierung.

Vorteile für Entwickler:

• Automatische Navigation aus der Dateistruktur.
• Erweiterte Markdown ohne Plugins oder MDX.
• Interaktive Tabellen mit Filtern und Export.
• Live-Playgrounds für UI-Komponenten.
• CMS-ähnlicher Editor mit Vorschau.

Was zählt

• Dateistruktur als Navigation: Volle Automatisierung von Routing, Brotkrumen und Seitenleiste aus Präfixen [N], [C], [A].
• Native Markdown-Blöcke: Hinweise, Stepper, Spalten, KaTeX, Charts – ohne Abhängigkeiten.
• Tabellen-Interaktivität: Filter, Suche, Vollbild, Export nach MD/Excel.
• UI-Playgrounds: Eine Zeile für live Komponenten-Demos mit Parametern.
• CMS-Oberfläche: Bearbeitung mit Vorschau, kein Build nötig.

— Editorial Team