@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/pt/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Como configurar o Intlayer com o Storybook
-description: Saiba como tornar o seu sistema de design multilíngue usando o Intlayer com o Storybook - compile declarações de conteúdo, adicione um seletor de local e visualize os seus componentes em qualquer idioma.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Guia completo para traduzir seu aplicativo"
+description: "Sem mais i18next. O guia 2026 para criar uma aplicação Storybook multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
   - Internacionalização
   - Documentação
@@ -31,16 +31,54 @@ 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. Funciona ao **nível do componente** - cada componente possui as suas próprias declarações de conteúdo - mantendo as traduções localizadas junto ao código que as utiliza.
+Comparado com soluções principais como `storybook-react-i18next` ou `i18next`, Intlayer é uma solução que vem com otimizações integradas como:
 
-Com o Intlayer pode:
+<AccordionGroup>
 
-- **Gerir traduções de forma declarativa** com ficheiros de conteúdo por componente.
-- **Obter suporte completo para TypeScript** através de tipos gerados automaticamente e autocompletar no IDE.
-- **Alterar locais em tempo de execução** sem recarregar a página.
-- **Traduzir automaticamente** com integrações integradas de fornecedores de IA.
+<Accordion header="Cobertura completa do livro de histórias">
+
+O Intlayer é otimizado para funcionar perfeitamente com o Storybook, oferecendo **decoradores de histórias multilíngues**, **alteração de local** e todos os recursos necessários para dimensionar a internacionalização (i18n) em seu sistema de design.
+
+</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>
 
 ---
 
@@ -59,7 +97,9 @@ O Storybook é a ferramenta padrão da indústria para desenvolver e documentar
 <Tabs>
 <Tab value="Vite Setup">
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Passo 2: Criar uma Configuração do Intlayer
+</Step>
+
+<Step number={2} title="Criar uma Configuração do Intlayer">
 
 Crie `intlayer.config.ts` na raiz do seu projeto (ou dentro do seu pacote de design system):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Passo 3: Adicionar o Plugin Vite ao Storybook
+</Step>
+
+<Step number={3} title="Adicionar o Plugin Vite ao Storybook">
 
 O hook `viteFinal` do Storybook permite-lhe estender a configuração interna do Vite. Importe e adicione o plugin `intlayer()` aqui:
 
@@ -159,7 +203,9 @@ O plugin `intlayer()` monitoriza os seus ficheiros `*.content.ts` e reconstrói
 
 ---
 
-### Passo 4: Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local
+</Step>
+
+<Step number={4} title="Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local">
 
 O ficheiro `preview` do Storybook é o local ideal para envolver cada story com o `IntlayerProvider` e expor um seletor de local na barra de ferramentas:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Passo 1: Instalar Dependências
+</Step>
+
+<Step number={1} title="Instalar Dependências">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Passo 2: Criar uma Configuração do Intlayer
+</Step>
+
+<Step number={2} title="Criar uma Configuração do Intlayer">
 
 Crie `intlayer.config.ts` na raiz do seu projeto:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Passo 3: Configurar o Webpack do Storybook
+</Step>
+
+<Step number={3} title="Configurar o Webpack do Storybook">
 
 Para configurações do Storybook baseadas em Webpack (por exemplo, `@storybook/react-webpack5`), estenda a configuração do webpack através de `webpackFinal` para adicionar os aliases e o loader do Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Passo 4: Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local
+</Step>
+
+<Step number={4} title="Adicionar o Decorador `IntlayerProvider` e uma Barra de Ferramentas de Local">
 
 O mesmo que na configuração Vite - adicione o decorador e o tipo de local global em `.storybook/preview.tsx`:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Declarar Conteúdo
 
 Crie um ficheiro `*.content.ts` ao lado de cada componente. O Intlayer deteta-o automaticamente durante a compilação.

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 seu aplicativo"
+description: "Sem mais i18next. O guia 2026 para criar uma aplicação SvelteKit multilíngue (i18n). Traduza com agentes de IA e otimize o tamanho do bundle, SEO e desempenho."
 keywords:
   - Internacionalização
   - Documentação
@@ -59,16 +59,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. 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>
 
-- **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.
+<Accordion header="Cobertura completa do SvelteKit">
+
+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 +154,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 +188,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 +207,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 +223,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 +246,19 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Passo 5: Utilize o Intlayer em Seus Componentes
+</Step>
+
+<Step number={5} title="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">
 
 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 +283,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 +348,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 +382,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 +401,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 +417,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 +440,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 +464,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 +491,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 +705,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 +740,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 +783,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 +804,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).
 
@@ -755,50 +831,9 @@ Para poder visualizar o seletor do editor intlayer, você deverá usar a sintaxe
 </div>
 ```
 
-### Configuração do Git
-
-É recomendado ignorar os arquivos gerados pelo Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ignorar os arquivos gerados pelo Intlayer
-.intlayer
-```
-
----
-
-### Ir Além
-
-Para poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.
-
-```svelte fileName="Component.svelte"
-<script lang="ts">
-  import { useIntlayer } from "svelte-intlayer";
-
-  const content = useIntlayer("component");
-</script>
-
-<div>
-
-  <!-- Renderizar conteúdo como conteúdo simples -->
-  <h1>{$content.title}</h1>
-
-  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->
-  {@const Component = $content.component}<Component />
-</div>
-```
-
-### Configuração do Git
+</Step>
 
-É recomendado ignorar os arquivos gerados pelo Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ignorar os arquivos gerados pelo Intlayer
-.intlayer
-```
-
----
-
-### (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.
 
@@ -893,6 +928,52 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Configuração do Git
+
+É recomendado ignorar os arquivos gerados pelo Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ignorar os arquivos gerados pelo Intlayer
+.intlayer
+```
+
+---
+
+### Ir Além
+
+Para poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.
+
+```svelte fileName="Component.svelte"
+<script lang="ts">
+  import { useIntlayer } from "svelte-intlayer";
+
+  const content = useIntlayer("component");
+</script>
+
+<div>
+
+  <!-- Renderizar conteúdo como conteúdo simples -->
+  <h1>{$content.title}</h1>
+
+  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->
+  {@const Component = $content.component}<Component />
+</div>
+```
+
+### Configuração do Git
+
+É recomendado ignorar os arquivos gerados pelo Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ignorar os arquivos gerados pelo Intlayer
+.intlayer
+```
+
+---
 
 ### Ir Além