@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/fr/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Comment configurer Intlayer avec Storybook
-description: Apprenez à rendre votre système de conception multilingue en utilisant Intlayer avec Storybook - compilez les déclarations de contenu, ajoutez un sélecteur de langue et prévisualisez vos composants dans n'importe quelle langue.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Guide complet pour traduire votre application"
+description: "Le guide 2026 pour créer une application Storybook multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
   - Internationalisation
   - Documentation
@@ -31,16 +31,54 @@ history:
 
 <TOC/>
 
-## 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. Elle fonctionne au **niveau du composant** - chaque composant possède ses propres déclarations de contenu - gardant les traductions colocalisées avec le code qui les utilise.
+Par rapport aux solutions principales telles que `storybook-react-i18next` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
 
-- **Gérer les traductions de manière déclarative** avec des fichiers de contenu par composant.
-- **Bénéficier d'un support TypeScript complet** grâce aux types auto-générés et à l'autocomplétion de l'IDE.
-- **Changer de langue au moment de l'exécution** sans recharger la page.
-- **Traduire automatiquement** avec des intégrations intégrées de fournisseurs d'IA.
+<Accordion header="Couverture complète du livre d'histoires">
+
+Intlayer est optimisé pour fonctionner parfaitement avec Storybook en proposant des **décorateurs d'histoires multilingues**, un **changement de paramètres régionaux** et toutes les fonctionnalités nécessaires à la mise à l'échelle de l'internationalisation (i18n) dans votre système de conception.
+
+</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>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook est l'outil standard de l'industrie pour développer et documenter des
 <Tabs>
 <Tab value="Vite Setup">
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Étape 2 : Créer une configuration Intlayer
+</Step>
+
+<Step number={2} title="Créer une configuration Intlayer">
 
 Créez `intlayer.config.ts` à la racine de votre projet (ou à l'intérieur de votre paquet design-system) :
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Étape 3 : Ajouter le plugin Vite à Storybook
+</Step>
+
+<Step number={3} title="Ajouter le plugin Vite à Storybook">
 
 Le hook `viteFinal` de Storybook vous permet d'étendre la configuration interne de Vite. Importez et ajoutez le plugin `intlayer()` ici :
 
@@ -159,7 +203,9 @@ Le plugin `intlayer()` surveille vos fichiers `*.content.ts` et reconstruit auto
 
 ---
 
-### Étape 4 : Ajouter le décorateur `IntlayerProvider` et une barre d'outils de langue
+</Step>
+
+<Step number={4} title="Ajouter le décorateur `IntlayerProvider` et une barre d'outils de langue">
 
 Le fichier `preview` de Storybook est l'endroit idéal pour envelopper chaque story avec l' `IntlayerProvider` et exposer un sélecteur de langue dans la barre d'outils :
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Étape 1 : Installer les dépendances
+</Step>
+
+<Step number={1} title="Installer les dépendances">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Étape 2 : Créer une configuration Intlayer
+</Step>
+
+<Step number={2} title="Créer une configuration Intlayer">
 
 Créez `intlayer.config.ts` à la racine de votre projet :
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Étape 3 : Configurer le Webpack de Storybook
+</Step>
+
+<Step number={3} title="Configurer le Webpack de Storybook">
 
 Pour les configurations Storybook basées sur Webpack (par ex. `@storybook/react-webpack5`), étendez la configuration webpack via `webpackFinal` pour ajouter les alias et le chargeur Intlayer :
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Étape 4 : Ajouter le décorateur `IntlayerProvider` et une barre d'outils de langue
+</Step>
+
+<Step number={4} title="Ajouter le décorateur `IntlayerProvider` et une barre d'outils de langue">
 
 Même chose que pour la configuration Vite - ajoutez le décorateur et le type de langue global dans `.storybook/preview.tsx` :
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Déclaration de contenu
 
 Créez un fichier `*.content.ts` à côté de chaque composant. Intlayer le détecte automatiquement pendant la compilation.

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 votre application"
+description: "Oubliez i18next. Le guide 2026 pour créer une application SvelteKit multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
   - Internationalisation
   - Documentation
@@ -59,16 +59,54 @@ 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>
 
-- **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.
+<Accordion header="Support complet de SvelteKit">
+
+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 +154,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 +188,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 +207,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 +223,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 +246,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 +279,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 +344,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 +378,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 +397,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 +413,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 +436,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 +460,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 +487,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 +701,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 +736,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 +779,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 +800,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 +827,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.
 
@@ -848,6 +924,9 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### Configuration Git