@intlayer/docs 9.5.5 → 9.5.7

package/docs/uk/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-09-21
 title: Вміст HTML
 description: Дізнайтеся, як оголошувати та використовувати HTML-контент із користувацькими компонентами в Intlayer. Дотримуйтесь цієї документації, щоб вбудувати багатий вміст, схожий на HTML, з динамічною заміною компонентів у вашому інтернаціоналізованому проєкті.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -236,6 +238,83 @@ const myContent = html(
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    У Remix 3 вузли HTML перетворюються на рядок HTML. Вставте його за допомогою пропу `innerHTML` у Remix JSX або за допомогою `html.raw` у поданні `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.value}</div>`;
+    };
+    ```
+
+    > Remix екранує інтерпольовані значення за замовчуванням. `innerHTML` та `html.raw` — це два способи відмови від екранування, що й потрібно для рядка HTML.
+
+    Використовуйте метод `.use()` для перевизначення тегів або зіставлення користувацьких компонентів. Перевизначення — це функції, які повертають рядок HTML:
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    В Astro вузли HTML перетворюються на рядок HTML. Вставте його за допомогою директиви `set:html` у шаблоні або за допомогою `innerHTML` у клієнтському тегу `<script>`.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > Astro екранує `{вирази}` за замовчуванням. `set:html` — це спосіб відмови від екранування, що й потрібно для рядка HTML.
+
+    Використовуйте метод `.use()` для перевизначення тегів або зіставлення користувацьких компонентів. Перевизначення — це функції, які повертають рядок HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Глобальна конфігурація за допомогою `HTMLProvider`
@@ -471,6 +550,41 @@ const myContent = html(
     > Динамічний імпорт вашого HTML-рендерера — це гарний спосіб зменшити розмір бандла вашого застосунку.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    У Remix немає дерева компонентів для розміщення провайдера, тому конфігурація встановлюється один раз як синглтон під час запуску сервера. Вона налаштовує рендерер, що повертається `useHTMLRenderer()`. Вузли `html`, що повертаються `useIntlayer`, відображаються як є; перевизначайте їхні теги для кожного вузла за допомогою `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Використовуйте `installIntlayerHTMLDynamic(async () => …)` для відкладеного завантаження самого рендерера; завантажувач виконується лише під час першого виклику.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    В Astro немає дерева компонентів для розміщення провайдера, тому конфігурація встановлюється один раз як синглтон у middleware (сервер) та в клієнтському тегу `<script>` (браузер). Вона налаштовує рендерер, що повертається `useHTMLRenderer()`. Вузли `html`, що повертаються `useIntlayer`, відображаються як є; перевизначайте їхні теги для кожного вузла за допомогою `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Запускається один раз під час запуску сервера; сам middleware Intlayer
+    // реєструється інтеграцією перед цим файлом.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Використовуйте `installIntlayerHTMLDynamic(async () => …)` для відкладеного завантаження самого рендерера; завантажувач виконується лише під час першого виклику.
+
+  </Tab>
 </Tabs>
 
 ### Ручне відтворення та розширені інструменти
@@ -643,15 +757,69 @@ const myContent = html(
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Хук `useHTMLRenderer()`
+
+    Отримайте функцію відтворення, попередньо налаштовану за допомогою `installIntlayerHTML()`. Вона повертає рядок HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Утиліта `renderHTML()`
+
+    Автономна утиліта, яка ігнорує глобальну конфігурацію.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Хук `useHTMLRenderer()`
+
+    Отримайте функцію відтворення, попередньо налаштовану за допомогою `installIntlayerHTML()`. Вона повертає рядок HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Утиліта `renderHTML()`
+
+    Автономна утиліта, яка ігнорує глобальну конфігурацію.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Довідник опцій
 
 Ці опції можна передавати в `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` та `renderHTML`.
 
-| Опція        | Тип                   | Типово | Опис                                                                                                               |
-| :----------- | :-------------------- | :----- | :----------------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`   | Мапа HTML-тегів або назв користувацьких компонентів до компонентів.                                                |
-| `renderHTML` | `Function`            | `null` | Користувацька функція відтворення для повної заміни стандартного HTML-парсера (Тільки для провайдерів Vue/Svelte). |
+| Опція        | Тип                   | Типово | Опис                                                                                                                    |
+| :----------- | :-------------------- | :----- | :---------------------------------------------------------------------------------------------------------------------- |
+| `components` | `Record<string, any>` | `{}`   | Мапа HTML-тегів або назв користувацьких компонентів до компонентів.                                                     |
+| `renderHTML` | `Function`            | `null` | Користувацька функція відтворення для повної заміни стандартного HTML-парсера (провайдери Vue, Svelte, Remix та Astro). |
 
 > Примітка: Для React та Preact стандартні HTML-теги надаються автоматично. Вам потрібно передавати проп `components`, лише якщо ви хочете перевизначити їх або додати власні компоненти.

