@intlayer/docs 8.11.1 → 8.11.3

package/docs/uk/intlayer_with_astro_solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Solid i18n - Як перекласти додаток Astro + Solid у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro + Solid за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.
+updatedAt: 2026-05-31
+title: Astro + Solid i18n - Повний посібник з перекладу Astro + Solid
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Astro and Solid сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - інтернаціоналізація
   - документація
@@ -58,16 +58,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>
 
 ---
 
@@ -75,7 +106,9 @@ history:
 
 Перегляньте [шаблон додатка](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **@astrojs/solid-js**
   Офіційна інтеграція Astro, яка дозволяє використовувати Solid component islands.
 
-### Крок 2: Налаштуйте свій проект
+</Step>
+
+<Step number={2} title="Налаштуйте свій проект">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатка:
 
@@ -143,7 +178,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 та інтеграцію Solid.
 
@@ -164,7 +201,9 @@ export default defineConfig({
 
 > Інтеграція `solid()` дозволяє використовувати Solid component islands за допомогою `client:only="solid-js"`.
 
-### Крок 4: Декларуйте свій вміст
+</Step>
+
+<Step number={4} title="Декларуйте свій вміст">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -190,7 +229,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`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати Solid island для інтерактивного вмісту на стороні клієнта.
 
@@ -278,7 +319,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний `[locale]`, якщо вам не потрібно окремо обробляти корінь.
 > - **`search-param` або `no-prefix`:** Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.
 
-### Крок 6: Створення компонента Solid Island
+</Step>
+
+<Step number={6} title="Створення компонента Solid Island">
 
 Створіть компонент island, який обгортає ваш додаток Solid і приймає мову, визначену сервером:
 
@@ -312,7 +355,9 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > У Solid `useIntlayer` повертає **accessor** (наприклад, `content.). Ви повинні викликати його, щоб отримати доступ до реактивного вмісту.
 
-### Крок 7: Додавання перемикача мов
+</Step>
+
+<Step number={7} title="Додавання перемикача мов">
 
 Створіть компонент Solid `LocaleSwitcher`, який зчитує доступні мови та переходить за локалізованою URL-адресою, коли користувач обирає нову мову:
 
@@ -363,7 +408,9 @@ export function LocaleSwitcher() {
 
 > `LocaleSwitcher` повинен рендеритися всередині `IntlayerProvider` - використовуйте його у вашому компоненті island (як показано на кроці 6).
 
-### Крок 8: Sitemap та Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap та Robots.txt">
 
 Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
 
@@ -471,7 +518,9 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -572,3 +621,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>

package/docs/uk/intlayer_with_astro_svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Svelte i18n - Як перекласти додаток Astro + Svelte у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro + Svelte за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.
+updatedAt: 2026-05-31
+title: Astro + Svelte i18n - Повний посібник з перекладу Astro + Svelte
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Astro and Svelte сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - інтернаціоналізація
   - документація
@@ -58,16 +58,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>
 
 ---
 
@@ -75,7 +106,9 @@ history:
 
 Перегляньте [шаблон додатка](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Офіційна інтеграція Astro, яка дозволяє використовувати Svelte component islands.
 
-### Крок 2: Налаштуйте свій проект
+</Step>
+
+<Step number={2} title="Налаштуйте свій проект">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатка:
 
@@ -143,7 +178,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 та інтеграцію Svelte.
 
@@ -164,7 +201,9 @@ export default defineConfig({
 
 > Інтеграція `svelte()` дозволяє використовувати Svelte component islands за допомогою `client:only="svelte"`.
 
-### Крок 4: Декларуйте свій вміст
+</Step>
+
+<Step number={4} title="Декларуйте свій вміст">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -190,7 +229,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`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати Svelte island для інтерактивного вмісту на стороні клієнта.
 
@@ -278,7 +319,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний `[locale]`, якщо вам не потрібно окремо обробляти корінь.
 > - **`search-param` або `no-prefix`:** Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.
 
-### Крок 6: Створення компонента Svelte Island
+</Step>
+
+<Step number={6} title="Створення компонента Svelte Island">
 
 Створіть компонент island, який обгортає ваш додаток Svelte. Ви повинні викликати `setupIntlayer` з мовою, визначеною сервером, перед доступом до будь-яких сторів.
 
@@ -323,7 +366,9 @@ const { title } = getIntlayer("app", locale);
 
 > Проп `locale` передається зі сторінки Astro (визначення на стороні сервера) і використовується для ініціалізації `setupIntlayer`, встановлюючи початкову мову для всіх сторів у компоненті.
 
-### Крок 7: Додавання перемикача мов
+</Step>
+
+<Step number={7} title="Додавання перемикача мов">
 
 Функціональність перемикання мов інтегрована безпосередньо в Svelte island (див. крок 6 вище). Він використовує стор `useLocale` з `svelte-intlayer` і переходить за локалізованою URL-адресою, коли користувач обирає нову мову:
 
@@ -367,7 +412,9 @@ const { title } = getIntlayer("app", locale);
 > **Примітка щодо стійкості:**
 > Використання `onLocaleChange` для перенаправлення через `window.location.href` гарантує відвідування нової URL-адреси з мовним префіксом. Це дозволяє middleware Intlayer встановити cookie мови та запам'ятати вибір користувача для майбутніх візитів.
 
-### Крок 8: Sitemap та Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap та Robots.txt">
 
 Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
 
@@ -475,7 +522,9 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -576,3 +625,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>

package/docs/uk/intlayer_with_astro_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vanilla JS i18n - Як перекласти додаток Astro + Vanilla JS у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro + Vanilla JS за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.
+updatedAt: 2026-05-31
+title: Astro + Vanilla JS i18n - Повний посібник з перекладу Astro + Vanilla JS
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Astro and Vanilla JS сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - інтернаціоналізація
   - документація
@@ -58,16 +58,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>
 
 ---
 
@@ -75,7 +106,9 @@ history:
 
 Перегляньте [шаблон додатка](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -112,7 +145,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   Пакет для інтеграції Intlayer у додатки Vanilla JavaScript / TypeScript. Він надає синглтон Pub/Sub (`IntlayerClient`) та допоміжні функції на основі callback-функцій (`useIntlayer`, `useLocale` тощо), щоб будь-яка частина вашого `<script>` в Astro могла реагувати на зміни мови без потреби у фреймворку UI.
 
-### Крок 2: Налаштуйте свій проект
+</Step>
+
+<Step number={2} title="Налаштуйте свій проект">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатка:
 
@@ -137,7 +172,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. Для Vanilla JS не потрібні додаткові інтеграції фреймворків UI.
 
@@ -155,7 +192,9 @@ export default defineConfig({
 
 > Плагін інтеграції `intlayer()` використовується для інтеграції Intlayer з Astro. Він забезпечує генерацію файлів декларації вмісту та стежить за ними в режимі розробки. Він визначає змінні середовища Intlayer всередині додатка Astro та надає аліаси для оптимізації продуктивності.
 
-### Крок 4: Декларуйте свій вміст
+</Step>
+
+<Step number={4} title="Декларуйте свій вміст">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -193,7 +232,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">
 
 З Vanilla JS весь серверний рендеринг (SSR) відбувається безпосередньо у файлах `.astro` за допомогою `getIntlayer`. Потім на стороні клієнта блок `<script>` ініціалізує бібліотеку `vanilla-intlayer` для увімкнення перемикання мов.
 
@@ -302,7 +343,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний `[locale]`, якщо вам не потрібно окремо обробляти корінь.
 > - **`search-param` або `no-prefix`:** Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.
 
-### Крок 6: Додавання перемикача мов
+</Step>
+
+<Step number={6} title="Додавання перемикача мов">
 
 В Astro з Vanilla JS перемикач мов генерується на сервері як звичайні посилання і активується на стороні клієнта за допомогою блоку `<script>`. Коли користувач натискає на посилання мови, `vanilla-intlayer` встановлює cookie мови за допомогою `setLocale` перед переходом на локалізовану URL-адресу.
 
@@ -343,7 +386,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > **Примітка щодо Progressive Enhancement:**
 > Посилання всередині перемикача мов працюватимуть як стандартні теги `<a>` навіть без JavaScript. Коли JavaScript доступний, виклик `setLocale` оновлює cookie перед перенаправленням, забезпечуючи правильну обробку вибору мови посередником (middleware).
 
-### Крок 7: Sitemap та Robots.txt
+</Step>
+
+<Step number={7} title="Sitemap та Robots.txt">
 
 Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
 
@@ -451,7 +496,9 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -552,3 +599,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>