@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/de/intlayer_with_vite+vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Vue i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Vite + Vue-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -34,6 +34,10 @@ author: aymericzip
 
 Siehe [Application Template](https://github.com/aymericzip/intlayer-vite-vue-template) auf GitHub.
 
+## Inhaltsverzeichnis
+
+<TOC/>
+
 ## Warum Intlayer gegenüber Alternativen?
 
 Im Vergleich zu Hauptlösungen wie „vue-i18n“ oder „i18next“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt, wie zum Beispiel:
@@ -903,57 +907,7 @@ import RouterLink from "@components/RouterLink.vue";
 
 </Step>
 
-<Step number={11} title="Markdown rendern" isOptional={true}>
-
-Intlayer unterstützt das Rendern von Markdown-Inhalten direkt in Ihrer Vue-Anwendung. Standardmäßig wird Markdown als einfacher Text behandelt. Um Markdown in reichhaltiges HTML umzuwandeln, können Sie [markdown-it](https://github.com/markdown-it/markdown-it), einen Markdown-Parser, integrieren.
-
-Dies ist besonders nützlich, wenn Ihre Übersetzungen formatierte Inhalte wie Listen, Links oder Hervorhebungen enthalten.
-
-Standardmäßig rendert Intlayer Markdown als String. Intlayer bietet jedoch auch eine Möglichkeit, Markdown mit der Funktion `installIntlayerMarkdown` in HTML zu rendern.
-
-> Um zu sehen, wie man Markdown-Inhalte mit dem `intlayer`-Paket deklariert, siehe die [Markdown-Dokumentation](https://github.com/aymericzip/intlayer/tree/main/docs/de/dictionary/markdown.md).
-
-```ts fileName="main.ts"
-import MarkdownIt from "markdown-it";
-import { createApp, h } from "vue";
-import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
-
-const app = createApp(App);
-
-app.use(intlayer);
-
-const md = new MarkdownIt({
-  html: true, // HTML-Tags erlauben
-  linkify: true, // URLs automatisch verlinken
-  typographer: true, // intelligente Anführungszeichen, Gedankenstriche usw. aktivieren
-});
-
-// Intlayer mitteilen, md.render() zu verwenden, wann immer Markdown in HTML umgewandelt werden muss
-installIntlayerMarkdown(app, (markdown) => {
-  const html = md.render(markdown);
-  return h("div", { innerHTML: html });
-});
-```
-
-Sobald registriert, können Sie die komponentenbasierte Syntax verwenden, um den Markdown-Inhalt direkt anzuzeigen:
-
-```vue
-<template>
-  <div>
-    <myMarkdownContent />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myMarkdownContent } = useIntlayer("my-component");
-</script>
-```
-
-</Step>
-
-<Step number={12} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
+<Step number={11} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
 
 Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.
 
@@ -1052,54 +1006,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### TypeScript konfigurieren
-
-Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
-
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... Ihre bestehenden TypeScript-Konfigurationen
-  "include": [
-    // ... Ihre bestehenden TypeScript-Konfigurationen
-    ".intlayer/**/*.ts", // Einschluss der automatisch generierten Typen
-  ],
-}
-```
-
-### Git-Konfiguration
-
-Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, dass diese in Ihr Git-Repository übernommen werden.
-
-Dazu können Sie die folgenden Anweisungen in Ihre `.gitignore`-Datei aufnehmen:
-
-```bash
-#  Ignoriere die von Intlayer generierten Dateien
-.intlayer
-```
-
-### VS Code Erweiterung
-
-Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.
-
-[Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Diese Erweiterung bietet:
-
-- **Autovervollständigung** für Übersetzungsschlüssel.
-- **Echtzeit-Fehlererkennung** für fehlende Übersetzungen.
-- **Inline-Vorschauen** des übersetzten Inhalts.
-- **Schnellaktionen**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
-
-Für weitere Details zur Verwendung der Erweiterung siehe die [Intlayer VS Code Extension Dokumentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
 ### (Optional) Sitemap und robots.txt (Build-Zeit)
 
 Intlayer stellt Hilfsfunktionen bereit - `generateSitemap` und `getMultilingualUrls` -, mit denen Sie mehrsprachige `sitemap.xml`- und `robots.txt`-Inhalte für Crawler formatieren und automatisch nach `public/` schreiben können. Üblich ist ein kleines Node-Skript **vor** Vite (z. B. npm-`predev`-/`prebuild`-Hooks), damit die Dateien beim Build bzw. Dev-Server vorliegen.
@@ -1174,8 +1080,54 @@ console.log("SEO files generated successfully.");
 
 Bei pnpm oder yarn die Befehle anpassen. Aufruf aus der CI ist ebenfalls möglich.
 
-### Weiterführende Schritte
+### TypeScript konfigurieren
 
-Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
+Intlayer nutzt Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebase zu stärken.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Übersetzungsfehler](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Ihre bestehenden TypeScript-Konfigurationen
+  "include": [
+    // ... Ihre bestehenden TypeScript-Konfigurationen
+    ".intlayer/**/*.ts", // Die automatisch generierten Typen einschließen
+  ],
+}
+```
+
+### Git-Konfiguration
+
+Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen, zu vermeiden, dass diese in Ihr Git-Repository committet werden.
+
+Um dies zu tun, können Sie die folgenden Anweisungen zu Ihrer `.gitignore`-Datei hinzufügen:
+
+```plaintext fileName=".gitignore"
+# Von Intlayer generierte Dateien ignorieren
+.intlayer
+```
+
+### VS Code Extension
+
+Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Extension** installieren.
+
+[Vom VS Code Marketplace installieren](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Diese Extension bietet:
+
+- **Autovervollständigung** für Übersetzungsschlüssel.
+- **Echtzeit-Fehlererkennung** für fehlende Übersetzungen.
+- **Inline-Vorschau** von übersetzten Inhalten.
+- **Quick Actions**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
+
+Weitere Details zur Verwendung der Extension finden Sie in der [Intlayer VS Code Extension Dokumentation](https://intlayer.org/de/doc/vs-code-extension).
 
 ---
+
+### Weiterführende Schritte
+
+Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.

package/docs/de/mcp_server.md

@@ -247,6 +247,28 @@ Pfad der Konfigurationsdatei:
 
 ---
 
+## Set Up in Claude Code (CLI)
+
+Folgen Sie der [offiziellen Dokumentation](https://modelcontextprotocol.io/quickstart/user), um den MCP-Server in Claude Code zu konfigurieren.
+
+### Lokaler Server (stdio) (empfohlen)
+
+Um den Intlayer MCP Server mit Claude Code über stdio zu verbinden:
+
+```bash
+claude mcp add intlayer npx -y @intlayer/mcp
+```
+
+### Remote server (Streamable HTTP)
+
+Um den Intlayer MCP Server mit Claude Code über Streamable HTTP (SSE) zu verbinden:
+
+```bash
+claude mcp add intlayer https://mcp.intlayer.org -t http
+```
+
+---
+
 ## Verwendung des MCP-Servers über die CLI
 
 Sie können den Intlayer MCP-Server auch direkt über die Kommandozeile ausführen, um Tests, Debugging oder die Integration mit anderen Tools durchzuführen.

package/docs/de/packages/intlayer/getLocalizedUrl.md

@@ -29,6 +29,38 @@ author: aymericzip
 
 ## Beschreibung
 
+Die `getLocalizedUrl`-Funktion generiert eine lokalisierte URL, indem sie die gegebene URL mit dem angegebenen Locale präfixiert. Sie verarbeitet sowohl absolute als auch relative URLs und stellt sicher, dass das richtige Locale-Präfix basierend auf der Konfiguration angewendet wird.
+
+**Wichtigste Funktionen:**
+
+- Nur 2 Parameter erforderlich: `url` und `currentLocale`
+- Optionales `options`-Objekt mit `locales`, `defaultLocale` und `mode`
+- Verwendet die Internationalisierungskonfiguration deines Projekts als Standard
+- Kann mit minimalen Parametern für einfache Fälle oder vollständig angepasst für komplexe Szenarien verwendet werden
+- Unterstützt mehrere Routing-Modi: `prefix-no-default`, `prefix-all`, `no-prefix` und `search-params`
+
+---
+
+## Funktionssignatur
+
+```typescript
+getLocalizedUrl(
+  url: string,                   // Erforderlich
+  currentLocale: Locales,        // Erforderlich
+  options?: {                    // Optional
+    locales?: Locales[];
+    defaultLocale?: Locales;
+    mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params';
+  }
+): string
+```
+
+---
+
+## Parameter
+
+## Beschreibung
+
 Die Funktion `getLocalizedUrl` erzeugt eine lokalisierte URL, indem sie die angegebene URL mit dem spezifizierten Locale voranstellt. Sie verarbeitet sowohl absolute als auch relative URLs und stellt sicher, dass das korrekte Locale-Präfix basierend auf der Konfiguration angewendet wird.
 
 ---
@@ -67,6 +99,25 @@ Die Funktion `getLocalizedUrl` erzeugt eine lokalisierte URL, indem sie die ange
 
 ## Beispielhafte Verwendung
 
+### Grundlegende Verwendung (Nur erforderliche Parameter)
+
+Wenn Sie Ihr Projekt mit Internationalisierungseinstellungen konfiguriert haben, können Sie die Funktion nur mit den erforderlichen Parametern verwenden:
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getLocalizedUrl, Locales } from "intlayer";
+
+// Verwendet die Konfiguration Ihres Projekts für locales, defaultLocale und mode
+getLocalizedUrl("/about", Locales.FRENCH);
+// Ausgabe: "/fr/about" (angenommen, Französisch wird unterstützt und mode ist 'prefix-no-default')
+
+getLocalizedUrl("/about", Locales.ENGLISH);
+// Ausgabe: "/about" oder "/en/about" (je nach Ihrer mode-Einstellung)
+```
+
+### Erweiterte Verwendung (Mit optionalen Parametern)
+
+Sie können die Standardkonfiguration überschreiben, indem Sie den optionalen Parameter `options` bereitstellen:
+
 ### Relative URLs
 
 ```typescript codeFormat={["typescript", "esm"]}
@@ -114,6 +165,30 @@ getLocalizedUrl(
 // Ausgabe: "/about" für das Standard-Locale (Englisch)
 ```
 
+### Partielle Konfigurationsüberschreibung
+
+Sie können auch nur einige der optionalen Parameter bereitstellen. Die Funktion verwendet Ihre Projektkonfiguration für alle Parameter, die Sie nicht angeben:
+
+```typescript codeFormat="typescript"
+import { getLocalizedUrl, Locales } from "intlayer";
+
+// Nur die Locales überschreiben, Projektkonfiguration für defaultLocale und mode verwenden
+getLocalizedUrl("/about", Locales.SPANISH, {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+});
+
+// Nur mode überschreiben, Projektkonfiguration für locales und defaultLocale verwenden
+getLocalizedUrl("/about", Locales.ENGLISH, {
+  mode: "prefix-all", // Präfix für alle Locales einschließlich Standard erzwingen
+});
+
+// Mehrere Optionen überschreiben
+getLocalizedUrl("/about", Locales.FRENCH, {
+  defaultLocale: Locales.ENGLISH,
+  mode: "search-params", // Abfrageparameter verwenden: /about?locale=fr
+});
+```
+
 ### Absolute URLs
 
 ```typescript

package/docs/de/packages/intlayer/getMultilingualUrls.md

@@ -29,12 +29,28 @@ author: aymericzip
 
 ## Beschreibung
 
+Die `getMultilingualUrls`-Funktion generiert eine Zuordnung mehrsprachiger URLs, indem sie die angegebene URL mit jedem unterstützten Locale voranstellt. Sie kann sowohl absolute als auch relative URLs verarbeiten und wendet das entsprechende Locale-Präfix basierend auf der bereitgestellten Konfiguration oder den Standardeinstellungen an.
+
+**Wichtige Funktionen:**
+
+- Nur 1 Parameter ist erforderlich: `url`
+- Optionales `options`-Objekt mit `locales`, `defaultLocale` und `mode`
+- Verwendet die Internationalisierungskonfiguration Ihres Projekts als Standardeinstellungen
+- Unterstützt mehrere Routing-Modi: `prefix-no-default`, `prefix-all`, `no-prefix` und `search-params`
+- Gibt ein Zuordnungsobjekt mit allen Locales als Schlüssel und ihren entsprechenden URLs als Werte zurück
+
+---
+
+## Beschreibung
+
 Die Funktion `getMultilingualUrls` erzeugt eine Zuordnung mehrsprachiger URLs, indem sie die gegebene URL mit jedem unterstützten Gebietsschema (Locale) voranstellt. Sie kann sowohl absolute als auch relative URLs verarbeiten und wendet das entsprechende Gebietsschema-Präfix basierend auf der bereitgestellten Konfiguration oder den Standardwerten an.
 
 ---
 
 ## Parameter
 
+## Parameter
+
 - `url: string`
   - **Beschreibung**: Der ursprüngliche URL-String, der mit Gebietsschemata vorangestellt werden soll.
   - **Typ**: `string`
@@ -54,6 +70,33 @@ Die Funktion `getMultilingualUrls` erzeugt eine Zuordnung mehrsprachiger URLs, i
   - **Typ**: `boolean`
   - **Standard**: `prefixDefaultDefault`
 
+### Optionale Parameter
+
+- `options?: object`
+  - **Description**: Konfigurationsobjekt für das URL-Lokalisierungsverhalten.
+  - **Type**: `object`
+  - **Required**: No (Optional)
+
+  - `options.locales?: Locales[]`
+    - **Description**: Array von unterstützten Locales. Falls nicht angegeben, werden die konfigurierten Locales aus Ihrer Projektkonfiguration verwendet.
+    - **Type**: `Locales[]`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md#middleware)
+
+  - `options.defaultLocale?: Locales`
+    - **Description**: Das Standard-Locale für die Anwendung. Falls nicht angegeben, wird das konfigurierte Standard-Locale aus Ihrer Projektkonfiguration verwendet.
+    - **Type**: `Locales`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md#middleware)
+
+  - `options.mode?: 'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
+    - **Description**: Der URL-Routing-Modus für die Locale-Behandlung. Falls nicht angegeben, wird der konfigurierte Modus aus Ihrer Projektkonfiguration verwendet.
+    - **Type**: `'prefix-no-default' | 'prefix-all' | 'no-prefix' | 'search-params'`
+    - **Default**: [`Project Configuration`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md#middleware)
+    - **Modes**:
+      - `prefix-no-default`: Kein Präfix für Standard-Locale, Präfix für alle anderen
+      - `prefix-all`: Präfix für alle Locales einschließlich Standard
+      - `no-prefix`: Kein Locale-Präfix in der URL
+      - `search-params`: Abfrageparameter für Locale verwenden (z. B. `?locale=fr`)
+
 ### Rückgabewert
 
 - **Typ**: `IConfigLocales<string>`
@@ -63,6 +106,20 @@ Die Funktion `getMultilingualUrls` erzeugt eine Zuordnung mehrsprachiger URLs, i
 
 ## Beispielhafte Verwendung
 
+### Grundlegende Verwendung (verwendet Projektkonfiguration)
+
+```typescript codeFormat={["typescript", "esm", "commonjs"]}
+import { getMultilingualUrls, Locales } from "intlayer";
+
+// Verwendet die Konfiguration Ihres Projekts für locales, defaultLocale und mode
+getMultilingualUrls("/dashboard");
+// Ausgabe (vorausgesetzt, die Projektkonfiguration hat en, fr mit mode 'prefix-no-default'):
+// {
+//   en: "/dashboard",
+//   fr: "/fr/dashboard"
+// }
+```
+
 ### Relative URLs
 
 ```typescript codeFormat={["typescript", "esm", "commonjs"]}
@@ -97,6 +154,60 @@ getMultilingualUrls(
 
 ---
 
+### Verschiedene Routing-Modi
+
+```typescript
+// prefix-no-default: Kein Präfix für Standardsprache
+getMultilingualUrls("/dashboard", {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.ENGLISH,
+  mode: "prefix-no-default",
+});
+// Ausgabe: {
+//   en: "/dashboard",
+//   fr: "/fr/dashboard",
+//   es: "/es/dashboard"
+// }
+
+// prefix-all: Präfix für alle Sprachen
+getMultilingualUrls("/dashboard", {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.ENGLISH,
+  mode: "prefix-all",
+});
+// Ausgabe: {
+//   en: "/en/dashboard",
+//   fr: "/fr/dashboard",
+//   es: "/es/dashboard"
+// }
+
+// no-prefix: Kein Sprachpräfix in URLs
+getMultilingualUrls("/dashboard", {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.ENGLISH,
+  mode: "no-prefix",
+});
+// Ausgabe: {
+//   en: "/dashboard",
+//   fr: "/dashboard",
+//   es: "/dashboard"
+// }
+
+// search-params: Sprache als Query-Parameter
+getMultilingualUrls("/dashboard", {
+  locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.ENGLISH,
+  mode: "search-params",
+});
+// Ausgabe: {
+//   en: "/dashboard?locale=en",
+//   fr: "/dashboard?locale=fr",
+//   es: "/dashboard?locale=es"
+// }
+```
+
+---
+
 ## Randfälle
 
 - **Kein Gebietsschema-Segment:**

package/docs/de/packages/react-intlayer/useDictionary.md

@@ -24,42 +24,6 @@ history:
 author: aymericzip
 ---
 
-# React-Integration: `useDictionary` Hook Dokumentation
-
-Dieser Abschnitt bietet eine detaillierte Anleitung zur Verwendung des `useDictionary` Hooks in React-Anwendungen, um eine effiziente Handhabung lokalisierter Inhalte ohne visuellen Editor zu ermöglichen.
-
-## Importieren von `useDictionary` in React
-
-Der `useDictionary` Hook kann in React-Anwendungen integriert werden, indem er je nach Kontext importiert wird:
-
-- **Client-Komponente:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer"); // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-- **Server-Komponente:**
-
-  ```typescript codeFormat="typescript"
-  import { useDictionary } from "react-intlayer/server"; // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useDictionary } from "react-intlayer/server"; // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useDictionary } = require("react-intlayer/server"); // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
 ## Parameter
 
 Der Hook akzeptiert zwei Parameter:
@@ -67,57 +31,6 @@ Der Hook akzeptiert zwei Parameter:
 1. **`dictionary`**: Ein deklariertes Wörterbuchobjekt, das lokalisierte Inhalte für bestimmte Schlüssel enthält.
 2. **`locale`** (optional): Die gewünschte Locale. Standardmäßig wird die Locale des aktuellen Kontexts verwendet, wenn keine angegeben ist.
 
-## Wörterbuch
-
-Alle Wörterbuchobjekte sollten in strukturierten Inhaltsdateien deklariert werden, um Typsicherheit zu gewährleisten und Laufzeitfehler zu vermeiden. Die [Einrichtungsanweisungen finden Sie hier](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Hier ist ein Beispiel für die Inhaltsdeklaration:
-
-```typescript fileName="./component.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "component-example",
-  content: {
-    title: t({
-      en: "Client Component Example",
-      fr: "Exemple de composant client",
-      es: "Ejemplo de componente cliente",
-    }),
-    content: t({
-      en: "This is the content of a client component example",
-      fr: "Ceci est le contenu d'un exemple de composant client",
-      es: "Este es el contenido de un ejemplo de componente cliente",
-    }),
-  },
-} satisfies Dictionary;
-
-export default componentContent;
-```
-
-```json fileName="./component.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "component-example",
-  "content": {
-    "title": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Client Component Example",
-        "fr": "Exemple de composant client",
-        "es": "Ejemplo de componente cliente"
-      }
-    },
-    "content": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "This is the content of a client component example",
-        "fr": "Ceci est le contenu d'un exemple de composant client",
-        "es": "Este es el contenido de un ejemplo de componente cliente"
-      }
-    }
-  }
-}
-```
-
 ## Beispiel für die Verwendung in React
 
 Nachfolgend ein Beispiel, wie der `useDictionary` Hook in einer React-Komponente verwendet wird:
@@ -141,35 +54,6 @@ const ComponentExample: FC = () => {
 };
 ```
 
-## Server-Integration
-
-Wenn Sie den `useDictionary` Hook außerhalb des `IntlayerProvider` verwenden, muss die Locale beim Rendern der Komponente explizit als Parameter übergeben werden:
-
-```tsx fileName="./ServerComponentExample.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useDictionary } from "react-intlayer/server";
-import clientComponentExampleContent from "./component.content";
-
-const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
-  const { content } = useDictionary(clientComponentExampleContent, locale);
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.content}</p>
-    </div>
-  );
-};
-```
-
-## Hinweise zu Attributen
-
-Im Gegensatz zu Integrationen mit visuellen Editoren gelten hier keine Attribute wie `buttonTitle.value`. Stattdessen greifen Sie direkt auf die lokalisierten Strings zu, wie sie in Ihrem Inhalt deklariert sind.
-
-```jsx
-<button title={content.title}>{content.content}</button>
-```
-
 ## Zusätzliche Tipps
 
 - **Typensicherheit**: Verwenden Sie stets `Dictionary`, um Ihre Wörterbücher zu definieren und so Typensicherheit zu gewährleisten.

package/docs/de/packages/react-intlayer/useIntlayer.md

@@ -29,49 +29,6 @@ author: aymericzip
 
 Dieser Abschnitt bietet eine detaillierte Anleitung zur Verwendung des `useIntlayer` Hooks in React-Anwendungen, um eine effiziente Inhaltslokalisierung zu ermöglichen.
 
