@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/uk/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - Як перекласти застосунок Vanilla JS у 2026 році
-description: Дізнайтеся, як зробити свій вебсайт на Vanilla JS багатомовним. Дотримуйтесь документації з інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: "Vanilla JS i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Vanilla JS. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -57,28 +57,62 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення багатомовної підтримки в сучасних вебзастосунках.
+Порівняно з основними рішеннями, такими як `i18next` або `i18n.js`, Intlayer — це рішення, яке поставляється з інтегрованою оптимізацією, як-от:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** завдяки типам, що генеруються автоматично, що покращує автодоповнення та виявлення помилок.
-- **Користуватися розширеними функціями**, такими як динамічне визначення та зміна мови.
+<Accordion header="Повна підтримка Vanilla JS">
 
-Цей посібник демонструє, як використовувати Intlayer у застосунку на Vanilla JavaScript **без використання менеджера пакетів або збірника** (такого як Vite, Webpack тощо).
+Intlayer оптимізовано для ідеальної роботи з Vanilla JavaScript, пропонуючи **незалежне від фреймворку керування вмістом**, **підтримку TypeScript** і всі функції, необхідні для масштабування інтернаціоналізації (i18n).
 
-Якщо ваш застосунок використовує збірник (наприклад, Vite), ми рекомендуємо натомість дотримуватися [Посібника з Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+vanilla.md).
+</Accordion>
 
-Використовуючи автономну збірку (standalone bundle), ви можете імпортувати Intlayer безпосередньо у свої HTML-файли через один JavaScript-файл, що робить його ідеальним для застарілих проєктів або простих статичних сайтів.
+<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>
 
 ---
 
 ## Покроковий посібник із налаштування Intlayer у застосунку на Vanilla JS
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -138,7 +172,9 @@ bun x intlayer build
 
 > Експорт збірки (bundling) через CLI `intlayer standalone` створює оптимізований білд шляхом деревотрусу (tree-shaking) для невикористаних пакетів, локалей та другорядної логіки (наприклад, перенаправлень або префіксів), специфічної для вашої конфігурації.
 
-### Крок 2: Конфігурація вашого проєкту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації для налаштування мов вашого застосунку:
 
@@ -162,7 +198,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL, перенаправлення через middleware, імена кукі, розташування та розширення ваших оголошень контенту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів див. у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Імпорт збірки у ваш HTML
+</Step>
+
+<Step number={3} title="Імпорт збірки у ваш HTML">
 
 Після того, як ви згенерували збірку `intlayer.js`, ви можете імпортувати її у свій HTML-файл:
 
@@ -186,7 +224,9 @@ export default config;
 
 Збірка надає `Intlayer` та `VanillaIntlayer` як глобальні об'єкти на `window`.
 
-### Крок 4: Ініціалізація Intlayer у точці входу
+</Step>
+
+<Step number={4} title="Ініціалізація Intlayer у точці входу">
 
 У вашому `src/main.js` викличте `installIntlayer()` **до** того, як будь-який контент буде відмальовано, щоб глобальний синглтон мови був готовий.
 
@@ -206,7 +246,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Крок 5: Оголошення вашого контенту
+</Step>
+
+<Step number={5} title="Оголошення вашого контенту">
 
 Створюйте та керуйте оголошеннями контенту для зберігання перекладів:
 
@@ -284,7 +326,9 @@ export default appContent;
 >
 > Для отримання детальнішої інформації див. [документацію з оголошення контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 6: Використання Intlayer у вашому JavaScript
+</Step>
+
+<Step number={6} title="Використання Intlayer у вашому JavaScript">
 
 Об'єкт `window.VanillaIntlayer` надає допоміжні функції API: `useIntlayer(key, locale?)` повертає перекладений контент для заданого ключа.
 
@@ -318,7 +362,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Опціонально) Крок 7: Зміна мови вашого контенту
+</Step>
+
+<Step number={7} title="Зміна мови вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, використовуйте функцію `setLocale`, що надається `useLocale`.
 
@@ -353,7 +399,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Опціонально) Крок 8: Перемикання атрибутів мови та напрямку тексту HTML
+</Step>
+
+<Step number={8} title="Перемикання атрибутів мови та напрямку тексту HTML" isOptional={true}>
 
 Оновлюйте атрибути `lang` та `dir` тегу `<html>` відповідно до поточної мови для забезпечення доступності та SEO.
 
