@intlayer/docs 9.5.5 → 9.5.7

package/docs/fr/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-03-24
+updatedAt: 2026-09-21
 title: Contenu HTML
 description: Apprenez à déclarer et à utiliser du contenu HTML avec des composants personnalisés dans Intlayer. Suivez cette documentation pour intégrer du contenu riche de type HTML avec un remplacement dynamique de composants dans votre projet internationalisé.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -235,6 +237,83 @@ Lorsque vous accédez au contenu via `useIntlayer`, les nœuds HTML sont déjà
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Dans Remix 3, les nœuds HTML sont résolus 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 { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.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 HTML a besoin.
+
+    Utilisez la méthode `.use()` pour surcharger des balises ou mapper des composants personnalisés. Les surcharges sont des fonctions renvoyant une chaîne HTML :
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Dans Astro, les nœuds HTML sont résolus 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 { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > Astro échappe les `{expressions}` par défaut. `set:html` est le mécanisme d'exclusion, ce dont une chaîne HTML a besoin.
+
+    Utilisez la méthode `.use()` pour surcharger des balises ou mapper des composants personnalisés. Les surcharges sont des fonctions renvoyant une chaîne HTML :
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuration Globale avec `HTMLProvider`
@@ -470,6 +549,41 @@ Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre applic
     > L'importation dynamique de votre moteur de rendu HTML 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 `useHTMLRenderer()`. Les nœuds `html` renvoyés par `useIntlayer` sont rendus tels quels ; surchargez leurs balises par nœud avec `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Utilisez `installIntlayerHTMLDynamic(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 `useHTMLRenderer()`. Les nœuds `html` renvoyés par `useIntlayer` sont rendus tels quels ; surchargez leurs balises par nœud avec `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    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.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Utilisez `installIntlayerHTMLDynamic(async () => …)` pour charger le renderer lui-même de manière paresseuse ; le chargeur ne s'exécute qu'au premier appel.
+
+  </Tab>
 </Tabs>
 
 ### Rendu Manuel et Outils Avancés
@@ -642,15 +756,69 @@ Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    Obtenez une fonction de rendu préconfigurée par `installIntlayerHTML()`. Elle renvoie une chaîne HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Utilitaire `renderHTML()`
+
+    Utilitaire autonome qui ignore la configuration globale.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    Obtenez une fonction de rendu préconfigurée par `installIntlayerHTML()`. Elle renvoie une chaîne HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Utilitaire `renderHTML()`
+
+    Utilitaire autonome qui ignore la configuration globale.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Référence des Options
 
 Ces options peuvent être passées à `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` et `renderHTML`.
 
-| Option       | Type                  | Défaut | Description                                                                                                              |
-| :----------- | :-------------------- | :----- | :----------------------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`   | Une carte des balises HTML ou des noms de composants personnalisés vers les composants.                                  |
-| `renderHTML` | `Function`            | `null` | Une fonction de rendu personnalisée pour remplacer complètement le parseur HTML par défaut (uniquement pour Vue/Svelte). |
+| Option       | Type                  | Défaut | Description                                                                                                                            |
+| :----------- | :-------------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`   | Une carte des balises HTML ou des noms de composants personnalisés vers les composants.                                                |
+| `renderHTML` | `Function`            | `null` | Une fonction de rendu personnalisée pour remplacer complètement le parseur HTML par défaut (fournisseurs Vue, Svelte, Remix et Astro). |
 
 > Note : Pour React et Preact, les balises HTML standard sont fournies automatiquement. Vous n'avez besoin de passer la prop `components` que si vous souhaitez les remplacer ou ajouter des composants personnalisés.

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"]}