@intlayer/docs 8.10.0 → 8.11.1

package/docs/uk/dictionary/markdown.md

@@ -66,13 +66,10 @@ Intlayer підтримує вміст форматованого тексту,
     Приклад структури файлів:
 
     ```text
-    content/
-    ├── en/
-    │   └── markdown-file.en.content.md
-    ├── fr/
-    │   └── markdown-file.fr.content.md
-    └── es/
-        └── markdown-file.es.content.md
+    content
+    ├── markdown-file.en.content.md
+    ├── markdown-file.fr.content.md
+    └── markdown-file.es.content.md
     ```
 
     У front-matter ви можете додати будь-які властивості, визначені у [Визначенні словника](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md)
@@ -130,8 +127,6 @@ Intlayer підтримує вміст форматованого тексту,
   </Tab>
 </Tabs>
 
----
-
 ## Рендеринг Markdown
 
 Intlayer надає два незалежні способи рендерингу Markdown:
@@ -147,7 +142,7 @@ Intlayer надає два незалежні способи рендеринг
 ### 1. Автоматичний рендеринг (через `useIntlayer`)
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
     Вузли Markdown можна рендерити безпосередньо як JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,6 +192,57 @@ Intlayer надає два незалежні способи рендеринг
     {myMarkdownContent.metadata.title}
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    Вузли Markdown можна рендерити безпосередньо як JSX.
+
+    ```tsx fileName="App.tsx"
+    import { useIntlayer } from "next-intlayer";
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    const AppContent = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div>{myMarkdownContent}</div>;
+    };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // MDX-компонент
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > Якщо `MarkdownProvider` відсутній, Intlayer рендеритиме markdown, використовуючи стандартний парсер Markdown у JSX.
+
+    Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    Ви можете отримати Markdown як рядок:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    І ви можете отримати доступ до метаданих markdown наступним чином:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
     У Vue вміст Markdown можна рендерити за допомогою вбудованого тегу `component` або безпосередньо як вузол.
@@ -441,7 +487,7 @@ Intlayer надає два незалежні способи рендеринг
 Ці утиліти рендерять **тільки необроблені рядки Markdown** і не залежать від `useIntlayer`. Використовуйте їх, коли вам потрібно відрендерити Markdown з джерел, відмінних від ваших словників.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
   
     #### Компонент `<MarkdownRenderer />`
 
@@ -479,6 +525,45 @@ Intlayer надає два незалежні способи рендеринг
     const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });
     ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+  
+    #### Компонент `<MarkdownRenderer />`
+
+    Рендерить рядок Markdown з певними опціями.
+
+    ```tsx
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    <MarkdownRenderer forceBlock={true} tagfilter={true}>
+      {"# Мій Заголовок"}
+    </MarkdownRenderer>
+    ```
+
+    #### Хук `useMarkdownRenderer()`
+
+    Отримайте попередньо налаштовану функцію рендерингу.
+
+    ```tsx
+    import { useMarkdownRenderer } from "next-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({
+      forceBlock: true,
+      components: { h1: (props) => <h1 {...props} className="custom" /> }
+    });
+
+    return renderMarkdown("# Мій Заголовок");
+    ```
+
+    #### Утиліта `renderMarkdown()`
+    Окрема утиліта для рендерингу поза компонентами.
+
+    ```tsx
+    import { renderMarkdown } from "next-intlayer/markdown";
+
+    const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -608,14 +693,12 @@ Intlayer надає два незалежні способи рендеринг
   </Tab>
 </Tabs>
 
----
-
 ## Глобальне налаштування за допомогою `MarkdownProvider`
 
 `MarkdownProvider` (або його еквівалент у фреймворку) налаштовує конвеєр рендерингу Markdown для всього вашого додатку. Це стосується як автоматичного рендерингу `useIntlayer`, так і допоміжних утиліт. Налаштування, вказані тут, є значеннями за замовчуванням — `.use()` перевизначає їх на рівні вузла.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
