@intlayer/docs 8.11.2 → 8.11.3

package/docs/pt/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Como traduzir uma aplicação Tanstack Start em 2026
-description: Aprenda como adicionar internacionalização (i18n) à sua aplicação Tanstack Start usando Intlayer. Siga este guia completo para tornar seu app multilíngue com roteamento sensível ao locale.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Guia completo para traduzir TanStack Start
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu TanStack Start aplicativo multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -55,17 +55,47 @@ history:
 
 Este guia demonstra como integrar o **Intlayer** para uma internacionalização perfeita em projetos Tanstack Start com roteamento sensível ao locale, suporte a TypeScript e práticas modernas de desenvolvimento.
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca inovadora e de código aberto para internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas.
+Comparado com soluções principais como `react-i18next` ou `use-intl`, ou `paraglide`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura total do TanStack Start">
 
-- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir suporte a TypeScript** com tipos gerados automaticamente, melhorando o autocompletar e a detecção de erros.
-- **Aproveitar recursos avançados**, como detecção e troca dinâmica de locale.
-- **Ativar roteamento sensível ao locale** com o sistema de roteamento baseado em arquivos do Tanstack Start.
+O Intlayer é totalmente otimizado para TanStack Start, fornecendo **roteamento multilíngue**, **gerenciamento de cookies**, **geração de mapa de site**, **carregamento dinâmico de conteúdo** e todos os recursos necessários para escalar seus esforços de 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>
 
 ---
 
