Opensophy Hub 3.4: zakładki CodeBlock i landing

# Opensophy Hub 3.4: nowe zakładki w CodeBlock, niestandardowa strona główna i ulepszenia UI

Opensophy Hub 3.4 wprowadza obsługę zakładek w komponencie CodeBlock. Teraz można definiować tablicę tabs: CodeTab[] z nazwanymi zakładkami, z których każda ma niezależny język podświetlenia i zawartość kodu. Parser w docUtils.mjs przekształca bloki markdown typu :::tabs i :::tab[Name] w odpowiednie struktury.

W edytorze markdown pojawił się przycisk do wstawiania bloku Tabs. Ułatwia to pracę z kodem wielowariantowym, na przykład porównaniem implementacji w różnych językach.

Wcześniej zrezygnowano z Mermaid na rzecz niestandardowych diagramów dla lepszej integracji. Szczegóły w przewodniku po formatowaniu.

Niestandardowa strona główna

Nowa opcja pozwala zastąpić standardowy welcome.md pełnoprawnym lądowaniem. Komponent GeneralPage.tsx zawiera sekcję hero z shaderem WebGL SingularityShaders, bloki bezpieczeństwa i ekosystemu.

Konfiguracja jest przechowywana w public/data/site-config.json i stosowana w trybie dev bez ponownego budowania. Dla SEO w trybie lądowania dodano atrapę SSR — ukryty <div id="seo-landing-content">, kompatybilny z SPA.

Kluczowe poprawki i ulepszenia nawigacji

• Usunięto zarządzanie SEO/GEO z panelu admina (powrót w przyszłych wersjach z rozszerzonymi opcjami).
• Naprawiono problemy w devpanel.
• Wizualne dopracowania.

Nawigacja

Przerobiono SectionDropdown: tekst sekcji nie jest obcinany. Dodano wordBreak: 'break-word' i lineHeight: 1.3 dla elementów drzewa nawigacji.

DocHoverPreview pokazuje metadane: autor, typ, data, tagi. Usunięto migotanie mobilnej nawigacji dzięki synchronicznej inicjalizacji breakpointu.

Panel admina

Pełne wsparcie dla zmiany rozmiaru z klawiatury. Przeciąganie za dowolny punkt nagłówka. Przesuwanie panelu klawiszami (strzałki ±20px). Nowa zakładka SitePanel do przełączania między welcome.md a lądowaniem.

Ulepszenia tabel i CodeBlock

Tabele (tableStyles.ts)

• width: 100%; min-width: max-content dla poprawnego rozciągania.
• .prose .not-prose table z display: table dla zagnieżdżonych tabel.
• Drag-scroll z progiem 5px (do progu — zaznaczanie tekstu).
• Touch: poziomy swipe bez blokowania pionowego przewijania.

CodeBlock

• Przycisk „Rozwiń” dla bloków >7 linii.
• Pełny ekran przez Overlay.
• Mobilne menu ⋯ (kopiuj/rozwiń) zamyka się przy przewijaniu.
• Leniva ładowanie języków highlight.js.

SEO, wyszukiwanie i migracja

SEO/Layout

Jednolity punkt zarządzania — obiekt SITE w src/app/layouts/Layout.astro. Obsługa JSON-LD (WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time. Konfiguracja przez props: title, description, keywords, robots, lang, author, date.

Wyszukiwanie

• Filtr po navSlug z odznaką i resetem.
• Filtr po dacie: nowe/aktualizowane w ciągu 30 dni.
• Sortowanie: nowe/stare/aktualizowane.
• Paginacja „Pokaż więcej N” bez przerysowywania.
• Nawigacja klawiaturą: ↑↓ po wynikach, Enter — otwórz.

Migracja: treści z hub.opensophy.com przeniesiono na opensophy.com wraz z biblioteką UI (ui.opensophy.com). Biblioteka jest uzupełniana komponentami open-source bez rejestracji, jak archiwum darmowych rozwiązań.

Co ważne:

• Zakładki w CodeBlock dla kodu wielojęzykowego z parsowaniem :::tabs.
• Niestandardowe lądowanie z hero WebGL i atrapą SSR dla SEO.
• Ulepszenia UI: podgląd hover, drag-resize panelu admina, drag-scroll tabel.
• Zcentralizowane SEO w Layout.astro z JSON-LD i meta OG.
• Migracja na główną domenę z biblioteką UI.

— Editorial Team