@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/de/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: Inhaltsdatei
 description: Erfahren Sie, wie Sie die Erweiterungen für Ihre Inhaltsdeklarationsdateien anpassen können. Folgen Sie dieser Dokumentation, um Bedingungen effizient in Ihrem Projekt umzusetzen.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: Inhaltstyp-Knoten `html` hinzugefügt
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -84,6 +87,7 @@ interface Content {
   quantityContent: string; // Mengeninhalt
   conditionalContent: string; // Bedingter Inhalt
   markdownContent: never; // Markdown-Inhalt
+  htmlContent: never; // HTML-Inhalt
   externalContent: string; // Externer Inhalt
   insertionContent: string; // Einfügeinhalt
   nestedContent: string; // Verschachtelter Inhalt
@@ -129,6 +133,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# Markdown-Beispiel"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * Nur verfügbar mit `react-intlayer` oder `next-intlayer`
@@ -178,6 +183,7 @@ export default {
       "login.button" // [Optional] Der Pfad zum einzufügenden Inhalt
     ),
     markdownContent: md("# Markdown-Beispiel"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -228,6 +234,7 @@ module.exports = {
       "login.button" // [Optional] Der Pfad zum einzubettenden Inhalt
     ),
     markdownContent: md("# Markdown-Beispiel"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -289,6 +296,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# Markdown-Beispiel",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -323,6 +334,7 @@ Intlayer unterstützt verschiedene Inhaltstypen durch typisierte Knoten:
 - **Enumerationsinhalt**: Inhalt, der sich basierend auf aufzählbaren Werten ändert [siehe Enumerationsinhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/enumeration_content.md)
 - **Einfügeinhalt**: Inhalt, der in anderen Inhalt eingefügt werden kann [siehe Einfügeinhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/insertion_content.md)
 - **Markdown-Inhalt**: Rich-Text-Inhalt im Markdown-Format [siehe Markdown-Inhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/markdown_content.md)
+- **HTML-Inhalt**: Rich-HTML-Inhalt mit optionalen benutzerdefinierten Komponenten [siehe HTML-Inhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/html.md)
 - **Verschachtelter Inhalt**: Verweise auf andere Wörterbücher [siehe Verschachtelter Inhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/nested_content.md)
 - **Geschlechtsabhängiger Inhalt**: Inhalt, der sich je nach Geschlecht unterscheidet [siehe Geschlechtsabhängiger Inhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/gender_content.md)
 - **Dateiinhalt**: Verweise auf externe Dateien [siehe Dateiinhalt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/file_content.md)
@@ -688,6 +700,23 @@ markdownContent: md(
 );
 ```
 
+### HTML-Inhalt (`html`)
+
+Rich-HTML-Inhalt, der Standard-Tags oder benutzerdefinierte Komponenten verwenden kann:
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// Inline-HTML
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// Pro-Locale-HTML aus externen Dateien
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  de: html(file("./content.de.html")),
+});
+```
+
 ### Geschlechtsabhängiger Inhalt (`gender`)
 
 Inhalt, der sich je nach Geschlecht unterscheidet:

package/docs/de/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 Intlayer unterstützt HTML-Inhalte, sodass Sie reichhaltige, strukturierte Inhalte in Ihre Dictionaries einbetten können. Diese Inhalte können mit Standard-HTML-Tags gerendert oder zur Laufzeit durch benutzerdefinierte Komponenten ersetzt werden.
 
-## Wie HTML funktioniert
-
-Intlayer v8 erkennt HTML-Tags in Ihren Inhaltsstrings intelligent. Wenn ein String als HTML identifiziert wird (Tags enthält), wird er automatisch in einen HTML-Knoten umgewandelt.
-
-<Columns>
-<Column title="v7 Verhalten (Manuelles Wrapping)">
-
-```typescript fileName="htmlDictionary.content.ts"
-import { html } from "intlayer";
-
-export default {
-  key: "app",
-  content: {
-    text: html("<p>Hello <strong>World</strong></p>"),
-  },
-};
-```
-
-</Column>
-<Column title="v8 Verhalten (Automatische Erkennung)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Hello <strong>World</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## HTML-Inhalte deklarieren
 
 Sie können HTML-Inhalte mit der `html`-Funktion oder einfach als String deklarieren.
 
 <Tabs>
-  <Tab label="Manuelles Wrapping">
+  <Tab label="Manuelles Wrapping" value="manual-wrapping">
     Verwenden Sie die `html`-Funktion, um HTML-Inhalte explizit zu deklarieren. Dies stellt sicher, dass Standard-Tags korrekt zugeordnet werden, selbst wenn die automatische Erkennung deaktiviert ist.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ Sie können HTML-Inhalte mit der `html`-Funktion oder einfach als String deklari
     ```
 
   </Tab>
-  <Tab label="Automatische Erkennung">
+  <Tab label="Automatische Erkennung" value="automatic-detection">
     Wenn der String gängige HTML-Tags enthält (z. B. `<p>`, `<div>`, `<strong>` usw.), wird Intlayer ihn automatisch umwandeln.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ Sie können HTML-Inhalte mit der `html`-Funktion oder einfach als String deklari
     ```
 
   </Tab>
-  <Tab label="Externe Dateien">
+  <Tab label="Externe Dateien" value="external-files">
     Importieren Sie HTML-Inhalte aus Dateien. Beachten Sie, dass die Funktion `file()` derzeit einen String zurückgibt, der automatisch als HTML erkannt wird, wenn er Tags enthält.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -121,6 +86,30 @@ Sie können HTML-Inhalte mit der `html`-Funktion oder einfach als String deklari
   </Tab>
 </Tabs>
 
+### Der `html()`-Knoten
+
+Die `html()`-Funktion ist ein neues Feature in Intlayer v8, mit dem Sie HTML-Inhalte in Ihren Wörterbüchern explizit definieren können. Während Intlayer HTML-Inhalte oft automatisch erkennt, bietet die Verwendung der `html()`-Funktion mehrere Vorteile:
+
+- **Typsicherheit**: Mit der `html()`-Funktion können Sie die erwarteten Props für benutzerdefinierte Komponenten definieren, was eine bessere Autovervollständigung und Typprüfung in Ihrem Editor ermöglicht.
+- **Explizite Deklaration**: Sie stellt sicher, dass eine Zeichenfolge immer als HTML behandelt wird, auch wenn sie keine Standard-HTML-Tags enthält, die die automatische Erkennung auslösen würden.
+- **Definition benutzerdefinierter Komponenten**: Sie können ein zweites Argument an `html()` übergeben, um die benutzerdefinierten Komponenten und deren erwartete Prop-Typen zu definieren.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='Hallo'>Welt</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+Wenn Sie die Methode `.use()` auf einem HTML-Knoten verwenden, werden die von Ihnen bereitgestellten Komponenten gegen die in der `html()`-Funktion bereitgestellte Definition (falls verfügbar) geprüft.
+
 ---
 
 ## HTML rendern
@@ -132,7 +121,7 @@ Das Rendern kann automatisch durch das Inhaltssystem von Intlayer oder manuell m
 Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits für das Rendering vorbereitet.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     HTML-Knoten können direkt als JSX gerendert werden. Standard-Tags funktionieren automatisch.
 
     ```tsx fileName="App.tsx"
@@ -154,7 +143,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     In Vue können HTML-Inhalte mit der integrierten `component`-Komponente gerendert werden.
 
     ```vue fileName="App.vue"
@@ -174,7 +163,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte rendert HTML-Knoten als Strings. Verwenden Sie `{@html}`, um sie zu rendern.
 
     ```svelte
@@ -187,7 +176,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact unterstützt HTML-Knoten direkt im JSX.
 
     ```tsx fileName="App.tsx"
@@ -200,7 +189,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid unterstützt HTML-Knoten direkt im JSX.
 
     ```tsx fileName="App.tsx"
@@ -213,7 +202,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular verwendet die `[innerHTML]`-Direktive, um HTML-Inhalte zu rendern.
 
     ```typescript fileName="app.component.ts"
@@ -246,7 +235,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind HTML-Knoten bereits fü
 Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren. Dies ist ideal, um benutzerdefinierte Komponenten zu definieren, die in allen HTML-Inhalten verfügbar sein sollen.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer";
@@ -264,7 +253,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -285,7 +274,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -303,7 +292,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -320,7 +309,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -337,7 +326,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -364,7 +353,7 @@ Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren.
 Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Komponentenzuordnung benötigen, verwenden Sie die folgenden Tools.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` Komponente
     Rendern Sie einen HTML-String mit spezifischen Komponenten.
 
@@ -401,7 +390,7 @@ Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Kompone
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### `<HTMLRenderer />` Komponente
    
@@ -416,7 +405,7 @@ Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Kompone
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### `<HTMLRenderer />` Komponente
    
@@ -450,7 +439,7 @@ Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Kompone
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### `<HTMLRenderer />` Komponente
    
@@ -481,7 +470,7 @@ Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Kompone
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### `<HTMLRenderer />` Komponente
    
@@ -512,7 +501,7 @@ Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Kompone
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` Service
     Rendern Sie einen HTML-String mit dem Service.
 

package/docs/de/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer unterstützt Rich-Text-Inhalte, die mittels Markdown-Syntax definiert sind. Dies ermöglicht es Ihnen, Inhalte mit reichhaltiger Formatierung, wie Blogs, Artikel und mehr, einfach zu schreiben und zu pflegen.
 
-## Wie Markdown funktioniert
-
-Intlayer v8 erkennt Markdown-Syntax in Ihren Inhaltsstrings intelligent. Wenn ein String als Markdown identifiziert wird, wird er automatisch in einen Markdown-Knoten umgewandelt.
-
-<Columns>
-  <Column title="v7 Verhalten (Manuelles Wrapping)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## Mein Titel \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="v8 Verhalten (Automatische Erkennung)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // Automatische Erkennung von Markdown-Inhalten aktivieren - Kann global in intlayer.config.ts eingestellt werden
-      content: {
-        text: "## Mein Titel \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## Teil 1: Markdown-Inhalte deklarieren
 
 Sie können Markdown-Inhalte mit der `md`-Funktion oder einfach als String deklarieren (sofern er Markdown-Syntax enthält).
 
 <Tabs>
-  <Tab label="Manuelles Wrapping">
+  <Tab label="Manuelles Wrapping" value="manual-wrapping">
     Verwenden Sie die `md`-Funktion, um Markdown-Inhalte explizit zu deklarieren. Dies ist nützlich, wenn Sie sicherstellen möchten, dass ein String als Markdown behandelt wird, auch wenn er keine offensichtliche Syntax enthält.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Sie können Markdown-Inhalte mit der `md`-Funktion oder einfach als String dekla
     ```
 
   </Tab>
-  <Tab label="Automatische Erkennung">
+  <Tab label="Automatische Erkennung" value="automatic-detection">
     Wenn der String gängige Markdown-Indikatoren enthält (wie Überschriften, Listen, Links usw.), wird Intlayer ihn automatisch umwandeln.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Sie können Markdown-Inhalte mit der `md`-Funktion oder einfach als String dekla
     ```
 
   </Tab>
-  <Tab label="Externe Dateien">
+  <Tab label="Externe Dateien" value="external-files">
     Importieren Sie `.md`-Dateien direkt mit der `file`-Funktion.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -135,7 +99,7 @@ Das Rendering kann automatisch durch das Inhaltssystem von Intlayer oder manuell
 Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits für das Rendering vorbereitet.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     Markdown-Knoten können direkt als JSX gerendert werden.
 
     ```tsx fileName="App.tsx"
@@ -156,7 +120,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     In Vue können Markdown-Inhalte mit der integrierten `component`-Komponente oder direkt als Knoten gerendert werden.
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte rendert Markdown standardmäßig als HTML-String. Verwenden Sie `{@html}`, um es zu rendern.
 
     ```svelte
@@ -184,7 +148,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact unterstützt Markdown-Knoten direkt im JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,7 +161,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid unterstützt Markdown-Knoten direkt im JSX.
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular verwendet die `[innerHTML]`-Direktive, um Markdown-Inhalte zu rendern.
 
     ```typescript fileName="app.component.ts"
@@ -242,7 +206,7 @@ Wenn Sie auf Inhalte über `useIntlayer` zugreifen, sind Markdown-Knoten bereits
 Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Rendering-Prozess wünschen, verwenden Sie die folgenden Tools.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### `<MarkdownRenderer />` Komponente
 
@@ -281,7 +245,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### `<MarkdownRenderer />` Komponente
 
@@ -296,7 +260,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### `<MarkdownRenderer />` Komponente
 
@@ -330,7 +294,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### `<MarkdownRenderer />` Komponente
 
     ```tsx
@@ -360,7 +324,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### `<MarkdownRenderer />` Komponente
 
     ```tsx
@@ -390,7 +354,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` Service
     Rendern Sie einen Markdown-String mit dem Service.
 
@@ -416,7 +380,7 @@ Wenn Sie rohe Markdown-Strings rendern müssen oder mehr Kontrolle über den Ren
 Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurieren. Dies vermeidet die Übergabe der gleichen Props an jeden Renderer.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer";
@@ -436,7 +400,7 @@ Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurie
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurie
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurie
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurie
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ Sie können das Markdown-Rendering global für Ihre gesamte Anwendung konfigurie
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/de/releases/v8.md

@@ -12,6 +12,7 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
 slugs:
   - doc
   - releases
@@ -22,6 +23,14 @@ slugs:
 
 Willkommen bei Intlayer v8! Diese Version konzentriert sich darauf, die Developer Experience durch automatische Inhaltserkennung zu verbessern, die Datenintegrität mittels Schema-Validierung sicherzustellen und mehr Kontrolle über die Verwaltung von Dictionaries zu bieten.
 
+<iframe
+  src="https://www.youtube.com/embed/ia6JmVf-kkU"
+  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 Video - New Intlayer v8 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Inhaltsverzeichnis
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1199,8 +1208,8 @@ Markdown- und HTML-Inhalte in Svelte werden nun automatisch in HTML geparst, wen
 
 ### Konfigurationsänderungen
 
-- **`live`-Eigenschaft**: Die `live`-Eigenschaft in Dictionaries ist veraltet. Verwenden Sie stattdessen `importMode: 'fetch'`.
-- **Vereinheitlichte Rich-Content-API**: Die neue Methode `.use()` wird nun sowohl für Markdown- als auch für HTML-Overrides verwendet und bietet eine konsistente API über alle Rich-Content-Typen hinweg.
+- **`live`-Eigenschaft**: Die `live`-Eigenschaft in Dictionaries wurde entfernt. Verwenden Sie stattdessen `importMode: 'fetch'`.
+- **importMode**: Die Eigenschaft `build.importMode` in der Konfiguration ist veraltet. Verwenden Sie stattdessen `dictionary.importMode`.
 - **`contentDir` und `codeDir`**: `contentDir` ist jetzt speziell für Inhaltsdateien. Eine neue Eigenschaft `codeDir` wurde für die Code-Transformation hinzugefügt. Wenn `codeDir` nicht gesetzt ist, fällt Intlayer auf `contentDir` zurück und protokolliert eine Warnung.
 - **Schema-Validierung**: Um die neue `schema`-Funktion zu nutzen, stellen Sie sicher, dass `zod` in Ihrem Projekt installiert ist.