Template : vitrine des composants du blog

Carte interactive#

Les images marquées "map" dans le Markdown deviennent des visionneuses : Ctrl+molette pour zoomer, crayon pour annoter.

Syntaxe Markdown :

![Texte alternatif](/blog/images/blog/split_chargement.png "map")

Rendu :

Cliquez sur le crayon, tracez un placement, puis zoomez avec les boutons. Les dessins sont éphémères, côté lecteur uniquement.

Titres, texte et emphase#

Le corps de texte utilise les formats Markdown standard :

• Gras pour les informations clés
• Italique pour les nuances
• Code inline pour les termes techniques
• Lien interne vers une autre page du blog

Sous-section (H3)#

Les H3 apparaissent dans le sommaire, indentés sous leur H2 parent.

• Premier élément de liste à puces
• Deuxième élément, plus long pour observer le retour à la ligne et le rythme vertical entre les items
• Troisième élément avec du code inline au milieu

1. Première étape numérotée
2. Deuxième étape numérotée
3. Troisième étape numérotée

Encadrés (callouts)#

Cinq variantes sémantiques. Syntaxe : > [!TYPE] suivi du contenu.

Citation#

Une citation simple en blockquote devient un bloc expressif :

Les smokes ne servent pas à cacher — elles servent à forcer un choix. — Sunyata

Figure avec légende#

Une image seule (sans "map") est enveloppée dans une <figure> avec légende dérivée du texte alternatif :

La figure est chargée en différé (lazy) et servie en WebP via <picture>.

Données en tableau#

Les tableaux Markdown sont stylés et défilent horizontalement si nécessaire :

Bloc de code#

Le code est présenté en JetBrains Mono sur fond dédié :

function readingTime(text: string): number {
  const words = text.trim().split(/\s+/).length;
  return Math.max(1, Math.round(words / 200));
}

Composants structurels (référence)#

Les composants suivants sont générés automatiquement par le build et n'ont pas besoin de syntaxe Markdown spéciale :

• Sommaire (ToC) — apparaît dans le rail latéral dès qu'un article a 3+ titres H2/H3. Scroll-spy actif, sticky au-dessus de 1120 px.
• Encadré pilier — si pillar: null, liste les clusters rattachés ; si pillar: slug-du-pilier, lien retour vers le pilier + siblings.
• Dossiers liés — related_pillars: [slug1, slug2] crée un encadré avec les liens vers d'autres dossiers thématiques (maillage transversal).
• Encadré auteur — données tirées de seo/authors.json (rang, heures, rôles, réseaux sociaux). Affiché en fin d'article.
• Articles suggérés — sélection automatique par tags communs et catégorie.
• Navigation prev/next — articles précédent/suivant dans la même catégorie.
• Barre de progression — avancement de lecture, en haut de l'écran.
• Révélation par section — les sections apparaissent au scroll via IntersectionObserver. Fond alterné une section sur deux.
• Bandes publicitaires latérales — deux emplacements position: fixed (160×600, Wide Skyscraper) affichés à gauche et à droite sur desktop (≥ 1 400 px). Masqués en dessous.
• Publicités inline — deux bannières horizontales (728×100 tablette, 320×100 mobile) insérées automatiquement entre les sections de l'article (après la 2ᵉ section et au ⅔). Masquées sur desktop quand les bandes latérales sont visibles. Aucune pub ne coupe un titre de son contenu.

Frontmatter de référence#

Tous les champs disponibles pour un article :

---
title: "Titre SEO (max 60 caractères)"
description: "Meta description (max 155 caractères)."
slug: mon-slug-kebab-case
date: 2026-07-08
updated: 2026-07-08
author: sunyata
category: guides          # guides | meta | patch-notes | stats
pillar: null              # null = article pilier ; slug = cluster
related_pillars: []       # slugs d'autres piliers (croisement)
tags: [tag1, tag2]
og_image: mon-image.png   # dans images/og/, ou null
---