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

package/docs/de/dictionary/enumeration.md

@@ -452,205 +452,6 @@ document.getElementById("cars")!.textContent = content.numberOfCar(6);
   </Tab>
 </Tabs>
 
-## 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/cli/index.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 mit unterschiedlichen Frameworks.
-
-### Using Ordinal Enumeration
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  // Get the last digit to determine the correct suffix
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>
-        {
-          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-defineProps<{ count: number }>();
-
-const { ordinal } = useIntlayer("ranking_component");
-</script>
-
-<template>
-  <div>
-    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-export let count: number;
-
-const content = useIntlayer("ranking_component");
-$: lastDigit = Math.abs(count) % 10;
-</script>
-
-<div>
-  <p>{$content.ordinal(lastDigit)({ count })}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const RankingComponent: Component<{ count: number }> = (props) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  return (
-    <div>
-      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component, Input } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-ranking",
-  template: `
-    <div>
-      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
-    </div>
-  `,
-})
-export class RankingComponent {
-  @Input() count!: number;
-
-  content = useIntlayer("ranking_component");
-
-  lastDigit() {
-    return Math.abs(this.count) % 10;
-  }
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use this with `vanilla-intlayer`, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("ranking_component");
-const lastDigit = Math.abs(5) % 10;
-
-document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
-  count: 5,
-});
-```
-
-  </Tab>
-</Tabs>
-
 ## Combining Enumeration with Insert for Ordinal Numbers
 
 A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine `enu` with `insert` to create dynamic ordinal content:

package/docs/de/dictionary/file.md

@@ -255,6 +255,14 @@ export default myMultilingualContent;
 
 Diese Einrichtung ermöglicht es, den Inhalt dynamisch basierend auf der Sprachpräferenz des Benutzers abzurufen. Wenn sie im Intlayer Visual Editor oder CMS verwendet wird, erkennt das System, dass der Inhalt aus den angegebenen Markdown-Dateien stammt und stellt sicher, dass diese weiterhin bearbeitbar bleiben.
 
+## Verschiedene Arten von Pfaden
+
+Bei Verwendung der `file`-Funktion können Sie verschiedene Arten von Pfaden verwenden, um die einzubettende Datei anzugeben.
+
+- `file("./path/to/file.txt")` - Relativer Pfad zur aktuellen Datei
+- `file("path/to/file.txt")` - Relativer Pfad zum Projektroot-Verzeichnis
+- `file("/users/username/path/to/file.txt")` - Absoluter Pfad
+
 ## Wie Intlayer mit Datei-Inhalten umgeht
 
 Die `file`-Funktion basiert auf dem `fs`-Modul von Node.js, um den Inhalt der angegebenen Datei zu lesen und in das Wörterbuch einzufügen. Wenn sie in Verbindung mit dem Intlayer Visual Editor oder CMS verwendet wird, kann Intlayer die Beziehung zwischen dem Wörterbuch und der Datei verfolgen. Dies ermöglicht Intlayer:

package/docs/de/dictionary/insertion.md

@@ -114,10 +114,6 @@ Um Einfügeinhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inha
 }
 ```
 
-## Verwendung von Insertion Content mit React Intlayer
-
-markdown
-
 ## Verwendung von Einfügeinhalten mit React Intlayer
 
 Um Einfügeinhalte innerhalb einer React-Komponente zu verwenden, importieren Sie den `useIntlayer`-Hook aus dem `react-intlayer`-Paket und verwenden ihn. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, ein Objekt zu übergeben, das jeden Platzhalter in Ihrem Inhalt auf den Wert abbildet, den Sie anzeigen möchten.

package/docs/de/dictionary/nesting.md

@@ -25,6 +25,45 @@ author: aymericzip
 
 In Intlayer wird die Verschachtelung durch die Funktion `nest` erreicht, die es Ihnen ermöglicht, Inhalte aus einem anderen Wörterbuch zu referenzieren und wiederzuverwenden. Anstatt Inhalte zu duplizieren, können Sie auf ein bestehendes Inhaltsmodul mit seinem Schlüssel verweisen.
 
+## Nesting einrichten
+
+Um Nesting in Ihrem Intlayer-Projekt einzurichten, definieren Sie zunächst den Basisinhalt, den Sie wiederverwenden möchten. Dann verwenden Sie in einem separaten Content-Modul die Funktion `nest`, um diesen Inhalt zu importieren.
+
+### Basis-Dictionary
+
+Nachfolgend ist ein Beispiel eines Basis-Dictionary zum Verschachteln in einem anderen Dictionary:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Einrichtung der Verschachtelung
 
 <Tabs group="framework">

package/docs/de/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Benutzerdefinierte Inhaltsobjekte
-
-`intlayer` unterstützt benutzerdefinierte Inhaltsobjekte für Übersetzungen, die es Ihnen ermöglichen, komplexere Strukturen zu definieren und dabei die Typensicherheit zu gewährleisten. Hier ist ein Beispiel mit einem benutzerdefinierten Objekt:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Seitentitel",
-        content: "Seiteninhalt",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Seitentitel",
-          "content": "Seiteninhalt"
-        },
-        "fr": {
-          "title": "Seitentitel",
-          "content": "Seiteninhalt"
-        },
-        "es": {
-          "title": "Seitentitel",
-          "content": "Seiteninhalt"
-        }
-      }
-    }
-  }
-}
-```

package/docs/de/dynamic_dictionaries/index.md

@@ -39,6 +39,12 @@ Alle drei lassen sich mit dem Locale-Argument kombinieren und unterstützen sele
 - **Varianten** — benannte Inhaltsalternativen für A/B-Tests, saisonale Banner oder Feature-Flags.
 - **Dynamische Einträge** — Inhalte, die zur Laufzeit über eine opake ID abgerufen werden (CMS-Einträge, benutzerspezifische Texte).
 
+## Wann man welches verwendet
+
+- **Collections** — geordnete Liste von Elementen, die in separaten Dateien verwaltet werden (FAQ-Einträge, Blogbeiträge, Produkte).
+- **Variants** — benannte Inhaltsvarianten für A/B-Tests, saisonale Banner oder Feature Flags.
+- **Dynamic records** — Inhalte, die zur Laufzeit über eine undurchsichtige ID abgerufen werden (CMS-Datensätze, benutzerspezifische Texte).
+
 ## Selektor-Eindeutigkeit
 
 Wenn mehrere Selektoren für ein Wörterbuch vorhanden sind, ist die Reihenfolge der Auflösung:

package/docs/de/formatters.md

@@ -48,10 +48,16 @@ author: aymericzip
 
 # Intlayer Formatierer
 
+## Table of Contents
+
+<TOC/>
+
 ## Überblick
 
 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.
 
+## React Formatters
+
 ### Import
 
 ```ts
@@ -80,6 +86,61 @@ import {
 
 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`.
+
+| Hook                | Description                              | Example Output                   |
+| ------------------- | ---------------------------------------- | -------------------------------- |
+| `useNumber()`       | Zahlen mit Gruppierung formatieren       | `"123,456.789"`                  |
+| `useCurrency()`     | Währungswerte formatieren                | `"€1,234.50"`                    |
+| `usePercentage()`   | Prozentsätze formatieren                 | `"25%"`                          |
+| `useDate()`         | Daten und Zeiten formatieren             | `"Aug 2, 2025"`                  |
+| `useRelativeTime()` | Relative Zeit formatieren                | `"in 3 days"`                    |
+| `useUnit()`         | Werte mit Einheiten formatieren          | `"5 kilometers"`                 |
+| `useCompact()`      | Zahlen in kompakter Notation formatieren | `"1.2K"`                         |
+| `useList()`         | Arrays als Listen formatieren            | `"apple, banana, and orange"`    |
+| `useIntl()`         | Locale-gebundenes `Intl` Objekt abrufen  | Vollständiger `Intl` API Zugriff |
+
+### Vollständiges Beispiel
+
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
+      <p>{unit(5, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
+```
+
 ## Zwischengespeichertes Intl
 
 Das exportierte `Intl` ist ein schlanker, zwischengespeicherter Wrapper um das globale `Intl`. Es merkt sich Instanzen von `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` und `PluralRules`, wodurch vermieden wird, denselben Formatierer wiederholt neu zu erstellen.
@@ -134,6 +195,61 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Verfügbare Composables
+
+Alle Composables geben berechnete Refs zurück, die automatisch das Gebietsschema vom eingefügten `IntlayerProvider` verwenden.
+
+| Composable          | Beschreibung                                | Beispielausgabe                  |
+| ------------------- | ------------------------------------------- | -------------------------------- |
+| `useNumber()`       | Formatiere Zahlen mit Gruppierung           | `"123,456.789"`                  |
+| `useCurrency()`     | Formatiere Währungswerte                    | `"€1,234.50"`                    |
+| `usePercentage()`   | Formatiere Prozentsätze                     | `"25%"`                          |
+| `useDate()`         | Formatiere Daten und Zeiten                 | `"Aug 2, 2025"`                  |
+| `useRelativeTime()` | Formatiere relative Zeit                    | `"in 3 days"`                    |
+| `useUnit()`         | Formatiere Werte mit Einheiten              | `"5 kilometers"`                 |
+| `useCompact()`      | Formatiere Zahlen in kompakter Notation     | `"1.2K"`                         |
+| `useList()`         | Formatiere Arrays als Listen                | `"apple, banana, and orange"`    |
+| `useIntl()`         | Rufe gebietsschemagebendes `Intl` Objekt ab | Vollständiger `Intl` API-Zugriff |
+
+### Vollständiges Beispiel
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `Intl.Collator`
 
 Für lokalisierte Zeichenfolgenvergleiche und Sortierungen:
@@ -150,6 +266,10 @@ const words = ["äpfel", "zebra", "100", "20"];
 words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
+## Vanilla JS / Node.js Formatters
+
+For non-framework contexts, import formatters directly from `intlayer`. Note that you must pass the locale manually.
+
 ### `Intl.PluralRules`
 
 Zur Bestimmung von Pluralformen in verschiedenen Sprachräumen:
@@ -598,6 +718,16 @@ import {
 
 > Diese Hooks berücksichtigen die Locale vom `IntlayerProvider` oder `IntlayerServerProvider`
 
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Ruft Inhalte aus einem Dictionary ab und transformiert sie:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+```
+
 ### Vue
 
 Client-Komponenten:

package/docs/de/how_works_intlayer.md

@@ -22,6 +22,10 @@ author: aymericzip
 
 # Wie Intlayer funktioniert
 
+## Inhaltsverzeichnis
+
+<TOC/>
+
 ## Übersicht
 
 Die Hauptidee hinter Intlayer ist die komponentenbasierte Inhaltsverwaltung. Die Idee ist, dass Sie Ihre Inhalte überall in Ihrem Code deklarieren können, z. B. im selben Verzeichnis wie Ihre Komponente.

package/docs/de/intlayer_CMS.md

@@ -40,6 +40,12 @@ Dafür führt Intlayer das Konzept der „fernen Wörterbücher“ ein.
 
 ![Intlayer CMS Oberfläche](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## Inhaltsverzeichnis
+
+<TOC/>
+
+---
+
 ## Verständnis von fernen Wörterbüchern
 
 Intlayer unterscheidet zwischen „lokalen“ und „fernen“ Wörterbüchern.