Opensophy Hub 3.4 : onglets CodeBlock et page d'accueil

# Opensophy Hub 3.4 : Nouveaux onglets dans CodeBlock, page d'accueil personnalisée et améliorations de l'interface

Opensophy Hub 3.4 introduit le support des onglets dans le composant CodeBlock. Vous pouvez désormais spécifier un tableau tabs: CodeTab[] avec des onglets nommés, chacun ayant son propre langage de coloration syntaxique et contenu de code. L'analyseur dans docUtils.mjs convertit les blocs markdown comme :::tabs et :::tab[Name] en structures correspondantes.

L'éditeur markdown dispose désormais d'un bouton pour insérer un bloc Onglets. Cela simplifie le travail avec du code multi-variantes, comme comparer des implémentations dans différents langages.

Nous avions précédemment abandonné Mermaid au profit de diagrammes personnalisés pour une meilleure intégration. Détails dans le guide de formatage.

Page d'accueil personnalisée

Une nouvelle option permet de remplacer le welcome.md standard par une véritable page d'accueil. Le composant GeneralPage.tsx inclut une section hero avec le shader WebGL SingularityShaders, ainsi que des blocs sécurité et écosystème.

La configuration est stockée dans public/data/site-config.json et appliquée en mode dev sans reconstruction. Pour le SEO en mode landing, nous avons ajouté un stub SSR — un <div id="seo-landing-content"> caché compatible avec SPA.

Corrections principales et améliorations de la navigation

• Suppression de la gestion SEO/GEO du panneau admin (revenant dans de futures versions avec des options étendues).
• Corrections d'anomalies dans devpanel.
• Affinements visuels.

Navigation

Refonte de SectionDropdown : le texte des sections n'est plus tronqué. Ajout de wordBreak: 'break-word' et lineHeight: 1.3 pour les éléments de l'arbre de navigation.

DocHoverPreview affiche les métadonnées : auteur, type, date, tags. Élimination du clignotement de la navigation mobile grâce à une initialisation synchrone des points de rupture.

Panneau admin

Support complet du redimensionnement au clavier. Glisser depuis n'importe quel point de l'en-tête. Déplacement du panneau au clavier (flèches ±20px). Nouvel onglet SitePanel pour basculer entre welcome.md et la page d'accueil.

Améliorations des tableaux et CodeBlock

Tableaux (tableStyles.ts)

• width: 100%; min-width: max-content pour un étirement correct.
• .prose .not-prose table avec display: table pour les tableaux imbriqués.
• Défilement par glisser avec seuil de 5px (avant seuil — sélection de texte).
• Touch : balayage horizontal sans bloquer le défilement vertical.

CodeBlock

• Bouton « Élargir » pour les blocs de plus de 7 lignes.
• Plein écran via Overlay.
• Menu mobile ⋯ (copier/élargir) se ferme au défilement.
• Chargement paresseux des langages highlight.js.

SEO, recherche et migration

SEO/Mise en page

Point de contrôle unique — l'objet SITE dans src/app/layouts/Layout.astro. Support de JSON-LD (WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time. Configuré via props : title, description, keywords, robots, lang, author, date.

Recherche

• Filtre par navSlug avec badge et réinitialisation.
• Filtre par date : nouveaux/modifiés ces 30 derniers jours.
• Tri : plus récent/plus ancien/dernière mise à jour.
• Pagination « Afficher plus N » sans redessin.
• Navigation clavier : ↑↓ dans les résultats, Entrée pour ouvrir.

Migration : le contenu de hub.opensophy.com a été transféré sur opensophy.com avec la bibliothèque UI (ui.opensophy.com). La bibliothèque est enrichie de composants open source — sans inscription requise, comme une archive de solutions gratuites.

Points clés :

• Onglets dans CodeBlock pour du code multi-langages avec parsing :::tabs.
• Page d'accueil personnalisée avec hero WebGL et stub SSR pour SEO.
• Améliorations UI : aperçus au survol, redimensionnement par glisser pour le panneau admin, défilement par glisser pour les tableaux.
• SEO centralisé dans Layout.astro avec JSON-LD et balises OG.
• Migration vers le domaine principal avec bibliothèque UI.

— Editorial Team