@intlayer/docs 9.5.6 → 9.5.8

package/docs/fr/dictionary/markdown.md

@@ -1,16 +1,17 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
-description: Découvrez comment déclarer et utiliser du contenu Markdown sur votre site multilingue avec Intlayer. Suivez les étapes de cette documentation en ligne pour intégrer facilement Markdown à votre projet.
+description: Apprenez à déclarer et à utiliser du contenu Markdown dans votre site Web multilingue avec Intlayer. Suivez les étapes de cette documentation en ligne pour intégrer Markdown de manière transparente dans votre projet.
 keywords:
   - Markdown
-  - Internationalisation
-  - Documentation
+  - Dictionnaire
   - Intlayer
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +488,111 @@ Le rendu Markdown prend en charge **MDX** — utilisez n'importe quel composant
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Dans Remix 3, les nœuds Markdown sont rendus sur le serveur en une chaîne HTML. Injectez-la avec la prop `innerHTML` de Remix JSX, ou avec `html.raw` dans une vue `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix échappe les valeurs interpolées par défaut. `innerHTML` et `html.raw` sont les deux mécanismes d'exclusion, ce dont une chaîne Markdown rendue a besoin.
+
+    Vous pouvez également fournir des surcharges locales pour des balises spécifiques à l'aide de la méthode `.use()`. Les surcharges sont des fonctions renvoyant une chaîne HTML :
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` est la chaîne HTML rendue, tandis que `String()` / `.toString()` renvoient la source Markdown brute :
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Et vous pouvez accéder aux métadonnées de votre markdown comme ceci :
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Dans Astro, les nœuds Markdown sont rendus en une chaîne HTML. Injectez-la avec la directive `set:html` dans le template, ou avec `innerHTML` dans un `<script>` côté client.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro échappe les `{expressions}` par défaut. `set:html` est le mécanisme d'exclusion, ce dont une chaîne Markdown rendue a besoin.
+
+    Vous pouvez également fournir des surcharges locales pour des balises spécifiques à l'aide de la méthode `.use()`. Les surcharges sont des fonctions renvoyant une chaîne HTML :
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` est la chaîne HTML rendue, tandis que `String()` / `.toString()` renvoient la source Markdown brute :
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Et vous pouvez accéder aux métadonnées de votre markdown comme ceci :
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utilitaires d'aide (Chaînes Markdown Uniquement)
@@ -698,6 +804,60 @@ Ces utilitaires rendent **des chaînes Markdown brutes** et sont indépendants d
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtenez une fonction de rendu préconfigurée par `installIntlayerMarkdown()`. Elle renvoie une chaîne HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utilitaire `renderMarkdown()`
+
+    Utilitaire autonome qui ignore la configuration globale.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtenez une fonction de rendu préconfigurée par `installIntlayerMarkdown()`. Elle renvoie une chaîne HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utilitaire `renderMarkdown()`
+
+    Utilitaire autonome qui ignore la configuration globale.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuration Globale avec `MarkdownProvider`
@@ -998,6 +1158,73 @@ Vous pouvez également utiliser votre propre moteur de rendu Markdown :
     > L'import dynamique de votre système de rendu Markdown est un bon moyen de réduire la taille du bundle de votre application.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix n'a pas d'arbre de composants pour contenir un provider, la configuration est donc installée une seule fois, en tant que singleton, au démarrage du serveur. Elle configure le renderer renvoyé par `useMarkdownRenderer()`. Les nœuds `md` renvoyés par `useIntlayer` sont rendus avec le compilateur par défaut ; surchargez leurs balises par nœud avec `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    Vous pouvez également utiliser votre propre rendu de markdown :
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Utilisez `installIntlayerMarkdownDynamic(async () => …)` pour charger le renderer lui-même de manière paresseuse ; le chargeur ne s'exécute qu'au premier appel.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro n'a pas d'arbre de composants pour contenir un provider, la configuration est donc installée une seule fois, en tant que singleton, dans le middleware (serveur) et dans un `<script>` côté client (navigateur). Elle configure le renderer renvoyé par `useMarkdownRenderer()`. Les nœuds `md` renvoyés par `useIntlayer` sont rendus avec le compilateur par défaut ; surchargez leurs balises par nœud avec `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // S'exécute une fois au démarrage du serveur ; le middleware Intlayer lui-même est
+    // enregistré par l'intégration, en amont de ce fichier.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Vous pouvez également utiliser votre propre rendu de markdown :
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Utilisez `installIntlayerMarkdownDynamic(async () => …)` pour charger le renderer lui-même de manière paresseuse ; le chargeur ne s'exécute qu'au premier appel.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1326,6 +1553,40 @@ Vous pouvez utiliser la fonction `parseMarkdown` du package Intlayer de votre fr
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 effectue le rendu sur le serveur et diffuse le HTML, aucun AST n'a donc besoin d'être transmis au client. Analysez-le une seule fois et rendez l'AST là où la page est construite :
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Analyser le markdown en un AST sérialisable (ex. une fois, au chargement du module)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Rendre l'AST : le renderer accepte une chaîne brute ou l'AST analysé
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Les pages Astro sont rendues sur le serveur, aucun AST n'a donc besoin d'être transmis au client. Analysez le Markdown dans le frontmatter et rendez-le avec `set:html` :
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Analyser le markdown en un AST sérialisable
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Rendre l'AST : le renderer accepte une chaîne brute ou l'AST analysé -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Ce modèle garantit que la logique d'analyse Markdown est entièrement exécutée sur le serveur, ce qui réduit considérablement le temps d'exécution côté client et améliore la vitesse d'hydratation initiale.

package/docs/fr/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-29
+updatedAt: 2026-09-21
 title: "Analog i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Analog multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configuration de votre projet">
 
+### Architecture
+
+Dans cette architecture, `angular-intlayer` fournit `provideIntlayer()`, enregistré dans `src/app/app.config.ts` afin que chaque composant et chaque page basée sur les fichiers puissent lire leur contenu via le signal `useIntlayer`. Analog repose sur Vite, le plugin `intlayer()` de `vite-intlayer` est donc ajouté aux côtés d'`analog()` dans `vite.config.ts` pour observer et reconstruire vos déclarations de contenu et exécuter le proxy de locale. Les déclarations de contenu sont placées aux côtés des composants et des pages dans `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Configuration
+
 Créez un fichier de configuration pour configurer les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/fr/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-29
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Angular 19 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configuration de votre projet">
 
