Thème magazine

Le thème magazine est construit pour le contenu éditorial long-format — sites d'actualité, magazines en ligne, blogs riches en contenu où la typographie et l'expérience de lecture sont la priorité.

Style visuel

• Home façon magazine — hero split (image + headline) en haut, posts featured en-dessous, widgets sidebar (most-read + promo card)
• Mise en page single-post long-format — colonne de lecture large, typographie généreuse, pull-quotes et figures optionnels
• Archives de catégorie avec sidebar — liste complète des catégories visible pendant la lecture de n'importe quelle archive
• Profils d'auteur avec chips de liens sociaux
• Palette Material 3 — triplets RGB stockés pour le support alpha-modifier Tailwind
• Typographie éditoriale — serif pour le corps (Newsreader par défaut), sans propre pour le chrome (Work Sans par défaut)

Templates

Les six templates standards. Le HomeTemplate rend une mise en page magazine avec :

• Hero split en haut
• Liste de posts en cards / list selon listVariant
• Sidebar avec widgets Most Read + Promo Card

Les blocs magazine/most-read, magazine/hero-split, magazine/promo-card peuvent aussi être insérés manuellement dans des posts / pages.

Pipeline CSS

Tailwind via theme.css + tailwind.config.cjs. Le build-theme-tailwind.mjs pré-build au prebuild, et le manifest.cssText est importé via ?inline depuis theme.compiled.css.

Critique : le content du tailwind.config.cjs inclut .js pour les loaders runtime. Sinon le JIT purge stripperait les classes des loaders.

Réglages

Quatre onglets :

Home

• heroVariant — image-overlay, split, banner
• listVariant — cards ou list
• listColumns — 2, 3 ou 4 colonnes
• Widgets sidebar : choix de composants pour sidebarTop et sidebarBottom parmi { mostRead, promoCard, authorBio, relatedPosts, noteEditor }

Single

• Toggle de la sidebar
• Breadcrumbs
• Date d'article
• Estimated reading time

Sidebar

• Items de la sidebar (modules au choix)

Style

• Couleurs Material 3 — triplets RGB éditables (--color-primary: 0 0 0, etc.) via <input type="color"> (l'admin convertit hex ↔ triplet)
• Fonts — paire serif (Newsreader, Lora, Crimson Text, …) + sans (Work Sans, Inter, Outfit, …)
• Material Symbols Outlined (hardcodé — pas éditable)

compileCss

Le magazine a un compileCss(config) qui :

1. Swap la première ligne @import url(...) de Google Fonts avec la paire choisie (la seconde ligne, Material Symbols, est préservée)
2. Append un :root { ... } en fin avec les triplets RGB des couleurs + variables de spacing / radius
3. Pour les couleurs : convertit #3366ff → 51 102 255 au moment du save

Blocs spécifiques

Trois blocs sous le namespace magazine/ :

• magazine/hero-split — hero éditorial double colonne (image + texte)
• magazine/most-read — widget « les plus lus » avec liste paginée
• magazine/promo-card — encart promo personnalisable

Marker regex hardcodé sur magazine/ dans transforms.ts.

Variantes d'image

variants: [
  { name: "thumbnail", maxWidth: 400, maxHeight: 400, fit: "cover" },
  { name: "small", maxWidth: 600, maxHeight: 600, fit: "contain" },
  { name: "medium", maxWidth: 1200, maxHeight: 1200, fit: "contain" },
  { name: "large", maxWidth: 1600, maxHeight: 1600, fit: "contain" },
  { name: "hero", maxWidth: 2000, maxHeight: 1000, fit: "cover" },
]

Runtime loaders

• magazine-menu.js — menu dynamique
• magazine-posts.js — widget Most Read (fetch /data/popular.json, fill [data-cms-most-read])

Les loaders contribuent des classes Tailwind, donc inclues dans le content scan.

Cas multilang

Magazine supporte multilang via le pattern standard (currentLocale, localePrefix, hreflang sentinels).

Idéal pour

• Sites éditoriaux long-format
• Magazines online
• Blogs riches en contenu avec mise en page éditoriale
• Sites d'actualité

Pas idéal pour

• Vitrines / landings (utiliser corporate)
• Sites personnels minimaux (utiliser default)
• Marketplaces (utiliser marketplace-core)