Tous les shortcodes utilisables dans un récit ou tout autre fichier MDX, chacun avec le code qui le produit. La liste se trouve dans src/lib/shortcodes.ts. Le texte d’exemple parle d’une journée de préparation de kits scolaires : remplacez-le par le vôtre.
Encadré
Mettez en avant un conseil ou une mise en garde. type vaut note (par défaut), tip, warning ou danger. Sans title, le nom du type s’affiche.
<Callout type="tip" title="Étiquetez les cartons avant de les remplir">
Notez d'abord le nom de l'école et la tranche d'âge sur chaque carton. Vous
gagnerez une heure de tri en fin de journée.
</Callout>Remarque
Les kits sont préparés la semaine avant la rentrée, pour que les écoles les distribuent dès le premier jour.
Étiquetez les cartons avant de les remplir
Notez d’abord le nom de l’école et la tranche d’âge sur chaque carton. Vous gagnerez une heure de tri en fin de journée.
Attention
N’acceptez ni nourriture ni médicaments déjà ouverts. Nous ne pouvons pas les vérifier, donc nous ne pouvons pas les distribuer.
Portez à deux
Un carton plein de cahiers pèse plus de 15 kg. Soulevez-le à deux et gardez les allées dégagées.
<Notice> fonctionne toujours et affiche le même encadré : info → note, success → tip, warning → warning, error → danger.
Étapes
Entourez des titres de <Steps> pour les numéroter. Chaque titre ## ou ### ouvre une étape, et tout ce qui suit lui appartient.
<Steps>
### Trier les dons
Vérifiez chaque article d'après la liste du kit et mettez de côté ce qui est usé ou cassé.
### Remplir les sacs à dos
Un article de chaque sorte par sac, puis une carte avec la tranche d'âge de l'enfant.
### Charger la camionnette
Les cartons d'une même école partent ensemble, la feuille de livraison sur le dessus.
</Steps>Trier les dons
Vérifiez chaque article d’après la liste du kit et mettez de côté ce qui est usé ou cassé.
Remplir les sacs à dos
Un article de chaque sorte par sac, puis une carte avec la tranche d’âge de l’enfant.
Charger la camionnette
Les cartons d’une même école partent ensemble, la feuille de livraison sur le dessus.
Liste de contrôle
<ListCheck> transforme une liste Markdown en liste de contrôle. Ajoutez columns={2} pour deux colonnes sur les grands écrans.
<ListCheck columns={2}>
- **Sac à dos** : à la taille de l'enfant.
- **Cahiers** : quatre à lignes, un à carreaux.
- **Trousse** : crayons, gomme, règle et taille-crayon.
- **Gourde** : avec une étiquette au nom de l'enfant.
</ListCheck>- Sac à dos : à la taille de l’enfant.
- Cahiers : quatre à lignes, un à carreaux.
- Trousse : crayons, gomme, règle et taille-crayon.
- Gourde : avec une étiquette au nom de l’enfant.
Bouton
<Button label="Faire un don" url="/donate/" />
<Button variant="outline" label="Nous contacter" url="/contact/" />
<Button variant="text" label="Voir tous les appels" url="/causes/" />Accordéon
Les lignes d’un même group se ferment entre elles. expanded="true" ouvre une ligne au chargement.
<Accordion label="Faut-il de l'expérience pour aider lors d'une journée de préparation ?" group="preparation" expanded="true">
Non. Un responsable d'équipe explique chaque table au début, et chaque tâche s'apprend en dix minutes.
</Accordion>Faut-il de l'expérience pour aider lors d'une journée de préparation ?
Non. Un responsable d’équipe explique chaque table au début, et chaque tâche s’apprend en dix minutes.
Puis-je venir avec mes enfants ?
Oui, à partir de huit ans, avec un adulte. Les plus jeunes peuvent aider à la table des étiquettes.
Comment m'habiller ?
Des chaussures fermées et des vêtements dans lesquels vous pouvez porter des cartons. Nous fournissons gants et tablier.
Onglets
<Tabs>
<Tab name="Primaire">
Sac à dos, quatre cahiers, trousse et un livre de lecture.
</Tab>
<Tab name="Collège">
Sac à dos, six cahiers, kit de géométrie et calculatrice.
</Tab>
</Tabs>Sac à dos, quatre cahiers, trousse et un livre de lecture.
Liste d’images
Des photos en grille, avec une caption facultative sous chacune. width="1/2" ou "1/3" fixe la part de la ligne ; videoSrc ajoute un bouton lecture.
<ImageList>
<ImageItem
imageSrc="/images/photos/event-packing-day.jpg"
imageAlt="Des bénévoles se passent des sacs au-dessus d'une table de fournitures"
caption="Les tables de préparation à neuf heures du matin."
/>
<ImageItem
width="1/2"
imageSrc="/images/photos/gallery-pencil-boxes.jpg"
imageAlt="Des boîtes remplies de crayons jaunes neufs"
caption="Les crayons triés avant la préparation."
/>
<ImageItem
width="1/2"
imageSrc="/images/photos/cause-school-supplies.jpg"
imageAlt="Des cahiers et des crayons de couleur sur une table"
caption="Un kit complet pour le primaire."
/>
</ImageList>
Vidéo
<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/video-thumbnail.jpg" />Texte
Gras avec **, italique avec _, barré avec ~~ et code en ligne entre accents graves. Les liens s’écrivent [texte](/url/) : nos appels en cours.
Une citation commence par
>. Utilisez-la pour quelques mots d’un bénévole, d’un donateur ou d’un partenaire.
| Table | Bénévoles | Kits par heure |
|---|---|---|
| Tri | 6 | 120 |
| Remplissage | 8 | 90 |
| Étiquettes | 2 | 90 |
## Titre 2 [.custom-class]
### Titre 3Ajoutez des classes à un titre entre crochets, par exemple [.h5] pour une taille plus petite.
