@intlayer/docs 5.7.2 → 5.7.3

package/docs/es/dictionary/gender.md

@@ -0,0 +1,275 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Contenido Basado en Género
+description: Aprende cómo usar contenido basado en género en Intlayer para mostrar contenido dinámicamente según el género. Sigue esta documentación para implementar contenido específico por género de manera eficiente en tu proyecto.
+keywords:
+  - Contenido Basado en Género
+  - Renderizado Dinámico
+  - Documentación
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concepto
+  - contenido
+  - genero
+---
+
+# Contenido Basado en Género / Género en Intlayer
+
+## Cómo Funciona el Género
+
+En Intlayer, el contenido basado en género se logra mediante la función `gender`, que asigna valores específicos de género ('male', 'female') a su contenido correspondiente. Este enfoque te permite seleccionar dinámicamente el contenido según un género dado. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se selecciona automáticamente según el género proporcionado en tiempo de ejecución.
+
+## Configuración de Contenido Basado en Género
+
+Para configurar contenido basado en género en tu proyecto Intlayer, crea un módulo de contenido que incluya tus definiciones específicas por género. A continuación, se muestran ejemplos en varios formatos.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { gender, type Dictionary } from "intlayer";
+
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "mi contenido para usuarios masculinos",
+      female: "mi contenido para usuarias femeninas",
+      fallback: "mi contenido cuando el género no está especificado", // Opcional
+    }),
+  },
+} satisfies Dictionary;
+
+export default myGenderContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { gender } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "mi contenido para usuarios masculinos",
+      female: "mi contenido para usuarias femeninas",
+      fallback: "mi contenido cuando el género no está especificado", // Opcional
+    }),
+  },
+};
+
+export default myGenderContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { gender } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "mi contenido para usuarios masculinos",
+      female: "mi contenido para usuarias femeninas",
+      fallback: "mi contenido cuando el género no está especificado", // Opcional
+    }),
+  },
+};
+
+module.exports = myGenderContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myGender": {
+      "nodeType": "gender",
+      "gender": {
+        "male": "mi contenido para usuarios masculinos",
+        "female": "mi contenido para usuarias femeninas",
+        "fallback": "mi contenido cuando el género no está especificado", // Opcional
+      },
+    },
+  },
+}
+```
+
+> Si no se declara un valor de reserva (fallback), se tomará la última clave declarada como reserva si el género no está especificado o no coincide con ningún género definido.
+
+## Uso de contenido basado en género con React Intlayer
+
+Para utilizar contenido basado en género dentro de un componente React, importa y usa el hook `useIntlayer` del paquete `react-intlayer`. Este hook obtiene el contenido para la clave especificada y permite pasar un género para seleccionar la salida apropiada.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const GenderComponent = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const GenderComponent = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios masculinos */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido para usuarios femeninos */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Salida: mi contenido cuando el género no está especificado */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+```
+
+## Recursos Adicionales
+
+Para obtener información más detallada sobre la configuración y el uso, consulte los siguientes recursos:
+
+- [Documentación de Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_cli.md)
+- [Documentación de React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_create_react_app.md)
+- [Documentación de Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_15.md)
+
+Estos recursos ofrecen una visión más profunda sobre la configuración y el uso de Intlayer en diversos entornos y frameworks.
+
+## Historial del Documento
+
+| Versión | Fecha      | Cambios                                    |
+| ------- | ---------- | ------------------------------------------ |
+| 5.7.2   | 2025-07-27 | Introducción de contenido basado en género |

package/docs/es/how_works_intlayer.md

@@ -94,7 +94,7 @@ Intlayer también proporciona un editor visual para permitirte editar tu conteni
 
 - El servidor es una aplicación simple de Express que escucha las solicitudes del cliente y recupera el contenido de tu aplicación, como los `dictionaries` y la configuración para hacerlo accesible en el lado del cliente.
 - Por otro lado, el cliente es una aplicación React que se usa para interactuar con tu contenido mediante una interfaz visual.
-  Cuando llamas a tu contenido usando `useIntlayer` y el editor está habilitado, automáticamente envuelve tus cadenas con un objeto Proxy llamado `IntlayerNode`. Este nodo utiliza `window.sendMessage` para comunicarse con un iframe envuelto que contiene la interfaz del editor visual.  
+  Cuando llamas a tu contenido usando `useIntlayer` y el editor está habilitado, automáticamente envuelve tus cadenas con un objeto Proxy llamado `IntlayerNode`. Este nodo utiliza `window.postMessage` para comunicarse con un iframe envuelto que contiene la interfaz del editor visual.  
   En el lado del editor, este escucha estos mensajes y simula una interacción real con tu contenido, permitiéndote editar el texto directamente en el contexto de tu aplicación.
 
 ## Optimización de la construcción de la aplicación

package/docs/es/locale_mapper.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Mapeador de Locales
+description: Descubre cómo funciona el Mapeador de Locales. Ve los pasos que utiliza el Mapeador de Locales en tu aplicación. Descubre qué hacen los diferentes paquetes.
+keywords:
+  - Mapeador de Locales
+  - Comenzar
+  - Intlayer
+  - Aplicación
+  - Paquetes
+slugs:
+  - doc
+  - mapeador-locales
+---
+
+# Mapeador de Locales
+
+El Mapeador de Locales es una utilidad poderosa que te ayuda a trabajar con datos de internacionalización en tu aplicación Intlayer. Proporciona tres funciones principales para transformar y organizar datos específicos de cada locale: `localeMap`, `localeFlatMap` y `localeRecord`.
+
+## Cómo Funciona el Mapeador de Locales
+
+El Mapeador de Locales opera sobre un objeto `LocaleData` que contiene toda la información necesaria sobre un locale:
+
+```typescript
+type LocaleData = {
+  locale: LocalesValues; // Código del locale actual (por ejemplo, 'en', 'fr')
+  defaultLocale: LocalesValues; // Código del locale por defecto
+  isDefault: boolean; // Indica si este es el locale por defecto
+  locales: LocalesValues[]; // Array de todos los locales disponibles
+  urlPrefix: string; // Prefijo de URL para este locale (por ejemplo, '/fr' o '')
+};
+```
+
+Las funciones del mapeador generan automáticamente estos datos para cada locale en tu configuración, teniendo en cuenta:
+
+- La lista de locales configurados
+- La configuración del locale por defecto
+- Si el locale por defecto debe tener prefijo en las URLs
+
+## Funciones Principales
+
+### `localeMap`
+
+Transforma cada locale en un único objeto usando una función mapeadora.
+
+```typescript
+localeMap<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Ejemplo: Creando objetos de rutas**
+
+```typescript
+import { localeMap } from "intlayer";
+
+const routes = localeMap((localizedData) => ({
+  path: localizedData.urlPrefix,
+  name: localizedData.locale,
+  isDefault: localizedData.isDefault,
+  locales: localizedData.locales,
+  defaultLocale: localizedData.defaultLocale,
+}));
+
+// Resultado:
+// [
+//   { path: '/', name: 'en', isDefault: true, locales: ['en', 'fr', 'es'], defaultLocale: 'en' },
+//   { path: '/fr', name: 'fr', isDefault: false, locales: ['en', 'fr', 'es'], defaultLocale: 'en' },
+//   { path: '/es', name: 'es', isDefault: false, locales: ['en', 'fr', 'es'], defaultLocale: 'en' }
+// ]
+```
+
+### `localeFlatMap`
+
+Similar a `localeMap`, pero la función mapper devuelve un arreglo de objetos que se aplanan en un solo arreglo.
+
+```typescript
+localeFlatMap<T>(
+  mapper: (locale: LocaleData) => T[],
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Ejemplo: Creando múltiples rutas por cada locale**
+
+```typescript
+import { localeFlatMap } from "intlayer";
+
+const routes = localeFlatMap((localizedData) => [
+  {
+    path: localizedData.urlPrefix,
+    name: localizedData.locale,
+    isDefault: localizedData.isDefault,
+  },
+  {
+    path: `${localizedData.urlPrefix}/about`,
+    name: `${localizedData.locale}-about`,
+    isDefault: localizedData.isDefault,
+  },
+]);
+
+// Resultado:
+// [
+//   { path: '/', name: 'en', isDefault: true },
+//   { path: '/about', name: 'en-about', isDefault: true },
+//   { path: '/fr', name: 'fr', isDefault: false },
+//   { path: '/fr/about', name: 'fr-about', isDefault: false },
+//   { path: '/es', name: 'es', isDefault: false },
+//   { path: '/es/about', name: 'es-about', isDefault: false }
+// ]
+```
+
+### `localeRecord`
+
+Crea un objeto tipo registro donde cada locale es una clave que mapea a un valor transformado por la función mapper.
+
+```typescript
+localeRecord<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: Locales[],
+  defaultLocale?: Locales,
+  prefixDefault?: boolean
+): Record<Locales, T>
+```
+
+**Ejemplo: Cargando archivos de traducción**
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translations = localeRecord(({ locale }) =>
+  require(`./translations/${locale}.json`)
+);
+
+/// Resultado:
+// {
+//   en: { welcome: 'Welcome', hello: 'Hello' },
+//   fr: { welcome: 'Bienvenue', hello: 'Bonjour' },
+//   es: { welcome: 'Bienvenido', hello: 'Hola' }
+// }
+```
+
+## Configuración del Locale Mapper
+
+El Locale Mapper utiliza automáticamente la configuración de Intlayer, pero puedes sobrescribir los valores predeterminados pasando parámetros:
+
+### Usando la Configuración Predeterminada
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Usa la configuración de intlayer.config.ts
+const routes = localeMap((data) => ({
+  path: data.urlPrefix,
+  locale: data.locale,
+}));
+```
+
+### Sobrescribiendo la Configuración
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Sobrescribe locales y locale predeterminado
+const customRoutes = localeMap(
+  (data) => ({ path: data.urlPrefix, locale: data.locale }),
+  ["en", "fr", "de"], // Locales personalizadas
+  "en", // Locale predeterminada personalizada
+  true // Prefijar locale predeterminada en las URLs
+);
+```
+
+## Ejemplos de Uso Avanzado
+
+### Creación de Menús de Navegación
+
+```typescript
+import { localeMap } from "intlayer";
+
+const navigationItems = localeMap((data) => ({
+  label: data.locale.toUpperCase(),
+  href: data.urlPrefix || "/",
+  isActive: data.isDefault,
+  flag: `/flags/${data.locale}.svg`,
+}));
+```
+
+### Generación de Datos para Sitemap
+
+```typescript
+import { localeFlatMap } from "intlayer";
+
+const sitemapUrls = localeFlatMap((data) => [
+  {
+    url: `${data.urlPrefix}/`,
+    lastmod: new Date().toISOString(),
+    changefreq: "daily",
+    priority: data.isDefault ? 1.0 : 0.8,
+  },
+  {
+    url: `${data.urlPrefix}/about`,
+    lastmod: new Date().toISOString(),
+    changefreq: "monthly",
+    priority: data.isDefault ? 0.8 : 0.6,
+  },
+]);
+```
+
+### Carga Dinámica de Traducciones
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translationModules = localeRecord(({ locale }) => ({
+  messages: import(`./locales/${locale}/messages.json`),
+  validation: import(`./locales/${locale}/validation.json`),
+  metadata: {
+    locale,
+    direction: ["ar", "he", "fa"].includes(locale) ? "rtl" : "ltr",
+  },
+}));
+```
+
+## Integración de Configuración
+
+El Locale Mapper se integra perfectamente con la configuración de Intlayer:
+
+- **Locales**: Utiliza automáticamente `configuration.internationalization.locales`
+- **Locale Predeterminada**: Usa `configuration.internationalization.defaultLocale`
+- **Prefijo en URL**: Respeta `configuration.middleware.prefixDefault`
+
+Esto garantiza la coherencia en toda su aplicación y reduce la duplicación de configuraciones.
+
+## Historial de Documentación
+
+| Versión | Fecha      | Cambios                                       |
+| ------- | ---------- | --------------------------------------------- |
+| 5.7.2   | 2025-07-27 | Añadida documentación del mapeador de locales |