@intlayer/docs 8.11.2 → 8.11.3

package/docs/uk/intlayer_with_angular_19.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Angular i18n - Як перекласти додаток Angular 19 (Webpack)
-description: Дізнайтеся, як зробити свій Angular веб-сайт багатомовним. Дотримуйтесь документації для інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: Angular i18n - Повний посібник з перекладу Angular 19 app (Webpack)
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Angular 19 застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -34,16 +34,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатомовності в сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `ngx-translate` або `angular-l10n`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повне кутове покриття">
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та вміст.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автодоповнення та виявлення помилок.
-- **Користуватися розширеними можливостями**, такими як динамічне визначення та перемикання локалі.
+Intlayer оптимізовано для ідеальної роботи з Angular, пропонуючи **вибір вмісту на рівні компонентів**, **ліниво завантажені переклади** та всі функції, необхідні для масштабування інтернаціоналізації (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -76,7 +107,9 @@ history:
 
 Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-angular-19-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -114,7 +147,9 @@ bun x intlayer init
 - **@angular-builders/custom-webpack**
   Необхідний для налаштування конфігурації Webpack в Angular CLI.
 
-### Крок 2: Конфігурація вашого проекту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проекту">
 
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
@@ -138,7 +173,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення в middleware, назви cookie, розташування та розширення ваших декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Angular
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Angular">
 
 Щоб інтегрувати Intlayer з Angular CLI, вам потрібно використовувати спеціальний білдер (builder). Цей посібник припускає, що ви використовуєте Webpack (стандарт для багатьох проектів Angular).
 
@@ -181,7 +218,9 @@ export default mergeConfig({});
 
 > Функція `mergeConfig` налаштовує Webpack за допомогою Intlayer. Вона впроваджує `IntlayerPlugin` (для обробки файлів декларації вмісту) та налаштовує псевдоніми для оптимальної продуктивності.
 
-### Крок 4: Декларування вмісту
+</Step>
+
+<Step number={4} title="Декларування вмісту">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -236,7 +275,9 @@ export default appContent;
 
 > Для отримання додаткової інформації дивіться [документацію з декларування вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Щоб використовувати функції інтернаціоналізації Intlayer у всьому додатку Angular, вам потрібно надати Intlayer у конфігурації вашого додатка.
 
@@ -284,7 +325,9 @@ export class AppComponent {
 
 Вміст Intlayer повертається як `Signal`, тому ви отримуєте доступ до значень, викликаючи сигнал: `content().title`.
 
-### (Опціонально) Крок 6: Зміна мови вашого вмісту
+</Step>
+
+<Step number={6} title="Зміна мови вашого вмісту" isOptional={true}>
 
 Щоб змінити мову вмісту, ви можете використовувати функцію `setLocale`, яку надає функція `useLocale`. Це дозволяє встановити локаль додатка та відповідно оновити вміст.
 
@@ -394,3 +437,7 @@ Intlayer використовує розширення модулів (module au
 Щоб йти далі, ви можете впровадити [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) або винести свій вміст у зовнішню систему за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Angular i18n - Як перекласти додаток Angular 21 (Vite) у 2026 році
-description: Дізнайтеся, як зробити ваш вебсайт на Angular багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: Angular i18n - Повний посібник з перекладу Angular 21
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Angular 21 застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -36,16 +36,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** — це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `ngx-translate` або `angular-l10n`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повне кутове покриття">
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** з автоматично згенерованими типами, що покращує автодоповнення та виявлення помилок.
-- **Використовувати розширені можливості**, такі як динамічне виявлення та перемикання мови.
+Intlayer оптимізовано для ідеальної роботи з Angular, пропонуючи **вибір вмісту на рівні компонентів**, **ліниво завантажені переклади** та всі функції, необхідні для масштабування інтернаціоналізації (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -78,7 +109,9 @@ history:
 
 Перегляньте [Шаблон Додатку](https://github.com/aymericzip/intlayer-angular-21-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -116,7 +149,9 @@ bun x intlayer init
 - **@angular-builders/custom-esbuild**
   Необхідний для налаштування конфігурації esbuild в Angular CLI.
 
-### Крок 2: Налаштування вашого проєкту
+</Step>
+
+<Step number={2} title="Налаштування вашого проєкту">
 
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
@@ -140,7 +175,9 @@ export default config;
 
 > Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, редиректи middleware, назви файлів cookie, розташування і розширення файлів ваших декларацій контенту, вимкнути логи Intlayer в консолі та багато іншого. Повний список доступних параметрів дивіться у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Angular
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Angular">
 
 Щоб інтегрувати Intlayer з Angular CLI, вам потрібно використовувати кастомний збирач. У цьому посібнику передбачається, що ви використовуєте Vite/esbuild (за замовчуванням для проєктів Angular 21).
 
@@ -202,7 +239,9 @@ export default [intlayerEsbuildPlugin()];
 >
 > Потім в `angular.json` вкажіть `"./esbuild.plugins.mjs"` замість `"./esbuild.plugins.ts"`.
 
-### Крок 4: Оголосіть свій контент
+</Step>
+
+<Step number={4} title="Оголосіть свій контент">
 
 Створюйте та керуйте деклараціями вашого контенту для зберігання перекладів:
 
@@ -252,7 +291,9 @@ export default appContent;
 
 > Докладніше див. у [документації з декларації контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Щоб використовувати функції інтернаціоналізації Intlayer у всьому вашому додатку Angular, вам необхідно додати Intlayer до конфігурації додатка.
 
@@ -300,7 +341,9 @@ export class AppComponent {
 
 Контент Intlayer повертається як `Signal`, тому ви отримуєте доступ до значень, викликаючи сигнал: `content().title`.
 
-### (Додатково) Крок 6: Зміна мови контенту
+</Step>
+
+<Step number={6} title="Зміна мови контенту" isOptional={true}>
 
 Щоб змінити мову контенту, ви можете використовувати функцію `setLocale`, що надається функцією `useLocale`. Це дозволяє встановлювати локаль додатка та відповідним чином оновлювати контент.
 
@@ -410,3 +453,7 @@ Intlayer використовує розширення модулів (Module Au
 Щоб піти далі, ви можете реалізувати [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або екстерналізувати свій контент за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_astro.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Переклад Astro i18n - Як перекласти додаток Astro у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.
+updatedAt: 2026-05-31
+title: Переклад Astro i18n - Повний посібник з перекладу Astro
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Astro сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - інтернаціоналізація
   - документація
@@ -60,16 +60,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `astro-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка Astro">
 
-- **Легко керувати перекладами**: Використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути та вміст**.
-- **Забезпечити підтримку TypeScript**: Завдяки автоматично згенерованим типам для кращого автовідчуття та виявлення помилок.
-- **Використовувати розширені можливості**: Такі як динамічне визначення мови та перемикання мов.
+Intlayer оптимізовано для ідеальної роботи з Astro, пропонуючи **багатомовну маршрутизацію**, **карту сайту** та всі функції, необхідні для масштабування інтернаціоналізації (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -77,7 +108,9 @@ history:
 
 Перегляньте [шаблон додатка](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -105,7 +138,9 @@ yarn add react react-dom react-intlayer @astrojs/react
 - **astro-intlayer**
   Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
 
-### Крок 2: Налаштуйте свій проект
+</Step>
+
+<Step number={2} title="Налаштуйте свій проект">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатка:
 
@@ -130,7 +165,9 @@ export default config;
 
 > Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, перенаправлення middleware, імена cookie, розташування та розширення декларацій вмісту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer у вашу конфігурацію Astro
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer у вашу конфігурацію Astro">
 
 Додайте плагін `intlayer` до вашої конфігурації Astro.
 
@@ -148,7 +185,9 @@ export default defineConfig({
 
 > Плагін інтеграції `intlayer()` використовується для інтеграції Intlayer з Astro. Він забезпечує генерацію файлів декларації вмісту та стежить за ними в режимі розробки. Він визначає змінні середовища Intlayer всередині додатка Astro та надає аліаси для оптимізації продуктивності.
 
-### Крок 4: Декларуйте свій вміст
+</Step>
+
+<Step number={4} title="Декларуйте свій вміст">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -175,7 +214,9 @@ export default appContent;
 
 > Для отримання додаткової інформації дивіться [документацію з декларації вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання вмісту в Astro
+</Step>
+
+<Step number={5} title="Використання вмісту в Astro">
 
 Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`.
 
@@ -248,7 +289,9 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
-### Крок 6: Локалізована маршрутизація
+</Step>
+
+<Step number={6} title="Локалізована маршрутизація">
 
 Створіть динамічні сегменти маршрутів (наприклад, `src/pages/[locale]/index.astro`) для обслуговування локалізованих сторінок:
 
@@ -264,7 +307,9 @@ const { title } = getIntlayer('app');
 
 Інтеграція Astro додає middleware Vite, який допомагає з маршрутизацією з урахуванням мови та визначеннями середовища під час розробки. Ви також можете використовувати власну логіку або інструменти `intlayer`, такі як `getLocalizedUrl`, для посилань між мовами.
 
-### Крок 7: Продовжуйте використовувати ваш улюблений фреймворк
+</Step>
+
+<Step number={7} title="Продовжуйте використовувати ваш улюблений фреймворк">
 
 Продовжуйте будувати свій додаток, використовуючи фреймворк за вашим вибором.
 
@@ -322,7 +367,9 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -423,3 +470,7 @@ bun run build # Or bun run dev
 ### Поглиблюйте свої знання
 
 Якщо ви хочете дізнатися більше, ви також можете впровадити [Візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або використовувати [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md), щоб винести ваш вміст назовні.
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_astro_lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Lit i18n - Як перекласти додаток Astro + Lit у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro + Lit за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.
+updatedAt: 2026-05-31
+title: Astro + Lit i18n - Повний посібник з перекладу Astro + Lit
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Astro and Lit сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - інтернаціоналізація
   - документація
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `astro-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка Astro">
 
-- **Легко керувати перекладами**: Використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути та вміст**.
-- **Забезпечити підтримку TypeScript**: Завдяки автоматично згенерованим типам для кращого автовідчуття та виявлення помилок.
-- **Використовувати розширені можливості**: Такі як динамічне визначення мови та перемикання мов.
+Intlayer оптимізовано для ідеальної роботи з Astro, пропонуючи **багатомовну маршрутизацію**, **карту сайту** та всі функції, необхідні для масштабування інтернаціоналізації (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -76,7 +107,9 @@ history:
 
 Перегляньте [шаблон додатка](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -119,7 +152,9 @@ bun x intlayer init
 - **@astrojs/lit**
   Офіційна інтеграція Astro, яка дозволяє використовувати Lit custom elements всередині сторінок Astro.
 
-### Крок 2: Налаштуйте свій проект
+</Step>
+
+<Step number={2} title="Налаштуйте свій проект">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатка:
 
@@ -144,7 +179,9 @@ export default config;
 
 > Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, перенаправлення middleware, імена cookie, розташування та розширення декларацій вмісту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer у вашу конфігурацію Astro
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer у вашу конфігурацію Astro">
 
 Додайте плагін `intlayer` до вашої конфігурації Astro та інтеграцію Lit.
 
@@ -165,7 +202,9 @@ export default defineConfig({
 
 > Інтеграція `lit()` дозволяє використовувати Lit custom elements всередині сторінок Astro.
 
-### Крок 4: Декларуйте свій вміст
+</Step>
+
+<Step number={4} title="Декларуйте свій вміст">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -197,7 +236,9 @@ export default litDemoContent;
 
 > Для отримання додаткової інформації дивіться [документацію з декларації вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання вмісту в Astro
+</Step>
+
+<Step number={5} title="Використання вмісту в Astro">
 
 Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці. Lit custom elements імпортуються за допомогою блоку `<script>` на стороні клієнта і розміщуються в body.
 
@@ -287,7 +328,9 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > - **`prefix-all`:** Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний `[locale]`, якщо вам не потрібно окремо обробляти корінь.
 > - **`search-param` або `no-prefix`:** Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.
 
-### Крок 6: Створення Lit Custom Element
+</Step>
+
+<Step number={6} title="Створення Lit Custom Element">
 
 Створіть Lit custom element. Викличте `installIntlayer` у `connectedCallback`, використовуючи атрибут `locale`, отриманий від сервера, щоб ініціалізувати синглтон керування перекладами на стороні клієнта.
 
@@ -366,7 +409,9 @@ customElements.define("lit-demo", LitDemo);
 
 > `useIntlayer` зареєстровано як `ReactiveController`. Він автоматично надсилатиме запит на ререндер компонента при зміні мови, тому не потрібно додавати логіку підписки.
 
-### Крок 7: Додавання перемикача мов
+</Step>
+
+<Step number={7} title="Додавання перемикача мов">
 
 Функціональність перемикання мов інтегрована безпосередньо в метод `render()` Lit custom element (див. крок 6 вище). Він використовує `useLocale` з `lit-intlayer` і переходить за локалізованою URL-адресою, коли користувач обирає нову мову:
 
@@ -412,7 +457,9 @@ override render() {
 > **Примітка щодо стійкості:**
 > Використання `onLocaleChange` para redicuicamiento через `window.location.href` garantiza відвідування нової URL-адреси з мовним префіксом. Це дозволяє middleware Intlayer встановити cookie мови та запам'ятати вибір користувача для майбутніх візитів.
 
-### Крок 8: Sitemap та Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap та Robots.txt">
 
 Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
 
@@ -524,7 +571,9 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -625,3 +674,7 @@ bun run build # Or bun run dev
 ### Поглиблюйте свої знання
 
 Якщо ви хочете дізнатися більше, ви також можете впровадити [Візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/uk/intlayer_visual_editor.md) або використовувати [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/uk/intlayer_CMS.md), щоб винести ваш вміст назовні.
+
+</Step>
+
+</Steps>