+  <Tab label="React" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -633,6 +716,7 @@ Intlayer надає два незалежні способи рендеринг
     );
     ```
 
+
     > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
 
     Ви також можете використовувати власний рендерер markdown:
@@ -655,6 +739,48 @@ Intlayer надає два незалежні способи рендеринг
 
     > Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+
+    > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
+
+    Ви також можете використовувати власний рендерер markdown:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "next-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('next-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -680,6 +806,9 @@ Intlayer надає два незалежні способи рендеринг
     app.mount("#app");
     ```
 
+
+    > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
+
     Ви також можете використовувати власний рендерер markdown:
 
     ```typescript fileName="main.ts"
@@ -721,6 +850,9 @@ Intlayer надає два незалежні способи рендеринг
     </MarkdownProvider>
     ```
 
+
+    > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
+
     Ви також можете використовувати власний рендерер markdown:
 
     ```svelte fileName="App.svelte"
@@ -757,6 +889,9 @@ Intlayer надає два незалежні способи рендеринг
     );
     ```
 
+
+    > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
+
     Ви також можете використовувати власний рендерер markdown:
 
     ```tsx fileName="AppProvider.tsx"
@@ -793,6 +928,9 @@ Intlayer надає два незалежні способи рендеринг
     );
     ```
 
+
+    > Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, `<MyCustomJSXComponent />`), розпізнається відповідно до карти `components`.
+
     Ви також можете використовувати власний рендерер markdown:
 
     ```tsx fileName="AppProvider.tsx"
@@ -836,3 +974,191 @@ Intlayer надає два незалежні способи рендеринг
 
   </Tab>
 </Tabs>
+
+## Suspense
+
+Рендерер Markdown Intlayer завантажується динамічно. Хоча він оптимізований, базовий фрагмент аналізатора становить близько 55 кБ. Синхронне завантаження цього затримує початковий рендеринг сторінки та погіршує First Contentful Paint (FCP).
+
+Щоб запобігти блокуванню інтерфейсу користувача, Intlayer інтегрується з API Suspense від React. Він завантажує аналізатор у фоновому режимі та створює Promise під час завантаження.
+
+Оберніть будь-який компонент, що відображає Intlayer Markdown, у межу `<Suspense>`. Це показує локалізований резервний стан під час завантаження фрагмента, дозволяючи решті вашого DOM відображатися негайно.
+
+Попередження: Якщо ви не надасте межу `<Suspense>`, React призупинить рендеринг на кореневому рівні або заблокує рендеринг всього дерева компонентів, доки фрагмент у 55 кБ не буде повністю завантажений.
+
+<Tabs>
+  <Tab label="Next.js" value="nextjs">
+
+У маршрутизаторі Next.js App Router ви можете використовувати або React `Suspense` для клієнтських компонентів, або файл `loading.tsx` для серверних компонентів.
+
+**Клієнтський компонент:**
+
+```tsx fileName="components/MyComponent.tsx"
+"use client";
+import { useIntlayer } from "next-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+**Серверний компонент з `loading.tsx`:**
+
+```tsx fileName="app/loading.tsx"
+export default function Loading() {
+  return <div>Loading...</div>;
+}
+```
+
+```tsx fileName="app/page.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+const MyPage = () => {
+  const markdownContent = useIntlayer("my-markdown");
+  return <div>{markdownContent}</div>;
+};
+
+export default MyPage;
+```
+
+  </Tab>
+
+  <Tab label="React" value="react">
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+import { Suspense } from "react";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+ 
+  <Tab label="Vue" value="vue">
+
+Vue має вбудований компонент `<Suspense>`. Оберніть компонент, який відображає вміст Markdown, у межу `<Suspense>`.
+
+```vue fileName="MyComponent.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { markdownContent } = useIntlayer("my-markdown");
+</script>
+
+<template>
+  <Suspense>
+    <component :is="markdownContent" />
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Svelte не має еквівалента API Suspense. Використовуйте блок `{#await}` для обробки асинхронного рендерингу вмісту Markdown.
+
+```svelte fileName="MyComponent.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my-markdown");
+</script>
+
+{#await $content.markdownContent}
+  <div>Loading...</div>
+{:then rendered}
+  {@html rendered}
+{/await}
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Preact підтримує API React Suspense через `preact/compat`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "preact-intlayer";
+import { Suspense } from "preact/compat";
+
+const MyComponent = () => {
+  const markdownContent = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Solid має власний компонент `<Suspense>` від `solid-js`.
+
+```tsx fileName="MyComponent.tsx"
+import { useIntlayer } from "solid-intlayer";
+import { Suspense } from "solid-js";
+
+const MyComponent = () => {
+  const { markdownContent } = useIntlayer("my-markdown");
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Angular не має API Suspense. Використовуйте відкладені представлення (`@defer`) в Angular для обробки вмісту Markdown із відкладеним завантаженням (потрібен Angular 17+).
+
+```typescript fileName="my.component.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my",
+  template: `
+    @defer {
+      <div [innerHTML]="content().markdownContent"></div>
+    } @loading {
+      <div>Loading...</div>
+    }
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("my-markdown");
+}
+```
+
+  </Tab>
+</Tabs>
+
+---
+
+## Довідник опцій
+
+Ці параметри можна передати до `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` та `renderMarkdown`.
+
+| Option                | Type        | Default | Опис                                                                                         |
+| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------------- |
+| `forceBlock`          | `boolean`   | `false` | Примушує вивід обгортатися блочним елементом (наприклад, `<div>`).                           |
+| `forceInline`         | `boolean`   | `false` | Примушує вивід обгортатися вбудованим елементом (наприклад, `<span>`).                       |
+| `tagfilter`           | `boolean`   | `true`  | Увімкнює фільтр тегів GitHub для підвищення безпеки шляхом видалення небезпечних тегів HTML. |
+| `preserveFrontmatter` | `boolean`   | `false` | Якщо `true`, початкові метадані (frontmatter) на початку рядка Markdown не будуть видалені.  |
+| `components`          | `Overrides` | `{}`    | Карта тегів HTML до власних компонентів (наприклад, `{ h1: MyHeading }`).                    |
+| `wrapper`             | `Component` | `null`  | Спеціальний компонент для обгортання відображеного Markdown.                                 |
+| `renderMarkdown`      | `Function`  | `null`  | Власна функція рендерингу для повної заміни компілятора Markdown за замовчуванням.           |

package/docs/uk/interest_of_intlayer.md

@@ -224,7 +224,7 @@ export const ComponentExample = () => {
 
 Зірки на GitHub є потужним індикатором популярності проекту, довіри спільноти та довгострокової актуальності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проект корисним, стежать за його розвитком і, ймовірно, впровадять його. Для оцінки цінності проекту зірки допомагають порівняти інтерес до альтернатив і дають уявлення про зростання екосистеми.
 
-[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Caymericzip/intlayer%2Copral/inlang&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://www.star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js)
 
 ---
 

package/docs/uk/{intlayer_with_angular.md → intlayer_with_angular_19.md}

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-06
-title: Angular i18n - Як перекласти додаток Angular у 2026
+title: Angular i18n - Як перекласти додаток Angular 19 (Webpack)
 description: Дізнайтеся, як зробити свій Angular веб-сайт багатомовним. Дотримуйтесь документації для інтернаціоналізації (i18n) та перекладу.
 keywords:
   - Інтернаціоналізація
@@ -13,8 +13,9 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
-applicationShowcase: https://intlayer-angular-template.vercel.app
+  - 19
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-19-template
+applicationShowcase: https://intlayer-angular-19-template.vercel.app
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -27,7 +28,7 @@ history:
     changes: "Ініціалізація історії"
 ---
 
-# Перекладіть свій Angular веб-сайт за допомогою Intlayer | Інтернаціоналізація (i18n)
+# Перекладіть свій Angular 19 (Webpack) веб-сайт за допомогою Intlayer | Інтернаціоналізація (i18n)
 
 ## Зміст
 
@@ -52,7 +53,7 @@ history:
   <Tab label="Код" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-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="Демо CodeSandbox - Як інтернаціоналізувати ваш додаток за допомогою Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -63,7 +64,7 @@ history:
   <Tab label="Демо" value="demo">
 
 <iframe
-  src="https://intlayer-angular-template.vercel.app"
+  src="https://intlayer-angular-19-template.vercel.app"
   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="Демо - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -73,7 +74,7 @@ history:
   </Tab>
 </Tabs>
 
-Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-angular-template) на GitHub.
+Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-angular-19-template) на GitHub.
 
 ### Крок 1: Встановлення залежностей