@intlayer/docs 8.11.1 → 8.11.3

package/docs/fr/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Comment traduire une application SvelteKit en 2026
-description: Découvrez comment rendre votre site SvelteKit multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site en utilisant le Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: SvelteKit i18n - Guide complet pour traduire SvelteKit
+description: Meilleure solution pour la taille du bundle, le SEO, les performances & la maintenabilité. Rendez votre SvelteKit site web multilingue en 2026, traduction LLM, Agent Skills & MCP.
 keywords:
   - Internationalisation
   - Documentation
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## Qu'est-ce que Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes. Elle fonctionne parfaitement avec les capacités de Server-Side Rendering (SSR) de **SvelteKit**.
+Par rapport aux solutions principales telles que `svelte-i18n` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
+<Accordion header="Support complet de SvelteKit">
 
-- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer la prise en charge de TypeScript** avec des types générés automatiquement.
-- **Exploiter le SSR de SvelteKit** pour une internationalisation optimisée pour le SEO.
+Intlayer est optimisé pour fonctionner parfaitement avec SvelteKit en offrant le **routage multilingue**, la **prise en charge SSR** et toutes les fonctionnalités nécessaires à la mise à l'échelle de l'internationalisation (i18n).
+
+</Accordion>
+<Accordion header="Taille du bundle">
+
+Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
+
+</Accordion>
+<Accordion header="Maintenabilité">
+
+Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
+
+</Accordion>
+<Accordion header="Prêt pour les agents IA">
+
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+<Accordion header="Automatisation">
+
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+
+</Accordion>
+<Accordion header="Performances">
+
+Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
+
+</Accordion>
+<Accordion header="Collaboration avec les non-développeurs">
+
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -116,7 +147,9 @@ Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale qu
 └── vite.config.ts
 ```
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les paquets nécessaires en utilisant npm :
 
@@ -148,7 +181,9 @@ bun x intlayer init
 - **svelte-intlayer** : Fournit des context providers et des stores pour Svelte/SvelteKit.
 - **vite-intlayer** : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.
 
-### Étape 2 : Configuration de votre projet
+</Step>
+
+<Step number={2} title="Configuration de votre projet">
 
 Créez un fichier de configuration à la racine de votre projet :
 
@@ -165,7 +200,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Étape 3 : Intégrer Intlayer dans votre configuration Vite
+</Step>
+
+<Step number={3} title="Intégrer Intlayer dans votre configuration Vite">
 
 Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.
 
@@ -179,7 +216,9 @@ export default defineConfig({
 });
 ```
 
-### Étape 4 : Déclarez votre contenu
+</Step>
+
+<Step number={4} title="Déclarez votre contenu">
 
 Créez vos fichiers de déclaration de contenu n'importe où dans votre dossier `src` (par exemple, `src/lib/content` ou à côté de vos composants). Ces fichiers définissent le contenu traduisible pour votre application en utilisant la fonction `t()` pour chaque locale.
 
@@ -200,13 +239,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Étape 5 : Utilisez Intlayer dans vos composants
+</Step>
+
+<Step number={5} title="Utilisez Intlayer dans vos composants">
 
 Vous pouvez maintenant utiliser la fonction `useIntlayer` dans n'importe quel composant Svelte. Elle retourne un store réactif qui se met automatiquement à jour lorsque la locale change. La fonction respecte automatiquement la locale courante (à la fois lors du SSR et de la navigation côté client).
 
 > **Note :** `useIntlayer` retourne un store Svelte, vous devez donc utiliser le préfixe `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Comment traduire votre application SvelteKit in i18n 2026
 > description: Découvrez comment rendre votre site SvelteKit multilingue. Suivez la documentation pour internationaliser (i18n) et traduire votre site en utilisant le Server-Side Rendering (SSR).
 > keywords:
@@ -231,6 +272,10 @@ Vous pouvez maintenant utiliser la fonction `useIntlayer` dans n'importe quel co
 
 # Traduisez votre site SvelteKit avec Intlayer | Internationalisation (i18n)
 
+</Step>
+
+</Steps>
+
 ## Table des matières
 
 <TOC/>
@@ -292,7 +337,9 @@ Pour commencer, créez un nouveau projet SvelteKit. Voici la structure finale qu
 └── vite.config.ts
 ```
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les paquets nécessaires en utilisant npm :
 
@@ -324,7 +371,9 @@ bun x intlayer init
 - **svelte-intlayer** : Fournit des context providers et des stores pour Svelte/SvelteKit.
 - **vite-intlayer** : Le plugin Vite pour intégrer les déclarations de contenu dans le processus de build.
 
