Opensophy Hub 3.4: pestañas de CodeBlock y landing

# Opensophy Hub 3.4: Nuevas pestañas en CodeBlock, página de aterrizaje personalizada y mejoras en la UI

Opensophy Hub 3.4 agrega soporte para pestañas en el componente CodeBlock. Ahora puedes especificar un array tabs: CodeTab[] con pestañas con nombre, cada una con su propio lenguaje de resaltado de sintaxis y contenido de código. El parser en docUtils.mjs convierte bloques de markdown como :::tabs y :::tab[Name] en las estructuras correspondientes.

El editor de markdown ahora incluye un botón para insertar un bloque de pestañas. Esto simplifica el trabajo con código de múltiples variantes, como comparar implementaciones en diferentes lenguajes.

Anteriormente eliminamos Mermaid en favor de diagramas personalizados para una mejor integración. Detalles en la guía de formato.

Página de aterrizaje personalizada

Una nueva opción te permite reemplazar el welcome.md estándar con una página de aterrizaje completa. El componente GeneralPage.tsx incluye una sección hero con el shader WebGL de SingularityShaders, además de bloques de seguridad y ecosistema.

La configuración se guarda en public/data/site-config.json y se aplica en modo dev sin necesidad de recompilar. Para SEO en modo landing, hemos agregado un stub SSR: un <div id="seo-landing-content"> oculto compatible con SPA.

Principales correcciones y mejoras en la navegación

• Eliminada la gestión de SEO/GEO del panel de admin (regresará en futuras versiones con opciones ampliadas).
• Corregidos problemas en devpanel.
• Refinamientos visuales.

Navegación

Reescrito SectionDropdown: el texto de la sección ya no se trunca. Agregado wordBreak: 'break-word' y lineHeight: 1.3 para los elementos del árbol de navegación.

DocHoverPreview muestra metadatos: autor, tipo, fecha, etiquetas. Eliminado el parpadeo en la navegación móvil mediante inicialización síncrona de breakpoints.

Panel de admin

Soporte completo para redimensionado con teclado. Arrastrar desde cualquier punto del encabezado. Movimiento del panel con teclado (flechas ±20px). Nueva pestaña SitePanel para alternar entre welcome.md y la página de aterrizaje.

Mejoras en tablas y CodeBlock

Tablas (tableStyles.ts)

• width: 100%; min-width: max-content para un estiramiento adecuado.
• .prose .not-prose table con display: table para tablas anidadas.
• Drag-scroll con umbral de 5px (antes del umbral: selección de texto).
• Touch: deslizamiento horizontal sin bloquear el scroll vertical.

CodeBlock

• Botón «Expandir» para bloques con más de 7 líneas.
• Pantalla completa vía Overlay.
• Menú móvil ⋯ (copiar/expandir) se cierra al hacer scroll.
• Carga perezosa de lenguajes de highlight.js.

SEO, búsqueda y migración

SEO/Diseño

Punto único de control: el objeto SITE en src/app/layouts/Layout.astro. Soporte para JSON-LD (WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time. Configurado vía props: title, description, keywords, robots, lang, author, date.

Búsqueda

• Filtro por navSlug con insignia y restablecer.
• Filtro de fecha: nuevo/actualizado en los últimos 30 días.
• Ordenación: más nuevo/más antiguo/actualizado.
• Paginación «Mostrar más N» sin redibujar.
• Navegación con teclado: ↑↓ por resultados, Enter para abrir.

Migración: el contenido de hub.opensophy.com se ha movido a opensophy.com junto con la librería UI (ui.opensophy.com). La librería se está poblando con componentes open-source; no requiere registro, como un archivo de soluciones gratuitas.

Puntos clave:

• Pestañas en CodeBlock para código multiidioma con parsing de :::tabs.
• Página de aterrizaje personalizada con hero WebGL y stub SSR para SEO.
• Mejoras en UI: vistas previas al pasar el cursor, drag-resize para panel admin, drag-scroll para tablas.
• SEO centralizado en Layout.astro con JSON-LD y metaetiquetas OG.
• Migración al dominio principal con librería UI.

— Editorial Team