@intlayer/docs 8.11.2 → 8.11.3

package/docs/pt/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Como traduzir uma aplicação SvelteKit em 2026
-description: Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: SvelteKit i18n - Guia completo para traduzir SvelteKit
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu SvelteKit site multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## O que é o Intlayer?
+## Por que Intlayer em vez de alternativas?
 
-**Intlayer** é uma biblioteca inovadora e open-source de internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas. Ela funciona perfeitamente com as capacidades de Server-Side Rendering (SSR) do **SvelteKit**.
+Comparado com soluções principais como `svelte-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 SvelteKit">
 
-- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
-- **Localizar dinamicamente metadados**, rotas e conteúdo.
-- **Garantir suporte ao TypeScript** com tipos gerados automaticamente.
-- **Aproveitar o SSR do SvelteKit** para uma internacionalização amigável ao SEO.
+O Intlayer é otimizado para funcionar perfeitamente com o SvelteKit, oferecendo **roteamento multilíngue**, **suporte SSR** 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>
 
 ---
 
@@ -116,7 +147,9 @@ Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que
 └── vite.config.ts
 ```
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -148,7 +181,9 @@ bun x intlayer init
 - **svelte-intlayer**: Fornece context providers e stores para Svelte/SvelteKit.
 - **vite-intlayer**: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um arquivo de configuração na raiz do seu projeto:
 
@@ -165,7 +200,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Passo 3: Integre o Intlayer na sua Configuração do Vite
+</Step>
+
+<Step number={3} title="Integre o Intlayer na sua Configuração do Vite">
 
 Atualize seu `vite.config.ts` para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.
 
@@ -179,7 +216,9 @@ export default defineConfig({
 });
 ```
 
-### Passo 4: Declare Seu Conteúdo
+</Step>
+
+<Step number={4} title="Declare Seu Conteúdo">
 
 Crie seus arquivos de declaração de conteúdo em qualquer lugar dentro da sua pasta `src` (por exemplo, `src/lib/content` ou junto aos seus componentes). Esses arquivos definem o conteúdo traduzível para sua aplicação usando a função `t()` para cada locale.
 
@@ -200,15 +239,19 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Passo 5: Utilize o Intlayer em Seus Componentes
+</Step>
 
-### Passo 5: Utilize o Intlayer em Seus Componentes
+<Step number={5} title="Utilize o Intlayer em Seus Componentes">
+
+</Step>
+
+<Step number={5} title="Utilize o Intlayer em Seus Componentes">
 
 Agora você pode usar a função `useIntlayer` em qualquer componente Svelte. Ela retorna uma store reativa que atualiza automaticamente quando o locale muda. A função respeitará automaticamente o locale atual (tanto durante SSR quanto na navegação do lado do cliente).
 
 > **Nota:** `useIntlayer` retorna uma store do Svelte, então você precisa usar o prefixo `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Como traduzir sua aplicação SvelteKit – guia i18n 2026
 > description: Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR).
 > keywords:
@@ -233,6 +276,10 @@ Agora você pode usar a função `useIntlayer` em qualquer componente Svelte. El
 
 # Traduza seu site SvelteKit usando Intlayer | Internacionalização (i18n)
 
+</Step>
+
+</Steps>
+
 ## Índice
 
 <TOC/>
@@ -294,7 +341,9 @@ Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que
 └── vite.config.ts
 ```
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -326,7 +375,9 @@ bun x intlayer init
 - **svelte-intlayer**: Fornece context providers e stores para Svelte/SvelteKit.
 - **vite-intlayer**: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.
 
-### Passo 2: Configuração do seu projeto
+</Step>
+
+<Step number={2} title="Configuração do seu projeto">
 
 Crie um arquivo de configuração na raiz do seu projeto:
 
@@ -343,7 +394,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Passo 3: Integre o Intlayer na sua Configuração do Vite
+</Step>
+
+<Step number={3} title="Integre o Intlayer na sua Configuração do Vite">
 
 Atualize seu `vite.config.ts` para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.
 
@@ -357,7 +410,9 @@ export default defineConfig({
 });
 ```
 
-### Passo 4: Declare Seu Conteúdo
+</Step>
+
+<Step number={4} title="Declare Seu Conteúdo">
 
 Crie seus arquivos de declaração de conteúdo em qualquer lugar dentro da sua pasta `src` (por exemplo, `src/lib/content` ou junto aos seus componentes). Esses arquivos definem o conteúdo traduzível para sua aplicação usando a função `t()` para cada locale.
 
@@ -378,7 +433,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Passo 5: Utilize o Intlayer em Seus Componentes
+</Step>
+
+<Step number={5} title="Utilize o Intlayer em Seus Componentes">
 
 para acessar seu valor reativo (por exemplo, `$content.title`).
 
