Opensophy Hub 3.4: CodeBlock tabs and landing

Opensophy Hub 3.4: New Tabs in CodeBlock, Custom Landing Page, and UI Improvements

Opensophy Hub 3.4 introduces tab support in the CodeBlock component. You can now specify an array tabs: CodeTab[] with named tabs, each having its own syntax highlighting language and code content. The parser in docUtils.mjs converts markdown blocks like :::tabs and :::tab[Name] into the corresponding structures.

The markdown editor now has a button for inserting a Tabs block. This simplifies working with multi-variant code, such as comparing implementations in different languages.

We previously dropped Mermaid in favor of custom diagrams for better integration. Details in the formatting guide.

Custom Landing Page

A new option lets you replace the standard welcome.md with a full-fledged landing page. The GeneralPage.tsx component includes a hero section with the SingularityShaders WebGL shader, plus security and ecosystem blocks.

Configuration is stored in public/data/site-config.json and applied in dev mode without rebuilding. For SEO in landing mode, we've added an SSR stub—a hidden <div id="seo-landing-content"> that's compatible with SPA.

Key Fixes and Navigation Improvements

• Removed SEO/GEO management from the admin panel (returning in future versions with expanded options).
• Fixed issues in devpanel.
• Visual refinements.

Navigation

Reworked SectionDropdown: section text is no longer truncated. Added wordBreak: 'break-word' and lineHeight: 1.3 for navigation tree elements.

DocHoverPreview shows metadata: author, type, date, tags. Eliminated mobile navigation flash through synchronous breakpoint initialization.

Admin Panel

Full keyboard resize support. Drag from any point on the header. Keyboard panel movement (arrow keys ±20px). New SitePanel tab for switching between welcome.md and the landing page.

Table and CodeBlock Improvements

Tables (tableStyles.ts)

• width: 100%; min-width: max-content for proper stretching.
• .prose .not-prose table with display: table for nested tables.
• Drag-scroll with 5px threshold (before threshold—text selection).
• Touch: horizontal swipe without blocking vertical scroll.

CodeBlock

• "Expand" button for blocks with more than 7 lines.
• Fullscreen via Overlay.
• Mobile menu ⋯ (copy/expand) closes on scroll.
• Lazy loading of highlight.js languages.

SEO, Search, and Migration

SEO/Layout

Single point of control—the SITE object in src/app/layouts/Layout.astro. Support for JSON-LD (WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time. Configured via props: title, description, keywords, robots, lang, author, date.

Search

• Filter by navSlug with badge and reset.
• Date filter: new/updated in the last 30 days.
• Sorting: newest/oldest/updated.
• Pagination "Show more N" without redrawing.
• Keyboard navigation: ↑↓ through results, Enter to open.

Migration: content from hub.opensophy.com has been moved to opensophy.com along with the UI library (ui.opensophy.com). The library is being stocked with open-source components—no registration required, like an archive of free solutions.

Key Points:

• Tabs in CodeBlock for multi-language code with :::tabs parsing.
• Custom landing page with WebGL hero and SSR stub for SEO.
• UI enhancements: hover previews, drag-resize for admin panel, drag-scroll for tables.
• Centralized SEO in Layout.astro with JSON-LD and OG meta tags.
• Migration to the main domain with UI library.

— Editorial Team