@intlayer/docs 9.5.5 → 9.5.7

package/docs/pt/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-03-24
+updatedAt: 2026-09-21
 title: Conteúdo HTML
 description: Aprenda como declarar e usar conteúdo HTML com componentes personalizados no Intlayer. Siga esta documentação para incorporar conteúdo rico semelhante a HTML com substituição dinâmica de componentes no seu projeto internacionalizado.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
   - Solid
   - Angular
 slugs:
@@ -238,6 +240,83 @@ Quando você acessa conteúdo via `useIntlayer`, os nós HTML já estão prepara
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    No Remix 3, os nós HTML são resolvidos em uma string HTML. Injete-a com a prop `innerHTML` do Remix JSX ou com `html.raw` em uma visualização `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>`;
+    };
+    ```
+
+    > O Remix escapa valores interpolados por padrão. `innerHTML` e `html.raw` são as duas exceções, que é o que uma string HTML precisa.
+
+    Use o método `.use()` para substituir tags ou mapear componentes personalizados. As substituições são funções que retornam uma string 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">
+    No Astro, os nós HTML são resolvidos em uma string HTML. Injete-a com a diretiva `set:html` no template ou com `innerHTML` em um `<script>` do cliente.
+
+    ```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>
+    ```
+
+    > O Astro escapa `{expressões}` por padrão. `set:html` é a exceção, que é o que uma string HTML precisa.
+
+    Use o método `.use()` para substituir tags ou mapear componentes personalizados. As substituições são funções que retornam uma string HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuração Global com `HTMLProvider`
@@ -473,6 +552,41 @@ Você pode configurar a renderização de HTML globalmente para toda a sua aplic
     > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    O Remix não possui uma árvore de componentes para manter um provider, portanto, a configuração é instalada uma vez, como um singleton, na inicialização do servidor. Ela configura o renderizador retornado por `useHTMLRenderer()`. Os nós `html` retornados por `useIntlayer` são renderizados no estado em que se encontram; substitua suas tags por nó com `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Use `installIntlayerHTMLDynamic(async () => …)` para carregar o renderizador de forma preguiçosa; o carregador é executado apenas na primeira chamada.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    O Astro não possui uma árvore de componentes para manter um provider, portanto, a configuração é instalada uma vez, como um singleton, no middleware (servidor) e em um `<script>` do cliente (navegador). Ela configura o renderizador retornado por `useHTMLRenderer()`. Os nós `html` retornados por `useIntlayer` são renderizados no estado em que se encontram; substitua suas tags por nó com `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Executa uma vez quando o servidor inicia; o próprio middleware do Intlayer é
+    // registrado pela integração, antes deste arquivo.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Use `installIntlayerHTMLDynamic(async () => …)` para carregar o renderizador de forma preguiçosa; o carregador é executado apenas na primeira chamada.
+
+  </Tab>
 </Tabs>
 
 ### Renderização Manual e Ferramentas Avançadas
@@ -645,15 +759,69 @@ Se precisar renderizar strings HTML brutas ou tiver mais controlo sobre o mapeam
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    Obtenha uma função de renderização pré-configurada por `installIntlayerHTML()`. Ela retorna uma string HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Utilitário `renderHTML()`
+
+    Utilitário independente que ignora a configuração global.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    Obtenha uma função de renderização pré-configurada por `installIntlayerHTML()`. Ela retorna uma string HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Utilitário `renderHTML()`
+
+    Utilitário independente que ignora a configuração global.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Referência de Opções
 
 Essas opções podem ser passadas para `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` e `renderHTML`.
 
-| Opção        | Tipo                  | Padrão | Descrição                                                                                                                       |
-| :----------- | :-------------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------ |
-| `components` | `Record<string, any>` | `{}`   | Um mapa que associa tags HTML ou nomes de componentes personalizados aos componentes.                                           |
-| `renderHTML` | `Function`            | `null` | Uma função de renderização personalizada para substituir completamente o parser HTML padrão (Apenas para providers Vue/Svelte). |
+| Opção        | Tipo                  | Padrão | Descrição                                                                                                                           |
+| :----------- | :-------------------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`   | Um mapa que associa tags HTML ou nomes de componentes personalizados aos componentes.                                               |
+| `renderHTML` | `Function`            | `null` | Uma função de renderização personalizada para substituir completamente o parser HTML padrão (providers Vue, Svelte, Remix e Astro). |
 
 > Nota: Para React e Preact, as tags HTML padrão são fornecidas automaticamente. Você só precisa passar a prop `components` se quiser sobrescrevê-las ou adicionar componentes personalizados.

