@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/uk/intlayer_with_nuxt.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-06
-title: Nuxt i18n - Як перекласти додаток Nuxt у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на Nuxt і Vue багатомовним. Керуйтесь документацією, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: "Nuxt i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Nuxt. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -41,16 +41,54 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна відкрита бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних вебдодатках.
+Порівняно з основними рішеннями, такими як `@nuxtjs/i18n` або `i18next`, Intlayer — це рішення, яке постачається з інтегрованою оптимізацією, як-от:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** за допомогою автоматично згенерованих типів, що покращує автозаповнення та виявлення помилок.
-- **Отримати переваги від розширених функцій**, таких як динамічне виявлення локалі та перемикання.
+<Accordion header="Повна підтримка Nuxt">
+
+Intlayer оптимізовано для ідеальної роботи з Nuxt, пропонуючи **багатомовну маршрутизацію**, **проміжне програмне забезпечення для визначення локалі**, **карту сайту** та всі функції, необхідні для інтернаціоналізації масштабування (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>
 
 ---
 
@@ -88,7 +126,9 @@ history:
 
 Перегляньте репозиторій Application Template на GitHub: https://github.com/aymericzip/intlayer-nuxt-4-template
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою відповідного пакетного менеджера:
 
@@ -126,7 +166,9 @@ bun x intlayer init
 - **nuxt-intlayer**
   Nuxt-модуль, який інтегрує Intlayer у Nuxt-застосунки. Він забезпечує автоматичне налаштування, middleware для виявлення локалі, керування cookie та перенаправлення URL.
 
-### Крок 2: Конфігурація вашого проєкту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого застосунку:
 
@@ -150,7 +192,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL, перенаправлення через middleware, імена cookie, розташування та розширення ваших декларацій контенту, відключити логи Intlayer у консолі та інше. Для повного переліку доступних параметрів зверніться до [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Nuxt
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Nuxt">
 
 Додайте модуль intlayer до вашої конфігурації Nuxt:
 
@@ -165,7 +209,9 @@ export default defineNuxtConfig({
 
 > Модуль `nuxt-intlayer` автоматично керує інтеграцією Intlayer з Nuxt. Він налаштовує побудову декларацій контенту, відстежує файли в режимі розробки, надає middleware для виявлення локалі та керує локалізованим маршрутизуванням.
 
-### Крок 4: Оголосіть свій контент
+</Step>
+
+<Step number={4} title="Оголосіть свій контент">
 
 Створюйте та керуйте деклараціями контенту для збереження перекладів:
 
@@ -203,7 +249,9 @@ export default content;
 
 > Для детальнішої інформації див. [документацію щодо оголошення контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Отримуйте доступ до ваших словників контенту в усьому Nuxt-застосунку за допомогою композиції `useIntlayer`:
 
@@ -272,7 +320,9 @@ Intlayer пропонує різні API для доступу до вашого
 - Використовуйте `const content = useIntlayer("myContent");` і `{{ content.myContent }}` / `<content.myContent />`.
 - Або використовуйте `const { myContent } = useIntlayer("myContent");` і `{{ myContent}}` / `<myContent/>`, щоб деструктурувати контент.
 
-### (Опціонально) Крок 6: Змінити мову вашого контенту
+</Step>
+
+<Step number={6} title="Змінити мову вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, ви можете використовувати функцію `setLocale`, яку надає composable `useLocale`. Ця функція дозволяє встановити локаль додатка та відповідно оновити контент.
 
@@ -316,34 +366,9 @@ const { locale, availableLocales, setLocale } = useLocale();
 </template>
 ```
 
-### (Необов'язково) Крок 6b: Створіть layout з навігацією
+</Step>
 
-Nuxt layouts дозволяють визначити спільну структуру для ваших сторінок. Створіть default layout, який включає locale switcher та навігацію:
-
-```vue fileName="layouts/default.vue"
-<script setup lang="ts">
-import Links from "~/components/Links.vue";
-import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
-</script>
-
-<template>
-  <div>
-    <header>
-      <LocaleSwitcher />
-    </header>
-    <main>
-      <slot />
-    </main>
-
-    <Links href="/">Головна</Links>
-    <Links href="/about">Про нас</Links>
-  </div>
-</template>
-```
-
-Компонент `Links` (показаний нижче) забезпечує автоматичну локалізацію внутрішніх навігаційних посилань.
-
-### (Необов'язково) Крок 7: Додайте локалізовану маршрутизацію до вашого застосунку
+<Step number={7} title="Додайте локалізовану маршрутизацію до вашого застосунку" isOptional={true}>
 
 Nuxt автоматично налаштовує локалізовану маршрутизацію при використанні модуля `nuxt-intlayer`. Це створює маршрути для кожної мови автоматично на основі структури каталогу pages.
 
@@ -417,7 +442,9 @@ useHead({
 - Керує cookie локалі
 - Перенаправляє користувачів на відповідний локалізований URL
 
-### (Необов'язковий) Крок 8: Створення локалізованого компонента посилань
+</Step>
+
+<Step number={8} title="Створення локалізованого компонента посилань" isOptional={true}>
 
 Щоб гарантувати, що навігація вашого застосунку відповідає поточній локалі, ви можете створити власний компонент `Links`. Цей компонент автоматично додає префікс із поточною мовою до внутрішніх URL-адрес, що важливо для **SEO та видимості сторінок у пошукових системах**.
 
@@ -485,7 +512,9 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 > - Користувачі можуть безпосередньо ділитися локалізованими URL-адресами
 > - Історія браузера коректно працює з URL-адресами, що мають префікс локалі
 
-### (За бажанням) Крок 9: Обробка метаданих та SEO
+</Step>
+
+<Step number={9} title="Обробка метаданих та SEO" isOptional={true}>
 
 Nuxt надає потужні можливості для SEO через композицію `useHead` (автоматично імпортується). Ви можете використовувати Intlayer для обробки локалізованих метаданих, використовуючи доступники `.raw` або `.value` для отримання примітивного рядкового значення:
 
@@ -591,6 +620,37 @@ export default aboutPageContent;
 }
 ```
 
+</Step>
+
+</Steps>
+
+### (Необов'язково) Крок 6b: Створіть layout з навігацією
+
+Nuxt layouts дозволяють визначити спільну структуру для ваших сторінок. Створіть default layout, який включає locale switcher та навігацію:
+
+```vue fileName="layouts/default.vue"
+<script setup lang="ts">
+import Links from "~/components/Links.vue";
+import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
+</script>
+
+<template>
+  <div>
+    <header>
+      <LocaleSwitcher />
+    </header>
+    <main>
+      <slot />
+    </main>
+
+    <Links href="/">Головна</Links>
+    <Links href="/about">Про нас</Links>
+  </div>
+</template>
+```
+
+Компонент `Links` (показаний нижче) забезпечує автоматичну локалізацію внутрішніх навігаційних посилань.
+
 ### Конфігурація Git
 
 Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх коміту в ваш репозиторій Git.

package/docs/uk/intlayer_with_react_native+expo.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-06
-title: Expo + React Native i18n - Як перекласти додаток React Native у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на Expo та React Native багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: "Expo + React Native i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Expo + React Native. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -62,18 +62,95 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це **інноваційна, відкрита бібліотека для інтернаціоналізації (i18n)**, яка спрощує підтримку кількох мов у сучасних додатках. Вона працює у багатьох JavaScript/TypeScript середовищах, **включно з React Native** (через пакет `react-intlayer`).
+Порівняно з основними рішеннями, такими як `react-native-localize` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Забезпечити підтримку TypeScript** з автогенерованими типами.
-- **Динамічно локалізувати** контент, включно з текстами інтерфейсу (а в React для web, також HTML-метадані тощо).
-- **Отримати переваги розширених можливостей**, таких як динамічне визначення локалі та її перемикання.
+<Accordion header="Повна підтримка React Native">
 
-///
+Intlayer оптимізовано для ідеальної роботи з React Native і Expo, пропонуючи **визначення вмісту на рівні компонентів**, **підтримку TypeScript** і всі функції, необхідні для масштабування інтернаціоналізації (i18n) у мобільних програмах.
+
+</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>
+
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити ваш пакет і розмір перегляду до 50%**.
+
+</Accordion>
+</AccordionGroup>
+
+## Крок 1: Встановіть залежності
+
+Перегляньте [Шаблон програми](https://github.com/aymericzip/intlayer-react-native-template) на GitHub.
+
+Зі свого проекту React Native встановіть такі пакети:
+
+```bash packageManager="npm"
+npm встановити intlayer react-intlayer
+npm install --save-dev react-native-intlayer
+npx intlayer ініціал
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add --save-dev react-native-intlayer
+pnpm intlayer ініціал
+```
+
+```bash packageManager="пряжа"
+пряжа add intlayer react-intlayer
+yarn add --save-dev react-native-intlayer
+yarn intlayer ініц
+```
+
+```bash packageManager="булочка"
+bun add intlayer react-intlayer
+bun add --dev react-native-intlayer
+bun x intlayer init
+```
+
+### Пакети
+
+- **внутрішній шар**  
+  Основний набір інструментів i18n для налаштування, вмісту словника, генерації типів і команд CLI.
+
+- **react-intlayer**  
+  Інтеграція React, яка надає постачальників контексту та хуки React, які ви використовуватимете в React Native для отримання та перемикання локалей.
+
+- **react-native-intlayer**  
+  Інтеграція React Native, яка надає плагін Metro для інтеграції Intlayer із React Native bundler.
 
 ---
 

package/docs/uk/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - Як перекласти додаток React Router v7 у 2026
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) до вашого застосунку на React Router v7 за допомогою Intlayer. Дотримуйтеся цього вичерпного посібника, щоб зробити ваш застосунок багатомовним із маршрутизацією, що враховує локаль.
+updatedAt: 2026-05-31
+title: "React Router v7 i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку React Router v7. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -48,23 +48,62 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна open-source бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `react-i18next` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автозаповнення та виявлення помилок.
-- **Отримати вигоду від розширених можливостей**, таких як динамічне визначення та перемикання локалі.
-- **Увімкнути маршрутизацію з урахуванням локалі** за допомогою конфігураційної системи маршрутизації React Router v7.
+<Accordion header="Повна підтримка React Router">
+
+Intlayer оптимізовано для ідеальної роботи з React Router, пропонуючи **маршрутизацію з урахуванням локалі**, **проміжне програмне забезпечення для визначення локалі** та всі функції, необхідні для інтернаціоналізації масштабування (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 у застосунку на React Router v7
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети, використовуючи ваш улюблений package manager:
 
@@ -102,7 +141,13 @@ 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="Конфігурація вашого проєкту">
+
+</Step>
+
+</Steps>
 
 ## Покроковий посібник зі встановлення Intlayer у застосунок React Router v7 із маршрутами на основі файлової системи
 
@@ -155,7 +200,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви cookie, розташування та розширення ваших декларацій контенту, вимкнути логи Intlayer в консолі та інше. Для повного переліку доступних параметрів див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite
+<Steps>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer у вашу конфігурацію:
 
@@ -171,7 +218,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у застосунку Vite. Додатково надає aliases для оптимізації продуктивності.
 
-### Крок 4: Налаштуйте маршрути React Router v7
+</Step>
+
+<Step number={4} title="Налаштуйте маршрути React Router v7">
 
 Налаштуйте конфігурацію маршрутизації для маршрутів, які враховують локаль:
 
@@ -184,7 +233,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### Крок 5: Створіть компоненти layout
+</Step>
+
+<Step number={5} title="Створіть компоненти layout">
 
 Налаштуйте свій root layout та layout-и для кожної локалі:
 
@@ -238,7 +289,9 @@ export function Layout({
 }
 ```
 
-### Крок 6: Оголосіть ваш контент
+</Step>
+
+<Step number={6} title="Оголосіть ваш контент">
 
 Створіть і керуйте деклараціями контенту для збереження перекладів:
 
@@ -282,7 +335,9 @@ export default pageContent;
 
 > Для докладнішої інформації див. [документацію з декларацій контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/{{locale}}/dictionary/content_file.md).
 
-### Крок 7: Створіть компоненти, які враховують локаль
+</Step>
+
+<Step number={7} title="Створіть компоненти, які враховують локаль">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -343,7 +398,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 8: Використання Intlayer на ваших сторінках
+</Step>
+
+<Step number={8} title="Використання Intlayer на ваших сторінках">
 
 Отримуйте доступ до словників контенту у всьому вашому застосунку:
 
@@ -397,7 +454,9 @@ export default function Page() {
 
 > Якщо ваш застосунок уже існує, ви можете скористатися [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) у поєднанні з [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md), щоб перетворити тисячі компонентів за одну секунду.
 
-### Крок 9: Створіть компонент перемикача локалі
+</Step>
+
+<Step number={9} title="Створіть компонент перемикача локалі">
 
 Створіть компонент, який дозволить користувачам змінювати мову:
 
@@ -457,7 +516,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
-### Крок 10: Додати керування атрибутами HTML (необов'язково)
+</Step>
+
+<Step number={10} title="Додати керування атрибутами HTML">
 
 Створіть хук для керування атрибутами lang та dir у HTML:
 
@@ -495,7 +556,9 @@ export default function RootLayout() {
 }
 ```
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -593,6 +656,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -658,7 +725,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Крок 11: Додати middleware (необов'язково)
+<Steps>
+
+<Step number={11} title="Додати middleware">
 
 Ви також можете використовувати `intlayerProxy` для додавання маршрутизації на серверній стороні у ваш застосунок. Цей плагін автоматично визначає поточну locale на основі URL і встановлює відповідний cookie для locale. Якщо locale не вказано, плагін визначить найбільш підходящу locale на основі мовних налаштувань браузера користувача. Якщо ж жодну locale не буде виявлено, відбудеться перенаправлення на локаль за замовчуванням.
 
@@ -681,6 +750,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Налаштування TypeScript
 
 Intlayer використовує module augmentation, щоб отримати переваги TypeScript і зробити вашу codebase надійнішою.