@intlayer/docs 5.5.10 → 5.5.12

package/blog/pt/intlayer_with_react-i18next.md

@@ -0,0 +1,98 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer e react-i18next
+description: Compare o Intlayer com o react-i18next para um aplicativo React
+keywords:
+  - react-i18next
+  - i18next
+  - Intlayer
+  - Internacionalização
+  - Blogumentação
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-i18next
+---
+
+# React Internationalization (i18n) com react-i18next e Intlayer
+
+## Visão Geral
+
+- **Intlayer** ajuda você a gerenciar traduções através de arquivos de declaração de conteúdo **a nível de componente**.
+- **react-i18next** é uma integração popular do React para **i18next** que fornece hooks como `useTranslation` para buscar strings localizadas em seus componentes.
+
+Quando combinados, Intlayer pode **exportar** dicionários em **JSON compatível com i18next** para que react-i18next possa **consumi-los** em tempo de execução.
+
+## Por que usar Intlayer com react-i18next?
+
+Os arquivos de declaração de conteúdo **Intlayer** oferecem uma melhor experiência para o desenvolvedor, pois são:
+
+1. **Flexíveis na Colocação de Arquivos**  
+   Coloque cada arquivo de declaração de conteúdo ao lado do componente que precisa dele. Essa estrutura permite que você mantenha traduções localizadas, prevenindo traduções órfãs quando componentes se movem ou são excluídos.
+
+   ```bash codeFormat="typescript"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts # Arquivo de declaração de conteúdo
+               └── index.tsx
+   ```
+
+   ```bash codeFormat="esm"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.mjs # Arquivo de declaração de conteúdo
+               └── index.mjx
+   ```
+
+   ```bash codeFormat="cjs"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.cjs # Arquivo de declaração de conteúdo
+               └── index.cjx
+   ```
+
+   ```bash codeFormat="json"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.json # Arquivo de declaração de conteúdo
+               └── index.jsx
+   ```
+
+2. **Traduções Centralizadas**  
+   Um único arquivo de declaração de conteúdo coleta todas as traduções necessárias para um componente, tornando mais fácil identificar traduções ausentes.  
+   Com TypeScript, você ainda recebe erros em tempo de compilação se traduções estiverem faltando.
+
+## Instalação
+
+Em um projeto Create React App, instale essas dependências:
+
+```bash
+# Com npm
+npm install intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# Com yarn
+yarn add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# Com pnpm
+pnpm add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+### O que são esses pacotes?
+
+- **intlayer** – A CLI e biblioteca principal para gerenciar configurações de i18n, declarações de conteúdo e construir saídas de dicionário.
+- **react-intlayer** –

package/blog/pt/intlayer_with_react-intl.md

@@ -0,0 +1,327 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer e react-intl
+description: Integre Intlayer com react-intl para um aplicativo React
+keywords:
+  - react-intl
+  - Intlayer
+  - Internacionalização
+  - Blogumentação
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-intl
+---
+
+# Internationalização do React (i18n) com **react-intl** e Intlayer
+
+Este guia mostra como integrar **Intlayer** com **react-intl** para gerenciar traduções em uma aplicação React. Você declarará seu conteúdo traduzível com o Intlayer e, em seguida, consumirá essas mensagens com **react-intl**, uma biblioteca popular do ecossistema [FormatJS](https://formatjs.io/docs/react-intl).
+
+## Visão Geral
+
+- **Intlayer** permite que você armazene traduções em arquivos de declaração de conteúdo **de nível de componente** (JSON, JS, TS, etc.) dentro do seu projeto.
+- **react-intl** fornece componentes e hooks do React (como `<FormattedMessage>` e `useIntl()`) para exibir strings localizadas.
+
+Ao configurar o Intlayer para **exportar** traduções em um formato **compatível com react-intl**, você pode automaticamente **gerar** e **atualizar** os arquivos de mensagem que `<IntlProvider>` (do react-intl) requer.
+
+---
+
+## Por Que Usar Intlayer com react-intl?
+
+1. **Declarações de Conteúdo por Componente**  
+   Os arquivos de declaração de conteúdo do Intlayer podem viver ao lado dos seus componentes React, prevenindo traduções “órfãs” se os componentes forem movidos ou removidos. Por exemplo:
+
+   ```bash
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts   # Declaração de conteúdo do Intlayer
+               └── index.tsx          # Componente React
+   ```
+
+2. **Traduções Centralizadas**  
+   Cada arquivo de declaração de conteúdo coleta todas as traduções necessárias para um componente. Isso é particularmente útil em projetos TypeScript: traduções ausentes podem ser descobertas no **tempo de compilação**.
+
+3. **Construção e Regeneração Automática**  
+   Sempre que você adicionar ou atualizar traduções, o Intlayer regenera os arquivos JSON de mensagens. Você pode então passá-los para o `<IntlProvider>` do react-intl.
+
+---
+
+## Instalação
+
+Em um projeto React típico, instale o seguinte:
+
+```bash
+# com npm
+npm install intlayer react-intl
+
+# com yarn
+yarn add intlayer react-intl
+
+# com pnpm
+pnpm add intlayer react-intl
+```
+
+### Por Que Esses Pacotes?
+
+- **intlayer**: CLI e biblioteca principal que escaneia por declarações de conteúdo, as mescla e constrói saídas de dicionário.
+- **react-intl**: A biblioteca principal do FormatJS que fornece `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` e outros princípios de internacionalização.
+
+> Se você ainda não tiver o React instalado, precisará dele também (`react` e `react-dom`).
+
+## Configurando o Intlayer para Exportar Mensagens do react-intl
+
+Na raiz do seu projeto, crie **`intlayer.config.ts`** (ou `.js`, `.mjs`, `.cjs`) assim:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // Adicione quantos locais desejar
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // Indica ao Intlayer para gerar arquivos de mensagens para o react-intl
+    dictionaryOutput: ["react-intl"],
+
+    // O diretório onde o Intlayer escreverá seus arquivos JSON de mensagens
+    reactIntlMessagesDir: "./react-intl/messages",
+  },
+};
+
+export default config;
+```
+
+> **Nota**: Para outras extensões de arquivo (`.mjs`, `.cjs`, `.js`), consulte a [documentação do Intlayer](https://intlayer.org/pt/doc/concept/configuration) para detalhes de uso.
+
+---
+
+## Criando Suas Declarações de Conteúdo do Intlayer
+
+O Intlayer escaneia seu código (por padrão, sob `./src`) em busca de arquivos que correspondam a `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
+Aqui está um exemplo de **TypeScript**:
+
+```typescript title="src/components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // "key" se torna a chave de mensagem de nível superior no seu arquivo JSON do react-intl
+  key: "meu-componente",
+
+  content: {
+    // Cada chamada a t() declara um campo traduzível
+    helloWorld: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    description: t({
+      en: "This is a description",
+      fr: "Ceci est une description",
+      es: "Esta es una descripción",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+Se preferir JSON ou diferentes variantes JS (`.cjs`, `.mjs`), a estrutura é em grande parte a mesma , veja [documentação do Intlayer sobre declaração de conteúdo](https://intlayer.org/pt/doc/concept/content).
+
+---
+
+## Construindo as Mensagens do react-intl
+
+Para gerar os arquivos JSON de mensagens reais para **react-intl**, execute:
+
+```bash
+# com npm
+npx intlayer dictionaries build
+
+# com yarn
+yarn intlayer build
+
+# com pnpm
+pnpm intlayer build
+```
+
+Isso escaneia todos os arquivos `*.content.*`, os compila e grava os resultados no diretório especificado no seu **`intlayer.config.ts`** , neste exemplo, `./react-intl/messages`.  
+Uma saída típica pode parecer com:
+
+```bash
+.
+└── react-intl
+    └── messages
+        ├── en.json
+        ├── fr.json
+        └── es.json
+```
+
+Cada arquivo é um objeto JSON cujas **chaves de nível superior** correspondem a cada **`content.key`** das suas declarações. As **subchaves** (como `helloWorld`) refletem as traduções declaradas dentro daquele item de conteúdo.
+
+Por exemplo, o **en.json** pode parecer assim:
+
+```json
+{
+  "meu-componente": {
+    "helloWorld": "Hello World",
+    "description": "This is a description"
+  }
+}
+```
+
+---
+
+## Inicializando o react-intl na Sua Aplicação React
+
+### 1. Carregue as Mensagens Geradas
+
+Onde você configura o componente raiz da sua aplicação (por exemplo, `src/main.tsx` ou `src/index.tsx`), você precisará:
+
+1. **Importar** os arquivos de mensagem gerados (estaticamente ou dinamicamente).
+2. **Fornecer** a eles para o `<IntlProvider>` do `react-intl`.
+
+Uma abordagem simples é importá-los **estaticamente**:
+
+```typescript title="src/index.tsx"
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import App from "./App";
+
+// Importar os arquivos JSON da saída de compilação.
+// Alternativamente, você pode importar dinamicamente com base no idioma escolhido pelo usuário.
+import en from "../react-intl/messages/en.json";
+import fr from "../react-intl/messages/fr.json";
+import es from "../react-intl/messages/es.json";
+
+// Se você tiver um mecanismo para detectar o idioma do usuário, defina-o aqui.
+// Para simplicidade, vamos escolher o inglês.
+const locale = "en";
+
+// Compilar mensagens em um objeto (ou selecioná-las dinamicamente)
+const messagesRecord: Record<string, Record<string, any>> = {
+  en,
+  fr,
+  es,
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
+      <App />
+    </IntlProvider>
+  </React.StrictMode>
+);
+```
+
+> **Dica**: Para projetos reais, você pode:
+>
+> - Carregar dinamicamente as mensagens JSON em tempo de execução.
+> - Usar detecção de localidade baseada em ambiente, no navegador ou na conta do usuário.
+
+### 2. Usar `<FormattedMessage>` ou `useIntl()`
+
+Uma vez que suas mensagens estejam carregadas no `<IntlProvider>`, qualquer componente filho pode usar react-intl para acessar strings localizadas. Existem duas abordagens principais:
+
+- **Componente `<FormattedMessage>`**
+- **Hook `useIntl()`**
+
+---
+
+## Usando Traduções em Componentes React
+
+### Abordagem A: `<FormattedMessage>`
+
+Para uso rápido em linha:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export default function MyComponent() {
+  return (
+    <div>
+      <h1>
+        {/* “meu-componente.helloWorld” referencia a chave de en.json, fr.json, etc. */}
+        <FormattedMessage id="meu-componente.helloWorld" />
+      </h1>
+
+      <p>
+        <FormattedMessage id="meu-componente.description" />
+      </p>
+    </div>
+  );
+}
+```
+
+> A prop **`id`** em `<FormattedMessage>` deve corresponder à **chave de nível superior** (`meu-componente`) mais quaisquer subchaves (`helloWorld`).
+
+### Abordagem B: `useIntl()`
+
+Para um uso mais dinâmico:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { useIntl } from "react-intl";
+
+export default function MyComponent() {
+  const intl = useIntl();
+
+  return (
+    <div>
+      <h1>{intl.formatMessage({ id: "meu-componente.helloWorld" })}</h1>
+      <p>{intl.formatMessage({ id: "meu-componente.description" })}</p>
+    </div>
+  );
+}
+```
+
+Ambas as abordagens são válidas , escolha o estilo que melhor se adequa ao seu aplicativo.
+
+---
+
+## Atualizando ou Adicionando Novas Traduções
+
+1. **Adicione ou modifique** o conteúdo em qualquer arquivo `*.content.*`.
+2. Execute novamente `intlayer build` para regenerar os arquivos JSON sob `./react-intl/messages`.
+3. O React (e o react-intl) buscará as atualizações da próxima vez que você reconstruir ou recarregar sua aplicação.
+
+---
+
+## Integração com TypeScript (Opcional)
+
+Se você estiver usando TypeScript, o Intlayer pode **gerar definições de tipo** para suas traduções.
+
+- Certifique-se de que o `tsconfig.json` inclua sua pasta `types` (ou qualquer pasta de saída que o Intlayer gera) na matriz `"include"`.
+
+```json5
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+Os tipos gerados podem ajudar a detectar traduções ausentes ou chaves inválidas em seus componentes React no tempo de compilação.
+
+---
+
+## Configuração do Git
+
+É comum **excluir** os artefatos internos de construção do Intlayer do controle de versão. No seu `.gitignore`, adicione:
+
+```plaintext
+# Ignorar artefatos de construção do intlayer
+.intlayer
+react-intl
+```
+
+Dependendo do seu fluxo de trabalho, você pode também querer ignorar ou commitar os dicionários finais em `./react-intl/messages`. Se seu pipeline CI/CD os regenerar, você pode ignorá-los com segurança; caso contrário, comite-os se precisar deles para implantações em produção.

package/blog/pt/list_i18n_technologies/CMS/drupal.md

@@ -0,0 +1,143 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: Melhores Ferramentas de Internacionalização (i18n) para Drupal
+description: Descubra os melhores soluções de internacionalização (i18n) para enfrentar desafios de tradução, melhorar a pesquisa na web e oferecer uma experiência web global sem problemas.
+keywords:
+  - Drupal
+  - i18n
+  - multilíngue
+  - SEO
+  - Internacionalização
+  - Blog
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - CMS
+  - drupal
+---
+
+# Explorando Soluções de i18n para Traduzir Seu Site Drupal
+
+No atual cenário digital, expandir o alcance do seu site para atender a um público global é essencial. Para os proprietários de sites Drupal, implementar soluções de internacionalização (i18n) é fundamental para gerenciar traduções de forma eficiente enquanto preserva a arquitetura do site, o valor de SEO e a experiência do usuário. Neste artigo, exploramos várias abordagens - desde aproveitar as capacidades multilíngues incorporadas no Drupal Core até integrar módulos contribuídos e soluções personalizadas - ajudando você a decidir qual delas atende melhor às necessidades do seu projeto.
+
+---
+
+## O que é Internacionalização (i18n)?
+
+Internacionalização (i18n) é o processo de projetar seu site para que ele possa ser facilmente adaptado para vários idiomas e contextos culturais sem precisar redesenhar sua estrutura. No Drupal, isso envolve construir uma base onde o conteúdo - incluindo páginas, postagens, menus e configurações - possa ser traduzido e localizado eficientemente para públicos diversos.
+
+Saiba mais sobre i18n lendo nosso guia abrangente: [O que é Internacionalização (i18n)? Definição e Desafios](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/what_is_internationalization.md).
+
+---
+
+## O Desafio da Tradução para Sites Drupal
+
+Traduzir um site Drupal envolve seu próprio conjunto de desafios:
+
+- **Complexidade do Conteúdo:** Sites Drupal frequentemente consistem em variados tipos de conteúdo (nodos, termos de taxonomia, blocos e entidades personalizadas) que requerem fluxos de trabalho de tradução consistentes.
+- **Considerações de SEO:** Traduções implementadas corretamente aumentam o ranking de busca ao aproveitar URLs localizadas, tags hreflang e sitemaps específicos de idioma.
+- **Experiência do Usuário:** Fornecer switchers de idioma intuitivos e garantir que design e funcionalidade permaneçam consistentes em todas as traduções melhora o engajamento dos visitantes.
+- **Manutenção ao Longo do Tempo:** À medida que seu site evolui, manter as traduções sincronizadas com as atualizações de conteúdo pode ser desafiador sem as ferramentas e fluxos de trabalho certos.
+
+---
+
+## Principais Soluções de i18n para Drupal
+
+Abaixo estão várias abordagens populares para gerenciar conteúdo multilíngue no Drupal:
+
+### 1. Módulos Multilingues do Drupal Core
+
+**Visão Geral:**  
+Desde o Drupal 8, o suporte multilíngue tem sido um recurso embutido em vez de uma reflexão tardia. Ao habilitar um conjunto de módulos principais, você pode transformar seu site Drupal em uma potência multilíngue. Os quatro módulos essenciais são:
+
+- **Módulo de Idioma:** Permite adicionar e gerenciar idiomas.
+- **Módulo de Tradução de Conteúdo:** Permite a tradução de nodos e outros tipos de conteúdo.
+- **Módulo de Tradução de Configuração:** Facilita a tradução da configuração do site, como visualizações e menus.
+- **Módulo de Tradução de Interface:** Fornece traduções para a interface do Drupal e textos de módulos contribuídos.
+
+**Recursos-chave:**
+
+- **Integração Sem Costura:** Construídos diretamente no núcleo, esses módulos funcionam em harmonia com a arquitetura do seu site.
+- **Controle Granular:** Decida quais tipos de conteúdo e elementos de configuração devem ser traduzíveis.
+- **Amigável para SEO:** Oferece caminhos específicos de idioma, suporte a hreflang e sitemaps localizados direto da caixa.
+
+**Vantagens:**
+
+- Sem custo adicional, uma vez que essas capacidades estão incluídas no Drupal Core.
+- Suportado e mantido pela comunidade Drupal.
+- Fornece uma abordagem uniforme para gerenciar traduções.
+
+**Considerações:**
+
+- Embora poderosos, a configuração inicial pode parecer complexa devido a múltiplos módulos e configurações.
+- Necessidades de fluxo de trabalho avançadas podem requerer ferramentas adicionais.
+
+---
+
+### 2. Ferramenta de Gerenciamento de Tradução (TMGMT)
+
+**Visão Geral:**  
+Para sites que requerem fluxos de trabalho de tradução simplificados ou integração com serviços de tradução profissionais, o módulo da Ferramenta de Gerenciamento de Tradução (TMGMT) é um excelente complemento ao sistema multilíngue do Drupal Core.
+
+**Recursos-chave:**
+
+- **Gerenciamento de Fluxo de Trabalho:** Oferece uma interface amigável para gerenciar fluxos de trabalho de tradução.
+- **Integração com Serviços:** Conecta-se a serviços de tradução profissionais para traduções automatizadas ou gerenciadas.
+- **Colaboração:** Facilita a coordenação entre equipes internas e tradutores externos.
+
+**Vantagens:**
+
+- Ideal para sites com atualizações frequentes ou em grande escala de conteúdo.
+- Melhora a experiência multilíngue padrão com controle de tradução aprimorado.
+- Suporta múltiplos idiomas e fluxos de trabalho de tradução complexos.
+
+**Considerações:**
+
+- Sendo um módulo contribuído, requer verificações de compatibilidade com sua versão do Drupal.
+- Recursos avançados podem precisar de configuração e possivelmente uma equipe de tradução dedicada.
+
+---
+
+### 3. Soluções de i18n Personalizadas Através de Código
+
+**Visão Geral:**  
+Para desenvolvedores com requisitos únicos ou a necessidade de controle total, implementações de i18n personalizadas podem ser o melhor caminho a seguir. O Drupal oferece várias APIs e hooks que permitem adaptar sua estratégia multilíngue.
+
+**Técnicas-chave:**
+
+- **Utilize a API do Drupal:** Aproveite funções como `t()` para traduzir strings em temas e módulos.
+- **Integração com REST API:** Crie endpoints personalizados para gerenciar traduções dinâmicas ou integrar serviços de tradução externos.
+- **Fluxos de Trabalho Personalizados:** Crie soluções sob medida que se alinhem com a arquitetura do seu site e necessidades multilíngues específicas.
+
+**Vantagens:**
+
+- Total flexibilidade para desenvolver uma solução que atenda exatamente às suas necessidades.
+- Reduz a dependência de módulos de terceiros, potencialmente aumentando o desempenho.
+- Aprofundada integração com os recursos personalizados do seu site é possível.
+
+**Considerações:**
+
+- Requer sólida experiência em desenvolvimento e manutenção contínua.
+- Soluções personalizadas podem aumentar o tempo e a complexidade do setup inicial.
+- Não são adequadas para projetos com recursos técnicos limitados ou prazos de implantação imediata.
+
+---
+
+## Escolhendo a Solução de i18n Certa para Seu Site Drupal
+
+Ao decidir sobre uma abordagem de i18n para seu site Drupal, considere os seguintes fatores:
+
+- **Orçamento:** Os módulos multilíngues do Drupal Core vêm gratuitos com o Drupal 8 e versões posteriores, enquanto módulos adicionais como TMGMT podem ter custos associados (para serviços de tradução ou recursos avançados).
+- **Expertise Técnica:** Não desenvolvedores podem apreciar os robustos recursos prontos para uso do Drupal Core, enquanto desenvolvedores podem preferir a precisão oferecida por soluções personalizadas.
+- **Complexidade e Escala do Site:** Para sites complexos com numerosos tipos de conteúdo e requisitos de SEO avançados, aproveitar os módulos principais do Drupal junto com o TMGMT pode ser ideal. Para sites menores ou mais simples, os módulos principais sozinhos podem ser suficientes.
+- **Manutenção e Crescimento Futuro:** Certifique-se de que a solução escolhida seja escalável e possa se adaptar a futuras mudanças no conteúdo ou design sem sobrecarga significativa.
+
+---
+
+## Conclusão
+
+Traduzir seu site Drupal envolve mais do que simplesmente converter texto - é sobre conectar-se com um público global, melhorar a experiência do usuário e otimizar o desempenho de busca internacional. Seja aproveitando os robustos recursos multilíngues incorporados no Drupal Core, complementando-os com a Ferramenta de Gerenciamento de Tradução, ou investindo em uma solução personalizada codificada, o essencial é selecionar uma abordagem que se alinhe com os objetivos e recursos do seu projeto.
+
+Ao avaliar cuidadosamente suas opções e planejar a manutenção a longo prazo, você pode criar um site Drupal multilíngue escalável que ressoe efetivamente com usuários ao redor do mundo. Boa tradução e sucesso internacional para o seu site!