package/docs/pt/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Aprenda como declarar e usar conteúdo Markdown em seu site multilíngue com o Intlayer. Siga os passos nesta documentação online para integrar o Markdown de forma nativa ao seu projeto.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ A renderização do Markdown suporta **MDX** — use qualquer componente JSX/fra
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    No Remix 3, os nós Markdown são renderizados no servidor em uma string HTML. Injete-a com a prop `innerHTML` do Remix JSX ou com `html.raw` em uma visualização `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>`;
+    };
+    ```
+
+    > O Remix escapa valores interpolados por padrão. `innerHTML` e `html.raw` são as duas exceções, que é o que uma string Markdown renderizada precisa.
+
+    Você também pode fornecer substituições locais para tags específicas usando o método `.use()`. As substituições são funções que retornam uma string HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` é a string HTML renderizada, enquanto `String()` / `.toString()` retornam a fonte Markdown bruta:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    E você pode acessar os metadados do seu markdown assim:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    No Astro, os nós Markdown são renderizados em uma string HTML. Injete-a com a diretiva `set:html` no template ou com `innerHTML` em um `<script>` do cliente.
+
+    ```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>
+    ```
+
+    > O Astro escapa `{expressões}` por padrão. `set:html` é a exceção, que é o que uma string Markdown renderizada precisa.
+
+    Você também pode fornecer substituições locais para tags específicas usando o método `.use()`. As substituições são funções que retornam uma string HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` é a string HTML renderizada, enquanto `String()` / `.toString()` retornam a fonte Markdown bruta:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    E você pode acessar os metadados do seu markdown assim:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utilitários auxiliares (Somente Strings Markdown)
@@ -698,6 +805,60 @@ Estes utilitários renderizam **apenas strings Markdown brutas** e são independ
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtenha uma função de renderização pré-configurada por `installIntlayerMarkdown()`. Ela retorna uma string HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utilitário `renderMarkdown()`
+
+    Utilitário independente que ignora a configuração global.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtenha uma função de renderização pré-configurada por `installIntlayerMarkdown()`. Ela retorna uma string HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utilitário `renderMarkdown()`
+
+    Utilitário independente que ignora a configuração global.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuração Global com `MarkdownProvider`
@@ -997,6 +1158,73 @@ O `MarkdownProvider` (ou o seu equivalente do framework) configura o pipeline de
     > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do bundle da sua aplicação.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    O Remix não possui uma árvore de componentes para manter um provider, portanto, a configuração é instalada uma vez, como um singleton, na inicialização do servidor. Ela configura o renderizador retornado por `useMarkdownRenderer()`. Os nós `md` retornados por `useIntlayer` são renderizados com o compilador padrão; substitua suas tags por nó com `.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>`,
+      },
+    });
+    ```
+
+    Você também pode usar seu próprio renderizador 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;
+      },
+    });
+    ```
+
+    > Use `installIntlayerMarkdownDynamic(async () => …)` para carregar o renderizador de forma preguiçosa; o carregador é executado apenas na primeira chamada.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    O Astro não possui uma árvore de componentes para manter um provider, portanto, a configuração é instalada uma vez, como um singleton, no middleware (servidor) e em um `<script>` do cliente (navegador). Ela configura o renderizador retornado por `useMarkdownRenderer()`. Os nós `md` retornados por `useIntlayer` são renderizados com o compilador padrão; substitua suas tags por nó com `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Executa uma vez quando o servidor inicia; o próprio middleware do Intlayer é
+    // registrado pela integração, antes deste arquivo.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Você também pode usar seu próprio renderizador 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;
+      },
+    });
+    ```
+
+    > Use `installIntlayerMarkdownDynamic(async () => …)` para carregar o renderizador de forma preguiçosa; o carregador é executado apenas na primeira chamada.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ Você pode usar a função `parseMarkdown` do pacote Intlayer do seu framework n
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    O Remix 3 renderiza no servidor e transmite HTML, portanto, nenhuma AST precisa ser transferida para o cliente. Analise uma vez e renderize a AST onde quer que a página seja construída:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Analisar o markdown em uma AST serializável (por exemplo, uma vez, no carregamento do módulo)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Renderizar a AST: o renderizador aceita uma string bruta ou a AST analisada
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    As páginas do Astro são renderizadas no servidor, portanto, nenhuma AST precisa ser transferida para o cliente. Analise o Markdown no frontmatter e renderize-o com `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Analisar o markdown em uma AST serializável
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Renderizar a AST: o renderizador aceita uma string bruta ou a AST analisada -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Esse padrão garante que a lógica de análise do Markdown seja executada inteiramente no servidor, reduzindo significativamente o tempo de execução no cliente e melhorando a velocidade de hidratação inicial.

package/docs/pt/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Guia completo para traduzir seu aplicativo"
 description: "Sem mais i18next. O guia 2026 para criar uma aplicação Analog multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configuração do seu projeto">
 
+### Arquitetura
+
+Nesta arquitetura, `angular-intlayer` fornece `provideIntlayer()`, registrado em `src/app/app.config.ts` para que cada componente e página baseada em arquivo possa ler seu conteúdo através do signal `useIntlayer`. O Analog é baseado no Vite, portanto, o plugin `intlayer()` do `vite-intlayer` é adicionado ao lado de `analog()` no `vite.config.ts` para observar e reconstruir suas declarações de conteúdo e executar o proxy de localidade. As declarações de conteúdo são colocadas ao lado de componentes e páginas em `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
+```
+
+### Configuração
+
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/pt/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 - Guia completo para traduzir seu aplicativo"
 description: "Sem mais i18next. O guia 2026 para criar uma aplicação Angular 19 multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configuração do seu projeto">
 
+### Arquitetura
+
+Nesta arquitetura, `angular-intlayer` fornece `provideIntlayer()`, registrado em `src/app/app.config.ts` para que cada componente possa ler seu conteúdo através do signal `useIntlayer`. O Angular CLI é alterado para o builder Webpack personalizado, e `webpack.config.ts` mescla o plugin do Intlayer na compilação para observar e recompilar suas declarações de conteúdo. As declarações de conteúdo são colocadas ao lado dos componentes em `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
+```
+
+### Configuração
+
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/pt/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 - Guia completo para traduzir seu aplicativo"
 description: "Sem mais i18next. O guia 2026 para criar uma aplicação Angular 22 multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configuração do seu projeto">
 
+### Arquitetura
+
+Nesta arquitetura, `angular-intlayer` fornece `provideIntlayer()`, registrado em `src/app/app.config.ts` para que cada componente possa ler seu conteúdo através do signal `useIntlayer`. O Angular CLI é alterado para o builder esbuild personalizado, e `esbuild.plugins.ts` registra o plugin do Intlayer na compilação para observar e recompilar suas declarações de conteúdo. As declarações de conteúdo são colocadas ao lado dos componentes em `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
+```
+
+### Configuração
+
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}