@@ -103,11 +133,15 @@ Com o Intlayer, você pode:
 
 Veja o [Template de aplicação](https://github.com/aymericzip/intlayer-tanstack-start-template) no GitHub.
 
-### Passo 1: Criar o Projeto
+<Steps>
+
+<Step number={1} title="Criar o Projeto">
 
 Comece criando um novo projeto TanStack Start seguindo o guia [Iniciar novo projeto](https://tanstack.com/start/latest/docs/framework/react/quick-start) no site do TanStack Start.
 
-### Passo 2: Instalar os Pacotes do Intlayer
+</Step>
+
+<Step number={2} title="Instalar os Pacotes do Intlayer">
 
 Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
 
@@ -145,7 +179,9 @@ bun x intlayer init
 - **vite-intlayer**
   Inclui o plugin Vite para integrar o Intlayer com o [empacotador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), assim como middleware para detectar o locale preferido do usuário, gerenciar cookies e lidar com redirecionamento de URLs.
 
-### Passo 3: Configuração do seu projeto
+</Step>
+
+<Step number={3} title="Configuração do seu projeto">
 
 Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
 
@@ -166,7 +202,9 @@ export default config;
 
 > Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar logs do Intlayer no console, e muito mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
 
-### Passo 4: Integre o Intlayer na sua Configuração do Vite
+</Step>
+
+<Step number={4} title="Integre o Intlayer na sua Configuração do Vite">
 
 Adicione o plugin intlayer na sua configuração:
 
@@ -196,7 +234,9 @@ export default config;
 
 > O plugin `intlayer()` para Vite é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora no modo de desenvolvimento. Define as variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.
 
-### Passo 5: Criar Layout Raiz
+</Step>
+
+<Step number={5} title="Criar Layout Raiz">
 
 Configure seu layout raiz para suportar internacionalização usando `useParams` para detectar o locale atual e configurando os atributos `lang` e `dir` na tag `html`.
 
@@ -256,7 +296,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Passo 6: Criar Layout de Localidade
+</Step>
+
+<Step number={6} title="Criar Layout de Localidade">
 
 Crie um layout que lide com o prefixo de locale e realize a validação.
 
@@ -288,7 +330,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Para o modo `'prefix-all'`, você pode preferir mudar o slot para `$locale` em vez disso.
 > Para o modo `'no-prefix'` ou `'search-params'`, você pode remover o slot inteiramente.
 
-### Passo 7: Declare Seu Conteúdo
+</Step>
+
+<Step number={7} title="Declare Seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -335,7 +379,9 @@ export default appContent;
 
 > Para mais detalhes, 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 8: Crie Componentes e Hooks Sensíveis ao Locale
+</Step>
+
+<Step number={8} title="Crie Componentes e Hooks Sensíveis ao Locale">
 
 Crie um componente `LocalizedLink` para navegação sensível ao locale:
 
@@ -439,7 +485,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passo 9: Utilize o Intlayer em Suas Páginas
+</Step>
+
+<Step number={9} title="Utilize o Intlayer em Suas Páginas">
 
 Acesse seus dicionários de conteúdo em toda a sua aplicação:
 
@@ -487,7 +535,9 @@ function RouteComponent() {
 
 > 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).
 
-### Passo 10: Criar um Componente de Troca de Locale
+</Step>
+
+<Step number={10} title="Criar um Componente de Troca de Locale">
 
 Crie um componente para permitir que os usuários mudem de idioma:
 
@@ -548,7 +598,9 @@ export const LocaleSwitcher: FC = () => {
 
 > 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).
 
-### Passo 11: Gerenciamento de Atributos HTML
+</Step>
+
+<Step number={11} title="Gerenciamento de Atributos HTML">
 
 Como visto no Passo 5, você pode gerenciar os atributos `lang` e `dir` da tag `html` usando `useParams` no seu componente raiz. Isso garante que os atributos corretos sejam definidos no servidor e no cliente.
 
@@ -567,7 +619,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Passo 12: Adicionar middleware (Opcional)
+</Step>
+
+<Step number={12} title="Adicionar middleware">
 
 Você também pode usar o `intlayerProxy` para adicionar roteamento do lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.
 
@@ -598,7 +652,9 @@ export default defineConfig({
 
 ---
 
-### Passo 13: Internacionalizar seus Metadados (Opcional)
+</Step>
+
+<Step number={13} title="Internacionalizar seus Metadados">
 
 Você também pode usar o hook `getIntlayer` para acessar seus dicionários de conteúdo em toda a sua aplicação:
 
@@ -645,7 +701,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passo 14: Recuperar a localidade em suas ações do servidor (Opcional)
+</Step>
+
+<Step number={14} title="Recuperar a localidade em suas ações do servidor">
 
 Você pode querer acessar a localidade atual de dentro de suas ações do servidor ou endpoints de API.
 Você pode fazer isso usando o auxiliar `getLocale` de `intlayer`.
@@ -682,7 +740,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passo 15: Gerenciar páginas não encontradas (Opcional)
+</Step>
+
+<Step number={15} title="Gerenciar páginas não encontradas">
 
 Quando um usuário visita uma página inexistente, você pode exibir uma página personalizada de não encontrada e o prefixo de locale pode afetar a forma como a página de não encontrada é acionada.
 
@@ -756,7 +816,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (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.
 
@@ -854,7 +916,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Passo 16: Gerar um Sitemap (Opcional)
+</Step>
+
+<Step number={16} title="Gerar um Sitemap">
 
 O Intlayer vem com um gerador de sitemap integrado para ajudá-lo a criar facilmente um sitemap para sua aplicação. Ele cuida das rotas localizadas e adiciona os metadados necessários para os mecanismos de busca.
 
@@ -929,7 +993,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passo 17: Configurar TypeScript (Opcional)
+</Step>
+
+<Step number={17} title="Configurar TypeScript">
 
 O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e fortalecer sua base de código.
 
@@ -960,6 +1026,10 @@ Para isso, você pode adicionar as seguintes instruções ao seu arquivo `.gitig
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Extensão VS Code
 
 Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a **Extensão oficial Intlayer para VS Code**.

package/docs/pt/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: i18n Vanilla JS - Como traduzir uma aplicação Vanilla JS em 2026
-description: Descubra como tornar o seu site Vanilla JS multilíngue. Siga a documentação para internacionalizar (i18n) e traduzi-lo.
+updatedAt: 2026-05-31
+title: i18n Vanilla JS - Guia completo para traduzir Vanilla JS
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Vanilla JS site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -57,28 +57,55 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-O **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 `i18next` ou `i18n.js`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
+<Accordion header="Cobertura completa Vanilla JS">
 
-- **Gerir facilmente as traduções** utilizando dicionários declarativos ao nível dos componentes.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir suporte TypeScript** com tipos autogerados, melhorando o preenchimento automático e a deteção de erros.
-- **Beneficiar de funcionalidades avançadas**, como deteção e troca dinâmica de idioma.
+O Intlayer é otimizado para funcionar perfeitamente com Vanilla JavaScript, oferecendo **gerenciamento de conteúdo independente de estrutura**, **suporte a TypeScript** e todos os recursos necessários para dimensionar a internacionalização (i18n).
 
-Este guia demonstra como utilizar o Intlayer numa aplicação Vanilla JavaScript **sem utilizar um gestor de pacotes ou um bundler** (como Vite, Webpack, etc.).
+</Accordion>
+<Accordion header="Tamanho do bundle">
 
-Se a sua aplicação utiliza um bundler (como o Vite), recomendamos seguir o [Guia Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+vanilla.md) em vez disso.
+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%**.
 
-Utilizando o bundle standalone, pode importar o Intlayer diretamente nos seus ficheiros HTML através de um único ficheiro JavaScript, tornando-o perfeito para projetos legados ou sites estáticos simples.
+</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>
 
 ---
 
 ## Guia Passo a Passo para Configurar o Intlayer numa Aplicação Vanilla JS
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários utilizando o npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > A exportação de empacotamento (bundling) do CLI `intlayer standalone` produz uma build otimizada através do tree-shaking de pacotes não utilizados, idiomas e lógica não essencial (como redirecionamentos ou prefixos) específica para a sua configuração.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um ficheiro de configuração para configurar os idiomas da sua aplicação:
 
@@ -162,7 +191,9 @@ export default config;
 
 > Através deste ficheiro de configuração, pode configurar URLs localizados, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desativar logs do Intlayer na consola 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: Importar o bundle no seu HTML
+</Step>
+
+<Step number={3} title="Importar o bundle no seu HTML">
 
 Depois de gerar o bundle `intlayer.js`, pode importá-lo no seu ficheiro HTML:
 
@@ -186,7 +217,9 @@ Depois de gerar o bundle `intlayer.js`, pode importá-lo no seu ficheiro HTML:
 
 O bundle expõe o `Intlayer` e o `VanillaIntlayer` como objetos globais no `window`.
 
-### Passo 4: Bootstrapper do Intlayer no seu ponto de entrada
+</Step>
+
+<Step number={4} title="Bootstrapper do Intlayer no seu ponto de entrada">
 
 No seu `src/main.js`, chame `installIntlayer()` **antes** de qualquer conteúdo ser renderizado, para que o singleton global de idioma esteja pronto.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Passo 5: Declarar o Seu Conteúdo
+</Step>
+
+<Step number={5} title="Declarar o Seu Conteúdo">
 
 Crie e gira as suas declarações de conteúdo para armazenar traduções:
 
@@ -284,7 +319,9 @@ export default appContent;
 >
 > Para mais detalhes, 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 6: Utilizar o Intlayer no seu JavaScript
+</Step>
+
+<Step number={6} title="Utilizar o Intlayer no seu JavaScript">
 
 O objeto `window.VanillaIntlayer` fornece auxiliares de API: `useIntlayer(key, locale?)` devolve o conteúdo traduzido para uma determinada chave.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opcional) Passo 7: Alterar o idioma do seu conteúdo
+</Step>
+
+<Step number={7} title="Alterar o idioma do seu conteúdo" isOptional={true}>
 
 Para alterar o idioma do seu conteúdo, utilize a função `setLocale` exposta pelo `useLocale`.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Opcional) Passo 8: Alternar os atributos HTML de Idioma e Direção
+</Step>
+
+<Step number={8} title="Alternar os atributos HTML de Idioma e Direção" isOptional={true}>
 
 Atualize os atributos `lang` e `dir` da tag `<html>` para corresponderem ao idioma atual para acessibilidade e SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Opcional) Passo 9: Carregamento lento de dicionários por idioma
+</Step>
+
+<Step number={9} title="Carregamento lento de dicionários por idioma" isOptional={true}>
 
 Se pretender carregar dicionários de forma lenta por idioma, pode utilizar `useDictionaryDynamic`. Isto é útil se não quiser incluir todas as traduções no ficheiro inicial `intlayer.js`.
 
@@ -427,3 +470,7 @@ Para mais detalhes sobre como utilizar a extensão, consulte a [documentação d
 ### Ir Mais Longe
 
 Para ir mais longe, pode implementar o [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou externalizar o seu conteúdo utilizando o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Como traduzir uma app Lit em 2026
-description: Descubra como tornar o seu website Vite e Lit multilíngue. Siga a documentação para internacionalizá-lo (i18n) e traduzi-lo.
+updatedAt: 2026-05-31
+title: i18n Vite + Lit - Guia completo para traduzir Lit
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu Vite and Lit aplicativo multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -57,22 +57,55 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-O **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 `lit-localize` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, pode:
+<AccordionGroup>
+<Accordion header="Cobertura total iluminada">
 
-- **Gerir facilmente as traduções** usando dicionários declarativos ao nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir o suporte a TypeScript** com tipos autogerados, melhorando o autocompletar e a deteção de erros.
-- **Beneficiar de funcionalidades avançadas**, como a deteção e alternância dinâmica de idioma.
+O Intlayer é otimizado para funcionar perfeitamente com o Lit, oferecendo **escopo de conteúdo em nível de componente da Web**, **suporte a TypeScript** 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>
 
 ---
 
 ## Guia Passo-a-Passo para Configurar o Intlayer numa Aplicação Vite e Lit
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Inclui o plugin Vite para integrar o Intlayer com o [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), bem como middleware para detetar o idioma preferido do utilizador, gerir cookies e lidar com redirecionamento de URL.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um ficheiro de configuração para configurar os idiomas da sua aplicação:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Através deste ficheiro de configuração, pode configurar URLs localizados, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desativar os logs do Intlayer na consola 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 Vite
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua Configuração Vite">
 
 Adicione o plugin intlayer na sua configuração.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > O plugin Vite `intlayer()` é usado para integrar o Intlayer com o Vite. Garante a construção dos ficheiros de declaração de conteúdo e monitoriza-os em modo de desenvolvimento. Define variáveis de ambiente do Intlayer dentro da aplicação Vite. Adicionalmente, fornece pseudónimos para otimizar o desempenho.
 
-### Passo 4: Inicializar o Intlayer no seu ponto de entrada
+</Step>
+
+<Step number={4} title="Inicializar o Intlayer no seu ponto de entrada">
 
 Chame `installIntlayer()` **antes** de quaisquer elementos personalizados serem registados para que o singleton global de idioma esteja pronto quando o primeiro elemento se ligar.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Passo 5: Declarar o Seu Conteúdo
+</Step>
+
+<Step number={5} title="Declarar o Seu Conteúdo">
 
 Crie e gira as suas declarações de conteúdo para armazenar traduções:
 
@@ -261,7 +302,9 @@ export default appContent;
 >
 > Para mais detalhes, 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 6: Utilizar o Intlayer no seu LitElement
+</Step>
+
+<Step number={6} title="Utilizar o Intlayer no seu LitElement">
 
 Use o `useIntlayer` dentro de um `LitElement`. Ele retorna um proxy `ReactiveController` que ativa automaticamente re-renderizações sempre que o idioma ativo muda - não é necessária configuração extra.
 
@@ -306,7 +349,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Opcional) Passo 7: Alterar o idioma do seu conteúdo
+</Step>
+
+<Step number={7} title="Alterar o idioma do seu conteúdo" isOptional={true}>
 
 Para alterar o idioma do seu conteúdo, use o método `setLocale` exposto pelo controlador `useLocale`.
 
@@ -341,7 +386,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opcional) Passo 8: Renderizar conteúdo Markdown e HTML
+</Step>
+
+<Step number={8} title="Renderizar conteúdo Markdown e HTML" isOptional={true}>
 
 O Intlayer suporta declarações de conteúdo `md()` e `html()`. No Lit, a saída compilada é injetada como HTML bruto através da diretiva `unsafeHTML`.
 
@@ -391,7 +438,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` chama `toString()` no `IntlayerNode`, que retorna a string Markdown bruta. Passe-a para `compileMarkdown` para obter uma string HTML, e depois renderize-a com a diretiva `unsafeHTML` do Lit.
 
-### (Opcional) Passo 9: Adicionar Localized Routing à sua aplicação
+</Step>
+
+<Step number={9} title="Adicionar Localized Routing à sua aplicação" isOptional={true}>
 
 Para criar rotas únicas para cada idioma (útil para SEO), pode usar um router do lado do cliente juntamente com os ajudantes `localeMap` / `localeFlatMap` do Intlayer, e o plugin Vite `intlayerProxy` para deteção de idioma do lado do servidor.
 
@@ -411,7 +460,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Passo 10: Alterar o URL quando o idioma muda
+</Step>
+
+<Step number={10} title="Alterar o URL quando o idioma muda" isOptional={true}>
 
 Para atualizar o URL do navegador quando o idioma muda, use o `useRewriteURL` juntamente com o seletor de idioma:
 
@@ -449,7 +500,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opcional) Passo 11: Alternar os Atributos de Idioma e Direção HTML
+</Step>
+
+<Step number={11} title="Alternar os Atributos de Idioma e Direção HTML" isOptional={true}>
 
 Atualize os atributos `lang` e `dir` da tag `<html>` para corresponderem ao idioma atual para acessibilidade e SEO.
 
@@ -474,7 +527,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Opcional) Passo 12: Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={12} title="Extrair o conteúdo dos seus componentes" isOptional={true}>
 
 Se tiver uma base de código existente, transformar milhares de ficheiros pode ser demorado.
 
@@ -636,3 +691,7 @@ Para mais detalhes sobre como usar a extensão, consulte a [documentação da Ex
 ### Ir Mais Longe
 
 Para ir mais longe, pode implementar o [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou externalizar o seu conteúdo usando o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
+
+</Step>
+
+</Steps>