@intlayer/docs 9.5.5 → 9.5.7

package/docs/it/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-03-24
+updatedAt: 2026-09-21
 title: Contenuto HTML
 description: Scopri come dichiarare e usare contenuti HTML con componenti personalizzati in Intlayer. Segui questa documentazione per incorporare contenuti ricchi in stile HTML con sostituzione dinamica dei componenti nel tuo progetto internazionalizzato.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
   - Solid
   - Angular
 slugs:
@@ -238,6 +240,83 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    In Remix 3, i nodi HTML si risolvono in una stringa HTML. Inseriscila con la prop `innerHTML` di Remix JSX o con `html.raw` in una vista `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 esegue l'escape dei valori interpolati per impostazione predefinita. `innerHTML` e `html.raw` sono i due meccanismi di esclusione, che è ciò di cui ha bisogno una stringa HTML.
+
+    Usa il metodo `.use()` per sovrascrivere i tag o mappare componenti personalizzati. Le sovrascritture sono funzioni che restituiscono una stringa 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">
+    In Astro, i nodi HTML si risolvono in una stringa HTML. Inseriscila con la direttiva `set:html` nel template o con `innerHTML` in uno `<script>` 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 esegue l'escape di `{espressioni}` per impostazione predefinita. `set:html` è il meccanismo di esclusione, che è ciò di cui ha bisogno una stringa HTML.
+
+    Usa il metodo `.use()` per sovrascrivere i tag o mappare componenti personalizzati. Le sovrascritture sono funzioni che restituiscono una stringa HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configurazione globale con `HTMLProvider`
@@ -473,6 +552,41 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, all'avvio del server. Configura il renderer restituito da `useHTMLRenderer()`. I nodi `html` restituiti da `useIntlayer` vengono renderizzati così come sono; sovrascrivi i loro tag per nodo con `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Usa `installIntlayerHTMLDynamic(async () => …)` per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, nel middleware (server) e in uno `<script>` client (browser). Configura il renderer restituito da `useHTMLRenderer()`. I nodi `html` restituiti da `useIntlayer` vengono renderizzati così come sono; sovrascrivi i loro tag per nodo con `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Viene eseguito una sola volta all'avvio del server; il middleware Intlayer stesso è
+    // registrato dall'integrazione, prima di questo file.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Usa `installIntlayerHTMLDynamic(async () => …)` per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.
+
+  </Tab>
 </Tabs>
 
 ### Rendering manuale e strumenti avanzati
@@ -645,15 +759,69 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    Ottieni una funzione di rendering preconfigurata da `installIntlayerHTML()`. Restituisce una stringa HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Utility `renderHTML()`
+
+    Utility autonoma che ignora la configurazione globale.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    Ottieni una funzione di rendering preconfigurata da `installIntlayerHTML()`. Restituisce una stringa HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Utility `renderHTML()`
+
+    Utility autonoma che ignora la configurazione globale.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Riferimento delle opzioni
 
 Queste opzioni possono essere passate a `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, e `renderHTML`.
 
-| Opzione      | Tipo                  | Predefinito | Descrizione                                                                                                                        |
-| :----------- | :-------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`        | Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti.                                                  |
-| `renderHTML` | `Function`            | `null`      | Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte). |
+| Opzione      | Tipo                  | Predefinito | Descrizione                                                                                                                             |
+| :----------- | :-------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`        | Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti.                                                       |
+| `renderHTML` | `Function`            | `null`      | Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (provider Vue, Svelte, Remix e Astro). |
 
 > Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop `components` solo se si desidera sovrascriverli o aggiungere componenti personalizzati.

package/docs/it/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Scopri come dichiarare e utilizzare i contenuti Markdown nel tuo sito web multilingue con Intlayer. Segui i passaggi in questa documentazione online per integrare perfettamente Markdown nel tuo progetto.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Il rendering del Markdown supporta **MDX** — usa qualsiasi componente JSX/fram
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    In Remix 3, i nodi Markdown vengono renderizzati sul server in una stringa HTML. Inseriscila con la prop `innerHTML` di Remix JSX o con `html.raw` in una vista `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 esegue l'escape dei valori interpolati per impostazione predefinita. `innerHTML` e `html.raw` sono i due meccanismi di esclusione, che è ciò di cui ha bisogno una stringa Markdown renderizzata.
+
+    Puoi anche fornire override locali per tag specifici utilizzando il metodo `.use()`. Gli override sono funzioni che restituiscono una stringa HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` è la stringa HTML renderizzata, mentre `String()` / `.toString()` restituiscono il sorgente Markdown non elaborato:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    E puoi accedere ai metadati del tuo markdown in questo modo:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    In Astro, i nodi Markdown vengono renderizzati in una stringa HTML. Inseriscila con la direttiva `set:html` nel template o con `innerHTML` in uno `<script>` 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 esegue l'escape di `{espressioni}` per impostazione predefinita. `set:html` è il meccanismo di esclusione, che è ciò di cui ha bisogno una stringa Markdown renderizzata.
+
+    Puoi anche fornire override locali per tag specifici utilizzando il metodo `.use()`. Gli override sono funzioni che restituiscono una stringa HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` è la stringa HTML renderizzata, mentre `String()` / `.toString()` restituiscono il sorgente Markdown non elaborato:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    E puoi accedere ai metadati del tuo markdown in questo modo:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utility di Supporto (Solo Stringhe Markdown)
@@ -698,6 +805,60 @@ Queste utility eseguono il rendering **solo di stringhe Markdown pure** e sono i
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Ottieni una funzione di rendering preconfigurata da `installIntlayerMarkdown()`. Restituisce una stringa HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utility `renderMarkdown()`
+
+    Utility autonoma che ignora la configurazione globale.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Ottieni una funzione di rendering preconfigurata da `installIntlayerMarkdown()`. Restituisce una stringa HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utility `renderMarkdown()`
+
+    Utility autonoma che ignora la configurazione globale.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configurazione Globale con `MarkdownProvider`
@@ -998,6 +1159,73 @@ Puoi anche usare il tuo markdown renderer personalizzato:
     > Importare dinamicamente il tuo renderer Markdown è un buon modo per ridurre le dimensioni del bundle della tua applicazione.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, all'avvio del server. Configura il renderer restituito da `useMarkdownRenderer()`. I nodi `md` restituiti da `useIntlayer` vengono renderizzati con il compilatore predefinito; sovrascrivi i loro tag per nodo con `.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>`,
+      },
+    });
+    ```
+
+    Puoi anche utilizzare il tuo renderer 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;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, nel middleware (server) e in uno `<script>` client (browser). Configura il renderer restituito da `useMarkdownRenderer()`. I nodi `md` restituiti da `useIntlayer` vengono renderizzati con il compilatore predefinito; sovrascrivi i loro tag per nodo con `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Viene eseguito una sola volta all'avvio del server; il middleware Intlayer stesso è
+    // registrato dall'integrazione, prima di questo file.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Puoi anche utilizzare il tuo renderer 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;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1326,6 +1554,40 @@ Invece di inviare stringhe Markdown grezze al client e analizzarle nel browser (
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 esegue il rendering sul server e trasmette l'HTML in streaming, quindi nessun AST deve raggiungere il client. Esegui il parsing una volta e renderizza l'AST ovunque venga creata la pagina:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Esegui il parsing del markdown in un AST serializzabile (es. una volta, al caricamento del modulo)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Renderizza l'AST: il renderer accetta una stringa non elaborata o l'AST analizzato
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Le pagine Astro vengono renderizzate sul server, quindi nessun AST deve raggiungere il client. Esegui il parsing del Markdown nel frontmatter e renderizzalo con `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Esegui il parsing del markdown in un AST serializzabile
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Renderizza l'AST: il renderer accetta una stringa non elaborata o l'AST analizzato -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Questo modello garantisce che la logica di analisi del Markdown venga eseguita interamente sul server, riducendo significativamente il tempo di esecuzione lato client e migliorando la velocità di idratazione iniziale.

package/docs/it/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Analog multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configurazione del tuo Progetto">
 
+### Architettura
+
+In questa architettura, `angular-intlayer` fornisce `provideIntlayer()`, registrato in `src/app/app.config.ts` in modo che ogni componente e pagina basata su file possa leggere il proprio contenuto tramite il segnale `useIntlayer`. Analog è basato su Vite, quindi il plugin `intlayer()` di `vite-intlayer` viene aggiunto accanto ad `analog()` in `vite.config.ts` per monitorare e ricostruire le dichiarazioni di contenuto ed eseguire il proxy della locale. Le dichiarazioni di contenuto sono posizionate accanto ai componenti e alle pagine in `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
+```
+
+### Configurazione
+
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/it/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Angular 19 multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configurazione del progetto">
 
+### Architettura
+
+In questa architettura, `angular-intlayer` fornisce `provideIntlayer()`, registrato in `src/app/app.config.ts` in modo che ogni componente possa leggere il proprio contenuto tramite il segnale `useIntlayer`. La CLI di Angular viene configurata con il builder Webpack personalizzato, e `webpack.config.ts` unisce il plugin Intlayer nella build per monitorare e ricostruire le dichiarazioni di contenuto. Le dichiarazioni di contenuto sono posizionate accanto ai componenti in `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
+```
+
+### Configurazione
+
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/it/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Angular 22 multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configurazione del tuo progetto">
 
+### Architettura
+
+In questa architettura, `angular-intlayer` fornisce `provideIntlayer()`, registrato in `src/app/app.config.ts` in modo che ogni componente possa leggere il proprio contenuto tramite il segnale `useIntlayer`. La CLI di Angular viene configurata con il builder esbuild personalizzato, e `esbuild.plugins.ts` registra il plugin Intlayer nella build per monitorare e ricostruire le dichiarazioni di contenuto. Le dichiarazioni di contenuto sono posizionate accanto ai componenti in `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
+```
+
+### Configurazione
+
 Crea un file di configurazione per impostare le lingue della tua applicazione:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}