@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/uk/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 Intlayer підтримує HTML-контент, що дозволяє вбудовувати насичений, структурований вміст у ваші словники. Цей вміст може відображатися за допомогою стандартних HTML-тегів або замінюватися на користувацькі компоненти під час виконання.
 
-## Як працює HTML
-
-Intlayer v8 інтелектуально виявляє HTML-теги у ваших рядках вмісту. Якщо рядок ідентифіковано як HTML (містить теги), він автоматично перетворюється на HTML-вузол.
-
-<Columns>
-<Column title="Поведінка v7 (ручне обгортання)">
-
-```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 (автоматичне виявлення)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Hello <strong>World</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## Оголошення HTML-контенту
 
 Ви можете оголосити HTML-контент за допомогою функції `html` або просто як рядок.
 
 <Tabs>
-  <Tab label="Ручне обгортання">
+  <Tab label="Ручне обгортання" value="manual-wrapping">
     Використовуйте функцію `html` для явного оголошення HTML-контенту. Це гарантує правильне відображення стандартних тегів, навіть якщо автоматичне виявлення вимкнено.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Автоматичне виявлення">
+  <Tab label="Автоматичне виявлення" value="automatic-detection">
     Якщо рядок містить звичайні HTML-теги (наприклад, `<p>`, `<div>`, `<strong>` тощо), Intlayer автоматично перетворить його.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Зовнішні файли">
+  <Tab label="Зовнішні файли" value="external-files">
     Імпортуйте HTML-контент з файлів. Зауважте, що наразі функція `file()` повертає рядок, який буде автоматично визначено як HTML, якщо він містить теги.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -122,6 +87,30 @@ export default {
   </Tab>
 </Tabs>
 
+### Вузол `html()`
+
+Функція `html()` — це нова можливість в Intlayer v8, яка дозволяє явно визначати HTML-контент у ваших словниках. Хоча Intlayer часто може автоматично визначати HTML-контент, використання функції `html()` має кілька переваг:
+
+- **Типобезпека**: Функція `html()` дозволяє визначати очікувані пропси для користувацьких компонентів, забезпечуючи краще автодоповнення та перевірку типів у вашому редакторі.
+- **Явне оголошення**: Це гарантує, що рядок завжди буде розглядатися як HTML, навіть якщо він не містить стандартних HTML-тегів, які могли б активувати автоматичне визначення.
+- **Визначення користувацьких компонентів**: Ви можете передати другий аргумент у `html()`, щоб визначити користувацькі компоненти та очікувані типи їхніх пропсів.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='Привіт'>Світ</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+При використанні методу `.use()` для HTML-вузла надані вами компоненти будуть перевірятися на відповідність визначенню, вказаному у функції `html()` (якщо воно доступне).
+
 ---
 
 ## Відтворення HTML
@@ -133,7 +122,7 @@ export default {
 Коли ви отримуєте доступ до контенту через `useIntlayer`, HTML-вузли вже підготовлені до відтворення.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     HTML-вузли можна відтворювати безпосередньо як JSX. Стандартні теги працюють автоматично.
 
     ```tsx fileName="App.tsx"
@@ -155,7 +144,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     У Vue HTML-контент можна відтворити за допомогою вбудованого компонента `component`.
 
     ```vue fileName="App.vue"
@@ -175,7 +164,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte відтворює HTML-вузли як рядки. Використовуйте `{@html}` для їх відображення.
 
     ```svelte
@@ -188,7 +177,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact підтримує HTML-вузли безпосередньо в JSX.
 
     ```tsx fileName="App.tsx"
@@ -201,7 +190,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid підтримує HTML-вузли безпосередньо в JSX.
 
     ```tsx fileName="App.tsx"
@@ -214,7 +203,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular використовує директиву `[innerHTML]` для відтворення HTML-контенту.
 
     ```typescript fileName="app.component.ts"
@@ -247,7 +236,7 @@ export default {
 Ви можете налаштувати відтворення HTML глобально для всього застосунку. Це ідеально підходить для визначення користувацьких компонентів, які мають бути доступні в усьому HTML-контенті.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer";
@@ -265,7 +254,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -286,7 +275,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -304,7 +293,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -321,7 +310,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -338,7 +327,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -365,7 +354,7 @@ export default {
 Якщо вам потрібно відтворити сирі HTML-рядки або ви хочете більше контролю над мапуванням компонентів, використовуйте наступні інструменти.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### Компонент `<HTMLRenderer />`
     Відтворіть HTML-рядок із конкретними компонентами.
 
@@ -402,7 +391,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### Компонент `<HTMLRenderer />`
    
@@ -417,7 +406,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### Компонент `<HTMLRenderer />`
    
@@ -451,7 +440,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### Компонент `<HTMLRenderer />`
    
@@ -482,7 +471,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### Компонент `<HTMLRenderer />`
    
@@ -513,7 +502,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Сервіс `IntlayerMarkdownService`
     Відтворіть HTML-рядок за допомогою сервісу.
 

package/docs/uk/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer підтримує контент rich text, визначений за допомогою синтаксису Markdown. Це дозволяє легко писати та підтримувати контент із багатим форматуванням, таким як блоги, статті та інше.
 
-## Як працює Markdown
-
-Intlayer v8 інтелектуально виявляє синтаксис Markdown у ваших рядках контенту. Якщо рядок ідентифіковано як Markdown, він автоматично перетворюється на вузол Markdown.
-
-<Columns>
-  <Column title="Поведінка v7 (ручне обгортання)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## Мій заголовок \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="Поведінка v8 (автоматичне виявлення)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // Увімкнути автоматичне виявлення контенту Markdown - Можна встановити глобально в intlayer.config.ts
-      content: {
-        text: "## Мій заголовок \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## Частина 1: Оголошення контенту Markdown
 
 Ви можете оголосити контент Markdown за допомогою функції `md` або просто як рядок (якщо він містить синтаксис Markdown).
 
 <Tabs>
-  <Tab label="Ручне обгортання">
+  <Tab label="Ручне обгортання" value="manual-wrapping">
     Використовуйте функцію `md` для явного оголошення контенту Markdown. Це корисно, якщо ви хочете переконатися, що рядок розглядається як Markdown, навіть якщо він не містить очевидного синтаксису.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Зовнішні файли">
+  <Tab label="Зовнішні файли" value="external-files">
     Імпортуйте файли `.md` безпосередньо за допомогою функції `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -156,7 +120,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     У Vue контент Markdown можна відтворити за допомогою вбудованого компонента `component` або безпосередньо як вузол.
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte відтворює Markdown як рядок HTML за замовчуванням. Використовуйте `{@html}` для його відображення.
 
     ```svelte
@@ -184,7 +148,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact підтримує вузли Markdown безпосередньо в JSX.
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular використовує директиву `[innerHTML]` для відтворення контенту Markdown.
 
     ```typescript fileName="app.component.ts"
