@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/pt/intlayer_with_vite+svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Svelte i18n - Como traduzir uma aplicação Svelte em 2026
-description: Descubra como tornar seu site Vite e Svelte multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir.
+updatedAt: 2026-05-31
+title: "Vite + Svelte i18n - Guia completo para traduzir seu aplicativo"
+description: "Sem mais i18next. O guia 2026 para criar uma aplicação Vite + Svelte multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
   - Internacionalização
   - Documentação
@@ -62,16 +62,54 @@ 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.
+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>
 
-- **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, melhorando o autocompletar e a detecção de erros.
-- **Aproveitar recursos avançados**, como detecção e troca dinâmica de locale.
+<Accordion header="Cobertura Svelte completa">
+
+O Intlayer é otimizado para funcionar perfeitamente com o Svelte, oferecendo **escopo de conteúdo em nível de componente**, **traduções reativas** 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>
 
 ---
 
@@ -87,7 +125,9 @@ Com o Intlayer, você pode:
 
 Veja o [Template da Aplicação](https://github.com/aymericzip/intlayer-vite-svelte-template) no GitHub.
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -125,7 +165,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), assim como middleware para detectar o locale preferido do usuário, gerenciar 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 arquivo de configuração para configurar os idiomas da sua aplicação:
 
@@ -149,7 +191,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 3: Integre o Intlayer na sua Configuração Vite
+</Step>
+
+<Step number={3} title="Integre o Intlayer na sua Configuração Vite">
 
 Adicione o plugin intlayer na sua configuração.
 
