Prompt utilisé pour régénérer cette page :
Page: Icones — SVG Icon Library Browser
Category: theme-debugger
Description: "Bibliotheque d'icones SVG du site Cylian"
Icon: "shape"
Tags: ["design", "svg"]
No status field.
Front matter (index.md):
---
title: "Icones"
description: "Bibliotheque d'icones SVG du site Cylian"
icon: "shape"
tags: ["design", "svg"]
---
Directory structure:
- index.md — page content (markdown + Hugo shortcode)
- app.js — icons gallery controller (search, filter, copy, modal)
- default.scss — extensive SCSS styles for gallery, cards, modal, toast
Body content (index.md):
- Paragraph with bold count: 'Collection de **223 icones SVG** du theme Cylian. Cliquez sur une icone pour copier son chemin ou son code HTML.'
- Hugo shortcode: {{< icons-gallery >}}
This shortcode generates the full gallery HTML (toolbar, grid, modal, toast) server-side.
The generated HTML includes:
- Toolbar (.icons-toolbar) with search input, size toggle button, count display, generated date
- Grid container (.icons-grid) — populated dynamically by JS from API
- Modal (.icon-modal) with backdrop, preview, details panel (name, origin, source, path/html/hugo code blocks, copy buttons, size preview)
- Toast notification (.icon-toast)
=== app.js (icons gallery controller) ===
Imports: { session } from /_lib/storage_v1.js (named export for session storage)
IIFE wrapper — entire module in (function(){...})().
Constants: STORAGE_KEY='org.cylian.state.icons-gallery', API_URL='/_api/icons.json'.
DOM elements cached:
- modal (#icon-modal), toast (#icon-toast)
- grid (.icons-grid), sizeToggle (.icons-size-toggle), searchInput (.icons-search), searchClear (.icons-search-clear)
- countDisplay (.icons-count), generatedDisplay (.icons-generated)
- Modal sub-elements: .icon-modal-icon (object), .icon-modal-name, .icon-modal-origin, .icon-modal-source
- Code blocks: .icon-modal-path, .icon-modal-html, .icon-modal-hugo
- Modal size preview icons: .icon-modal-size-preview .icon (NodeList)
- Copy buttons: .icon-modal-copy (NodeList)
Labels: originLabels = { mdi: 'Material Design Icons', custom: 'Custom' }, sourceLabels = { theme: 'Theme', content: 'Content' }.
State (persisted via session storage):
- currentSize: 'small' | 'medium' | 'large' (default 'large')
- searchQuery: string (default '')
- icons: array of icon objects loaded from API
Functions:
- saveState(): persists {size, search} to session storage.
- renderCard(icon): generates article.icon-card HTML with data-name/source/origin attributes, optional data-variant. Contains div.icon-preview (object.icon loading SVG from /_img/icon/{name}.svg) + div.icon-info (span.icon-name + optional span.icon-variant). role="listitem", tabindex="0".
- renderIcons(): builds grid innerHTML from icons.map(renderCard), attaches listeners, updates visibility.
- attachCardListeners(): click + Enter/Space keydown on each .icon-card → openModal.
- updateVisibility(): filters cards by searchQuery (case-insensitive name.includes), toggles .hidden class, updates count display "{visible} / {total}".
- applySize(size): removes all size-* classes from grid, adds size-{size}. Updates toggle button icon (circle-small/medium/large.svg). Sets data-size attribute.
- showToast(message): sets message text, adds .show class, removes after 2000ms.
- copyToClipboard(text, button): navigator.clipboard.writeText, adds .copied class + toast, removes after 1500ms.
- openModal(card): reads name/origin/source from dataset. Computes path (/_img/icon/{name}.svg), html (<object> tag), hugo ({{ partial "icon" "name" }}). Sets all modal elements. Applies path to size preview icons. Adds .active class, sets aria-hidden false.
- closeModal(): removes .active, sets aria-hidden true.
- loadIcons(): fetches API_URL, parses JSON. Sets icons array from data.icons, displays data.generated date. Calls renderIcons(). Error: shows error paragraph.
Initialization:
1. Applies saved size and search query.
2. Shows search clear button if query exists.
Event listeners:
- Size toggle click: cycles small → medium → large → small. Saves state.
- Search input: updates query, toggles clear button visibility, updates card visibility, saves state.
- Search clear: resets input/query, hides clear button, updates visibility, saves, focuses input.
- Copy buttons (forEach): reads data-type (path/html/hugo), copies corresponding modal text.
- Code block click (path/html/hugo): click-to-copy on code blocks themselves.
- Modal backdrop click: closes modal.
- Escape key: closes modal.
- Ctrl/Cmd+F: prevents default if not already focused on search, focuses+selects search input.
- Calls loadIcons() on start.
=== default.scss (extensive, ~440 lines) ===
@debug statement: "Bundle: theme-debugger/icons".
Toolbar (.icons-toolbar): flex wrap, center, quarter-spacing gap, 1rem padding, bottom margin, user-select none.
.icons-toolbar-separator: 1px vertical line. .icons-toolbar-spacer: flex 1.
Search container: flex, 0.5rem gap, surface bg, primary border, 4px radius, inner icon 1rem 0.6 opacity.
.icons-search input: no border/bg, 150px width, 0.875rem font, placeholder muted.
.icons-search-clear: no border, pointer, 0.6 opacity, hover 1.
.icons-count: 0.75rem, muted.
.icons-size-toggle: inline-flex centered, 4px padding, 80% surface bg via color-mix, primary border, 4px radius, 1.25rem icon, pointer, transition.
Grid (.icons-grid): CSS grid auto-fill. Default: minmax(120px, 1fr). .size-small: minmax(80px). .size-large: minmax(160px). 0.75rem gap, 1rem padding.
.icon-card: flex column, center, 1rem/0.5rem padding, surface bg, surface border, 4px radius, pointer, hover translateY(-2px) + primary border. .hidden: display none. .size-small: 0.5rem padding, square aspect ratio.
.icon-preview: flex centered, 48x48 container. .icon: 32px default, 24px small, 48px large.
.icon-info: flex column, center, 0.125rem gap, 0.5rem margin-top. Hidden in small size.
.icon-name: 0.625rem, muted, center, break-all. .icon-variant: 0.5rem, muted, small bg pill.
Modal (.icon-modal): fixed inset 0, z-index 9999, hidden (display none), flex centered, 2rem padding. &.active: display flex.
.icon-modal-backdrop: absolute inset 0, rgba(0,0,0,0.85).
.icon-modal-content: relative, flex column, max-width 500px, surface bg, 8px radius, overflow hidden.
.icon-modal-preview: flex centered, 3rem padding, 96px icon.
.icon-modal-details: 1.5rem padding.
.icon-modal-name: 1.25rem bold monospace, top border, 1rem padding-top.
.icon-modal-meta: flex, 0.5rem gap, 1rem margin-bottom. Origin/source badges: 0.625rem uppercase, 3px radius.
.icon-modal-actions: flex wrap, 0.5rem gap, 1rem margin-bottom.
.icon-modal-copy: inline-flex, 0.5rem gap, 0.5rem/1rem padding, surface bg, primary border, 4px radius, 0.75rem font, pointer, transitions. &.copied: success border.
Code blocks (.icon-modal-path/html/hugo): block, 0.5rem padding, surface bg, 4px radius, 0.75rem monospace, break-all, pointer, hover transition.
.icon-modal-sizes: flex, 1rem gap/padding-top, top border.
Size preview: flex, bottom aligned, 1rem gap. 4 fixed sizes: 16/24/32/48px.
Toast (.icon-toast): fixed, bottom 2rem, centered (translateX -50%), flex, 0.75rem/1.5rem padding, surface bg, success border, 4px radius, 0.875rem font. Hidden by default (opacity 0, translateY 100px). &.show: visible (opacity 1, translateY 0). 300ms transition. z-index 10000.
.icons-footer: 1rem padding, right-aligned, 0.625rem, muted, 0.6 opacity.
Page entièrement générée et maintenue par IA, sans intervention humaine.