Référence des composants éditoriaux

Cette page montre chaque composant éditorial en action. Utilise-la comme référence quand tu écris une recette ou un guide : trouve le bloc dont tu as besoin, copie le snippet, remplace les contenus.

Les composants sont disponibles automatiquement dans chaque fichier .mdx de src/content/blog/{it,en,fr}/ et src/content/academy/{it,en,fr}/. Pas besoin de les importer en haut du fichier.

Figure avec texte à côté — ratio portrait

L’image prend ~36 % de la largeur, le texte remplit le reste. Adapté aux photos verticales.

Fais fondre le sucre à feu moyen dans une poêle antiadhésive. Pas d’eau, pas de cuillère : juste du sucre et de la chaleur. Au début on dirait qu’il ne se passe rien, puis les bords commencent à se liquéfier.

C’est le moment le plus stressant de la recette, mais c’est aussi celui où la règle d’or est : ne pas toucher. Plus tu remues le caramel, plus tu risques de le faire cristalliser.

<Figure src="/images/demo/portrait.svg" side="right" ratio="portrait"
        caption="Ambré, pas brûlé.">

Le paragraphe qui vit dans la colonne à côté.

</Figure>

Figure avec texte à côté — ratio landscape

L’image prend ~52 % de la largeur. Adapté aux photos horizontales.

Verse le caramel chaud dans le moule, en le tournant pour qu’il en tapisse le fond uniformément. Travaille vite : il se solidifie en quelques secondes.

Pendant ce temps, prépare le bain-marie avec de l’eau déjà chaude jusqu’à mi-hauteur du moule.

<Figure src="/images/demo/landscape.svg" side="left" ratio="landscape"
        caption="Le moule couvert, prêt pour le bain-marie.">

Paragraphe à côté de l'image.

</Figure>

Figure avec texte à côté — ratio square

Entre les deux : image ~44 %, texte ~56 %.

Dispose sur ton plan de travail tous les ingrédients déjà pesés et coupés. En cuisine, la mise en place vaut plus que n’importe quelle technique avancée.

Figure standalone (sans texte à côté)

Si tu omets les children, la figure se centre dans la colonne de texte.

<Figure src="/images/demo/landscape.svg" caption="Le plat fini." />

Pullquote

Phrase en gros extraite du corps de texte, avec une touche orange sur le côté. Utilise-la pour les phrases-mantra d’une recette.

Le caramel ne se remue pas, il se regarde.

Avec attribution :

En cuisine, la précipitation brûle tout.

— Nonna Pina

<Pullquote>Le caramel ne se remue pas, il se regarde.</Pullquote>

<Pullquote cite="Nonna Pina">En cuisine, la précipitation brûle tout.</Pullquote>

Galerie 2 colonnes

Grille d’images côte à côte. Sur mobile, se replie en une seule colonne.

<Gallery columns={2} items={[
  { src: "/images/demo/step1.svg", caption: "Étape 1 · verser" },
  { src: "/images/demo/step2.svg", caption: "Étape 2 · couvrir" },
]} />

Galerie 3 colonnes

Galerie wide

La galerie peut aussi déborder de la colonne de texte avec side="wide".

TwoColumn — ingrédients à côté du procédé

Layout à deux colonnes textuelles. Utilise deux <div slot="left"> et <div slot="right">. Note la ligne vide après le <div> d’ouverture et avant le </div> de fermeture — c’est nécessaire à MDX pour traiter le contenu comme du markdown.

<TwoColumn ratio="1/2">
  <div slot="left">

  ### Ingrédients
  - 200 g de sucre
  - 4 gros œufs

  </div>
  <div slot="right">

  ### Procédé
  1. Prépare le caramel…

  </div>
</TwoColumn>

Aside — variantes tip, warning, note

Encadrés latéraux pour astuces, avertissements et annotations.

<Aside variant="tip" title="Astuce de mamie">

Texte de l'astuce, traité comme du markdown.

</Aside>

Récapitulatif des composants

Pour les vraies images, sauvegarde-les dans public/images/<nom-recette>/ et référence-les avec src="/images/<nom-recette>/photo.jpg".