@@ -166,7 +210,9 @@ export default defineConfig({
 
 > 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 4: Declare Seu Conteúdo
+</Step>
+
+<Step number={4} title="Declare Seu Conteúdo">
 
 Crie e gerencie suas declarações de conteúdo para armazenar traduções:
 
@@ -208,7 +254,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 5: Utilize o Intlayer no Seu Código
+</Step>
+
+<Step number={5} title="Utilize o Intlayer no Seu Código">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -232,7 +280,9 @@ export default appContent;
 > Se a sua aplicação já existe, você pode usar o [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/compiler.md) em conjunto com o [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/extract.md) para converter milhares de componentes em um segundo.
 ```
 
-### (Opcional) Passo 6: Alterar o idioma do seu conteúdo
+</Step>
+
+<Step number={6} title="Alterar o idioma do seu conteúdo" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -261,7 +311,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Opcional) Passo 7: Renderizar Markdown
+</Step>
+
+<Step number={7} title="Renderizar Markdown" isOptional={true}>
 
 O Intlayer suporta a renderização de conteúdo Markdown diretamente na sua aplicação Svelte. Por padrão, o Markdown é tratado como texto simples. Para converter Markdown em HTML enriquecido, você pode integrar `@humanspeak/svelte-markdown` ou outro parser de markdown.
 
@@ -282,15 +334,19 @@ O Intlayer suporta a renderização de conteúdo Markdown diretamente na sua apl
 
 > Você também pode acessar os dados do front-matter do seu markdown usando a propriedade `content.markdownContent.metadata.xxx`.
 
-### (Opcional) Passo 8: Configurar o editor / CMS do intlayer
+</Step>
+
+<Step number={8} 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).
 
 Para configurar o CMS do intlayer, você deve seguir a [documentação do CMS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
 
-### (Opcional) Passo 7: Adicionar roteamento localizado à sua aplicação
+</Step>
 
-Para lidar com roteamento localizado na sua aplicação Svelte, você pode usar o `svelte-spa-router` junto com o `localeFlatMap` do Intlayer para gerar rotas para cada localidade.
+<Step number={7} title="Adicionar roteamento por localeizado à sua aplicação" isOptional={true}>
+
+Para lidar com roteamento por localeizado na sua aplicação Svelte, você pode usar o `svelte-spa-router` junto com o `localeFlatMap` do Intlayer para gerar rotas para cada localidade.
 
 Primeiro, instale o `svelte-spa-router`:
 
@@ -392,7 +448,9 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 });
 ```
 
-### (Opcional) Passo 8: Alterar a URL quando o locale mudar
+</Step>
+
+<Step number={8} title="Alterar a URL quando o locale mudar" isOptional={true}>
 
 Para permitir que os usuários mudem de idioma e atualizem a URL de acordo, você pode criar um componente `LocaleSwitcher`. Este componente usará `getLocalizedUrl` do `intlayer` e `push` do `svelte-spa-router`.
 
@@ -414,7 +472,9 @@ const changeLocale = (event: Event) => {
 });
 ```
 
-### (Opcional) Passo 8: Alterar a URL quando o idioma mudar
+</Step>
+
+<Step number={8} title="Alterar a URL quando o idioma mudar" isOptional={true}>
 
 Para permitir que os usuários mudem de idioma e atualizem a URL de acordo, você pode criar um componente `LocaleSwitcher`. Este componente usará `getLocalizedUrl` do `intlayer` e `push` do `svelte-spa-router`.
 
@@ -450,35 +510,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### Configuração do Git
-
-É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam comitados no seu repositório Git.
-
-Para isso, você pode adicionar as seguintes instruções no seu arquivo `.gitignore`:
-
-```bash
-#  Ignorar os arquivos gerados pelo Intlayer
-.intlayer
-```
-
-### Extensão para VS Code
+</Step>
 
-Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial **Intlayer VS Code Extension**.
-
-[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Esta extensão oferece:
-
-- **Autocompletar** para chaves de tradução.
-- **Detecção de erros em tempo real** para traduções ausentes.
-- **Pré-visualizações inline** do conteúdo traduzido.
-- **Ações rápidas** para criar e atualizar traduções facilmente.
-
-Para mais detalhes sobre como usar a extensão, consulte a [documentação da Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes
+<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.
 
@@ -573,6 +607,37 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Configuração do Git
+
+É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite evitar que eles sejam comitados no seu repositório Git.
+
+Para isso, você pode adicionar as seguintes instruções no seu arquivo `.gitignore`:
+
+```bash
+#  Ignorar os arquivos gerados pelo Intlayer
+.intlayer
+```
+
+### Extensão para VS Code
+
+Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial **Intlayer VS Code Extension**.
+
+[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Esta extensão oferece:
+
+- **Autocompletar** para chaves de tradução.
+- **Detecção de erros em tempo real** para traduções ausentes.
+- **Pré-visualizações inline** do conteúdo traduzido.
+- **Ações rápidas** para criar e atualizar traduções facilmente.
+
+Para mais detalhes sobre como usar a extensão, consulte a [documentação da Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
+
+---
 
 ### (Opcional) Sitemap e robots.txt (geração no build)
 

package/docs/pt/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Como traduzir uma aplicação Vanilla JS em 2026
-description: Descubra como tornar o seu website Vite e Vanilla JS multilíngue. Siga a documentação para internacionalização (i18n) e tradução.
+updatedAt: 2026-05-31
+title: "Vite + Vanilla JS i18n - Guia completo para traduzir seu aplicativo"
+description: "Sem mais i18next. O guia 2026 para criar uma aplicação Vite + Vanilla JS multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
   - Internacionalização
   - Documentação
@@ -58,22 +58,62 @@ 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 `i18next` ou `i18n.js`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer, você pode:
+<AccordionGroup>
 
-- **Gerir facilmente 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 preenchimento automático e a deteção de erros.
-- **Beneficiar de funcionalidades avançadas**, como deteção e troca dinâmica de idioma.
+<Accordion header="Cobertura completa do Vite">
+
+O Intlayer é otimizado para funcionar perfeitamente com o Vite, oferecendo **gerenciamento de conteúdo independente de estrutura**, **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 Vanilla JS
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando o npm:
 
@@ -110,7 +150,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 arquivo de configuração para configurar os idiomas da sua aplicação:
 
@@ -134,7 +176,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 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 do Vite
+</Step>
+
+<Step number={3} title="Integrar o Intlayer na sua configuração do Vite">
 
 Adicione o plugin intlayer na sua configuração.
 
@@ -150,7 +194,9 @@ export default defineConfig({
 
 > O plugin Vite `intlayer()` é usado para integrar o Intlayer com o Vite. Ele garante a construção de arquivos de declaração de conteúdo e monitoriza-os em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, ele fornece aliases para otimizar o desempenho.
 
-### Passo 4: Bootstrap do Intlayer no seu ponto de entrada
+</Step>
+
+<Step number={4} title="Bootstrap do Intlayer no seu ponto de entrada">
 
 Chame `installIntlayer()` **antes** de qualquer conteúdo ser renderizado para que o singleton de idioma global esteja pronto.
 
@@ -175,7 +221,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Passo 5: Declarar o seu conteúdo
+</Step>
+
+<Step number={5} title="Declarar o seu conteúdo">
 
 Crie e girar as suas declarações de conteúdo para armazenar traduções:
 
@@ -253,7 +301,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: Usar o Intlayer no seu JavaScript
+</Step>
+
+<Step number={6} title="Usar o Intlayer no seu JavaScript">
 
 O `vanilla-intlayer` espelha a API de superfície do `react-intlayer`: `useIntlayer(key, locale?)` retorna o conteúdo traduzido diretamente. Encadeie `.onChange()` no resultado para subscrever mudanças de idioma - o equivalente explícito de uma re-renderização do React.
 
@@ -289,7 +339,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > 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, use a função `setLocale` exposta pelo `useLocale`.
 
@@ -324,7 +376,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (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()`. Em vanilla JS, a saída compilada é inserida como HTML puro via `innerHTML`.
 
@@ -383,7 +437,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Opcional) Passo 9: Adicionar Roteamento Localizado à sua aplicação
+</Step>
+
+<Step number={9} title="Adicionar Roteamento Localizado à sua aplicação" isOptional={true}>
 
 Para criar rotas exclusivas para cada idioma (útil para SEO), você pode usar o `intlayerProxy` na sua configuração do Vite para deteção de idioma do lado do servidor.
 