@@ -400,7 +457,9 @@ para acessar seu valor reativo (por exemplo, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opcional) Passo 6: Configurar o roteamento
+</Step>
+
+<Step number={6} title="Configurar o roteamento" isOptional={true}>
 
 Os passos a seguir mostram como configurar o roteamento baseado em locale no SvelteKit. Isso permite que suas URLs incluam o prefixo do locale (ex.: `/en/about`, `/fr/about`) para melhor SEO e experiência do usuário.
 
@@ -425,7 +484,9 @@ Os passos a seguir mostram como configurar o roteamento baseado em locale no Sve
         └── +layout.svelte         # Layout raiz para fontes e estilos globais
 ```
 
-### Passo 7: Gerenciar a Detecção de Locale no Lado do Servidor (Hooks)
+</Step>
+
+<Step number={7} title="Gerenciar a Detecção de Locale no Lado do Servidor">
 
 No SvelteKit, o servidor precisa saber o locale do usuário para renderizar o conteúdo correto durante o SSR. Usamos `hooks.server.ts` para detectar o locale a partir da URL ou dos cookies.
 
@@ -637,7 +698,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opcional) Passo 8: Links Internacionalizados
+</Step>
+
+<Step number={8} title="Links Internacionalizados" isOptional={true}>
 
 Para SEO, é recomendado prefixar suas rotas com a localidade (ex: `/en/about`, `/fr/about`). Este componente automaticamente prefixa qualquer link com a localidade atual.
 
@@ -670,7 +733,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Navega para /en/about ou /fr/about dependendo da localidade
 ```
 
-### (Opcional) Passo 9: Seletor de Idioma
+</Step>
+
+<Step number={9} title="Seletor de Idioma" isOptional={true}>
 
 Para permitir que os usuários mudem de idioma, atualize a URL.
 
