@intlayer/docs 5.7.2 → 5.7.4

package/docs/de/dictionary/gender.md

@@ -0,0 +1,316 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Geschlechtsspezifische Inhalte
+description: Erfahren Sie, wie Sie geschlechtsspezifische Inhalte in Intlayer verwenden, um Inhalte dynamisch basierend auf dem Geschlecht anzuzeigen. Folgen Sie dieser Dokumentation, um geschlechtsspezifische Inhalte effizient in Ihrem Projekt zu implementieren.
+keywords:
+  - Geschlechtsspezifische Inhalte
+  - Dynamische Darstellung
+  - Dokumentation
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - konzept
+  - inhalte
+  - geschlecht
+---
+
+# Geschlechtsspezifische Inhalte / Geschlecht in Intlayer
+
+## Wie Geschlecht funktioniert
+
+In Intlayer wird geschlechtsspezifischer Inhalt durch die Funktion `gender` realisiert, die bestimmte Geschlechtswerte ('male', 'female') ihren entsprechenden Inhalten zuordnet. Dieser Ansatz ermöglicht es Ihnen, Inhalte dynamisch basierend auf einem gegebenen Geschlecht auszuwählen. In Kombination mit React Intlayer oder Next Intlayer wird der passende Inhalt automatisch entsprechend dem zur Laufzeit angegebenen Geschlecht ausgewählt.
+
+## Einrichtung geschlechtsspezifischer Inhalte
+
+Um geschlechtsspezifische Inhalte in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre geschlechtsspezifischen Definitionen enthält. Nachfolgend finden Sie Beispiele in verschiedenen Formaten.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { gender, type Dictionary } from "intlayer";
+
+const myGenderContent = {
+  key: "my_key",
+  content: {
+    myGender: gender({
+      male: "mein Inhalt für männliche Nutzer",
+      female: "mein Inhalt für weibliche Nutzer",
+      fallback: "mein Inhalt, wenn das Geschlecht nicht angegeben ist", // Optional
+    }),
+  },
+} 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: "mein Inhalt für männliche Nutzer",
+      female: "mein Inhalt für weibliche Nutzer",
+      fallback: "mein Inhalt, wenn das Geschlecht nicht angegeben ist", // Optional
+    }),
+  },
+};
+
+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: "mein Inhalt für männliche Nutzer",
+      female: "mein Inhalt für weibliche Nutzer",
+      fallback: "mein Inhalt, wenn das Geschlecht nicht angegeben ist", // Optional
+    }),
+  },
+};
+
+module.exports = myGenderContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myGender": {
+      "nodeType": "gender",
+      "gender": {
+        "male": "mein Inhalt für männliche Nutzer",
+        "female": "mein Inhalt für weibliche Nutzer",
+        "fallback": "mein Inhalt, wenn das Geschlecht nicht angegeben ist", // Optional
+      },
+    },
+  },
+}
+```
+
+> Wenn kein Fallback angegeben ist, wird der zuletzt deklarierte Schlüssel als Fallback verwendet, falls das Geschlecht nicht angegeben ist oder keinem definierten Geschlecht entspricht.
+
+## Verwendung von geschlechtsspezifischen Inhalten mit React Intlayer
+
+Um geschlechtsspezifische Inhalte innerhalb einer React-Komponente zu nutzen, importieren Sie den `useIntlayer` Hook aus dem `react-intlayer` Paket. Dieser Hook ruft die Inhalte für den angegebenen Schlüssel ab und ermöglicht es, ein Geschlecht zu übergeben, um die passende Ausgabe auszuwählen.
+
+```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>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn kein Geschlecht angegeben ist */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn kein Geschlecht angegeben ist */
+          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>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          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>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für männliche Nutzer */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt für weibliche Nutzer */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Ausgabe: mein Inhalt, wenn das Geschlecht nicht angegeben ist */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = GenderComponent;
+```
+
+## Zusätzliche Ressourcen
+
+Für detailliertere Informationen zur Konfiguration und Nutzung verweisen wir auf die folgenden Ressourcen:
+
+- [Intlayer CLI Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md)
+- [React Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_create_react_app.md)
+- [Next Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_15.md)
+
+Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Nutzung von Intlayer in verschiedenen Umgebungen und Frameworks.
+
+## Dokumentationshistorie
+
+| Version | Datum      | Änderungen                                 |
+| ------- | ---------- | ------------------------------------------ |
+| 5.7.2   | 2025-07-27 | Einführung geschlechtsspezifischer Inhalte |

package/docs/de/how_works_intlayer.md

@@ -93,7 +93,7 @@ Intlayer bietet auch einen visuellen Editor, mit dem Sie Ihre Inhalte visuell be
 
 - Der Server ist eine einfache Express-Anwendung, die Anfragen vom Client entgegennimmt und den Inhalt Ihrer Anwendung, wie die `dictionaries` und die Konfiguration, abruft, um sie auf der Client-Seite zugänglich zu machen.
 - Der Client hingegen ist eine React-Anwendung, die verwendet wird, um mit Ihren Inhalten über eine visuelle Oberfläche zu interagieren.
-  Wenn Sie Ihre Inhalte mit `useIntlayer` aufrufen und der Editor aktiviert ist, werden Ihre Strings automatisch mit einem Proxy-Objekt namens `IntlayerNode` umschlossen. Dieses Node verwendet `window.sendMessage`, um mit einem eingebetteten iframe zu kommunizieren, das die Oberfläche des visuellen Editors enthält.  
+  Wenn Sie Ihre Inhalte mit `useIntlayer` aufrufen und der Editor aktiviert ist, werden Ihre Strings automatisch mit einem Proxy-Objekt namens `IntlayerNode` umschlossen. Dieses Node verwendet `window.postMessage`, um mit einem eingebetteten iframe zu kommunizieren, das die Oberfläche des visuellen Editors enthält.  
   Auf der Editor-Seite hört der Editor auf diese Nachrichten und simuliert eine echte Interaktion mit Ihren Inhalten, sodass Sie den Text direkt im Kontext Ihrer Anwendung bearbeiten können.
 
 ## Optimierung des App-Builds

package/docs/de/locale_mapper.md

@@ -0,0 +1,244 @@
+---
+createdAt: 2025-07-27
+updatedAt: 2025-07-27
+title: Locale Mapper
+description: Entdecken Sie, wie der Locale Mapper funktioniert. Sehen Sie die Schritte, die der Locale Mapper in Ihrer Anwendung verwendet. Erfahren Sie, was die verschiedenen Pakete tun.
+keywords:
+  - Locale Mapper
+  - Erste Schritte
+  - Intlayer
+  - Anwendung
+  - Pakete
+slugs:
+  - doc
+  - locale-mapper
+---
+
+# Locale Mapper
+
+Der Locale Mapper ist ein leistungsstarkes Werkzeug, das Ihnen hilft, mit Internationalisierungsdaten in Ihrer Intlayer-Anwendung zu arbeiten. Er bietet drei Hauptfunktionen, um locale-spezifische Daten zu transformieren und zu organisieren: `localeMap`, `localeFlatMap` und `localeRecord`.
+
+## Wie der Locale Mapper funktioniert
+
+Der Locale Mapper arbeitet mit einem `LocaleData`-Objekt, das alle notwendigen Informationen über eine Locale enthält:
+
+```typescript
+type LocaleData = {
+  locale: LocalesValues; // Aktueller Locale-Code (z.B. 'en', 'fr')
+  defaultLocale: LocalesValues; // Standard-Locale-Code
+  isDefault: boolean; // Ob dies die Standard-Locale ist
+  locales: LocalesValues[]; // Array aller verfügbaren Locales
+  urlPrefix: string; // URL-Präfix für diese Locale (z.B. '/fr' oder '')
+};
+```
+
+Die Mapper-Funktionen generieren diese Daten automatisch für jede Locale in Ihrer Konfiguration unter Berücksichtigung von:
+
+- Ihrer konfigurierten Locales-Liste
+- Der Einstellung der Standard-Locale
+- Ob die Standard-Locale in URLs mit einem Präfix versehen werden soll
+
+## Kernfunktionen
+
+### `localeMap`
+
+Transformiert jede Locale in ein einzelnes Objekt mithilfe einer Mapper-Funktion.
+
+```typescript
+localeMap<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Beispiel: Erstellen von Routenobjekten**
+
+```typescript
+import { localeMap } from "intlayer";
+
+const routes = localeMap((localizedData) => ({
+  path: localizedData.urlPrefix,
+  name: localizedData.locale,
+  isDefault: localizedData.isDefault,
+  locales: localizedData.locales,
+  defaultLocale: localizedData.defaultLocale,
+}));
+
+// Ergebnis:
+// [
+//   { 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`
+
+Ähnlich wie `localeMap`, aber die Mapper-Funktion gibt ein Array von Objekten zurück, das zu einem einzigen Array zusammengeführt wird.
+
+```typescript
+localeFlatMap<T>(
+  mapper: (locale: LocaleData) => T[],
+  locales?: LocalesValues[],
+  defaultLocale?: LocalesValues,
+  prefixDefault?: boolean
+): T[]
+```
+
+**Beispiel: Erstellen mehrerer Routen pro 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,
+  },
+]);
+
+// Ergebnis:
+// [
+//   { 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`
+
+Erstellt ein Record-Objekt, bei dem jede Locale ein Schlüssel ist, der auf einen durch die Mapper-Funktion transformierten Wert abbildet.
+
+```typescript
+localeRecord<T>(
+  mapper: (locale: LocaleData) => T,
+  locales?: Locales[],
+  defaultLocale?: Locales,
+  prefixDefault?: boolean
+): Record<Locales, T>
+```
+
+**Beispiel: Laden von Übersetzungsdateien**
+
+```typescript
+import { localeRecord } from "intlayer";
+
+const translations = localeRecord(({ locale }) =>
+  require(`./translations/${locale}.json`)
+);
+
+// Ergebnis:
+// {
+//   en: { welcome: 'Welcome', hello: 'Hello' },
+//   fr: { welcome: 'Bienvenue', hello: 'Bonjour' },
+//   es: { welcome: 'Bienvenido', hello: 'Hola' }
+// }
+```
+
+## Einrichtung des Locale Mappers
+
+Der Locale Mapper verwendet automatisch Ihre Intlayer-Konfiguration, aber Sie können die Standardwerte durch Übergabe von Parametern überschreiben:
+
+### Verwendung der Standardkonfiguration
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Verwendet die Konfiguration aus intlayer.config.ts
+const routes = localeMap((data) => ({
+  path: data.urlPrefix,
+  locale: data.locale,
+}));
+```
+
+### Überschreiben der Konfiguration
+
+```typescript
+import { localeMap } from "intlayer";
+
+// Überschreibt Locales und Standard-Locale
+const customRoutes = localeMap(
+  (data) => ({ path: data.urlPrefix, locale: data.locale }),
+  ["en", "fr", "de"], // Benutzerdefinierte Sprachen
+  "en", // Benutzerdefinierte Standardsprache
+  true // Standard-Sprache in URLs voranstellen
+);
+```
+
+## Erweiterte Anwendungsbeispiele
+
+### Erstellen von Navigationsmenüs
+
+```typescript
+import { localeMap } from "intlayer";
+
+const navigationItems = localeMap((data) => ({
+  label: data.locale.toUpperCase(),
+  href: data.urlPrefix || "/",
+  isActive: data.isDefault,
+  flag: `/flags/${data.locale}.svg`,
+}));
+```
+
+### Generieren von Sitemap-Daten
+
+```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: "monatlich",
+    priority: data.isDefault ? 0.8 : 0.6,
+  },
+]);
+```
+
+### Dynamisches Laden von Übersetzungen
+
+```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", // Schreibrichtung: rechts-nach-links für bestimmte Sprachen
+  },
+}));
+```
+
+## Konfigurationsintegration
+
+Der Locale Mapper integriert sich nahtlos in Ihre Intlayer-Konfiguration:
+
+- **Locales**: Verwendet automatisch `configuration.internationalization.locales`
+- **Standard-Sprache**: Verwendet `configuration.internationalization.defaultLocale`
+- **URL-Präfixierung**: Berücksichtigt `configuration.middleware.prefixDefault`
+
+Dies gewährleistet Konsistenz in Ihrer Anwendung und reduziert die Duplizierung von Konfigurationen.
+
+## Dokumentationshistorie
+
+| Version | Datum      | Änderungen                                     |
+| ------- | ---------- | ---------------------------------------------- |
+| 5.7.2   | 2025-07-27 | Hinzufügen der Dokumentation zum Locale Mapper |