@@ -403,7 +459,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Passo 10: Alterar o URL quando o idioma mudar
+</Step>
+
+<Step number={10} title="Alterar o URL quando o idioma mudar" isOptional={true}>
 
 Para atualizar o URL do navegador quando o idioma mudar, chame `useRewriteURL()` após instalar o Intlayer:
 
@@ -417,7 +475,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Opcional) Passo 11: Trocar os Atributos de Idioma e Direção HTML
+</Step>
+
+<Step number={11} title="Trocar os Atributos de Idioma e Direção HTML" isOptional={true}>
 
 Atualize os atributos `lang` e `dir` da tag `<html>` para coincidir com o idioma atual para acessibilidade e SEO.
 
@@ -435,7 +495,9 @@ useLocale({
 });
 ```
 
-### (Opcional) Passo 12: Carregamento preguiçoso (Lazy-load) de dicionários por idioma
+</Step>
+
+<Step number={12} title="Carregamento preguiçoso (Lazy-load) de dicionários por idioma" isOptional={true}>
 
 Para aplicações grandes, você pode querer dividir o dicionário de cada idioma no seu próprio chunk. Use `useDictionaryDynamic` juntamente com o `import()` dinâmico do Vite:
 
@@ -458,7 +520,9 @@ const unsubscribe = useDictionaryDynamic(
 
 > O bundle de cada idioma é obtido apenas quando esse idioma se torna ativo e o resultado é armazenado em cache - trocas subsequentes para o mesmo idioma são instantâneas.
 
-### (Opcional) Passo 13: Extrair o conteúdo dos seus componentes
+</Step>
+
+<Step number={13} 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.
 
@@ -554,6 +618,9 @@ bun run build # Ou bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### (Opcional) Sitemap e robots.txt (geração no build)