@@ -711,7 +776,9 @@ Para permitir que os usuários mudem de idioma, atualize a URL.
 </style>
 ```
 
-### (Opcional) Passo 10: Adicionar proxy backend
+</Step>
+
+<Step number={10} title="Adicionar proxy backend" isOptional={true}>
 
 Para adicionar um proxy backend à sua aplicação SvelteKit, você pode usar a função `intlayerProxy` fornecida pelo plugin `vite-intlayer`. Este plugin detectará automaticamente a melhor localidade para o usuário com base na URL, cookies e preferências de idioma do navegador.
 
@@ -730,7 +797,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Passo 11: Configurar o editor / CMS do intlayer
+</Step>
+
+<Step number={11} title="Configurar o editor / CMS do intlayer" isOptional={true}>
 
 Para configurar o editor do intlayer, você deve seguir a [documentação do editor intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md).
 
@@ -798,7 +867,9 @@ Para poder visualizar o seletor do editor intlayer, você terá que usar a sinta
 
 ---
 
-### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={1} 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.
 
@@ -898,3 +969,7 @@ bun run build # Or bun run dev
 
 - **Editor Visual**: Integre o [Editor Visual Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) para editar traduções diretamente pela interface.
 - **CMS**: Externalize o gerenciamento do seu conteúdo usando o [CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/pt/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Como traduzir uma aplicação Tanstack Start usando Solid.js em 2026
-description: Aprenda como adicionar internacionalização (i18n) à sua aplicação Tanstack Start usando Intlayer e Solid.js. Siga este guia completo para tornar sua aplicação multilíngue com roteamento ciente de localidade.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Guia completo para traduzir TanStack Start
+description: A melhor solução para tamanho de bundle, SEO, desempenho & manutenibilidade. Torne seu TanStack Start and Solid aplicativo multilíngue em 2026, tradução LLM, Agent Skills & MCP.
 keywords:
   - Internacionalização
   - Documentação
@@ -38,17 +38,47 @@ history:
 
 Este guia demonstra como integrar o **Intlayer** para uma internacionalização perfeita em projetos Tanstack Start com Solid.js, roteamento ciente de localidade, suporte a TypeScript e práticas de desenvolvimento modernas.
 
-## 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 `react-i18next` ou `i18next`, 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 ao nível do componente.
-- **Localizar metadados, rotas e conteúdo dinamicamente**.
-- **Garantir o suporte a TypeScript** com tipos autogerados, melhorando o autocompletar e a detecção de erros.
-- **Beneficiar-se de recursos avançados**, como detecção e troca dinâmica de localidade.
-- **Habilitar roteamento ciente de localidade** com o sistema de roteamento baseado em arquivos do Tanstack Start.
+O Intlayer é otimizado para funcionar perfeitamente com TanStack Start e Solid, 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>
 
 ---
 
@@ -86,11 +116,15 @@ Com o Intlayer, você pode:
 
 Veja o [Modelo de Aplicação](https://github.com/aymericzip/intlayer-tanstack-start-solid-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/solid/quick-start) no site do TanStack Start.
 
-### Passo 2: Instalar os Pacotes Intlayer
+</Step>
+
+<Step number={2} title="Instalar os Pacotes Intlayer">
 
 Instale os pacotes necessários usando o seu gerenciador de pacotes preferido:
 
@@ -128,7 +162,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 o middleware para detectar a localidade preferida do usuário, gerenciar cookies e lidar com redirecionamento de URL.
 
-### 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 as línguas da sua aplicação:
 
@@ -149,7 +185,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, 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 4: Integrar o Intlayer na sua Configuração Vite
+</Step>
+
+<Step number={4} title="Integrar o Intlayer na sua Configuração Vite">
 
 Adicione o plugin intlayer na sua configuração:
 
@@ -177,7 +215,9 @@ export default defineConfig({
 
 > O plugin Vite `intlayer()` é 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. Ele define as variáveis de ambiente do Intlayer dentro da aplicação Vite. Adicionalmente, ele fornece aliases para otimizar a performance.
 
-### Passo 5: Criar o Layout Raiz (Root Layout)
+</Step>
+
+<Step number={5} title="Criar o Layout Raiz">
 
 Configure o seu layout raiz para suportar internacionalização usando `useParams` para detectar a localidade atual e definindo os atributos `lang` e `dir` na tag `html`.
 
@@ -218,7 +258,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Passo 6: Criar o Layout de Localidade (Opcional)
+</Step>
+
+<Step number={6} title="Criar o Layout de Localidade">
 
 Crie um layout que lide com o prefixo de localidade e realize a validação. Este layout garantirá que apenas localidades válidas sejam processadas.
 
@@ -253,7 +295,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Para o modo `'prefix-all'`, você pode preferir mudar o slot para `$locale`.
 > Para o modo `'no-prefix'` ou `'search-params'`, você pode remover o slot inteiramente.
 
-### Passo 7: Declarar o Seu Conteúdo
+</Step>
+
+<Step number={7} title="Declarar o Seu Conteúdo">
 
 Crie e gerencie as suas declarações de conteúdo para armazenar traduções:
 
@@ -299,7 +343,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: Utilizar Componentes e Hooks Cientes de Localidade
+</Step>
+
+<Step number={8} title="Utilizar Componentes e Hooks Cientes de Localidade">
 
 Crie um componente `LocalizedLink` para navegação ciente de localidade:
 
@@ -378,7 +424,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passo 9: Utilizar o Intlayer em Suas Páginas
+</Step>
+
+<Step number={9} title="Utilizar o Intlayer em Suas Páginas">
 
 Acesse seus dicionários de conteúdo através da sua aplicação:
 
@@ -421,7 +469,9 @@ function RouteComponent() {
 >
 > Para aprender mais sobre o hook `useIntlayer`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/solid-intlayer/useIntlayer.md).
 
-### Passo 10: Criar um Componente Seletor de Localidade (Locale Switcher)
+</Step>
+
+<Step number={10} title="Criar um Componente Seletor de Localidade">
 
 Crie um componente para permitir que os usuários mudem de língua:
 
@@ -465,7 +515,9 @@ export default LocaleSwitcher;
 >
 > Para aprender mais sobre o hook `useLocale`, consulte la [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/solid-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.
 
@@ -484,7 +536,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### 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 a localidade atual baseada na URL e definirá o cookie de localidade apropriado. Se nenhuma localidade for especificada, o plugin determinará a localidade mais apropriada baseada nas preferências de língua do navegador do usuário. Se nenhuma localidade for detectada, ele redirecionará para a localidade padrão.
 
@@ -515,7 +569,9 @@ export default defineConfig({
 
 ---
 
-### Passo 13: Internacionalizar Seus Metadados (Opcional)
+</Step>
+
+<Step number={13} title="Internacionalizar Seus Metadados">
 
 Você também pode usar a função `getIntlayer` para acessar seus dicionários de conteúdo dentro do loader `head` para metadados cientes de localidade:
 
@@ -562,7 +618,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passo 14: Recuperar a localidade nas suas server actions (Opcional)
+</Step>
+
+<Step number={14} title="Recuperar a localidade nas suas server actions">
 
 Você pode querer acessar a localidade atual de dentro das suas server actions ou endpoints de API.
 Você pode fazer isso usando o helper `getLocale` do `intlayer`.
@@ -599,7 +657,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 encontrado e o prefixo de localidade pode impactar a maneira como a página de não encontrado é disparada.
 
@@ -673,7 +733,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ê tem uma base de código existente, transformar milhares de arquivos pode ser demorado.
 
@@ -786,7 +848,9 @@ bun run build # Ou 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.
 
@@ -859,7 +923,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passo 17: Configurar TypeScript (Opcional)
+</Step>
+
+<Step number={17} title="Configurar TypeScript">
 
 O Intlayer usa a ampliação de módulo para obter os benefícios do TypeScript e tornar a sua base de código mais forte.
 
@@ -890,6 +956,10 @@ Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo `
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Extensão VS Code
 
 Para melhorar a sua experiência de desenvolvimento com o Intlayer, você pode instalar a **Extensão oficial do Intlayer VS Code**.