Tous les shortcodes utilisables dans un article de blog ou tout autre fichier MDX, chacun avec le code qui le produit. La liste se trouve dans src/lib/shortcodes.ts.
Encadré
Sortez un conseil ou un avertissement du texte. type vaut note (par défaut), tip, warning ou danger. Sans title, le nom du type s’affiche.
<Callout type="tip" title="Repérez d'abord la vanne d'arrêt">
Avant de toucher à un robinet ou à des WC, fermez la petite vanne en dessous
et vérifiez que l'eau ne coule plus.
</Callout>Remarque
Une chasse d’eau qui coule en continu demande souvent un nouveau clapet, pas de nouveaux WC. La pièce coûte quelques dollars.
Repérez d'abord la vanne d'arrêt
Avant de toucher à un robinet ou à des WC, fermez la petite vanne en dessous et vérifiez que l’eau ne coule plus.
Attention
Ne versez jamais de déboucheur chimique dans une évacuation complètement bouchée. Il stagne dans le tuyau et peut abîmer les vieux raccords.
Coupez d'abord le courant et le gaz
Avant de vidanger un chauffe-eau, coupez le disjoncteur ou mettez la vanne de gaz sur veilleuse. Une résistance à sec grille en quelques secondes.
<Notice> fonctionne toujours et affiche le même encadré : info → note, success → tip, warning → warning, error → danger.
Étapes
Placez des titres dans <Steps> pour les numéroter. Chaque titre ## ou ### commence une étape, et tout ce qui suit lui appartient.
<Steps>
### Coupez l'eau
Tournez la vanne sous l'évier dans le sens des aiguilles d'une montre jusqu'en butée, puis ouvrez le robinet pour faire tomber la pression.
### Remplacez la cartouche
Retirez la poignée, dévissez l'écrou de blocage et apportez l'ancienne cartouche au magasin pour trouver la même.
### Vérifiez l'étanchéité
Rouvrez l'eau doucement et tenez un essuie-tout sec sous chaque raccord pendant une minute.
</Steps>Coupez l’eau
Tournez la vanne sous l’évier dans le sens des aiguilles d’une montre jusqu’en butée, puis ouvrez le robinet pour faire tomber la pression.
Remplacez la cartouche
Retirez la poignée, dévissez l’écrou de blocage et apportez l’ancienne cartouche au magasin pour trouver la même.
Vérifiez l’étanchéité
Rouvrez l’eau doucement et tenez un essuie-tout sec sous chaque raccord pendant une minute.
Liste de contrôle
<ListCheck> transforme une liste Markdown en liste de contrôle. Ajoutez columns={2} pour deux colonnes sur les écrans larges.
<ListCheck columns={2}>
- **Chauffe-eau** : anode vérifiée, ballon vidangé.
- **Vannes d'arrêt** : chacune manœuvrée et vérifiée contre les gouttes.
- **Évacuations** : siphons dégagés, écoulement testé.
- **WC** : clapet, robinet flotteur et joint de cuvette.
</ListCheck>- Chauffe-eau : anode vérifiée, ballon vidangé.
- Vannes d’arrêt : chacune manœuvrée et vérifiée contre les gouttes.
- Évacuations : siphons dégagés, écoulement testé.
- WC : clapet, robinet flotteur et joint de cuvette.
Bon d’intervention
<JobTicket> présente une liste comme un bon d’intervention. Chaque élément devient une ligne cochée. total est un texte libre ; avec service et sans total, le bon affiche le prix « à partir de » de ce service selon la grille tarifaire, et un bouton « Obtenir un prix » ouvre l’estimateur avec le service sélectionné.
<JobTicket title="Avant l'arrivée du plombier" code="TIP-021" label="Débouchage" service="drain-cleaning">
- Videz le meuble sous l'évier
- Repérez la vanne d'arrêt générale
- Laissez une clé ou un code d'accès
</JobTicket>N° TIP-021
Débouchage
Avant l'arrivée du plombier
- Videz le meuble sous l’évier
- Repérez la vanne d’arrêt générale
- Laissez une clé ou un code d’accès
À partir de129 $US
Bandeau de prix
<PriceCta> est la ligne qui termine chaque article : le prix « à partir de » du service et un bouton vers l’estimateur. Les articles l’affichent d’eux-mêmes grâce au champ service de leur en-tête ; utilisez le shortcode sur les autres pages.
<PriceCta service="water-heater-repair" />Bouton
<Button label="Réserver un plombier" url="/book/" />
<Button variant="outline" label="Nous appeler" url="/contact/" />
<Button variant="text" label="Voir tous les services" url="/services/" />Accordéon
Les lignes du même group se ferment entre elles. expanded="true" ouvre une ligne au chargement.
<Accordion label="Quelqu'un doit-il être là pendant l'intervention ?" group="visite" expanded="true">
Quelqu'un doit accepter le prix écrit. Ensuite, laissez une clé ou un code : nous refermons et vous envoyons des photos par SMS en partant.
</Accordion>Quelqu'un doit-il être là pendant l'intervention ?
Quelqu’un doit accepter le prix écrit. Ensuite, laissez une clé ou un code : nous refermons et vous envoyons des photos par SMS en partant.
Apportez-vous les pièces ?
Oui : le camion transporte les vannes, cartouches, siphons et flexibles courants. Pour le reste, nous commandons et vous donnons le coût d’abord.
Et si la réparation ne tient pas ?
Prévenez-nous : nous revenons la refaire gratuitement, dans le cadre de la garantie main-d’œuvre d’un an.
Onglets
<Tabs>
<Tab name="Cuisine">
Vérifier les flexibles, resserrer le siphon, tester le tuyau de vidange du
lave-vaisselle.
</Tab>
<Tab name="Salle de bain">
Remplacer le clapet des WC, refaire le joint du bec de baignoire, vérifier
le mitigeur de douche.
</Tab>
</Tabs>Vérifier les flexibles, resserrer le siphon et tester le tuyau de vidange du lave-vaisselle.
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 de lecture.
<ImageList>
<ImageItem
imageSrc="/images/blog/frozen-pipes.jpg"
imageAlt="Des glaçons sur un tuyau extérieur"
caption="Tenez le raccord pendant que vous tournez l'écrou."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/slow-drain.jpg"
imageAlt="L'eau s'écoule d'un lavabo blanc"
caption="Une fuite lente derrière le carrelage se voit d'abord ici."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/leak-signs.jpg"
imageAlt="Des compteurs d'eau sur les conduites d'alimentation"
caption="Jetez un œil sous l'évier une fois par mois."
/>
</ImageList>
Vidéo
<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/heroes/plumber-kitchen-sink-wide.jpg" />Texte
Gras avec **, italique avec _, barré avec ~~, et code en ligne avec des accents graves. Les liens s’écrivent [texte](/url/) : nos services.
Une citation commence par
>. Utilisez-la pour une courte phrase d’un client ou d’un plombier.
| Travail | Durée | Plombiers |
|---|---|---|
| Remplacement chauffe-eau | 3 h | 2 |
| Réparation de WC | 1 h | 1 |
| Cartouche de robinet | 45 min | 1 |
## Titre 2 [.custom-class]
### Titre 3Ajoutez des classes à un titre entre crochets, par exemple [.h5] pour une taille plus petite.
