@intlayer/docs 5.7.2-canary.3 → 5.7.3

package/docs/fr/dictionary/gender.md

@@ -0,0 +1,276 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Contenu basé sur le genre
+description: Apprenez à utiliser le contenu basé sur le genre dans Intlayer pour afficher dynamiquement du contenu selon le genre. Suivez cette documentation pour implémenter efficacement du contenu spécifique au genre dans votre projet.
+keywords:
+  - Contenu basé sur le genre
+  - Rendu dynamique
+  - Documentation
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - gender
+---
+
+# Contenu basé sur le genre / Genre dans Intlayer
+
+## Comment fonctionne le genre
+
+Dans Intlayer, le contenu basé sur le genre est réalisé grâce à la fonction `gender`, qui associe des valeurs de genre spécifiques ('male', 'female') à leur contenu correspondant. Cette approche vous permet de sélectionner dynamiquement du contenu en fonction d'un genre donné. Lorsqu'elle est intégrée avec React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction du genre fourni à l'exécution.
+
+## Configuration du contenu basé sur le genre
+
+Pour configurer du contenu basé sur le genre dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions spécifiques au genre. Voici des exemples dans différents formats.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { gender, type Dictionary } from "intlayer";
+
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "mon contenu pour les utilisateurs masculins",
+      female: "mon contenu pour les utilisatrices féminines",
+      fallback: "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
+    }),
+  },
+} 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: "mon contenu pour les utilisateurs masculins",
+      female: "mon contenu pour les utilisatrices féminines",
+      fallback: "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
+    }),
+  },
+};
+
+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: "mon contenu pour les utilisateurs masculins",
+      female: "mon contenu pour les utilisatrices féminines",
+      fallback: "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
+    }),
+  },
+};
+
+module.exports = myGenderContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myGender": {
+      "nodeType": "gender",
+      "gender": {
+        "male": "mon contenu pour les utilisateurs masculins",
+        "female": "mon contenu pour les utilisatrices féminines",
+        "fallback": "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
+      },
+    },
+  },
+}
+```
+
+> Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si le genre n'est pas spécifié ou ne correspond à aucun genre défini.
+
+## Utilisation du contenu basé sur le genre avec React Intlayer
+
+Pour utiliser du contenu basé sur le genre dans un composant React, importez et utilisez le hook `useIntlayer` depuis le package `react-intlayer`. Ce hook récupère le contenu pour la clé spécifiée et vous permet de passer un genre pour sélectionner la sortie appropriée.
+
+```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>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          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>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          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>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisateurs masculins */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu pour les utilisatrices */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+```
+
+## Ressources supplémentaires
+
+Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :
+
+- [Documentation CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_cli.md)
+- [Documentation React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_create_react_app.md)
+- [Documentation Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_15.md)
+
+Ces ressources offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.
+
+## Historique de la documentation
+
+| Version | Date       | Modifications                             |
+| ------- | ---------- | ----------------------------------------- |
+| 5.7.2   | 2025-07-27 | Introduction du contenu basé sur le genre |

package/docs/fr/how_works_intlayer.md

@@ -95,7 +95,7 @@ Intlayer fournit également un éditeur visuel pour vous permettre d'éditer vot
 
 - Le serveur est une simple application Express qui écoute les requêtes du client et récupère le contenu de votre application, tels que les `dictionaries` et la configuration pour le rendre accessible côté client.
 - D'autre part, le client est une application React utilisée pour interagir avec votre contenu via une interface visuelle.
-  Lorsque vous appelez votre contenu en utilisant `useIntlayer` et que l'éditeur est activé, il enveloppe automatiquement vos chaînes avec un objet Proxy nommé `IntlayerNode`. Ce nœud utilise `window.sendMessage` pour communiquer avec un iframe encapsulé contenant l'interface de l'éditeur visuel.  
+  Lorsque vous appelez votre contenu en utilisant `useIntlayer` et que l'éditeur est activé, il enveloppe automatiquement vos chaînes avec un objet Proxy nommé `IntlayerNode`. Ce nœud utilise `window.postMessage` pour communiquer avec un iframe encapsulé contenant l'interface de l'éditeur visuel.  
   Du côté de l'éditeur, celui-ci écoute ces messages et simule une interaction réelle avec votre contenu, vous permettant d'éditer le texte directement dans le contexte de votre application.
 
 ## Optimisation de la construction de l'application

package/docs/fr/locale_mapper.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Locale Mapper
+description: Découvrez comment fonctionne Locale Mapper. Voyez les étapes utilisées par Locale Mapper dans votre application. Découvrez ce que font les différents packages.
+keywords:
+  - Locale Mapper
+  - Démarrer
+  - Intlayer
+  - Application
+  - Packages
+slugs:
+  - doc
+  - locale-mapper
+---
+
+# Locale Mapper
+
+Locale Mapper est un utilitaire puissant qui vous aide à travailler avec les données d'internationalisation dans votre application Intlayer. Il fournit trois fonctions principales pour transformer et organiser les données spécifiques à une locale : `localeMap`, `localeFlatMap` et `localeRecord`.
+
+## Comment fonctionne Locale Mapper
+
+Locale Mapper opère sur un objet `LocaleData` qui contient toutes les informations nécessaires sur une locale :
+
+```typescript
+type LocaleData = {
+  locale: LocalesValues; // Code de la locale actuelle (ex. : 'en', 'fr')
+  defaultLocale: LocalesValues; // Code de la locale par défaut
+  isDefault: boolean; // Indique si c'est la locale par défaut
+  locales: LocalesValues[]; // Tableau de toutes les locales disponibles
+  urlPrefix: string; // Préfixe URL pour cette locale (ex. : '/fr' ou '')
+};
+```
+
+Les fonctions du mapper génèrent automatiquement ces données pour chaque locale dans votre configuration, en tenant compte de :
+
+- Votre liste de locales configurées
+- La locale par défaut définie
+- Si la locale par défaut doit être préfixée dans les URLs
+
+## Fonctions principales
+
+### `localeMap`
+
+Transforme chaque locale en un objet unique en utilisant une fonction de mapping.
+
+```typescript
+localeMap<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Exemple : Création d'objets de routes**
+
+```typescript
+import { localeMap } from "intlayer";
+
+const routes = localeMap((localizedData) => ({
+  path: localizedData.urlPrefix,
+  name: localizedData.locale,
+  isDefault: localizedData.isDefault,
+  locales: localizedData.locales,
+  defaultLocale: localizedData.defaultLocale,
+}));
+
+// Résultat :
+// [
+//   { 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`
+
+Semblable à `localeMap`, mais la fonction de mappage retourne un tableau d'objets qui est aplati en un seul tableau.
+
+```typescript
+localeFlatMap<T>(
+  mapper: (locale: LocaleData) => T[],
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Exemple : Création de plusieurs routes par 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,
+  },
+]);
+
+// Résultat :
+// [
+//   { 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`
+
+Crée un objet record où chaque locale est une clé mappée à une valeur transformée par la fonction de mappage.
+
+```typescript
+localeRecord<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: Locales[],
+  defaultLocale?: Locales,
+  prefixDefault?: boolean
+): Record<Locales, T>
+```
+
+**Exemple : Chargement des fichiers de traduction**
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translations = localeRecord(({ locale }) =>
+  require(`./translations/${locale}.json`)
+);
+
+// Résultat :
+// {
+//   en: { welcome: 'Welcome', hello: 'Hello' },
+//   fr: { welcome: 'Bienvenue', hello: 'Bonjour' },
+//   es: { welcome: 'Bienvenido', hello: 'Hola' }
+// }
+```
+
+## Configuration du Locale Mapper
+
+Le Locale Mapper utilise automatiquement votre configuration Intlayer, mais vous pouvez remplacer les valeurs par défaut en passant des paramètres :
+
+### Utilisation de la configuration par défaut
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Utilise la configuration de intlayer.config.ts
+const routes = localeMap((data) => ({
+  path: data.urlPrefix,
+  locale: data.locale,
+}));
+```
+
+### Surcharge de la configuration
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Remplace les locales et la locale par défaut
+const customRoutes = localeMap(
+  (data) => ({ path: data.urlPrefix, locale: data.locale }),
+  ["en", "fr", "de"], // Langues personnalisées
+  "en", // Langue par défaut personnalisée
+  true // Préfixer la langue par défaut dans les URLs
+);
+```
+
+## Exemples d'utilisation avancée
+
+### Création de menus de navigation
+
+```typescript
+import { localeMap } from "intlayer";
+
+const navigationItems = localeMap((data) => ({
+  label: data.locale.toUpperCase(),
+  href: data.urlPrefix || "/",
+  isActive: data.isDefault,
+  flag: `/flags/${data.locale}.svg`,
+}));
+```
+
+### Génération des données du 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: "mensuel",
+    priority: data.isDefault ? 0.8 : 0.6,
+  },
+]);
+```
+
+### Chargement dynamique des traductions
+
+```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",
+  },
+}));
+```
+
+## Intégration à la configuration
+
+Le Locale Mapper s'intègre parfaitement à votre configuration Intlayer :
+
+- **Locales** : Utilise automatiquement `configuration.internationalization.locales`
+- **Langue par défaut** : Utilise `configuration.internationalization.defaultLocale`
+- **Préfixage des URLs** : Respecte `configuration.middleware.prefixDefault`
+
+Cela garantit la cohérence dans toute votre application et réduit la duplication de la configuration.
+
+## Historique de la documentation
+
+| Version | Date       | Modifications                                    |
+| ------- | ---------- | ------------------------------------------------ |
+| 5.7.2   | 2025-07-27 | Ajout de la documentation du mappage des locales |