shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update library pages content
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-04 10:19:30 +02:00
parent 3772db12e2
commit ac33a55c8b
4 changed files with 81 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

46
website/src/pages/LibraryPage.jsx
View file

@ -198,26 +198,32 @@ export function LibraryPage({ siteContent, actions }) {
{libraryPayload && (
<>
<nav className="library-toc nebula-panel" aria-label={content.tocLabel || "Sommaire des outils"}>
{libraryPayload.toolbox.modules.map((module) => {
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
const title = module.title || definition.label || "Outil";
const anchorId = getLibraryAnchorId(module);
return (
<a
key={module.id}
href={`#/library#${anchorId}`}
onClick={(event) => {
event.preventDefault();
scrollToLibraryTool(anchorId, true);
}}
>
<span className="module-icon" aria-hidden="true">
<span className={`module-icon-svg module-icon-${definition.icon}`} />
</span>
<span>{title}</span>
</a>
);
})}
<div className="library-toc-heading">
<h2>{content.tocTitle || "Sommaire"}</h2>
<p>{content.tocDescription || "Accédez directement à un exemple d’outil dans la page."}</p>
</div>
<div className="library-toc-links">
{libraryPayload.toolbox.modules.map((module) => {
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
const title = module.title || definition.label || "Outil";
const anchorId = getLibraryAnchorId(module);
return (
<a
key={module.id}
href={`#/library#${anchorId}`}
onClick={(event) => {
event.preventDefault();
scrollToLibraryTool(anchorId, true);
}}
>
<span className="module-icon" aria-hidden="true">
<span className={`module-icon-svg module-icon-${definition.icon}`} />
</span>
<span>{title}</span>
</a>
);
})}
</div>
</nav>
<section className="library-tools" aria-label={content.toolsLabel}>
{libraryPayload.toolbox.modules.map((module) => (

44
website/src/styles/_home.scss
View file

@ -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;
}