-### Étape 2 : Configuration de votre projet
+</Step>
+
+<Step number={2} title="Configuration de votre projet">
 
 Créez un fichier de configuration à la racine de votre projet :
 
@@ -341,7 +390,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Étape 3 : Intégrer Intlayer dans votre configuration Vite
+</Step>
+
+<Step number={3} title="Intégrer Intlayer dans votre configuration Vite">
 
 Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin Intlayer. Ce plugin gère la transpilation de vos fichiers de contenu.
 
@@ -355,7 +406,9 @@ export default defineConfig({
 });
 ```
 
-### Étape 4 : Déclarez votre contenu
+</Step>
+
+<Step number={4} title="Déclarez votre contenu">
 
 Créez vos fichiers de déclaration de contenu n'importe où dans votre dossier `src` (par exemple, `src/lib/content` ou à côté de vos composants). Ces fichiers définissent le contenu traduisible pour votre application en utilisant la fonction `t()` pour chaque locale.
 
@@ -376,7 +429,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Étape 5 : Utilisez Intlayer dans vos composants
+</Step>
+
+<Step number={5} title="Utilisez Intlayer dans vos composants">
 
 pour accéder à sa valeur réactive (par exemple, `$content.title`).
 
@@ -398,7 +453,9 @@ pour accéder à sa valeur réactive (par exemple, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Optionnel) Étape 6 : Configurer le routage
+</Step>
+
+<Step number={6} title="Configurer le routage" isOptional={true}>
 
 Les étapes suivantes montrent comment configurer un routage basé sur la locale dans SvelteKit. Cela permet à vos URLs d'inclure le préfixe de la locale (par exemple, `/en/about`, `/fr/about`) pour un meilleur SEO et une meilleure expérience utilisateur.
 
@@ -423,7 +480,9 @@ Les étapes suivantes montrent comment configurer un routage basé sur la locale
         └── +layout.svelte         # Mise en page racine pour les polices et styles globaux
 ```
 
-### Étape 7 : Gérer la détection de la locale côté serveur (Hooks)
+</Step>
+
+<Step number={7} title="Gérer la détection de la locale côté serveur">
 
 Dans SvelteKit, le serveur doit connaître la locale de l'utilisateur pour rendre le contenu correct lors du SSR. Nous utilisons `hooks.server.ts` pour détecter la locale à partir de l'URL ou des cookies.
 
@@ -635,7 +694,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Optionnel) Étape 8 : Liens internationalisés
+</Step>
+
+<Step number={8} title="Liens internationalisés" isOptional={true}>
 
 Pour le SEO, il est recommandé de préfixer vos routes avec la locale (par exemple, `/en/about`, `/fr/about`). Ce composant préfixe automatiquement tout lien avec la locale courante.
 
@@ -668,7 +729,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Navigue vers /en/about ou /fr/about selon la locale
 ```
 
-### (Optionnel) Étape 9 : Sélecteur de langue
+</Step>
+
+<Step number={9} title="Sélecteur de langue" isOptional={true}>
 
 Pour permettre aux utilisateurs de changer de langue, mettez à jour l’URL.
 
@@ -709,7 +772,9 @@ Pour permettre aux utilisateurs de changer de langue, mettez à jour l’URL.
 </style>
 ```
 
-### (Optionnel) Étape 10 : Ajouter un proxy backend
+</Step>
+
+<Step number={10} title="Ajouter un proxy backend" isOptional={true}>
 
 Pour ajouter un proxy backend à votre application SvelteKit, vous pouvez utiliser la fonction `intlayerProxy` fournie par le plugin `vite-intlayer`. Ce plugin détectera automatiquement la meilleure locale pour l'utilisateur en fonction de l'URL, des cookies et des préférences linguistiques du navigateur.
 
@@ -728,7 +793,9 @@ export default defineConfig({
 });
 ```
 
-### (Optionnel) Étape 11 : Configurer l'éditeur / CMS intlayer
+</Step>
+
+<Step number={11} title="Configurer l'éditeur / CMS intlayer" isOptional={true}>
 
 Pour configurer l'éditeur intlayer, vous devez suivre la [documentation de l'éditeur intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md).
 
@@ -753,7 +820,9 @@ Pour pouvoir visualiser le sélecteur de l'éditeur intlayer, vous devrez utilis
 </div>
 ```
 