@@ -371,7 +419,9 @@ useLocale({
 });
 ```
 
-### (Опціонально) Крок 9: Ледаче завантаження словників за мовами
+</Step>
+
+<Step number={9} title="Ледаче завантаження словників за мовами" isOptional={true}>
 
 Якщо ви хочете завантажувати словники ледаче для кожної мови, ви можете використовувати `useDictionaryDynamic`. Це корисно, якщо ви не хочете включати всі переклади в початковий файл `intlayer.js`.
 
@@ -393,6 +443,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > Примітка: `useDictionaryDynamic` вимагає, щоб словники були доступні у вигляді окремих файлів ESM. Цей підхід зазвичай використовується, якщо у вас є вебсервер, що роздає словники.
+> </Step>
+
+</Steps>
 
 ### Налаштування TypeScript
 

package/docs/uk/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Як перекласти додаток Lit у 2026 році
-description: Дізнайтеся, як зробити ваш веб-сайт на Vite та Lit багатомовним. Дотримуйтесь документації для інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: "Vite + Lit i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Vite + Lit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -57,22 +57,62 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатомовності в сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `lit-localize` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути та контент**.
-- **Забезпечити підтримку TypeScript** з автоматично згенерованими типами, що покращує автодоповнення та виявлення помилок.
-- **Користуватися розширеними функціями**, такими як динамічне визначення та перемикання мови.
+<Accordion header="Повне освітлення">
+
+Intlayer оптимізовано для ідеальної роботи з Lit, пропонуючи **Визначення вмісту на рівні веб-компонентів**, **Підтримку TypeScript** і всі функції, необхідні для інтернаціоналізації масштабування (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>
 
 ---
 
 ## Покрокова інструкція з налаштування Intlayer у додатку Vite та Lit
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -110,7 +150,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включає плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення (middleware) для визначення мови користувача, керування файлами cookie та обробки перенаправлень URL.
 
-### Крок 2: Конфігурація вашого проекту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проекту">
 
 Створіть конфігураційний файл для налаштування мов вашого додатка:
 
@@ -134,7 +176,9 @@ export default config;
 
 > Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, перенаправлення проміжного ПЗ, назви файлів cookie, розташування та розширення ваших декларацій контенту, вимкнути журнали Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer до вашої конфігурації.
 
@@ -150,7 +194,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує створення файлів декларації контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у додатку Vite. Крім того, він надає псевдоніми (aliases) для оптимізації продуктивності.
 
-### Крок 4: Запустіть Intlayer у вашій точці входу
+</Step>
+
+<Step number={4} title="Запустіть Intlayer у вашій точці входу">
 
 Викличте `installIntlayer()` **перед** реєстрацією будь-яких користувацьких елементів, щоб глобальний синглтон локалі був готовий, коли перший елемент підключиться.
 
@@ -175,7 +221,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Крок 5: Декларуйте ваш контент
+</Step>
+
+<Step number={5} title="Декларуйте ваш контент">
 
 Створюйте та керуйте вашими деклараціями контенту для зберігання перекладів:
 
@@ -261,7 +309,9 @@ export default appContent;
 >
 > Для отримання додаткової інформації дивіться [документацію з декларації контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 6: Використовуйте Intlayer у вашому LitElement
+</Step>
+
+<Step number={6} title="Використовуйте Intlayer у вашому LitElement">
 
 Використовуйте `useIntlayer` всередині `LitElement`. Він повертає проксі `ReactiveController`, який автоматично запускає перерендеринг щоразу, коли змінюється активна мова - додаткових налаштувань не потрібно.
 
@@ -306,7 +356,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Опціонально) Крок 7: Змініть мову вашого контенту
+</Step>
+
+<Step number={7} title="Змініть мову вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, скористайтеся методом `setLocale`, наданим контролером `useLocale`.
 
@@ -341,7 +393,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Опціонально) Крок 8: Рендеринг контенту Markdown та HTML
+</Step>
+
+<Step number={8} title="Рендеринг контенту Markdown та HTML" isOptional={true}>
 
 Intlayer підтримує декларації контенту `md()` та `html()`. У Lit скомпільований вивід вставляється як сирий HTML за допомогою директиви `unsafeHTML`.
 
@@ -391,7 +445,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` викликає `toString()` на `IntlayerNode`, який повертає сирий рядок Markdown. Передайте його в `compileMarkdown`, щоб отримати рядок HTML, а потім відрендерите за допомогою директиви `unsafeHTML` від Lit.
 
-### (Опціонально) Крок 9: Додайте локалізовану маршрутизацію до вашого додатка
+</Step>
+
+<Step number={9} title="Додайте локалізовану маршрутизацію до вашого додатка" isOptional={true}>
 
 Для створення унікальних маршрутів для кожної мови (корисно для SEO), ви можете використовувати клієнтський маршрутизатор разом із помічниками Intlayer `localeMap` / `localeFlatMap` та плагіном Vite `intlayerProxy` для визначення мови на стороні сервера.
 
@@ -408,7 +464,9 @@ export default defineConfig({
 });
 ```
 
-### (Опціонально) Крок 10: Зміна URL при зміні мови
+</Step>
+
+<Step number={10} title="Зміна URL при зміні мови" isOptional={true}>
 
 Щоб оновлювати URL-адресу браузера при зміні мови, використовуйте `useRewriteURL` разом із перемикачем мови:
 
@@ -446,7 +504,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Опціонально) Крок 11: Перемикання атрибутів мови та напрямку HTML
+</Step>
+
+<Step number={11} title="Перемикання атрибутів мови та напрямку HTML" isOptional={true}>
 
 Оновлюйте атрибути `lang` та `dir` тегу `<html>` відповідно до поточної мови для доступності та SEO.
 
@@ -471,7 +531,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Опціонально) Крок 12: Витягніть контент ваших компонентів
+</Step>
+
+<Step number={12} title="Витягніть контент ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, трансформація тисяч файлів може зайняти багато часу.
 
@@ -511,6 +573,10 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+</Step>
+
+</Steps>
+
 ### (Опційно) Sitemap і robots.txt (генерація під час збірки)
 
 Intlayer надає `generateSitemap` і `getMultilingualUrls` - утиліти для формування багатомовних `sitemap.xml` і `robots.txt` для краулерів та автоматичного запису в `public/`. Зазвичай запускають невеликий Node-скрипт **перед** Vite (наприклад, npm-хуки `predev` / `prebuild`).