@@ -281,7 +245,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### Компонент `<MarkdownRenderer />`
 
@@ -296,7 +260,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### Компонент `<MarkdownRenderer />`
 
@@ -330,7 +294,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### Компонент `<MarkdownRenderer />`
 
     ```tsx
@@ -390,7 +354,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Сервіс `IntlayerMarkdownService`
     Відтворіть рядок Markdown за допомогою сервісу.
 
@@ -436,7 +400,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -519,7 +483,7 @@ Intlayer v8 інтелектуально виявляє синтаксис Markd
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/uk/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:
 
 Ласкаво просимо до Intlayer v8! У цьому випуску основна увага приділена покращенню досвіду розробника за допомогою автоматичного виявлення контенту, забезпеченню цілісності даних через валідацію схем і наданню більшого контролю над управлінням словниками.
 
+<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"
+/>
+
 ## Зміст
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ export default {
 
 ### Зміни в конфігурації
 
-- **Властивість `live`**: Властивість `live` у словниках застаріла. Використовуйте `importMode: 'fetch'` замість неї.
-- **Уніфікований API розширеного вмісту**: Новий метод `.use()` тепер використовується як для Markdown, так і для HTML перевизначень, забезпечуючи узгоджений API для всіх типів розширеного вмісту.
+- **Властивість `live`**: Властивість `live` у словниках видалена. Використовуйте `importMode: 'fetch'` замість неї.
+- **importMode**: Властивість `build.importMode` у конфігурації застаріла. Використовуйте `dictionary.importMode` замість неї.
 - **`contentDir` та `codeDir`**: `contentDir` тепер призначений саме для файлів контенту. Додано нову властивість `codeDir` для трансформації коду. Якщо `codeDir` не встановлено, Intlayer повернеться до `contentDir` та виведе попередження.
 - **Валідація схеми**: Щоб використовувати нову функцію `schema`, переконайтеся, що у вашому проєкті встановлено `zod`.
 

package/docs/vi/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: Tệp Nội Dung
 description: Tìm hiểu cách tùy chỉnh các phần mở rộng cho các tệp khai báo nội dung của bạn. Theo dõi tài liệu này để triển khai các điều kiện một cách hiệu quả trong dự án của bạn.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: Thêm kiểu nút nội dung `html`
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -87,6 +90,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -131,6 +135,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# Ví dụ Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * Chỉ có sẵn khi sử dụng `react-intlayer` hoặc `next-intlayer`
@@ -180,6 +185,7 @@ export default {
       "login.button" // [Tùy chọn] Đường dẫn đến nội dung để lồng vào
     ),
     markdownContent: md("# Ví dụ Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -229,6 +235,7 @@ module.exports = {
       "login.button" // [Tùy chọn] Đường dẫn đến nội dung để lồng vào
     ),
     markdownContent: md("# Ví dụ Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -290,6 +297,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# Ví dụ Markdown",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -324,6 +335,7 @@ Intlayer hỗ trợ nhiều loại nội dung thông qua các node kiểu:
 - **Nội dung Liệt kê**: Nội dung thay đổi dựa trên các giá trị được liệt kê [xem Nội dung Liệt kê](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/enumeration_content.md)
 - **Nội dung Chèn**: Nội dung có thể được chèn vào các nội dung khác [xem Nội dung Chèn](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/insertion_content.md)
 - **Nội dung Markdown**: Nội dung văn bản phong phú ở định dạng Markdown [xem Nội dung Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/markdown_content.md)
+- **Nội dung HTML**: Nội dung HTML phong phú với các component tùy chỉnh tùy chọn [xem Nội dung HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/html.md)
 - **Nội dung Lồng nhau**: Tham chiếu đến các từ điển khác [xem Nội dung Lồng nhau](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/nested_content.md)
 - **Nội dung Giới tính**: Nội dung thay đổi dựa trên giới tính [xem Nội dung Giới tính](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/gender_content.md)
 - **Nội dung Tệp**: Tham chiếu đến các tệp bên ngoài [xem Nội dung Tệp](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/file_content.md)
@@ -701,6 +713,23 @@ markdownContent: md(
 );
 ```
 
+### Nội dung HTML (`html`)
+
+Nội dung HTML phong phú có thể sử dụng thẻ chuẩn hoặc component tùy chỉnh:
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// HTML nội tuyến
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// HTML theo từng ngôn ngữ từ các tệp bên ngoài
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  vi: html(file("./content.vi.html")),
+});
+```
+
 ### Nội dung theo giới tính (`gender`)
 
 Nội dung thay đổi dựa trên giới tính: