@intlayer/docs 5.7.2 → 5.7.3

package/docs/it/dictionary/gender.md

@@ -0,0 +1,275 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Contenuto Basato sul Genere
+description: Scopri come utilizzare contenuti basati sul genere in Intlayer per visualizzare dinamicamente contenuti in base al genere. Segui questa documentazione per implementare contenuti specifici per genere in modo efficiente nel tuo progetto.
+keywords:
+  - Contenuto Basato sul Genere
+  - Rendering Dinamico
+  - Documentazione
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - gender
+---
+
+# Contenuto Basato sul Genere / Genere in Intlayer
+
+## Come Funziona il Genere
+
+In Intlayer, il contenuto basato sul genere viene realizzato tramite la funzione `gender`, che associa valori di genere specifici ('male', 'female') ai contenuti corrispondenti. Questo approccio consente di selezionare dinamicamente il contenuto in base a un genere dato. Quando integrato con React Intlayer o Next Intlayer, il contenuto appropriato viene scelto automaticamente in base al genere fornito a runtime.
+
+## Configurare il Contenuto Basato sul Genere
+
+Per configurare contenuti basati sul genere nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni specifiche per genere. Di seguito sono riportati esempi in vari formati.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { gender, type Dictionary } from "intlayer";
+
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "il mio contenuto per utenti maschi",
+      female: "il mio contenuto per utenti femmine",
+      fallback: "il mio contenuto quando il genere non è specificato", // Opzionale
+    }),
+  },
+} 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: "il mio contenuto per utenti maschi",
+      female: "il mio contenuto per utenti femmine",
+      fallback: "il mio contenuto quando il genere non è specificato", // Opzionale
+    }),
+  },
+};
+
+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: "il mio contenuto per utenti maschi",
+      female: "il mio contenuto per utenti femmine",
+      fallback: "il mio contenuto quando il genere non è specificato", // Opzionale
+    }),
+  },
+};
+
+module.exports = myGenderContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myGender": {
+      "nodeType": "gender",
+      "gender": {
+        "male": "il mio contenuto per utenti maschi",
+        "female": "il mio contenuto per utenti femmine",
+        "fallback": "il mio contenuto quando il genere non è specificato", // Opzionale
+      },
+    },
+  },
+}
+```
+
+> Se non viene dichiarato un fallback, l'ultima chiave dichiarata verrà utilizzata come fallback se il genere non è specificato o non corrisponde a nessun genere definito.
+
+## Utilizzo del Contenuto Basato sul Genere con React Intlayer
+
+Per utilizzare contenuti basati sul genere all'interno di un componente React, importa e usa l'hook `useIntlayer` dal pacchetto `react-intlayer`. Questo hook recupera il contenuto per la chiave specificata e ti permette di passare un genere per selezionare l'output appropriato.
+
+```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>
+        {
+          /* Output: il mio contenuto per utenti maschi */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere maschile */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          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>
+        {
+          /* Output: il mio contenuto per utenti di genere maschile */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere maschile */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          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>
+        {
+          /* Output: il mio contenuto per utenti di genere maschile */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere maschile */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto per utenti di genere femminile */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Output: il mio contenuto quando il genere non è specificato */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+```
+
+## Risorse Aggiuntive
+
+Per informazioni più dettagliate sulla configurazione e l'uso, consulta le seguenti risorse:
+
+- [Documentazione Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_cli.md)
+- [Documentazione React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_create_react_app.md)
+- [Documentazione Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_15.md)
+
+Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'uso di Intlayer in diversi ambienti e framework.
+
+## Cronologia del Documento
+
+| Versione | Data       | Modifiche                                    |
+| -------- | ---------- | -------------------------------------------- |
+| 5.7.2    | 2025-07-27 | Introduzione del contenuto basato sul genere |

package/docs/it/how_works_intlayer.md

@@ -93,7 +93,7 @@ Intlayer fornisce anche un editor visivo per consentirti di modificare i tuoi co
 
 - Il server è una semplice applicazione Express che ascolta le richieste dal client e recupera il contenuto della tua applicazione, come i `dictionaries` e la configurazione per renderli accessibili dal lato client.
 - D'altra parte, il client è un'applicazione React che viene utilizzata per interagire con i tuoi contenuti tramite un'interfaccia visiva.
-  Quando chiami i tuoi contenuti usando `useIntlayer` e l'editor è abilitato, esso avvolge automaticamente le tue stringhe con un oggetto Proxy chiamato `IntlayerNode`. Questo nodo utilizza `window.sendMessage` per comunicare con un iframe incapsulato che contiene l'interfaccia dell'editor visivo.
+  Quando chiami i tuoi contenuti usando `useIntlayer` e l'editor è abilitato, esso avvolge automaticamente le tue stringhe con un oggetto Proxy chiamato `IntlayerNode`. Questo nodo utilizza `window.postMessage` per comunicare con un iframe incapsulato che contiene l'interfaccia dell'editor visivo.
   Dal lato dell'editor, l'editor ascolta questi messaggi e simula un'interazione reale con i tuoi contenuti, permettendoti di modificare il testo direttamente nel contesto della tua applicazione.
 
 ## Ottimizzazione della build dell'app

package/docs/it/locale_mapper.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Locale Mapper
+description: Scopri come funziona Locale Mapper. Vedi i passaggi utilizzati da Locale Mapper nella tua applicazione. Scopri cosa fanno i diversi pacchetti.
+keywords:
+  - Locale Mapper
+  - Inizia
+  - Intlayer
+  - Applicazione
+  - Pacchetti
+slugs:
+  - doc
+  - locale-mapper
+---
+
+# Locale Mapper
+
+Locale Mapper è un potente strumento che ti aiuta a lavorare con i dati di internazionalizzazione nella tua applicazione Intlayer. Fornisce tre funzioni principali per trasformare e organizzare i dati specifici per locale: `localeMap`, `localeFlatMap` e `localeRecord`.
+
+## Come Funziona Locale Mapper
+
+Locale Mapper opera su un oggetto `LocaleData` che contiene tutte le informazioni necessarie su un locale:
+
+```typescript
+type LocaleData = {
+  locale: LocalesValues; // Codice del locale corrente (es. 'en', 'fr')
+  defaultLocale: LocalesValues; // Codice del locale predefinito
+  isDefault: boolean; // Indica se questo è il locale predefinito
+  locales: LocalesValues[]; // Array di tutti i locali disponibili
+  urlPrefix: string; // Prefisso URL per questo locale (es. '/fr' o '')
+};
+```
+
+Le funzioni mapper generano automaticamente questi dati per ogni locale nella tua configurazione, tenendo conto di:
+
+- La lista dei locali configurati
+- L'impostazione del locale predefinito
+- Se il locale predefinito deve avere un prefisso negli URL
+
+## Funzioni Principali
+
+### `localeMap`
+
+Trasforma ogni locale in un singolo oggetto usando una funzione mapper.
+
+```typescript
+localeMap<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Esempio: Creazione di oggetti route**
+
+```typescript
+import { localeMap } from "intlayer";
+
+const routes = localeMap((localizedData) => ({
+  path: localizedData.urlPrefix,
+  name: localizedData.locale,
+  isDefault: localizedData.isDefault,
+  locales: localizedData.locales,
+  defaultLocale: localizedData.defaultLocale,
+}));
+
+// Risultato:
+// [
+//   { 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`
+
+Simile a `localeMap`, ma la funzione mapper restituisce un array di oggetti che viene appiattito in un singolo array.
+
+```typescript
+localeFlatMap<T>(
+  mapper: (locale: LocaleData) => T[],
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Esempio: Creazione di più route per 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,
+  },
+]);
+
+// Risultato:
+// [
+//   { 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 oggetto record dove ogni locale è una chiave che mappa a un valore trasformato dalla funzione mapper.
+
+```typescript
+localeRecord<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: Locales[],
+  defaultLocale?: Locales,
+  prefixDefault?: boolean
+): Record<Locales, T>
+```
+
+**Esempio: Caricamento dei file di traduzione**
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translations = localeRecord(({ locale }) =>
+  require(`./translations/${locale}.json`)
+);
+
+// Risultato:
+// {
+//   en: { welcome: 'Welcome', hello: 'Hello' },
+//   fr: { welcome: 'Bienvenue', hello: 'Bonjour' },
+//   es: { welcome: 'Bienvenido', hello: 'Hola' }
+// }
+```
+
+## Configurazione del Locale Mapper
+
+Il Locale Mapper utilizza automaticamente la configurazione di Intlayer, ma puoi sovrascrivere i valori predefiniti passando dei parametri:
+
+### Utilizzo della Configurazione Predefinita
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Usa la configurazione da intlayer.config.ts
+const routes = localeMap((data) => ({
+  path: data.urlPrefix,
+  locale: data.locale,
+}));
+```
+
+### Sovrascrivere la Configurazione
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Sovrascrivi i locali e il locale predefinito
+const customRoutes = localeMap(
+  (data) => ({ path: data.urlPrefix, locale: data.locale }),
+  //  ["en", "fr", "de"], // Locali personalizzate
+  "en", // Locale predefinito personalizzato
+  true // Prefisso del locale predefinito negli URL
+);
+```
+
+## Esempi di Utilizzo Avanzato
+
+### Creazione di Menu di Navigazione
+
+```typescript
+import { localeMap } from "intlayer";
+
+const navigationItems = localeMap((data) => ({
+  label: data.locale.toUpperCase(),
+  href: data.urlPrefix || "/",
+  isActive: data.isDefault,
+  flag: `/flags/${data.locale}.svg`,
+}));
+```
+
+### Generazione dei Dati per la 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: "mensile",
+    priority: data.isDefault ? 0.8 : 0.6,
+  },
+]);
+```
+
+### Caricamento Dinamico delle Traduzioni
+
+```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",
+  },
+}));
+```
+
+## Integrazione della Configurazione
+
+Il Locale Mapper si integra perfettamente con la tua configurazione Intlayer:
+
+- **Locali**: Utilizza automaticamente `configuration.internationalization.locales`
+- **Locale Predefinito**: Utilizza `configuration.internationalization.defaultLocale`
+- **Prefisso URL**: Rispetta `configuration.middleware.prefixDefault`
+
+Questo garantisce coerenza in tutta la tua applicazione e riduce la duplicazione della configurazione.
+
+## Cronologia della Documentazione
+
+| Versione | Data       | Modifiche                                 |
+| -------- | ---------- | ----------------------------------------- |
+| 5.7.2    | 2025-07-27 | Aggiunta documentazione del locale mapper |