package/docs/uk/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Дізнайтеся, як оголошувати та використовувати вміст Markdown на вашому багатомовному веб-сайті за допомогою Intlayer. Дотримуйтесь інструкцій у цій онлайн-документації, щоб безперешкодно інтегрувати Markdown у ваш проект.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Intlayer надає два незалежні способи рендеринг
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    У Remix 3 вузли Markdown відтворюються на сервері в рядок HTML. Вставте його за допомогою пропу `innerHTML` у Remix JSX або за допомогою `html.raw` у поданні `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix екранує інтерпольовані значення за замовчуванням. `innerHTML` та `html.raw` — це два способи відмови від екранування, що й потрібно для відтвореного рядка Markdown.
+
+    Ви також можете надати локальні перевизначення для певних тегів за допомогою методу `.use()`. Перевизначення — це функції, які повертають рядок HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` — це відрендерений HTML-рядок, тоді як `String()` / `.toString()` повертають необроблений вихідний код Markdown:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    І ви можете отримати доступ до метаданих markdown наступним чином:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    В Astro вузли Markdown відтворюються в рядок HTML. Вставте його за допомогою директиви `set:html` у шаблоні або за допомогою `innerHTML` у клієнтському тегу `<script>`.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro екранує `{вирази}` за замовчуванням. `set:html` — це спосіб відмови від екранування, що й потрібно для відтвореного рядка Markdown.
+
+    Ви також можете надати локальні перевизначення для певних тегів за допомогою методу `.use()`. Перевизначення — це функції, які повертають рядок HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` — це відрендерений HTML-рядок, тоді як `String()` / `.toString()` повертають необроблений вихідний код Markdown:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    І ви можете отримати доступ до метаданих markdown наступним чином:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Допоміжні утиліти (тільки рядки Markdown)
@@ -698,6 +805,60 @@ Intlayer надає два незалежні способи рендеринг
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Хук `useMarkdownRenderer()`
+
+    Отримайте функцію рендерингу, попередньо налаштовану за допомогою `installIntlayerMarkdown()`. Вона повертає рядок HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Утиліта `renderMarkdown()`
+
+    Автономна утиліта, яка ігнорує глобальну конфігурацію.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Хук `useMarkdownRenderer()`
+
+    Отримайте функцію рендерингу, попередньо налаштовану за допомогою `installIntlayerMarkdown()`. Вона повертає рядок HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Утиліта `renderMarkdown()`
+
+    Автономна утиліта, яка ігнорує глобальну конфігурацію.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Глобальне налаштування за допомогою `MarkdownProvider`
@@ -997,6 +1158,73 @@ Intlayer надає два незалежні способи рендеринг
     > Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    У Remix немає дерева компонентів для розміщення провайдера, тому конфігурація встановлюється один раз як синглтон під час запуску сервера. Вона налаштовує рендерер, що повертається `useMarkdownRenderer()`. Вузли `md`, що повертаються `useIntlayer`, відтворюються за допомогою компілятора за замовчуванням; перевизначайте їхні теги для кожного вузла за допомогою `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    Ви також можете використовувати власний рендерер markdown:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Використовуйте `installIntlayerMarkdownDynamic(async () => …)` для відкладеного завантаження самого рендерера; завантажувач виконується лише під час першого виклику.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    В Astro немає дерева компонентів для розміщення провайдера, тому конфігурація встановлюється один раз як синглтон у middleware (сервер) та в клієнтському тегу `<script>` (браузер). Вона налаштовує рендерер, що повертається `useMarkdownRenderer()`. Вузли `md`, що повертаються `useIntlayer`, відтворюються за допомогою компілятора за замовчуванням; перевизначайте їхні теги для кожного вузла за допомогою `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Запускається один раз під час запуску сервера; сам middleware Intlayer
+    // реєструється інтеграцією перед цим файлом.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Ви також можете використовувати власний рендерер markdown:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Використовуйте `installIntlayerMarkdownDynamic(async () => …)` для відкладеного завантаження самого рендерера; завантажувач виконується лише під час першого виклику.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ export class MyComponent {
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 виконує рендеринг на сервері та передає HTML потоком, тому жоден AST не повинен передаватися клієнту. Виконайте парсинг один раз і рендеріть AST скрізь, де створюється сторінка:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Парсинг markdown у серіалізований AST (наприклад, один раз під час завантаження модуля)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Рендеринг AST: рендерер приймає вихідний рядок або розібраний AST
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Сторінки Astro рендеряться на сервері, тому жоден AST не повинен передаватися клієнту. Виконайте парсинг Markdown у frontmatter і рендеріть його за допомогою `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Парсинг markdown у серіалізований AST
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Рендеринг AST: рендерер приймає вихідний рядок або розібраний AST -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Цей підхід гарантує, що логіка аналізу Markdown повністю виконується на сервері, що значно скорочує час виконання на стороні клієнта та підвищує швидкість початкової гідратації.