-### (Optionnel) Étape 12 : Extraire le contenu de vos composants
+</Step>
+
+<Step number={12} title="Extraire le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.
 
@@ -896,3 +965,7 @@ Il est recommandé d'ignorer les fichiers générés par Intlayer.
 
 - **Éditeur Visuel** : Intégrez l'[Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) pour éditer les traductions directement depuis l'interface utilisateur.
 - **CMS** : Externalisez la gestion de votre contenu en utilisant le [CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/fr/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Comment traduire une application Tanstack Start en utilisant Solid.js en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre application Tanstack Start en utilisant Intlayer et Solid.js. Suivez ce guide complet pour rendre votre application multilingue avec un routage tenant compte de la localisation.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Guide complet pour traduire TanStack Start
+description: Meilleure solution pour la taille du bundle, le SEO, les performances & la maintenabilité. Rendez votre TanStack Start and Solid application multilingue en 2026, traduction LLM, Agent Skills & MCP.
 keywords:
   - Internationalisation
   - Documentation
@@ -38,17 +38,47 @@ history:
 
 Ce guide démontre comment intégrer **Intlayer** pour une internationalisation fluide dans les projets Tanstack Start avec Solid.js, le routage tenant compte de la localisation, le support TypeScript et les pratiques de développement modernes.
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Par rapport aux solutions principales telles que `react-i18next` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
+<Accordion header="Support complet de TanStack Start">
 
-- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamique de langue.
-- **Activer le routage tenant compte de la localisation** avec le système de routage basé sur les fichiers de Tanstack Start.
+Intlayer est optimisé pour fonctionner parfaitement avec TanStack Start et Solid en offrant un **routage multilingue**, un **plan du site** et toutes les fonctionnalités nécessaires à la mise à l'échelle de l'internationalisation (i18n).
+
+</Accordion>
+<Accordion header="Taille du bundle">
+
+Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
+
+</Accordion>
+<Accordion header="Maintenabilité">
+
+Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
+
+</Accordion>
+<Accordion header="Prêt pour les agents IA">
+
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+<Accordion header="Automatisation">
+
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+
+</Accordion>
+<Accordion header="Performances">
+
+Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
+
+</Accordion>
+<Accordion header="Collaboration avec les non-développeurs">
+
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -86,11 +116,15 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) sur GitHub.
 
