@intlayer/docs 5.5.8

package/de/interest_of_intlayer.md

@@ -0,0 +1,132 @@
+# Intlayer: Eine maßgeschneiderte Möglichkeit, Ihre Website zu übersetzen
+
+**Intlayer** ist eine Internationalisierungsbibliothek, die speziell für JavaScript-Entwickler entwickelt wurde. Sie ermöglicht die Deklaration Ihrer Inhalte überall in Ihrem Code. Sie wandelt die Deklaration mehrsprachiger Inhalte in strukturierte Wörterbücher um, die sich leicht in Ihren Code integrieren lassen. Mit TypeScript macht **Intlayer** Ihre Entwicklung robuster und effizienter.
+
+## Verwendungsbeispiel
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## Warum Intlayer wählen?
+
+- **JavaScript-basierte Inhaltsverwaltung**: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
+- **Typsichere Umgebung**: Nutzen Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
+- **Integrierte Inhaltsdateien**: Halten Sie Ihre Übersetzungen nahe an ihren jeweiligen Komponenten, was die Wartbarkeit und Klarheit verbessert.
+- **Vereinfachte Einrichtung**: Starten Sie schnell mit minimaler Konfiguration, besonders optimiert für Next.js-Projekte.
+- **Server-Komponenten-Unterstützung**: Perfekt geeignet für Next.js-Server-Komponenten, was ein reibungsloses Server-Side-Rendering gewährleistet.
+- **Verbessertes Routing**: Vollständige Unterstützung für Next.js-App-Routing, das sich nahtlos an komplexe Anwendungsstrukturen anpasst.
+- **Organisierte Codebasis**: Halten Sie Ihre Codebasis besser organisiert: 1 Komponente = 1 Wörterbuch im gleichen Ordner.
+- **Automatische TypeScript-Typen**: TypeScript-Typen werden automatisch implementiert, was Code-Brüche durch umbenannte oder gelöschte Schlüssel verhindert.
+- **CI-Automatische Übersetzung**: Füllen Sie Ihre Übersetzungen automatisch in Ihrem CI mit Ihrem eigenen OpenAI API-Schlüssel aus, was die Notwendigkeit einer L10n-Plattform eliminiert.
+- **MCP-Server-Integration**: Bietet einen MCP (Model Context Protocol) Server für IDE-Automatisierung, der nahtlose Inhaltsverwaltung und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht. [Mehr erfahren](https://github.com/aymericzip/intlayer/blob/main/docs/en/mcp_server.md).
+- **Markdown-Unterstützung**: Importieren und interpretieren Sie Markdown-Dateien für mehrsprachige Inhalte wie Datenschutzrichtlinien.
+- **Kostenloser visueller Editor & CMS**: Ein kostenloser visueller Editor und CMS sind verfügbar, wenn Sie mit Content-Autoren für Ihre Übersetzungen arbeiten müssen, was wiederum die Notwendigkeit einer Lokalisierungsplattform beseitigt und die Externalisierung von Inhalten aus der Codebasis ermöglicht.
+- **Vereinfachte Inhaltsabrufung**: Keine Notwendigkeit, Ihre `t`-Funktion für jedes Inhaltselement aufzurufen; rufen Sie alle Ihre Inhalte direkt mit einem einzigen Hook ab.
+- **Konsistente Implementierung**: Die gleiche Implementierung für Client- und Server-Komponenten, keine Notwendigkeit, Ihre `t`-Funktion durch jede Server-Komponente zu übergeben.
+- **Tree-shakable-Inhalte**: Die Inhalte sind tree-shakable, was das endgültige Bundle leichter macht.
+- **Nicht-blockierendes statisches Rendering**: Intlayer blockiert das statische Rendering nicht wie `next-intl`.
+- **Interoperabilität**: Ermöglicht Interoperabilität mit [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-intl.md), und [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-intl.md).

package/de/intlayer_CMS.md

@@ -0,0 +1,334 @@
+# Intlayer Content Management System (CMS) Dokumentation
+
+<iframe title="Visual Editor + CMS for Your Web App: Intlayer Explained" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+Das Intlayer CMS ist eine Anwendung, die es Ihnen ermöglicht, den Inhalt eines Intlayer-Projekts auszulagern.
+
+Dafür führt Intlayer das Konzept der 'entfernten Wörterbücher' ein.
+
+![Intlayer CMS Oberfläche](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
+
+## Verständnis von entfernten Wörterbüchern
+
+Intlayer unterscheidet zwischen 'lokalen' und 'entfernten' Wörterbüchern.
+
+- Ein 'lokales' Wörterbuch ist ein Wörterbuch, das in Ihrem Intlayer-Projekt deklariert ist. Zum Beispiel die Deklarationsdatei eines Buttons oder Ihrer Navigationsleiste. Die Auslagerung dieses Inhalts macht in diesem Fall keinen Sinn, da dieser Inhalt nicht häufig geändert werden soll.
+
+- Ein 'entferntes' Wörterbuch ist ein Wörterbuch, das über das Intlayer CMS verwaltet wird. Es kann nützlich sein, Ihrem Team zu ermöglichen, Inhalte direkt auf Ihrer Website zu verwalten, und zielt auch darauf ab, A/B-Testfunktionen und automatische SEO-Optimierung zu nutzen.
+
+## Visueller Editor vs CMS
+
+Der [Intlayer Visual](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_visual_editor.md) Editor ist ein Tool, das es Ihnen ermöglicht, Inhalte in einem visuellen Editor für lokale Wörterbücher zu verwalten. Sobald eine Änderung vorgenommen wurde, wird der Inhalt in der Code-Basis ersetzt. Das bedeutet, dass die Anwendung neu gebaut und die Seite neu geladen wird, um den neuen Inhalt anzuzeigen.
+
+Im Gegensatz dazu ist das Intlayer CMS ein Tool, das es Ihnen ermöglicht, Inhalte in einem visuellen Editor für entfernte Wörterbücher zu verwalten. Sobald eine Änderung vorgenommen wurde, wird der Inhalt **nicht** Ihre Code-Basis beeinflussen. Und die Website wird den geänderten Inhalt automatisch anzeigen.
+
+## Integration
+
+Für weitere Details zur Installation des Pakets siehe den entsprechenden Abschnitt unten:
+
+### Integration mit Next.js
+
+Für die Integration mit Next.js, siehe die [Einrichtungsanleitung](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_nextjs_15.md).
+
+### Integration mit Create React App
+
+Für die Integration mit Create React App, siehe die [Einrichtungsanleitung](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_create_react_app.md).
+
+### Integration mit Vite + React
+
+Für die Integration mit Vite + React, siehe die [Einrichtungsanleitung](https://github.com/aymericzip/intlayer/blob/main/docs/de/intlayer_with_vite+react.md).
+
+## Konfiguration
+
+In Ihrer Intlayer-Konfigurationsdatei können Sie die CMS-Einstellungen anpassen:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    /**
+     * Erforderlich
+     *
+     * Die URL der Anwendung.
+     * Dies ist die URL, die vom visuellen Editor anvisiert wird.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Erforderlich
+     *
+     * Client-ID und Client-Secret sind erforderlich, um den Editor zu aktivieren.
+     * Sie ermöglichen die Identifizierung des Benutzers, der den Inhalt bearbeitet.
+     * Sie können durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte (https://intlayer.org/dashboard/projects) erhalten werden.
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des CMS festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://intlayer.org gesetzt.
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des Backends festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://back.intlayer.org gesetzt.
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    /**
+     * Erforderlich
+     *
+     * Die URL der Anwendung.
+     * Dies ist die URL, die vom visuellen Editor anvisiert wird.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Erforderlich
+     *
+     * Client-ID und Client-Secret sind erforderlich, um den Editor zu aktivieren.
+     * Sie ermöglichen die Identifizierung des Benutzers, der den Inhalt bearbeitet.
+     * Sie können durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte (https://intlayer.org/dashboard/projects) erhalten werden.
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des CMS festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://intlayer.org gesetzt.
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des Backends festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://back.intlayer.org gesetzt.
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    /**
+     * Erforderlich
+     *
+     * Die URL der Anwendung.
+     * Dies ist die URL, die vom visuellen Editor anvisiert wird.
+     */
+    applicationURL: process.env.INTLAYER_APPLICATION_URL,
+
+    /**
+     * Erforderlich
+     *
+     * Client-ID und Client-Secret sind erforderlich, um den Editor zu aktivieren.
+     * Sie ermöglichen die Identifizierung des Benutzers, der den Inhalt bearbeitet.
+     * Sie können durch das Erstellen eines neuen Clients im Intlayer Dashboard - Projekte (https://intlayer.org/dashboard/projects) erhalten werden.
+     * clientId: process.env.INTLAYER_CLIENT_ID,
+     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     */
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des CMS festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://intlayer.org gesetzt.
+     */
+    cmsURL: process.env.INTLAYER_CMS_URL,
+
+    /**
+     * Optional
+     *
+     * Falls Sie das Intlayer CMS selbst hosten, können Sie die URL des Backends festlegen.
+     *
+     * Die URL des Intlayer CMS.
+     * Standardmäßig ist sie auf https://back.intlayer.org gesetzt.
+     */
+    backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+};
+
+module.exports = config;
+```
+
+> Wenn Sie keine Client-ID und kein Client-Secret haben, können Sie diese durch das Erstellen eines neuen Clients im [Intlayer Dashboard - Projekte](https://intlayer.org/dashboard/projects) erhalten.
+
+> Um alle verfügbaren Parameter zu sehen, siehe die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/de/configuration.md).
+
+## Verwendung des CMS
+
+### Konfiguration hochladen
+
+Um das Intlayer CMS zu konfigurieren, können Sie die [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/de/intlayer_cli.md) Befehle verwenden.
+
+```bash
+npx intlayer config push
+```
+
+> Wenn Sie Umgebungsvariablen in Ihrer `intlayer.config.ts` Konfigurationsdatei verwenden, können Sie die gewünschte Umgebung mit dem `--env` Argument angeben:
+
+```bash
+npx intlayer config push --env production
+```
+
+Dieser Befehl lädt Ihre Konfiguration in das Intlayer CMS hoch.
+
+### Wörterbuch hochladen
+
+Um Ihre lokalen Wörterbücher in ein entferntes Wörterbuch zu transformieren, können Sie die [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/de/intlayer_cli.md) Befehle verwenden.
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key
+```
+
+> Wenn Sie Umgebungsvariablen in Ihrer `intlayer.config.ts` Konfigurationsdatei verwenden, können Sie die gewünschte Umgebung mit dem `--env` Argument angeben:
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key --env production
+```
+
+Dieser Befehl lädt Ihre initialen Inhaltswörterbücher hoch, sodass sie für asynchrones Abrufen und Bearbeiten über die Intlayer-Plattform verfügbar sind.
+
+### Wörterbuch bearbeiten
+
+Dann können Sie Ihr Wörterbuch im [Intlayer CMS](https://intlayer.org/dashboard/content) anzeigen und verwalten.
+
+## Hot Reloading
+
+Das Intlayer CMS kann die Wörterbücher automatisch neu laden, wenn eine Änderung erkannt wird.
+
+Ohne das Hot Reloading wird ein neuer Build der Anwendung benötigt, um den neuen Inhalt anzuzeigen.
+
+Durch Aktivieren der [`hotReload`](https://intlayer.org/doc/concept/configuration#editor-configuration) Konfiguration wird die Anwendung den aktualisierten Inhalt automatisch ersetzen, sobald er erkannt wird.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    // ... andere Konfigurationseinstellungen
+
+    /**
+     * Gibt an, ob die Anwendung die lokalen Konfigurationen automatisch neu laden soll, wenn eine Änderung erkannt wird.
+     * Zum Beispiel, wenn ein neues Wörterbuch hinzugefügt oder aktualisiert wird, wird die Anwendung den Inhalt aktualisieren, der auf der Seite angezeigt wird.
+     *
+     * Da das Hot Reloading eine kontinuierliche Verbindung zum Server benötigt, ist es nur für Kunden des `Enterprise`-Plans verfügbar.
+     *
+     * Standard: false
+     */
+    hotReload: true,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    // ... andere Konfigurationseinstellungen
+
+    /**
+     * Gibt an, ob die Anwendung die lokalen Konfigurationen automatisch neu laden soll, wenn eine Änderung erkannt wird.
+     * Zum Beispiel, wenn ein neues Wörterbuch hinzugefügt oder aktualisiert wird, wird die Anwendung den Inhalt aktualisieren, der auf der Seite angezeigt wird.
+     *
+     * Da das Hot Reloading eine kontinuierliche Verbindung zum Server benötigt, ist es nur für Kunden des `Enterprise`-Plans verfügbar.
+     *
+     * Standard: false
+     */
+    hotReload: true,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    // ... andere Konfigurationseinstellungen
+
+    /**
+     * Gibt an, ob die Anwendung die lokalen Konfigurationen automatisch neu laden soll, wenn eine Änderung erkannt wird.
+     * Zum Beispiel, wenn ein neues Wörterbuch hinzugefügt oder aktualisiert wird, wird die Anwendung den Inhalt aktualisieren, der auf der Seite angezeigt wird.
+     *
+     * Da das Hot Reloading eine kontinuierliche Verbindung zum Server benötigt, ist es nur für Kunden des `Enterprise`-Plans verfügbar.
+     *
+     * Standard: false
+     */
+    hotReload: true,
+  },
+};
+
+module.exports = config;
+```
+
+Das Hot Reloading ersetzt den Inhalt sowohl auf der Server- als auch auf der Client-Seite.
+
+- Auf der Server-Seite sollten Sie sicherstellen, dass der Anwendungsprozess Schreibzugriff auf das Verzeichnis `.intlayer/dictionaries` hat.
+- Auf der Client-Seite ermöglicht das Hot Reloading der Anwendung, den Inhalt im Browser ohne Neuladen der Seite automatisch zu aktualisieren. Diese Funktion ist jedoch nur für Client-Komponenten verfügbar.
+
+> Da das Hot Reloading eine kontinuierliche Verbindung zum Server über einen `EventListener` benötigt, ist es nur für Kunden des `Enterprise`-Plans verfügbar.
+
+## Debugging
+
+Falls Sie Probleme mit dem CMS haben, überprüfen Sie Folgendes:
+
+- Die Anwendung läuft.
+
+- Die [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) Konfiguration ist korrekt in Ihrer Intlayer-Konfigurationsdatei eingestellt.
+
+  - Erforderliche Felder:
+    - Die Anwendungs-URL sollte mit der übereinstimmen, die Sie in der Editor-Konfiguration (`applicationURL`) eingestellt haben.
+    - Die CMS-URL
+
+- Stellen Sie sicher, dass die Projektkonfiguration in das Intlayer CMS hochgeladen wurde.
+
+- Der visuelle Editor verwendet ein iframe, um Ihre Website anzuzeigen. Stellen Sie sicher, dass die Content Security Policy (CSP) Ihrer Website die CMS-URL als `frame-ancestors` erlaubt ('https://intlayer.org' standardmäßig). Überprüfen Sie die Editor-Konsole auf Fehler.