@intlayer/docs 8.11.2 → 8.11.3

package/docs/pt/intlayer_with_astro_svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Svelte i18n - Como traduzir uma aplicação Astro + Svelte em 2026
-description: Aprenda como adicionar internacionalização (i18n) ao seu site Astro + Svelte com o Intlayer. Siga este guia para tornar seu site multilíngue.
+updatedAt: 2026-05-31
+title: Astro + Svelte i18n - Guia completo para traduzir Astro + Svelte
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Astro and Svelte site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - internacionalização
   - documentação
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `astro-i18n` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do Astro">
 
-- **Gerenciar traduções facilmente**: Usando dicionários declarativos ao nível do componente.
-- **Localizar metadversas, rotas e conteúdo dinamicamente**.
-- **Garantir suporte TypeScript**: Com tipos gerados automaticamente para melhor preenchimento automático e detecção de erros.
-- **Beneficiar de recursos avançados**: Como detecção dinâmica de idioma e troca de idioma.
+O Intlayer é otimizado para funcionar perfeitamente com o Astro, oferecendo **roteamento multilíngue**, **mapa do site** e todos os recursos necessários para dimensionar a internacionalização (i18n).
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +106,9 @@ Com o Intlayer, você pode:
 
 Confira o [modelo da aplicação](https://github.com/aymericzip/intlayer-astro-template) no GitHub.
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Integração oficial do Astro que permite o uso de islands de componentes Svelte.
 
-### Passo 2: Configurar seu Projeto
+</Step>
+
+<Step number={2} title="Configurar seu Projeto">
 
 Crie um arquivo de configuração para definir os idiomas da sua aplicação:
 
@@ -143,7 +178,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamentos de middleware, nomes de cookies, localização e extensões de declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Integrar o Intlayer na sua configuração do Astro
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua configuração do Astro">
 
 Adicione o plugin `intlayer` e a integração do Svelte à sua configuração do Astro.
 
@@ -164,7 +201,9 @@ export default defineConfig({
 
 > A integração `svelte()` permite o uso de islands de componentes Svelte via `client:only="svelte"`.
 
-### Passo 4: Declarar seu conteúdo
+</Step>
+
+<Step number={4} title="Declarar seu conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -190,7 +229,9 @@ export default appContent;
 
 > Para mais informações, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
-### Passo 5: Usar o conteúdo no Astro
+</Step>
+
+<Step number={5} title="Usar o conteúdo no Astro">
 
 Você pode consumir os dicionários diretamente nos seus arquivos `.astro` usando os ajudantes principais exportados do `intlayer`. Você também deve adicionar metadados de SEO (como hreflang e links canônicos) a cada página e introduzir uma island de Svelte para conteúdo interativo no lado do cliente.
 
@@ -278,7 +319,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** todos os URLs recebem um prefixo de idioma. Você pode usar o padrão `[locale]` se não precisar lidar com a raiz separadamente.
 > - **`search-param` ou `no-prefix`:** não são necessários diretórios de idioma. O idioma é tratado via parâmetros de consulta ou cookies.
 
-### Passo 6: Criar um componente Island de Svelte
+</Step>
+
+<Step number={6} title="Criar um componente Island de Svelte">
 
 Crie um componente de island que envolva sua aplicação Svelte. Você deve chamar o `setupIntlayer` com a localidade detectada pelo servidor antes de acessar os stores.
 
@@ -323,7 +366,9 @@ Crie um componente de island que envolva sua aplicação Svelte. Você deve cham
 
 > A prop `locale` é passada da página Astro (detecção no servidor) e usada para inicializar o `setupIntlayer`, definindo o idioma inicial para todos os stores no componente.
 
-### Passo 7: Adicionar um Seletor de Idioma
+</Step>
+
+<Step number={7} title="Adicionar um Seletor de Idioma">
 
 A funcionalidade de troca de idioma está integrada diretamente na island de Svelte (veja o passo 6 acima). Ela usa o store `useLocale` do `svelte-intlayer` e navega para a URL localizada quando um usuário seleciona um novo idioma:
 
@@ -367,7 +412,9 @@ A funcionalidade de troca de idioma está integrada diretamente na island de Sve
 > **Nota sobre persistência:**
 > O uso de `onLocaleChange` para redirecionar via `window.location.href` garante que a nova URL linguística seja visitada, permitindo que o middleware do Intlayer defina o cookie de idioma e lembre da preferência do usuário em visitas futuras.
 
-### Passo 8: Sitemap e Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap e Robots.txt">
 
 O Intlayer oferece utilitários para criar dinamicamente o seu sitemap localizado e os arquivos robots.txt.
 
@@ -475,7 +522,9 @@ Para mais informações sobre o uso da extensão, consulte a [documentação da
 
 ---
 
-### (Opcional) Passo 15: Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={15} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -576,3 +625,7 @@ bun run build # Or bun run dev
 ### Aprofunde seu conhecimento
 
 Se quiser saber mais, você também pode implementar o [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou usar o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md) para externalizar seu conteúdo.
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_astro_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vanilla JS i18n - Como traduzir uma aplicação Astro + Vanilla JS em 2026
-description: Aprenda como adicionar internacionalização (i18n) ao seu site Astro + Vanilla JS com o Intlayer. Siga este guia para tornar seu site multilíngue.
+updatedAt: 2026-05-31
+title: Astro + Vanilla JS i18n - Guia completo para traduzir Astro + Vanilla JS
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Astro and Vanilla JS site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - internacionalização
   - documentação
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `astro-i18n` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do Astro">
 
-- **Gerenciar traduções facilmente**: Usando dicionários declarativos ao nível do componente.
-- **Localizar metadversas, rotas e conteúdo dinamicamente**.
-- **Garantir suporte TypeScript**: Com tipos gerados automaticamente para melhor preenchimento automático e detecção de erros.
-- **Beneficiar de recursos avançados**: Como detecção dinâmica de idioma e troca de idioma.
+O Intlayer é otimizado para funcionar perfeitamente com o Astro, oferecendo **roteamento multilíngue**, **mapa do site** e todos os recursos necessários para dimensionar a internacionalização (i18n).
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +106,9 @@ Com o Intlayer, você pode:
 
 Confira o [modelo da aplicação](https://github.com/aymericzip/intlayer-astro-template) no GitHub.
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -112,7 +145,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   Um pacote para integrar o Intlayer em aplicações Vanilla JavaScript / TypeScript. Ele fornece um singleton Pub/Sub (`IntlayerClient`) e ajudantes baseados em callbacks (`useIntlayer`, `useLocale`, etc.), permitindo que qualquer parte das suas tags `<script>` do Astro responda a mudanças de idioma sem a necessidade de um framework de UI.
 
-### Passo 2: Configurar seu Projeto
+</Step>
+
+<Step number={2} title="Configurar seu Projeto">
 
 Crie um arquivo de configuração para definir os idiomas da sua aplicação:
 
@@ -137,7 +172,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamentos de middleware, nomes de cookies, localização e extensões de declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Integrar o Intlayer na sua configuração do Astro
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua configuração do Astro">
 
 Adicione o plugin `intlayer` à sua configuração do Astro. Para Vanilla JS, nenhuma integração adicional de framework de UI é necessária.
 
@@ -155,7 +192,9 @@ export default defineConfig({
 
 > O plugin de integração `intlayer()` é usado para integrar o Intlayer ao Astro. Ele garante a geração dos arquivos de declaração de conteúdo e os monitora em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Astro e fornece aliases para otimizar o desempenho.
 
-### Passo 4: Declarar seu conteúdo
+</Step>
+
+<Step number={4} title="Declarar seu conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -193,7 +232,9 @@ export default appContent;
 
 > Para mais informações, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
-### Passo 5: Usar o conteúdo no Astro
+</Step>
+
+<Step number={5} title="Usar o conteúdo no Astro">
 
 Com Vanilla JS, toda a renderização no lado do servidor acontece diretamente nos arquivos `.astro` usando `getIntlayer`. Posteriormente, um bloco `<script>` inicializa o `vanilla-intlayer` no cliente para habilitar a troca de idioma.
 
@@ -302,7 +343,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** todos os URLs recebem um prefixo de idioma. Você pode usar o padrão `[locale]` se não precisar lidar com a raiz separadamente.
 > - **`search-param` ou `no-prefix`:** não são necessários diretórios de idioma. O idioma é tratado via parâmetros de consulta ou cookies.
 
-### Passo 6: Adicionar um Seletor de Idioma
+</Step>
+
+<Step number={6} title="Adicionar um Seletor de Idioma">
 
 No Astro com Vanilla JS, o seletor de idioma é renderizado no servidor como links comuns e hidratado no cliente via um bloco `<script>`. Quando um usuário clica em um link de idioma, o `vanilla-intlayer` define o cookie de idioma via `setLocale` antes de navegar para a URL localizada.
 
@@ -343,7 +386,9 @@ No Astro com Vanilla JS, o seletor de idioma é renderizado no servidor como lin
 > **Nota sobre Melhoria Progressiva:**
 > Os links no seletor de idioma funcionarão como tags `<a>` padrão mesmo sem JavaScript. Quando o JavaScript estiver disponível, as chamadas para `setLocale` atualizarão o cookie antes de navegar, garantindo que o middleware execute o redirecionamento correto.
 
-### Passo 7: Sitemap e Robots.txt
+</Step>
+
+<Step number={7} title="Sitemap e Robots.txt">
 
 O Intlayer oferece utilitários para criar dinamicamente o seu sitemap localizado e os arquivos robots.txt.
 
@@ -451,7 +496,9 @@ Para mais informações sobre o uso da extensão, consulte a [documentação da
 
 ---
 
-### (Opcional) Passo 15: Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={15} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -552,3 +599,7 @@ bun run build # Or bun run dev
 ### Aprofunde seu conhecimento
 
 Se quiser saber mais, você também pode implementar o [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou usar o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md) para externalizar seu conteúdo.
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_astro_vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vue i18n - Como traduzir uma aplicação Astro + Vue em 2026
-description: Aprenda como adicionar internacionalização (i18n) ao seu site Astro + Vue com o Intlayer. Siga este guia para tornar seu site multilíngue.
+updatedAt: 2026-05-31
+title: Astro + Vue i18n - Guia completo para traduzir Astro + Vue
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Astro and Vue site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - internacionalização
   - documentação
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `astro-i18n` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa do Astro">
 
-- **Gerenciar traduções facilmente**: Usando dicionários declarativos ao nível do componente.
-- **Localizar metadversas, rotas e conteúdo dinamicamente**.
-- **Garantir suporte TypeScript**: Com tipos gerados automaticamente para melhor preenchimento automático e detecção de erros.
-- **Beneficiar de recursos avançados**: Como detecção dinâmica de idioma e troca de idioma.
+O Intlayer é otimizado para funcionar perfeitamente com o Astro, oferecendo **roteamento multilíngue**, **mapa do site** e todos os recursos necessários para dimensionar a internacionalização (i18n).
+
+</Accordion>
+<Accordion header="Tamanho do bundle">
+
+Em vez de carregar arquivos JSON enormes em suas páginas, carregue apenas o conteúdo necessário. O Intlayer ajuda a **reduzir o tamanho do bundle e das páginas em até 50%**.
+
+</Accordion>
+<Accordion header="Manutenção">
+
+Definir o escopo do conteúdo do seu aplicativo **facilita a manutenção** de aplicativos de grande escala. Você pode duplicar ou excluir uma única pasta de recursos sem o fardo mental de revisar toda a base de código de seu conteúdo. Além disso, o Intlayer é **totalmente tipado (fully typed)** para garantir a precisão do seu conteúdo.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+A co-localização de conteúdo **reduz o contexto necessário** pelos Large Language Models (LLMs). O Intlayer também vem com um conjunto de ferramentas, como uma **CLI** para testar traduções ausentes,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, e **[habilidades do agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para tornar a experiência do desenvolvedor (DX) ainda mais tranquila para os agentes de IA.
+
+</Accordion>
+<Accordion header="Automação">
+
+Use a automação para traduzir seu pipeline de CI/CD usando o LLM de sua escolha às custas de seu provedor de IA. O Intlayer também oferece um **compilador** para automatizar a extração de conteúdo, bem como uma [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ajudar a **traduzir em segundo plano**.
+
+</Accordion>
+<Accordion header="Desempenho">
+
+Conectar arquivos JSON enormes a componentes pode levar a problemas de desempenho e reatividade. O Intlayer otimiza o carregamento do seu conteúdo no momento da construção.
+
+</Accordion>
+<Accordion header="Escalonamento sem nenhum desenvolvedor">
+
+Mais do que apenas uma solução i18n, o Intlayer fornece um **[editor visual] auto-hospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** e um **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ajudá-lo a gerenciar seu conteúdo multilíngue em **tempo real**, facilitando a colaboração com tradutores, redatores e outros membros da equipe. O conteúdo pode ser armazenado local e/ou remotamente.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +106,9 @@ Com o Intlayer, você pode:
 
 Confira o [modelo da aplicação](https://github.com/aymericzip/intlayer-astro-template) no GitHub.
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **@astrojs/vue**
   Integração oficial do Astro que permite o uso de islands de componentes Vue.
 
-### Passo 2: Configurar seu Projeto
+</Step>
+
+<Step number={2} title="Configurar seu Projeto">
 
 Crie um arquivo de configuração para definir os idiomas da sua aplicação:
 
@@ -143,7 +178,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamentos de middleware, nomes de cookies, localização e extensões de declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Integrar o Intlayer na sua configuração do Astro
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua configuração do Astro">
 
 Adicione o plugin `intlayer` e a integração do Vue à sua configuração do Astro.
 
@@ -164,7 +201,9 @@ export default defineConfig({
 
 > A integração `vue()` permite o uso de islands de componentes Vue via `client:only="vue"`.
 
-### Passo 4: Declarar seu conteúdo
+</Step>
+
+<Step number={4} title="Declarar seu conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -190,7 +229,9 @@ export default appContent;
 
 > Para mais informações, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
 
-### Passo 5: Usar o conteúdo no Astro
+</Step>
+
+<Step number={5} title="Usar o conteúdo no Astro">
 
 Você pode consumir os dicionários diretamente nos seus arquivos `.astro` usando os ajudantes principais exportados do `intlayer`. Você também deve adicionar metadados de SEO (como hreflang e links canônicos) a cada página e introduzir uma island de Vue para conteúdo interativo no lado do cliente.
 
@@ -270,7 +311,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** todos os URLs recebem um prefixo de idioma. Você pode usar o padrão `[locale]` se não precisar lidar com a raiz separadamente.
 > - **`search-param` ou `no-prefix`:** não são necessários diretórios de idioma. O idioma é tratado via parâmetros de consulta ou cookies.
 
-### Passo 6: Criar um componente Island de Vue
+</Step>
+
+<Step number={6} title="Criar um componente Island de Vue">
 
 Crie um componente de island que envolva sua aplicação Vue e receba a localidade detectada pelo servidor. Você deve registrar o plugin Intlayer na sua instância Vue chamando `installIntlayer` antes de usar quaisquer composables.
 
@@ -329,7 +372,9 @@ const { title } = useIntlayer("app");
 
 > A prop `locale` é passada da página Astro (detecção no servidor) e usada para inicializar o `installIntlayer`, definindo o idioma inicial para todos os composables na árvore.
 
-### Passo 7: Adicionar um Seletor de Idioma
+</Step>
+
+<Step number={7} title="Adicionar um Seletor de Idioma">
 
 A funcionalidade de troca de idioma está integrada diretamente no template da island de Vue (veja o passo 6 acima). Ela usa o composable `useLocale` do `vue-intlayer` e navega para a URL localizada quando um usuário seleciona um novo idioma:
 
@@ -377,7 +422,9 @@ const {
 > **Nota sobre persistência:**
 > O uso de `onLocaleChange` para redirecionar via `window.location.href` garante que a nova URL linguística seja visitada, permitindo que o middleware do Intlayer defina o cookie de idioma e lembre da preferência do usuário em visitas futuras.
 
-### Passo 8: Sitemap e Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap e Robots.txt">
 
 O Intlayer oferece utilitários para criar dinamicamente o seu sitemap localizado e os arquivos robots.txt.
 
@@ -485,7 +532,9 @@ Para mais informações sobre o uso da extensão, consulte a [documentação da
 
 ---
 
-### (Opcional) Passo 15: Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={15} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -586,3 +635,7 @@ bun run build # Or bun run dev
 ### Aprofunde seu conhecimento
 
 Se quiser saber mais, você também pode implementar o [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou usar o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md) para externalizar seu conteúdo.
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_create_react_app.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-05-06
-title: Create React App i18n - Como traduzir uma aplicação React em 2026
-description: Descubra como tornar seu site Create React App (CRA) multilíngue. Siga a documentação para internacionalizar (i18n) e traduzi-lo.
+updatedAt: 2026-05-31
+title: Create React App i18n - Guia completo para traduzir React
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Create React App site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -45,7 +45,9 @@ Com o Intlayer, você pode:
 
 ## Guia Passo a Passo para Configurar o Intlayer em uma Aplicação React
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -81,7 +83,9 @@ bun x intlayer init
 
 Inclui os comandos e plugins `react-scripts-intlayer` para integrar o Intlayer com a aplicação baseada no Create React App. Esses plugins são baseados no [craco](https://craco.js.org/) e incluem configuração adicional para o empacotador [Webpack](https://webpack.js.org/).
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
@@ -105,7 +109,9 @@ export default config;
 
 > Por meio deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão de suas declarações de conteúdo, desativar logs do Intlayer no console e muito mais. Para uma lista completa de parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 3: Integrar o Intlayer na Configuração do CRA
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na Configuração do CRA">
 
 Altere seus scripts para usar o react-intlayer
 
@@ -119,13 +125,17 @@ Altere seus scripts para usar o react-intlayer
 
 > Os scripts `react-scripts-intlayer` são baseados no [CRACO](https://craco.js.org/). Você também pode implementar sua própria configuração baseada no plugin craco do intlayer. [Veja o exemplo aqui](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
 
-### Passo 4: Declarar Seu Conteúdo
+</Step>
+
+<Step number={4} title="Declarar Seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
 > Os scripts `react-scripts-intlayer` são baseados no [CRACO](https://craco.js.org/). Você também pode implementar sua própria configuração baseada no plugin craco do intlayer. [Veja o exemplo aqui](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
 
-### Passo 4: Declarar Seu Conteúdo
+</Step>
+
+<Step number={4} title="Declarar Seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -173,7 +183,9 @@ export default appContent;
 
 > Se o seu arquivo de conteúdo incluir código TSX, você deve considerar importar `import React from "react";` no seu arquivo de conteúdo.
 
-### Passo 5: Utilize o Intlayer no Seu Código
+</Step>
+
+<Step number={5} title="Utilize o Intlayer no Seu Código">
 
 Acesse seus dicionários de conteúdo em toda a sua aplicação:
 
@@ -222,7 +234,9 @@ export default App;
 >
 > Para saber mais sobre o hook `useIntlayer`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useIntlayer.md).
 
-### (Opcional) Passo 6: Alterar o idioma do seu conteúdo
+</Step>
+
+<Step number={6} title="Alterar o idioma do seu conteúdo" isOptional={true}>
 
 Para alterar o idioma do seu conteúdo, você pode usar a função `setLocale` fornecida pelo hook `useLocale`. Essa função permite definir o idioma da aplicação e atualizar o conteúdo de acordo.
 
@@ -243,7 +257,9 @@ const LocaleSwitcher = () => {
 
 > Para saber mais sobre o hook `useLocale`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md).
 
-### (Opcional) Passo 7: Adicionar Rotas Localizadas à sua aplicação
+</Step>
+
+<Step number={7} title="Adicionar Rotas Localizadas à sua aplicação" isOptional={true}>
 
 O objetivo deste passo é criar rotas únicas para cada idioma. Isso é útil para SEO e URLs amigáveis para SEO.
 Exemplo:
@@ -388,7 +404,9 @@ const App: FC = () => (
 );
 ```
 
-### (Opcional) Passo 8: Alterar a URL quando o idioma muda
+</Step>
+
+<Step number={8} title="Alterar a URL quando o idioma muda" isOptional={true}>
 
 Para alterar a URL quando o idioma muda, você pode usar a prop `onLocaleChange` fornecida pelo hook `useLocale`. Paralelamente, você pode usar os hooks `useLocation` e `useNavigate` do `react-router-dom` para atualizar o caminho da URL.
 
@@ -468,7 +486,9 @@ const LocaleSwitcher: FC = () => {
 > - [Atributo `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - [Atributo `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### (Opcional) Passo 9: Alterar os Atributos de Idioma e Direção do HTML
+</Step>
+
+<Step number={9} title="Alterar os Atributos de Idioma e Direção do HTML" isOptional={true}>
 
 Quando sua aplicação suporta vários idiomas, é crucial atualizar os atributos `lang` e `dir` da tag `<html>` para corresponder ao idioma atual. Isso garante:
 
@@ -624,3 +644,7 @@ Para mais detalhes sobre como usar a extensão, consulte a [documentação da ex
 ### Avançar
 
 Para avançar, você pode implementar o [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou externalizar seu conteúdo usando o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_express.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-05-06
-title: Express i18n - Como traduzir uma aplicação Express em 2026
-description: Descubra como tornar seu backend Express multilíngue. Siga a documentação para internacionalizar (i18n) e traduzi-lo.
+updatedAt: 2026-05-31
+title: Express i18n - Guia completo para traduzir Express
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Express backend multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação