@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/de/formatters.md

@@ -56,6 +56,18 @@ author: aymericzip
 
 Intlayer stellt eine Reihe von leichtgewichtigen Helfern bereit, die auf den nativen `Intl`-APIs aufbauen, sowie einen zwischengespeicherten `Intl`-Wrapper, um die wiederholte Erstellung schwerer Formatierer zu vermeiden. Diese Werkzeuge sind vollständig ortsabhängig und können aus dem Hauptpaket `intlayer` verwendet werden.
 
+**Für React, Vue und andere Frameworks** verwenden Sie die Framework-spezifischen Hooks/Composables, die sich automatisch an den Locale-Kontext Ihrer App binden:
+
+| Framework                | Import                                                |
+| ------------------------ | ----------------------------------------------------- |
+| **React** (client)       | `react-intlayer/format`                               |
+| **React** (server)       | `react-intlayer/server/format`                        |
+| **Next.js** (client)     | `next-intlayer/client/format`                         |
+| **Next.js** (server)     | `next-intlayer/server/format`                         |
+| **Vue**                  | `vue-intlayer/format`                                 |
+| **Preact**               | `preact-intlayer/format`                              |
+| **Vanilla JS / Node.js** | `intlayer` (erfordert manuelles Übergeben des Locale) |
+
 ## React Formatters
 
 ### Import
@@ -84,8 +96,6 @@ import {
 } from "intlayer";
 ```
 
-Wenn Sie React verwenden, sind auch Hooks verfügbar; siehe `react-intlayer/format`.
-
 ### Verfügbare Hooks
 
 Alle Hooks verwenden automatisch das Locale aus `IntlayerProvider` oder `IntlayerServerProvider`.
@@ -178,8 +188,6 @@ const MyComponent = () => {
 
 ### `Intl.DisplayNames`
 
-Für lokalisierte Namen von Sprachen, Regionen, Währungen und Schriftsystemen:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -267,8 +275,6 @@ For non-framework contexts, import formatters directly from `intlayer`. Note tha
 
 ### `Intl.PluralRules`
 
-Zur Bestimmung von Pluralformen in verschiedenen Sprachräumen:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -477,9 +483,6 @@ getLocaleName("en", "fr"); // "anglais"
 getLocaleName("de", "es"); // "alemán"
 ```
 
-- **displayLocale**: Die Sprachregion, für die der Name ermittelt werden soll
-- **targetLocale**: Die Sprachregion, in der der Name angezeigt wird (Standard ist displayLocale)
-
 ### `getLocaleLang(locale?)`
 
 Extrahiert den Sprachcode aus einem Locale-String:
@@ -492,8 +495,6 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: Die Sprachregion, aus der die Sprache extrahiert werden soll (Standard ist die aktuelle Sprachregion)
-
 ### `getLocaleFromPath(inputUrl)`
 
 Extrahiert das Locale-Segment aus einer URL oder einem Pfadnamen:
@@ -507,9 +508,6 @@ getLocaleFromPath("/dashboard"); // "en" (Standard-Sprachregion)
 getLocaleFromPath("https://example.com/es/about"); // "es"
 ```
 
-- **inputUrl**: Der vollständige URL-String oder Pfadname, der verarbeitet werden soll
-- **returns**: Die erkannte Sprachregion oder die Standard-Sprachregion, falls keine gefunden wird
-
 ### `getPathWithoutLocale(inputUrl, locales?)`
 
 Entfernt das Sprachregion-Segment aus einer URL oder einem Pfadnamen:
@@ -522,10 +520,6 @@ getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
 getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
 ```
 
-- **inputUrl**: Der vollständige URL-String oder Pfadname, der verarbeitet werden soll
-- **locales**: Optionale Liste der unterstützten Sprachregionen (Standard sind die konfigurierten Sprachregionen)
-- **returns**: Die URL ohne den Sprachregionsabschnitt
-
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
 Erzeugt eine lokalisierte URL für die aktuelle Sprachregion:
@@ -538,12 +532,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: Die ursprüngliche URL, die lokalisiert werden soll
-- **currentLocale**: Die aktuelle Sprachregion
-- **locales**: Optionale Liste der unterstützten Sprachregionen (Standard sind die konfigurierten Sprachregionen)
-- **defaultLocale**: Optionale Standardsprache (Standard ist die konfigurierte Standardsprache)
-- **prefixDefault**: Ob die Standardsprache als Präfix verwendet wird (Standard ist der konfigurierte Wert)
-
 ### `getHTMLTextDir(locale?)`
 
 Gibt die Schreibrichtung für eine Sprache zurück:
@@ -556,9 +544,6 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: Die Sprache, für die die Schreibrichtung ermittelt wird (Standard ist die aktuelle Sprache)
-- **returns**: `"ltr"`, `"rtl"` oder `"auto"`
-
 ## Dienstprogramme zur Inhaltsverarbeitung
 
 ### `getContent(node, nodeProps, locale?)`
@@ -575,10 +560,6 @@ const content = getContent(
 );
 ```
 
-- **node**: Der zu transformierende Inhaltsknoten
-- **nodeProps**: Eigenschaften für den Transformationskontext
-- **locale**: Optionale Sprache (Standard ist die konfigurierte Standardsprache)
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 Extrahiert Inhalte für eine bestimmte Sprache aus einem Sprachinhaltsobjekt:
@@ -597,10 +578,6 @@ const content = getTranslation(
 ); // "Bonjour"
 ```
 
-- **languageContent**: Objekt, das Sprachen mit Inhalten abbildet
-- **locale**: Ziel-Sprache (Standard ist die konfigurierte Standardsprache)
-- **fallback**: Ob auf die Standardsprache zurückgegriffen werden soll (Standard ist true)
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 Ruft asynchron Inhalte aus einem entfernten Wörterbuch ab:
@@ -611,10 +588,6 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: Der Schlüssel des abzurufenden Wörterbuchs
-- **locale**: Optionale Locale (Standard ist die konfigurierte Standard-Locale)
-- **plugins**: Optionale Liste von benutzerdefinierten Transformations-Plugins
-
 ## Hinweise
 
 - Alle Hilfsfunktionen akzeptieren Eingaben vom Typ `string`; diese werden intern in Zahlen oder Daten umgewandelt.

package/docs/de/how_works_intlayer.md

@@ -61,7 +61,9 @@ Der Build-Schritt kann auf drei Arten durchgeführt werden:
    - Wörterbücher werden aus Inhaltsdateien generiert. Standardmäßig werden Intlayer-Wörterbücher im Verzeichnis `.intlayer/dictionaries` des Projekts generiert.
    - Diese Wörterbücher werden in verschiedenen Formaten generiert, um alle Anforderungen zu erfüllen und die Leistung der Anwendung zu optimieren.
 
-3. Generierung von Wörterbuchtypen
+3. Generierung von Dictionary-Typen
+
+4. Generierung von Wörterbuchtypen
    Basierend auf Ihren `Wörterbüchern` generiert Intlayer Typen, um sie in Ihrer Anwendung nutzbar zu machen.
 
 - Wörterbuchtypen werden aus Intlayer-`Content-Deklarationsdateien` generiert. Standardmäßig werden Intlayer-Wörterbuchtypen im Verzeichnis `.intlayer/types` des Projekts generiert.
@@ -103,11 +105,16 @@ Intlayer bietet auch einen visuellen Editor, mit dem Sie Ihre Inhalte visuell be
   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.
 
+Wenn Sie Ihren Inhalt mit `useIntlayer` aufrufen und der Editor aktiviert ist, werden Ihre Strings automatisch mit einem Proxy-Objekt namens `IntlayerNode` umhüllt. Dieser Node verwendet `window.postMessage`, um mit einem eingebetteten iframe zu kommunizieren, das die visuelle Editor-Oberfläche enthält.
+Auf der Editor-Seite lauscht der Editor auf diese Nachrichten und simuliert reale Interaktionen mit Ihrem Inhalt, sodass Sie Text direkt im Kontext Ihrer Anwendung bearbeiten können.
+
 ## Optimierung des App-Builds
 
 Um die Bundle-Größe Ihrer Anwendung zu optimieren, bietet Intlayer zwei Plugins zur Optimierung des Builds Ihrer Anwendung: `@intlayer/babel` und `@intlayer/swc` Plugins.
 Die Babel- und SWC-Plugins funktionieren, indem sie den Abstract Syntax Tree (AST) Ihrer Anwendung analysieren, um Aufrufe von Intlayer-Funktionen durch optimierten Code zu ersetzen. Dieser Prozess macht Ihr endgültiges Bundle in der Produktion leichter, indem sichergestellt wird, dass nur die tatsächlich verwendeten Wörterbücher importiert werden, das Chunking optimiert und die Bundle-Größe reduziert wird.
 
+Die Babel- und SWC-Plugins funktionieren, indem sie den Abstract Syntax Tree (AST) deiner Anwendung analysieren, um Aufrufe von Intlayer-Funktionen durch optimierten Code zu ersetzen. Dieser Prozess macht dein finales Bundle in der Produktion leichter, indem sichergestellt wird, dass nur die Wörterbücher, die tatsächlich verwendet werden, importiert werden, die Chunking-Optimierung verbessert und die Bundle-Größe reduziert wird.
+
 Im Entwicklungsmodus verwendet Intlayer einen zentralisierten statischen Import für Wörterbücher, um die Entwicklungserfahrung zu vereinfachen.
 
 Durch Aktivieren der Option `importMode = "dynamic"` in der [Konfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md) verwendet Intlayer den dynamischen Import, um die Wörterbücher zu laden. Diese Option ist standardmäßig deaktiviert, um asynchrone Verarbeitung beim Rendern der Anwendung zu vermeiden.

package/docs/de/intlayer_CMS.md

@@ -311,8 +311,6 @@ export const cmsAuthenticator = createIntlayerCMS({
 
 ### Ihr Projekt mit einer selbst gehosteten Instanz verbinden
 
-Richten Sie Ihre Intlayer-Konfiguration auf Ihr eigenes Backend und Dashboard statt auf `intlayer.org` aus:
-
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
@@ -338,21 +336,8 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-Setzen Sie die passenden Umgebungsvariablen in Ihrem Projekt:
-
-```sh
-INTLAYER_CMS_URL=http://localhost:3000
-INTLAYER_BACKEND_URL=http://localhost:3100
-INTLAYER_CLIENT_ID=<your-client-id>
-INTLAYER_CLIENT_SECRET=<your-client-secret>
-```
-
-Erstellen Sie Zugangsdaten in Ihrem selbst gehosteten Dashboard unter `http://localhost:3000/projects`.
-
 ### `@intlayer/api` SDK: auf ein selbst gehostetes Backend verweisen
 
-Bei programmatischer Verwendung des SDK übergeben Sie `backendURL` explizit an `createIntlayerCMS`:
-
 ```typescript fileName="cms.ts" codeFormat="typescript"
 import { createIntlayerCMS } from "@intlayer/api";
 import { dictionaryEndpoint } from "@intlayer/api/dictionary";
@@ -372,6 +357,32 @@ const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
 
 Diese Funktionen erfordern externe Konten und funktionieren weiterhin ohne ihre Schlüssel in der selbst gehosteten `.env`:
 
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Erstelle ein neues Wörterbuch
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert einer Reihe von Wörterbüchern (erstelle oder aktualisiere sie in einem Aufruf)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Aktualisiere ein bestehendes Wörterbuch
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
 | Funktion                            | Umgebungsvariable(n)                            |
 | ----------------------------------- | ----------------------------------------------- |
 | KI-Übersetzung / Audit              | `OPENAI_API_KEY`                                |
@@ -383,8 +394,6 @@ Diese Funktionen erfordern externe Konten und funktionieren weiterhin ohne ihre
 
 ### Datenpersistenz und Upgrades
 
-Drei Docker-Volumes halten alle dauerhaften Daten: `mongo-data`, `redis-data` und `minio-data`. Sie überleben Container-Neustarts und Upgrades. Ein erneutes Ausführen des Installers lädt die neuesten Images herunter und führt ein Rolling `docker compose up -d` durch.
-
 Auf dem Host verfügbare Ports:
 
 | Port   | Dienst                                              |
@@ -395,10 +404,6 @@ Auf dem Host verfügbare Ports:
 | `9000` | MinIO S3 API (erforderlich für Browser-Asset-Laden) |
 | `9001` | MinIO-Konsole                                       |
 
-Eine vollständige Referenz aller verfügbaren Umgebungsvariablen und erweiterten Optionen (Reverse Proxy, benutzerdefinierte Domains, Sicherung/Wiederherstellung) finden Sie im [Self-Hosting-Leitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/self_hosting.md).
-
----
-
 ## Live Sync
 
 Live Sync ermöglicht es deiner App, CMS-Inhaltsänderungen zur Laufzeit zu reflektieren — kein Rebuild oder Redeploy erforderlich. Wenn aktiviert, werden Updates zu einem Live-Sync-Server gestreamt, der die Wörterbücher aktualisiert, die deine Anwendung liest.

package/docs/de/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+Mit dem `--with` Flag können Sie den Editor parallel mit einem anderen Befehl starten:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Konfiguration
 
 In Ihrer Intlayer-Konfigurationsdatei können Sie die Editor-Einstellungen anpassen:
@@ -146,6 +156,8 @@ export default config;
 
    > **Beachten Sie, dass Sie Ihre Anwendung parallel ausführen sollten.** Die Anwendungs-URL sollte mit der übereinstimmen, die Sie in der Editor-Konfiguration (`applicationURL`) festgelegt haben.
 
+> **Beachten Sie, dass der Befehl vom `intlayer` Paket erneut exportiert wird. Sie können stattdessen `npx intlayer editor start` verwenden.**
+
 2. Öffnen Sie dann die bereitgestellte URL. Standardmäßig `http://localhost:8000`.
 
    Sie können jedes von Intlayer indizierte Feld anzeigen, indem Sie mit dem Cursor über Ihren Inhalt fahren.

package/docs/de/intlayer_with_adonisjs.md

@@ -257,9 +257,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Andere Konfigurationsoptionen
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/de/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Sehen Sie sich das [Anwendungstemplate](https://github.com/aymericzip/intlayer-a
 
 Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.
+
+> Dieser Befehl erkennt deine Umgebung und installiert die erforderlichen Pakete. Zum Beispiel:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Optional: Wenn Sie Unterstützung für React-Islands hinzufügen

package/docs/de/intlayer_with_astro_preact.md

@@ -602,6 +602,12 @@ bun run build # Or bun run dev
 
 ### TypeScript-Konfiguration
 
+Intlayer nutzt Module Augmentation, um die Vorteile von TypeScript zu nutzen und deine Codebase zu stärken.
+
+![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)
+
 Intlayer verwendet die Modulerweiterung (Module Augmentation), um TypeScript zu nutzen und Ihre Codebasis robuster zu machen. Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält und für Preact konfiguriert ist:
 
 ```json5 fileName="tsconfig.json"

package/docs/de/intlayer_with_create_react_app.md

@@ -25,19 +25,70 @@ author: aymericzip
 
 # Übersetzen Sie Ihre Create React App mit Intlayer | Internationalisierung (i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Wie man eine Anwendung mit Intlayer internationalisiert"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 Siehe [i18n-react-create-app](https://github.com/aymericzip/intlayer-react-cra-template) für eine vollständige Demonstration.
 
 ## Was ist Intlayer?
 
+Im Vergleich zu Hauptlösungen wie `react-i18next` oder `i18next` ist Intlayer eine Lösung, die mit integrierten Optimierungen wie den folgenden ausgestattet ist:
+
+<AccordionGroup>
+
+<Accordion header="Vollständige React-Abdeckung">
+
 **Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die Unterstützung mehrerer Sprachen in modernen Webanwendungen zu vereinfachen.
 
+</Accordion>
+
+<Accordion header="Bundle-Größe">
+
+Anstatt massive JSON-Dateien in Ihre Seiten zu laden, laden Sie nur den notwendigen Inhalt. Intlayer hilft **die Bundle- und Seitengröße um bis zu 50% zu reduzieren**.
+
+</Accordion>
+
+<Accordion header="Wartbarkeit">
+
+Das Scoping des Inhalts Ihrer Anwendung **erleichtert die Wartung** bei großen Anwendungen. Sie können einen einzelnen Feature-Ordner duplizieren oder löschen, ohne die mentale Belastung, Ihre gesamte Content-Codebasis zu überprüfen. Zusätzlich ist Intlayer **vollständig typisiert**, um die Genauigkeit Ihres Inhalts zu gewährleisten.
+
+</Accordion>
+
+<Accordion header="AI Agent">
+
+Das Co-locating von Inhalten **reduziert den Kontext, der von Large Language Models (LLMs) benötigt wird**. Intlayer kommt auch mit einer Reihe von Tools, wie einer **CLI** zum Testen fehlender Übersetzungen, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/mcp_server.md)** und **[Agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/agent_skills.md)**, um die Developer Experience (DX) für KI-Agenten noch nahtloser zu gestalten.
+
+</Accordion>
+
+<Accordion header="Automatisierung">
+
+Nutzen Sie Automation, um in Ihrer CI/CD-Pipeline mit dem LLM Ihrer Wahl zu übersetzen, zu Kosten Ihres KI-Anbieters. Intlayer bietet auch einen **Compiler** zur Automatisierung der Content-Extraktion sowie eine [Web-Plattform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) zur Unterstützung der **Übersetzung im Hintergrund**.
+
+</Accordion>
+
 Mit Intlayer können Sie:
 
+Das Verbinden großer JSON-Dateien mit Komponenten kann zu Leistungs- und Reaktivitätsproblemen führen. Intlayer optimiert das Laden von Inhalten zur Build-Zeit.
+
+</Accordion>
+
+<Accordion header="Scaling with none-dev">
+
 - **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
 - **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
 - **TypeScript-Unterstützung sicherstellen** mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
 - **Von erweiterten Funktionen profitieren**, wie dynamischer Lokalisierungserkennung und -umschaltung.
 
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer React-Anwendung
 
 <Steps>