-## Importieren von `useIntlayer` in React
-
-Der `useIntlayer` Hook kann in React-Anwendungen integriert werden, indem er je nach Kontext importiert wird:
-
-- **Client-Komponente:**
-
-  ```typescript codeFormat="typescript"
-  import { useIntlayer } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useIntlayer } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useIntlayer } = require("react-intlayer"); // Wird in clientseitigen React-Komponenten verwendet
-  ```
-
-- **Server-Komponente:**
-
-  ```typescript codeFormat="commonjs"
-  import { useIntlayer } from "react-intlayer/server"; // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="esm"
-  import { useIntlayer } from "react-intlayer/server"; // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
-  ```javascript codeFormat="commonjs"
-  const { useIntlayer } = require("react-intlayer/server"); // Wird in serverseitigen React-Komponenten verwendet
-  ```
-
-## Parameter
-
-Der Hook akzeptiert zwei Parameter:
-
-1. **`key`**: Der Wörterbuchschlüssel, um lokalisierten Inhalt abzurufen.
-2. **`locale`** (optional): Die gewünschte Locale. Standardmäßig wird die Locale des Kontexts verwendet, falls nicht angegeben.
-
-## Wörterbuch
-
-Alle Wörterbuchschlüssel müssen in Inhaltsdeklarationsdateien deklariert werden, um die Typsicherheit zu erhöhen und Fehler zu vermeiden. Die [Setup-Anleitung finden Sie hier](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md).
-
 ## Beispielhafte Verwendung in React
 
 Demonstration des `useIntlayer` Hooks innerhalb einer React-Komponente:
@@ -142,14 +99,6 @@ const ServerComponentExample = () => {
 };
 ```
 
-## Umgang mit Attributen
-
-Beim Lokalisieren von Attributen greifen Sie entsprechend auf die Inhaltswerte zu:
-
-```jsx
-<button title={content.buttonTitle.value}>{content.buttonText}</button>
-```
-
 ## Zusätzliche Ressourcen
 
 - **Intlayer Visual Editor**: Für eine intuitivere Verwaltung von Inhalten finden Sie die Dokumentation zum visuellen Editor [hier](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md).