Opensophy Hub 3.4: CodeBlock-Registerkarten und Landingpage

# Opensophy Hub 3.4: Neue Tabs im CodeBlock, eigene Landing Page und UI-Verbesserungen

Opensophy Hub 3.4 führt Tab-Unterstützung in der CodeBlock-Komponente ein. Sie können nun ein Array tabs: CodeTab[] mit benannten Tabs angeben, von denen jeder seine eigene Syntaxhervorhebungssprache und Code-Inhalte hat. Der Parser in docUtils.mjs wandelt Markdown-Blöcke wie :::tabs und :::tab[Name] in die entsprechenden Strukturen um.

Der Markdown-Editor verfügt nun über einen Button zum Einfügen eines Tabs-Blocks. Das erleichtert die Arbeit mit mehrvariantem Code, etwa beim Vergleich von Implementierungen in verschiedenen Programmiersprachen.

Wir haben zuvor Mermaid zugunsten eigener Diagramme für eine bessere Integration aufgegeben. Details finden Sie im Formatierungsleitfaden.

Eigene Landing Page

Eine neue Option ermöglicht es, die Standarddatei welcome.md durch eine vollwertige Landing Page zu ersetzen. Die GeneralPage.tsx-Komponente enthält einen Hero-Bereich mit dem SingularityShaders WebGL-Shader sowie Blöcke zu Sicherheit und Ökosystem.

Die Konfiguration wird in public/data/site-config.json gespeichert und im Dev-Modus ohne Neubuild angewendet. Für SEO im Landing-Modus haben wir einen SSR-Stump hinzugefügt – ein verstecktes <div id="seo-landing-content">, das mit SPA kompatibel ist.

Wichtige Korrekturen und Navigationsverbesserungen

• SEO/GEO-Verwaltung aus dem Admin-Panel entfernt (kehrt in zukünftigen Versionen mit erweiterten Optionen zurück).
• Probleme im Devpanel behoben.
• Visuelle Feinabstimmungen.

Navigation

Überarbeitetes SectionDropdown: Der Sektionstext wird nicht mehr abgeschnitten. wordBreak: 'break-word' und lineHeight: 1.3 für Elemente im Navigationsbaum hinzugefügt.

DocHoverPreview zeigt Metadaten: Autor, Typ, Datum, Tags. Mobiles Navigationsflackern durch synchrone Breakpoint-Initialisierung beseitigt.

Admin-Panel

Vollständige Unterstützung für Tastatur-Resize. Ziehen von jedem Punkt am Header. Panelbewegung per Tastatur (Pfeiltasten ±20px). Neuer SitePanel-Tab zum Wechseln zwischen welcome.md und der Landing Page.

Verbesserungen bei Tabellen und CodeBlock

Tabellen (tableStyles.ts)

• width: 100%; min-width: max-content für korrektes Strecken.
• .prose .not-prose table mit display: table für verschachtelte Tabellen.
• Drag-Scroll mit 5px-Schwellenwert (vor Schwellenwert – Textauswahl).
• Touch: Horizontales Wischen ohne Blockierung des vertikalen Scrolls.

CodeBlock

• „Erweitern“-Button für Blöcke mit mehr als 7 Zeilen.
• Vollbild über Overlay.
• Mobiles Menü ⋯ (Kopieren/Erweitern) schließt sich beim Scrollen.
• Lazy Loading der highlight.js-Sprachen.

SEO, Suche und Migration

SEO/Layout

Ein zentraler Steuerungspunkt – das SITE-Objekt in src/app/layouts/Layout.astro. Unterstützung für JSON-LD (WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time. Konfiguriert über Props: title, description, keywords, robots, lang, author, date.

Suche

• Filter nach navSlug mit Badge und Reset.
• Datumsfilter: Neu/aktualisiert in den letzten 30 Tagen.
• Sortierung: Neuestes/Ältestes/aktualisiert.
• Pagination „Weitere N anzeigen“ ohne Neuzeichnen.
• Tastaturnavigation: ↑↓ durch Ergebnisse, Enter zum Öffnen.

Migration: Inhalte von hub.opensophy.com wurden zu opensophy.com verschoben, inklusive der UI-Bibliothek (ui.opensophy.com). Die Bibliothek wird mit Open-Source-Komponenten bestückt – keine Registrierung nötig, wie ein Archiv freier Lösungen.

Wichtige Punkte:

• Tabs im CodeBlock für mehrsprachigen Code mit :::tabs-Parsing.
• Eigene Landing Page mit WebGL-Hero und SSR-Stump für SEO.
• UI-Verbesserungen: Hover-Vorschauen, Drag-Resize im Admin-Panel, Drag-Scroll für Tabellen.
• Zentralisiertes SEO in Layout.astro mit JSON-LD und OG-Meta-Tags.
• Migration auf die Hauptdomain mit UI-Bibliothek.

— Editorial Team