From ac33a55c8be57d72cd4064a8f6ad8396f43ac693 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Tue, 4 Aug 2026 10:19:30 +0200 Subject: [PATCH] update library pages content --- tests/helpers/data-validation.mjs | 2 ++ website/public/data/site.json | 27 +++++++++++------- website/src/pages/LibraryPage.jsx | 46 +++++++++++++++++-------------- website/src/styles/_home.scss | 44 +++++++++++++++++++++++------ 4 files changed, 81 insertions(+), 38 deletions(-) diff --git a/tests/helpers/data-validation.mjs b/tests/helpers/data-validation.mjs index 76d7e30..af5eef2 100644 --- a/tests/helpers/data-validation.mjs +++ b/tests/helpers/data-validation.mjs @@ -52,6 +52,8 @@ export function validateSiteContent(site) { "library.description", "library.summaryLabel", "library.tocLabel", + "library.tocTitle", + "library.tocDescription", "library.toolsLabel", "home.hero.eyebrow", "home.hero.title", diff --git a/website/public/data/site.json b/website/public/data/site.json index 5cefe53..b98a0d3 100644 --- a/website/public/data/site.json +++ b/website/public/data/site.json @@ -35,6 +35,8 @@ "description": "Parcourez tous les outils disponibles avec des exemples basiques couvrant les listes simples, les catégories, les contenus sans catégorie, les médias, les tableaux et les suivis de session.", "summaryLabel": "Repères de la librairie", "tocLabel": "Sommaire des outils", + "tocTitle": "Sommaire", + "tocDescription": "Accédez directement à un exemple d’outil dans la page.", "toolsLabel": "Exemples d'outils disponibles", "summaryItems": [ { @@ -148,52 +150,57 @@ { "icon": "notepad", "name": "Bloc notes", - "description": "Un espace texte simple pour garder des notes rapides, idées ou rappels pendant une session." + "description": "Rédigez des notes riches avec titres, listes, mise en forme et repères rapides pour garder vos infos de session au même endroit." }, { "icon": "checklist", "name": "Checklist", - "description": "Une liste d’objectifs avec quantités pour suivre crafts, ressources, tâches ou préparatifs." + "description": "Suivez des objectifs en catégories ou hors catégorie, avec cases, quantités et descriptions utiles pour crafts, ressources ou préparatifs." }, { "icon": "picture", "name": "Images", - "description": "Un espace pour conserver des images utiles, ajoutées par fichier ou collage depuis le presse-papiers." + "description": "Regroupez des captures, cartes ou références visuelles ajoutées par fichier ou collage, consultables sans quitter la toolbox." }, { "icon": "map", "name": "Annotation d'images", - "description": "Une image unique annotable avec des marqueurs, pratique pour une carte, un plan ou un image important." + "description": "Ajoutez marqueurs et dessins sur une image unique pour préparer une carte, un plan de route ou une référence importante." }, { "icon": "link", "name": "Liens", - "description": "Une liste de raccourcis vers des guides, builds, cartes interactives ou ressources externes." + "description": "Gardez vos raccourcis de session vers guides, builds, cartes interactives ou ressources externes, avec titres lisibles." }, { "icon": "abacus", "name": "Compteurs", - "description": "Des compteurs personnalisables pour suivre scores, ressources, victoires, essais ou résultats." + "description": "Créez des compteurs ajustables pour suivre essais, ressources, scores, victoires ou stocks sans passer par un tableau." + }, + { + "icon": "controller", + "name": "Combos", + "description": "Documentez des séquences de touches par catégorie, avec supports manette ou clavier/souris et étapes successives lisibles." }, { "icon": "calculator", "name": "Calculateur", - "description": "Un calculateur avec résultats enregistrables et arborescence pour préparer des chaînes de craft ou de ressources." + "description": "Calculez des valeurs, enregistrez des résultats et construisez une arborescence pour comparer coûts, crafts ou conversions." }, { "icon": "table", "name": "Tableau", - "description": "Une grille compacte avec formules et copie TSV pour comparer ressources, stocks, besoins ou valeurs." + "description": "Structurez des données en grille avec formules, lignes/colonnes ajustables et copie TSV pour comparer besoins ou valeurs." }, { "icon": "clock", "name": "Timer", - "description": "Un espace pour préparer chronomètres à étapes et comptes à rebours multiples pendant une session." + "description": "Préparez chronomètres, étapes, comptes à rebours, alertes et intervalles récurrents pour suivre les temps importants." }, { "icon": "tasklist", "name": "Planificateur de tâches", - "description": "Un suivi de tâches ponctuelles, quotidiennes ou hebdomadaires avec catégories et dépendances." + "description": "Organisez des tâches ponctuelles, quotidiennes ou hebdomadaires avec catégories, sous-tâches et dépendances parent/enfant." } ], "limitsTitle": "À retenir", diff --git a/website/src/pages/LibraryPage.jsx b/website/src/pages/LibraryPage.jsx index d4ba801..460604b 100644 --- a/website/src/pages/LibraryPage.jsx +++ b/website/src/pages/LibraryPage.jsx @@ -198,26 +198,32 @@ export function LibraryPage({ siteContent, actions }) { {libraryPayload && ( <>
{libraryPayload.toolbox.modules.map((module) => ( diff --git a/website/src/styles/_home.scss b/website/src/styles/_home.scss index f892df3..caefa84 100644 --- a/website/src/styles/_home.scss +++ b/website/src/styles/_home.scss @@ -250,14 +250,42 @@ span { } .library-toc { - display: flex; - flex-wrap: wrap; - gap: 8px; + display: grid; + gap: var(--space-3); padding: var(--space-4); scroll-margin-top: var(--space-5); } -.library-toc a { +.library-toc-heading { + display: grid; + gap: 4px; + min-width: 0; +} + +.library-toc-heading h2, +.library-toc-heading p { + margin: 0; +} + +.library-toc-heading h2 { + color: var(--color-text-primary); + font-size: var(--font-size-lg); +} + +.library-toc-heading p { + max-width: 620px; + color: var(--color-text-secondary); + font-size: var(--font-size-sm); +} + +.library-toc-links { + display: flex; + flex-wrap: wrap; + gap: 8px; + min-width: 0; +} + +.library-toc-links a { display: inline-flex; min-width: 0; min-height: 40px; @@ -273,20 +301,20 @@ span { text-decoration: none; } -.library-toc a:hover, -.library-toc a:focus-visible { +.library-toc-links a:hover, +.library-toc-links a:focus-visible { border-color: rgba(246, 196, 83, 0.42); background: rgba(246, 196, 83, 0.08); color: var(--color-text-primary); } -.library-toc .module-icon { +.library-toc-links .module-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); } -.library-toc .module-icon-svg { +.library-toc-links .module-icon-svg { width: 16px; height: 16px; }