package/docs/uk/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Analog i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Analog. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Конфігурація вашого проекту">
 
+### Архітектура
+
+У цій архітектурі `angular-intlayer` надає `provideIntlayer()`, зареєстрований у `src/app/app.config.ts`, щоб кожен компонент і файлова сторінка могли читати свій вміст через сигнал `useIntlayer`. Analog побудовано на базі Vite, тому плагін `intlayer()` з `vite-intlayer` додається поруч із `analog()` у `vite.config.ts` для відстеження та перебудови ваших оголошень вмісту, а також для роботи проксі локалі. Оголошення вмісту розміщуються поруч із компонентами та сторінками в `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Конфігурація
+
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/uk/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Angular 19. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Конфігурація вашого проекту">
 
+### Архітектура
+
+У цій архітектурі `angular-intlayer` надає `provideIntlayer()`, зареєстрований у `src/app/app.config.ts`, щоб кожен компонент міг читати свій вміст через сигнал `useIntlayer`. Angular CLI перемикається на кастомний збирач Webpack, а `webpack.config.ts` об'єднує плагін Intlayer зі збіркою для відстеження та перебудови оголошень вмісту. Оголошення вмісту розміщуються поруч із компонентами в `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Конфігурація
+
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/uk/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Angular 22. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Налаштування вашого проєкту">
 
+### Архітектура
+
+У цій архітектурі `angular-intlayer` надає `provideIntlayer()`, зареєстрований у `src/app/app.config.ts`, щоб кожен компонент міг читати свій вміст через сигнал `useIntlayer`. Angular CLI перемикається на кастомний збирач esbuild, а `esbuild.plugins.ts` реєструє плагін Intlayer у збірці для відстеження та перебудови оголошень вмісту. Оголошення вмісту розміщуються поруч із компонентами в `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Конфігурація
+
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}