Banc d'essai : tous les composants MDX

Cette page n’a rien à dire. Elle sert à voir, d’un coup d’œil, ce qui rend et ce qui casse. Chaque section instancie un composant une fois, avec des données plausibles. Si l’une d’elles est vide, tronquée ou invisible, le composant a un problème — et c’est précisément ce qu’on cherche.

Elle est publiée (published: true) pour être construite. La retirer ou la repasser à false avant un déploiement : sans quoi elle apparaît dans la liste du blog, le flux RSS, le sitemap et llms.txt.

Markdown natif

Le pipeline Markdown d’Astro 7 (Sätteri) traite tout ceci sans composant, à la compilation. Du texte en gras, en italique, barré, du code en ligne, et un lien externe.

Une citation, pour vérifier la bordure et l’espacement. Elle court sur deux lignes.

Une liste à puces :

• Premier point
• Deuxième point, avec du code
• Troisième point

Une liste ordonnée :

1. Étape une
2. Étape deux
3. Étape trois

Une liste de tâches, qui vient de GFM :

• Cochée
• Non cochée

Un tableau, qui vient de GFM lui aussi :

Une note de bas de page¹, autre extension GFM.

Un titre de niveau 3

Les identifiants d’ancre sont posés par Astro. Au survol d’un titre un # apparaît ; au clic, l’URL est copiée et un ✓ la remplace une seconde et demie. C’est src/scripts/heading-anchors.ts, un seul écouteur pour toute la page.

Blocs de code clôturés

Ceux-ci sont colorés par Shiki à la compilation : ils n’envoient aucun JavaScript et s’affichent avant même que la page ne s’hydrate.

type Locale = 'fr' | 'en';

export function localePath(locale: Locale, path = ''): string {
	return `/${locale}${path === '/' ? '' : path}`;
}

bun run build
bun run check

{ "name": "portfolio-astro", "type": "module" }

CodeBlock

Le composant, à distinguer des blocs ci-dessus : il ajoute un onglet de nom de fichier et un bouton de copie. Comme eux, il est coloré à la compilation. Le code passe en prop code, et non en enfant — dans le MDX rendu par Astro, les enfants d’un composant traversent la frontière en emplacement HTML, pas en chaîne.

export const locales = ['en', 'fr'] as const;
export type Locale = (typeof locales)[number];

export function isLocale(value: unknown): value is Locale {
return typeof value === 'string' && (locales as readonly string[]).includes(value);
}

export const locales = ['en', 'fr'] as const;
export type Locale = (typeof locales)[number];

export function isLocale(value: unknown): value is Locale {
return typeof value === 'string' && (locales as readonly string[]).includes(value);
}

Sans nom de fichier, le bouton de copie n’apparaît qu’au survol :

curl -s localhost:4321/rss.xml | head -20

curl -s localhost:4321/rss.xml | head -20

Callout

FileTree

ImageWithCaption

ArchitectureBlocks

Premier des deux composants qui s’animent à l’entrée dans le champ. S’il reste invisible, c’est que l’hydratation client:visible n’a pas eu lieu.

DataStructureDiagram

YouTubeEmbed

TweetEmbed

CodeDemo

export default function Hello() {
return <p>Bonjour</p>;
}

export default function Hello() {
return <p>Bonjour</p>;
}

Fin

Si tout ce qui précède s’affiche, la table de composants de src/components/mdx/blog-components.ts est complète et fonctionnelle.