+### Architecture
+
+Dans cette architecture, `angular-intlayer` fournit `provideIntlayer()`, enregistré dans `src/app/app.config.ts` afin que chaque composant puisse lire son contenu via le signal `useIntlayer`. L'Angular CLI est configurée avec le builder Webpack personnalisé, et `webpack.config.ts` fusionne le plugin Intlayer dans le build pour observer et reconstruire vos déclarations de contenu. Les déclarations de contenu sont placées aux côtés des composants dans `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Configuration
+
 Créez un fichier de configuration pour configurer les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/fr/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-29
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Angular 22 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configuration de votre projet">
 
+### Architecture
+
+Dans cette architecture, `angular-intlayer` fournit `provideIntlayer()`, enregistré dans `src/app/app.config.ts` afin que chaque composant puisse lire son contenu via le signal `useIntlayer`. L'Angular CLI est configurée avec le builder esbuild personnalisé, et `esbuild.plugins.ts` enregistre le plugin Intlayer dans le build pour observer et reconstruire vos déclarations de contenu. Les déclarations de contenu sont placées aux côtés des composants dans `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour configurer les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/fr/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer`, et les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"

package/docs/fr/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Lit multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -168,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Lit (`src/components/lit/LitDemo.ts`) reçoit la locale détectée par le serveur en prop et la transmet à `lit-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"

package/docs/fr/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Preact multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Preact (`src/components/preact/PreactIsland.tsx`) reçoit la locale détectée par le serveur en prop et la transmet à `preact-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"

package/docs/fr/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + React i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + React multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -170,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot React (`src/components/react/ReactIsland.tsx`) reçoit la locale détectée par le serveur en prop et la transmet à `react-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"

package/docs/fr/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Solid multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Solid (`src/components/solid/SolidIsland.tsx`) reçoit la locale détectée par le serveur en prop et la transmet à `solid-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"

package/docs/fr/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Astro + Svelte multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -167,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </Step>
 <Step number={2} title="Configurer votre projet">
 
+### Architecture
+
+Dans cette architecture, l'intégration `intlayer()` enregistrée dans `astro.config.ts` compile vos dictionnaires et ajoute un middleware qui résout la locale de chaque requête et l'expose sur `Astro.locals.intlayer`. Les pages résident sous un segment rest `src/pages/[...locale]/`, ainsi la locale par défaut est servie sans préfixe et chaque autre locale dispose de sa propre URL dédiée. Les fichiers `.astro` lisent le contenu avec les hooks `useIntlayer` / `useLocale` d'`astro-intlayer` pour le rendu serveur, et l'îlot Svelte (`src/components/svelte/SvelteIsland.svelte`) reçoit la locale détectée par le serveur en prop et la transmet à `svelte-intlayer` pour la partie interactive. Les déclarations de contenu sont placées aux côtés de vos composants dans `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
+
 Créez un fichier de configuration pour définir les langues de votre application :
 
 ```typescript fileName="intlayer.config.ts"