-### Étape 1 : Créer le projet
+<Steps>
+
+<Step number={1} title="Créer le projet">
 
 Commencez par créer un nouveau projet TanStack Start en suivant le guide [Démarrer un nouveau projet](https://tanstack.com/start/latest/docs/framework/solid/quick-start) sur le site web de TanStack Start.
 
-### Étape 2 : Installer les packages Intlayer
+</Step>
+
+<Step number={2} title="Installer les packages Intlayer">
 
 Installez les packages nécessaires en utilisant votre gestionnaire de paquets préféré :
 
@@ -128,7 +162,9 @@ bun x intlayer init
 - **vite-intlayer**
   Inclut le plugin Vite pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la langue préférée de l'utilisateur, gérer les cookies et gérer la redirection d'URL.
 
-### Étape 3 : Configuration de votre projet
+</Step>
+
+<Step number={3} title="Configuration de votre projet">
 
 Créez un fichier de configuration pour configurer les langues de votre application :
 
@@ -149,7 +185,9 @@ export default config;
 
 > Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, la redirection du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 4 : Intégrer Intlayer dans votre configuration Vite
+</Step>
+
+<Step number={4} title="Intégrer Intlayer dans votre configuration Vite">
 
 Ajoutez le plugin intlayer dans votre configuration :
 
@@ -177,7 +215,9 @@ export default defineConfig({
 
 > Le plugin Vite `intlayer()` est utilisé pour intégrer Intlayer avec Vite. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.
 
-### Étape 5 : Créer l'affichage racine (Root Layout)
+</Step>
+
+<Step number={5} title="Créer l'affichage racine">
 
 Configurez votre affichage racine pour supporter l'internationalisation en utilisant `useParams` pour détecter la langue actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
 
@@ -218,7 +258,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Étape 6 : Créer la mise en page de la langue (Optionnel)
+</Step>
+
+<Step number={6} title="Créer la mise en page de la langue">
 
 Créez une mise en page qui gère le préfixe de la langue et effectue la validation. Cette mise en page garantira que seules les langues valides sont traitées.
 
@@ -253,7 +295,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Pour le mode `'prefix-all'`, vous préférerez peut-être remplacer le segment par `$locale`.
 > Pour le mode `'no-prefix'` ou `'search-params'`, vous pouvez supprimer complètement le segment.
 
-### Étape 7 : Déclarer votre contenu
+</Step>
+
+<Step number={7} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker les traductions :
 
@@ -299,7 +343,9 @@ export default appContent;
 
 > Pour plus de détails, reportez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
-### Étape 8 : Créer des composants et des hooks tenant compte de la langue
+</Step>
+
+<Step number={8} title="Créer des composants et des hooks tenant compte de la langue">
 
 Créez un composant `LocalizedLink` pour une navigation tenant compte de la langue :
 
@@ -378,7 +424,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Étape 9 : Utiliser Intlayer dans vos pages
+</Step>
+
+<Step number={9} title="Utiliser Intlayer dans vos pages">
 
 Accédez à vos dictionnaires de contenu partout dans votre application :
 
@@ -421,7 +469,9 @@ function RouteComponent() {
 
 > Pour en savoir plus sur le hook `useIntlayer`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/solid-intlayer/useIntlayer.md).
 
-### Étape 10 : Créer un composant de changement de langue (Locale Switcher)
+</Step>
+
+<Step number={10} title="Créer un composant de changement de langue">
 
 Créez un composant pour permettre aux utilisateurs de changer de langue :
 
@@ -465,7 +515,9 @@ export default LocaleSwitcher;
 >
 > Pour en savoir plus sur le hook `useLocale`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/solid-intlayer/useLocale.md).
 
-### Étape 11 : Gestion des attributs HTML
+</Step>
+
+<Step number={11} title="Gestion des attributs HTML">
 
 Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useParams` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
 
@@ -484,7 +536,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Étape 12 : Ajouter un middleware (Optionnel)
+</Step>
+
+<Step number={12} title="Ajouter un middleware">
 
 Vous pouvez également utiliser `intlayerProxy` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la langue actuelle en fonction de l'URL et définira le cookie de langue approprié. Si aucune langue n'est spécifiée, le plugin déterminera la langue la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune langue n'est détectée, il redirigera vers la langue par défaut.
 
@@ -515,7 +569,9 @@ export default defineConfig({
 
 ---
 
-### Étape 13 : Internationaliser vos métadonnées (Optionnel)
+</Step>
+
+<Step number={13} title="Internationaliser vos métadonnées">
 
 Vous pouvez également utiliser la fonction `getIntlayer` pour accéder à vos dictionnaires de contenu à l'intérieur du chargeur `head` pour des métadonnées tenant compte de la localisation :
 
@@ -562,7 +618,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Étape 13 : Récupérer la langue dans vos actions serveur (Optionnel)
+</Step>
+
+<Step number={13} title="Récupérer la langue dans vos actions serveur">
 
 Vous voudrez peut-être accéder à la langue actuelle depuis vos actions serveur ou vos points de terminaison d'API.
 Vous pouvez le faire en utilisant l'utilitaire `getLocale` d'`intlayer`.
@@ -599,7 +657,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Étape 14 : Gérer les pages non trouvées (Optionnel)
+</Step>
+
+<Step number={14} title="Gérer les pages non trouvées">
 
 Lorsqu'un utilisateur visite une page inexistante, vous pouvez afficher une page 404 personnalisée et le préfixe de langue peut impacter la manière dont la page non trouvée est déclenchée.
 
@@ -673,7 +733,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Optionnel) Étape 15 : Extraire le contenu de vos composants
+</Step>
+
+<Step number={15} title="Extraire le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre du temps.
 
@@ -786,7 +848,9 @@ bun run build # Ou bun run dev
 
 ---
 
-### Étape 16 : Générer un Sitemap (Optionnel)
+</Step>
+
+<Step number={16} title="Générer un Sitemap">
 
 Intlayer est livré avec un générateur de sitemap intégré pour vous aider à créer facilement un sitemap pour votre application. Il gère les routes localisées et ajoute les métadonnées nécessaires pour les moteurs de recherche.
 
@@ -859,7 +923,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Étape 17 : Configurer TypeScript (Optionnel)
+</Step>
+
+<Step number={17} title="Configurer TypeScript">
 
 Intlayer utilise l'augmentation de module pour bénéficier des avantages de TypeScript et rendre votre base de code plus robuste.
 
@@ -890,6 +956,10 @@ Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Extension VS Code
 
 Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'**extension officielle Intlayer VS Code**.