@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/pt/packages/intlayer/getLocalizedUrl.md

@@ -68,22 +68,7 @@ A função `getLocalizedUrl` gera uma URL localizada prefixando a URL fornecida
 
 ### URLs Relativas
 
-```typescript codeFormat="typescript"
-import { getLocalizedUrl, Locales } from "intlayer";
-
-getLocalizedUrl(
-  "/about",
-  Locales.FRENCH,
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-
-// Saída: "/fr/about" para o locale francês
-// Saída: "/about" para o locale padrão (inglês)
-```
-
-```javascript codeFormat="esm"
+```typescript codeFormat={["typescript", "esm"]}
 import { getLocalizedUrl, Locales } from "intlayer";
 
 getLocalizedUrl(
@@ -186,7 +171,7 @@ getLocalizedUrl(
 
 Em uma aplicação multilíngue, configurar as definições de internacionalização com `locales` e `defaultLocale` é fundamental para garantir que o idioma correto seja exibido. Abaixo está um exemplo de como `getLocalizedUrl` pode ser usado na configuração de uma aplicação:
 
-```tsx codeFormat="typescript"
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 // Configuração para os locales suportados e locale padrão
@@ -200,34 +185,6 @@ export default {
 export default config;
 ```
 
-```javascript codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 A configuração acima garante que a aplicação reconheça `ENGLISH`, `FRENCH` e `SPANISH` como idiomas suportados e utilize `ENGLISH` como idioma padrão.
 
 Usando essa configuração, a função `getLocalizedUrl` pode gerar URLs localizadas dinamicamente com base na preferência de idioma do usuário:

package/docs/pt/packages/intlayer/getMultilingualUrls.md

@@ -64,7 +64,7 @@ A função `getMultilingualUrls` gera um mapeamento de URLs multilíngues prefix
 
 ### URLs Relativas
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getMultilingualUrls, Locales } from "intlayer";
 
 getMultilingualUrls(
@@ -79,36 +79,6 @@ getMultilingualUrls(
 // }
 ```
 
-```javascript codeFormat="esm"
-import { getMultilingualUrls, Locales } from "intlayer";
-
-getMultilingualUrls(
-  "/dashboard",
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-// Saída: {
-//   en: "/dashboard",
-//   fr: "/fr/dashboard"
-// }
-```
-
-```javascript codeFormat="commonjs"
-const { getMultilingualUrls, Locales } = require("intlayer");
-
-getMultilingualUrls(
-  "/dashboard",
-  [Locales.ENGLISH, Locales.FRENCH],
-  Locales.ENGLISH,
-  false
-);
-// Saída: {
-//   en: "/dashboard",
-//   fr: "/fr/dashboard"
-// }
-```
-
 ### URLs Absolutas
 
 ```typescript
@@ -143,7 +113,7 @@ getMultilingualUrls(
 
 Em uma aplicação multilíngue, configurar as definições de internacionalização com `locales` e `defaultLocale` é fundamental para garantir que o idioma correto seja exibido. Abaixo está um exemplo de como `getMultilingualUrls` pode ser usado na configuração de uma aplicação:
 
-```tsx codeFormat="typescript"
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 // Configuração para localidades suportadas e localidade padrão
@@ -157,34 +127,6 @@ export default {
 export default config;
 ```
 
-```javascript codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 A configuração acima garante que a aplicação reconheça `ENGLISH`, `FRENCH` e `SPANISH` como idiomas suportados e utilize `ENGLISH` como idioma padrão.
 
 Usando esta configuração, a função `getMultilingualUrls` pode gerar dinamicamente mapeamentos de URLs multilíngues com base nos idiomas suportados pela aplicação:

package/docs/pt/packages/intlayer/getPathWithoutLocale.md

@@ -47,7 +47,7 @@ Remove o segmento de localidade (locale) da URL ou pathname fornecido, se presen
 
 ## Exemplo de Uso
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getPathWithoutLocale } from "intlayer";
 
 console.log(getPathWithoutLocale("/dashboard")); // Output: "/dashboard"
@@ -55,21 +55,3 @@ console.log(getPathWithoutLocale("/en/dashboard")); // Output: "/dashboard"
 console.log(getPathWithoutLocale("/fr/dashboard")); // Output: "/dashboard"
 console.log(getPathWithoutLocale("https://example.com/en/dashboard")); // Saída: "https://example.com/dashboard"
 ```
-
-```javascript codeFormat="esm"
-import { getPathWithoutLocale } from "intlayer";
-
-console.log(getPathWithoutLocale("/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("/en/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("/fr/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("https://example.com/en/dashboard")); // Saída: "https://example.com/dashboard"
-```
-
-```javascript codeFormat="commonjs"
-const { getPathWithoutLocale } = require("intlayer");
-
-console.log(getPathWithoutLocale("/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("/en/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("/fr/dashboard")); // Saída: "/dashboard"
-console.log(getPathWithoutLocale("https://example.com/en/dashboard")); // Saída: "https://example.com/dashboard"
-```

package/docs/pt/packages/intlayer/getPrefix.md

@@ -99,7 +99,7 @@ type GetPrefixResult = {
 
 ### Uso Básico
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getPrefix, Locales } from "intlayer";
 
 // Verifica o prefixo para o locale inglês
@@ -117,24 +117,6 @@ getPrefix(Locales.FRENCH, {
 // Retorna: { prefix: 'fr/', localePrefix: 'fr' }
 ```
 
-```javascript codeFormat="esm"
-import { getPrefix, Locales } from "intlayer";
-
-getPrefix(Locales.ENGLISH, { mode: "prefix-all" });
-javascript codeFormat="esm"
-import { getPrefix, Locales } from "intlayer";
-
-getPrefix(Locales.ENGLISH, { mode: "prefix-all" });
-// Retorna: { prefix: '', localePrefix: undefined }
-```
-
-```javascript codeFormat="commonjs"
-const { getPrefix, Locales } = require("intlayer");
-
-getPrefix(Locales.ENGLISH, { mode: "prefix-all" });
-// Retorna: { prefix: '', localePrefix: undefined }
-```
-
 ### Modos Diferentes de Roteamento
 
 ```typescript

package/docs/pt/packages/intlayer/getTranslation.md

@@ -50,7 +50,7 @@ A função `getTranslationContent` recupera o conteúdo correspondente a um loca
 
 ### Uso Básico
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslationContent, Locales } from "intlayer";
 
 const content = getTranslationContent(
@@ -64,51 +64,9 @@ const content = getTranslationContent(
 console.log(content); // Saída: "Bonjour"
 ```
 
-```javascript codeFormat="esm"
-import { getTranslationContent, Locales } from "intlayer";
-
-const content = getTranslationContent(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.ENGLISH
-);
-
-console.log(content); // Saída: "Bonjour"
-```
-
-```javascript codeFormat="commonjs"
-const { getTranslationContent, Locales } = require("intlayer");
-
-const content = getTranslationContent(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.ENGLISH
-);
-
-console.log(content); // Saída: "Bonjour"
-```
-
 ### Localização Ausente:
 
-```typescript codeFormat="typescript"
-import { getTranslationContent, Locales } from "intlayer";
-
-const content = getTranslationContent(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.SPANISH
-);
-
-console.log(content); // Saída: "Hello" (conteúdo do local padrão)
-```
-
-```javascript codeFormat="esm"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslationContent, Locales } from "intlayer";
 
 const content = getTranslationContent(
@@ -122,23 +80,9 @@ const content = getTranslationContent(
 console.log(content); // Saída: "Hello" (conteúdo do local padrão)
 ```
 
-```javascript codeFormat="commonjs"
-const { getTranslationContent, Locales } = require("intlayer");
-
-const content = getTranslationContent(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.SPANISH
-);
-
-console.log(content); // Saída: "Hello" (conteúdo do local padrão)
-```
-
 ### Usando Tipos de Conteúdo Personalizados:
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslationContent, Locales } from "intlayer";
 
 const customContent = getTranslationContent<Record<string, string>>(
@@ -152,34 +96,6 @@ const customContent = getTranslationContent<Record<string, string>>(
 console.log(customContent.greeting); // Saída: "Bonjour"
 ```
 
-```javascript codeFormat="esm"
-import { getTranslationContent, Locales } from "intlayer";
-
-const customContent = getTranslationContent<Record<string, string>>(
-  {
-    en: { greeting: "Hello" },
-    fr: { greeting: "Bonjour" },
-  },
-  Locales.FRENCH
-);
-
-console.log(customContent.greeting); // Saída: "Bonjour"
-```
-
-```javascript codeFormat="commonjs"
-const { getTranslationContent, Locales } = require("intlayer");
-
-const customContent = getTranslationContent<Record<string, string>>(
-  {
-    en: { greeting: "Hello" },
-    fr: { greeting: "Bonjour" },
-  },
-  Locales.FRENCH
-);
-
-console.log(customContent.greeting); // Saída: "Bonjour"
-```
-
 ## Casos Especiais
 
 - **Localização Não Encontrada:**

package/docs/pt/packages/intlayer/getTranslationContent.md

@@ -49,7 +49,7 @@ A função `getTranslation` recupera o conteúdo correspondente a uma localidade
 
 ### Uso Básico
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslation, Locales } from "intlayer";
 
 const content = getTranslation(
@@ -63,51 +63,9 @@ const content = getTranslation(
 console.log(content); // Saída: "Bonjour"
 ```
 
-```javascript codeFormat="esm"
-import { getTranslation, Locales } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.ENGLISH
-);
-
-console.log(content); // Saída: "Bonjour"
-```
-
-```javascript codeFormat="commonjs"
-const { getTranslation, Locales } = require("intlayer");
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.ENGLISH
-);
-
-console.log(content); // Saída: "Bonjour"
-```
-
 ### Localidade Ausente:
 
-```typescript codeFormat="typescript"
-import { getTranslation, Locales } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.SPANISH
-);
-
-console.log(content); // Saída: "Hello" (conteúdo da localidade padrão)
-```
-
-```javascript codeFormat="esm"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslation, Locales } from "intlayer";
 
 const content = getTranslation(
@@ -121,23 +79,9 @@ const content = getTranslation(
 console.log(content); // Saída: "Hello" (conteúdo da localidade padrão)
 ```
 
-```javascript codeFormat="commonjs"
-const { getTranslation, Locales } = require("intlayer");
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-  },
-  Locales.SPANISH
-);
-
-console.log(content); // Saída: "Hello" (conteúdo da localidade padrão)
-```
-
 ### Usando Tipos de Conteúdo Personalizados:
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import { getTranslation, Locales } from "intlayer";
 
 const customContent = getTranslation<Record<string, string>>(
@@ -151,34 +95,6 @@ const customContent = getTranslation<Record<string, string>>(
 console.log(customContent.greeting); // Saída: "Bonjour"
 ```
 
-```javascript codeFormat="esm"
-import { getTranslation, Locales } from "intlayer";
-
-const customContent = getTranslation<Record<string, string>>(
-  {
-    en: { greeting: "Hello" },
-    fr: { greeting: "Bonjour" },
-  },
-  Locales.FRENCH
-);
-
-console.log(customContent.greeting); // Saída: "Bonjour"
-```
-
-```javascript codeFormat="commonjs"
-const { getTranslation, Locales } = require("intlayer");
-
-const customContent = getTranslation<Record<string, string>>(
-  {
-    en: { greeting: "Hello" },
-    fr: { greeting: "Bonjour" },
-  },
-  Locales.FRENCH
-);
-
-console.log(customContent.greeting); // Saída: "Bonjour"
-```
-
 ## Casos Especiais
 
 - **Localidade Não Encontrada:**

package/docs/pt/packages/next-intlayer/t.md

@@ -67,7 +67,7 @@ t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string
 
 Certifique-se de incluir a diretiva `'use client';` no topo do arquivo do seu componente ao usar `t` em um componente do lado do cliente.
 
-```tsx codeFormat="typescript"
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
 "use client";
 
 import type { FC } from "react";
@@ -84,37 +84,9 @@ export const ClientComponentExample: FC = () => (
 );
 ```
 
-```javascript codeFormat="esm"
-import { t } from "next-intlayer";
-
-const ClientComponentExample = () => (
-  <p>
-    {t({
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es el contenido d un ejemplo de componente cliente",
-    })}
-  </p>
-);
-```
-
-```javascript codeFormat="commonjs"
-const { t } = require("next-intlayer");
-
-const ClientComponentExample = () => (
-  <p>
-    {t({
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es le contenido d un ejemplo de componente cliente",
-    })}
-  </p>
-);
-```
-
 ### Usando `t` em um Componente do Servidor
 
-```tsx codeFormat="typescript"
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import { t } from "next-intlayer/server";
 
@@ -129,34 +101,6 @@ export const ServerComponentExample: FC = () => (
 );
 ```
 
-```javascript codeFormat="esm"
-import { t } from "next-intlayer/server";
-
-const ServerComponentExample = () => (
-  <p>
-    {t({
-      en: "This is the content of a server component example",
-      fr: "Ceci est le contenu d'un exemple de composant serveur",
-      es: "Este es el contenido de un ejemplo de componente servidor",
-    })}
-  </p>
-);
-```
-
-```javascript codeFormat="commonjs"
-const { t } = require("next-intlayer/server");
-
-const ServerComponentExample = () => (
-  <p>
-    {t({
-      en: "This is the content of a server component example",
-      fr: "Ceci est le contenu d'un exemple de composant serveur",
-      es: "Este es el contenido de un ejemplo de componente servidor",
-    })}
-  </p>
-);
-```
-
 ###Traduções Inline em Atributos
 
 A função `t` é particularmente útil para traduções inline em atributos JSX.
@@ -194,7 +138,7 @@ Ao localizar atributos como `alt`, `title`, `href` ou `aria-label`, você pode u
 
 A função `t` é segura em termos de tipos quando usada com TypeScript, garantindo que todas as localidades necessárias sejam fornecidas.
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 import type { IConfigLocales } from "intlayer";
 import { t } from "next-intlayer";
 
@@ -207,40 +151,13 @@ const translations: IConfigLocales<string> = {
 const greeting = t(translations);
 ```
 
-```javascript codeFormat="esm"
-import type { IConfigLocales } from "intlayer";
-import { t } from "next-intlayer";
-
-/** @type {import('next-intlayer').IConfigLocales<string>} */
-const translations = {
-  en: "Welcome",
-  fr: "Bienvenue",
-  es: "Bienvenido",
-};
-
-const greeting = t(translations);
-```
-
-```javascript codeFormat="commonjs"
-const { t } = require("next-intlayer");
-
-/** @type {import('next-intlayer').IConfigLocales<string>} */
-const translations = {
-  en: "Welcome",
-  fr: "Bienvenue",
-  es: "Bienvenido",
-};
-
-const greeting = t(translations);
-```
-
 ### Detecção de Localidade e Contexto
 
 No `next-intlayer`, a localidade atual é gerida através de provedores de contexto: `IntlayerClientProvider` e `IntlayerServerProvider`. Certifique-se de que esses provedores envolvem seus componentes e que a propriedade `locale` é passada corretamente.
 
 #### Exemplo:
 
-```tsx codeFormat="typescript"
+```tsx codeFormat={["typescript", "esm", "commonjs"]}
 import type { FC } from "react";
 import type { Locales } from "intlayer";
 import { IntlayerClientProvider } from "next-intlayer";
@@ -255,32 +172,6 @@ const Page: FC<{ locale: Locales }> = ({ locale }) => (
 );
 ```
 
-```javascript codeFormat="esm"
-import { IntlayerClientProvider } from "next-intlayer";
-import { IntlayerServerProvider } from "next-intlayer/server";
-
-const Page = ({ locale }) => (
-  <IntlayerServerProvider locale={locale}>
-    <IntlayerClientProvider locale={locale}>
-      {/* Seus componentes aqui */}
-    </IntlayerClientProvider>
-  </IntlayerServerProvider>
-);
-```
-
-```javascript codeFormat="commonjs"
-const { IntlayerClientProvider } = require("next-intlayer");
-const { IntlayerServerProvider } = require("next-intlayer/server");
-
-const Page = ({ locale }) => (
-  <IntlayerServerProvider locale={locale}>
-    <IntlayerClientProvider locale={locale}>
-      {/* Seus componentes aqui */}
-    </IntlayerClientProvider>
-  </IntlayerServerProvider>
-);
-```
-
 ---
 
 ## Erros Comuns e Solução de Problemas
@@ -297,7 +188,7 @@ const Page = ({ locale }) => (
 - **Causa**: O objeto de traduções não satisfaz os locales requeridos, causando erros no TypeScript.
 - **Solução**: Use o tipo `IConfigLocales` para garantir a completude das suas traduções.
 
-```typescript codeFormat="typescript"
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
 const translations: IConfigLocales<string> = {
   en: "Text",
   fr: "Texte",
@@ -307,29 +198,6 @@ const translations: IConfigLocales<string> = {
 const text = t(translations);
 ```
 
-```javascript codeFormat="esm"
-const translations = {
-  en: "Text",
-  fr: "Texte",
-  // es: 'Texto', // A ausência de 'es' causará um erro no TypeScript [!code error]
-};
-
-const text = t(translations);
-```
-
-```javascript codeFormat="commonjs"
-const { t } = require("next-intlayer");
-
-/** @type {import('next-intlayer').IConfigLocales<string>} */
-const translations = {
-  en: "Text",
-  fr: "Texte",
-  // es: 'Texto', // A ausência de 'es' causará um erro no TypeScript [!code error]
-};
-
-const text = t(translations);
-```
-
 ---
 
 ## Dicas para Uso Eficaz