@intlayer/docs 8.11.2 → 8.11.3

package/docs/uk/intlayer_with_storybook.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
+updatedAt: 2026-05-31
 title: Як налаштувати Intlayer зі Storybook
 description: Дізнайтеся, як зробити вашу систему дизайну багатомовною за допомогою Intlayer та Storybook - компілюйте декларації вмісту, додавайте перемикач локалей та переглядайте свої компоненти будь-якою мовою.
 keywords:
@@ -31,16 +31,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим кодом, розроблена для спрощення багатомовної підтримки в сучасних веб-додатках. Вона працює на **рівні компонентів** - кожен компонент має власні декларації вмісту - що дозволяє зберігати переклади разом із кодом, який їх використовує.
+Порівняно з основними рішеннями, такими як `storybook-react-i18next` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повне висвітлення книги оповідань">
 
-- **Керувати перекладами декларативно** за допомогою файлів вмісту для кожного компонента.
-- **Отримувати повну підтримку TypeScript** завдяки автоматично згенерованим типам та автодоповненню в IDE.
-- **Перемикати локалі під час виконання** без перезавантаження сторінки.
-- **Перекладати автоматично** за допомогою вбудованих інтеграцій з AI-провайдерами.
+Intlayer оптимізовано для ідеальної роботи з Storybook, пропонуючи **багатомовні декоратори історій**, **перемикання локалі** та всі функції, необхідні для масштабування інтернаціоналізації (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>
 
 ---
 
@@ -59,7 +90,9 @@ Storybook - це галузевий стандартний інструмент
 <Tabs>
 <Tab value="Vite Setup">
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +122,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Крок 2: Створення конфігурації Intlayer
+</Step>
+
+<Step number={2} title="Створення конфігурації Intlayer">
 
 Створіть `intlayer.config.ts` у корені вашого проекту (або всередині пакету вашої дизайн-системи):
 
@@ -118,7 +153,9 @@ export default config;
 
 ---
 
-### Крок 3: Додавання плагіна Vite до Storybook
+</Step>
+
+<Step number={3} title="Додавання плагіна Vite до Storybook">
 
 Хук `viteFinal` у Storybook дозволяє розширити внутрішню конфігурацію Vite. Імпортуйте та додайте плагін `intlayer()` туди:
 
@@ -159,7 +196,9 @@ export default config;
 
 ---
 
-### Крок 4: Додавання декоратора `IntlayerProvider` та панелі інструментів локалей
+</Step>
+
+<Step number={4} title="Додавання декоратора `IntlayerProvider` та панелі інструментів локалей">
 
 Файл `preview` у Storybook - це ідеальне місце, щоб обгорнути кожну історію в `IntlayerProvider` та додати перемикач локалей на панель інструментів:
 
@@ -216,7 +255,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Крок 1: Встановлення залежностей
+</Step>
+
+<Step number={1} title="Встановлення залежностей">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +281,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Крок 2: Створення конфігурації Intlayer
+</Step>
+
+<Step number={2} title="Створення конфігурації Intlayer">
 
 Створіть `intlayer.config.ts` у корені вашого проекту:
 
@@ -262,7 +305,9 @@ export default config;
 
 ---
 
-### Крок 3: Налаштування Webpack для Storybook
+</Step>
+
+<Step number={3} title="Налаштування Webpack для Storybook">
 
 Для налаштувань Storybook на базі Webpack (наприклад, `@storybook/react-webpack5`) розширте конфігурацію webpack через `webpackFinal`, щоб додати аліаси та завантажувач Intlayer:
 
@@ -289,7 +334,9 @@ export default config;
 
 ---
 
-### Крок 4: Додавання декоратора `IntlayerProvider` та панелі інструментів локалей
+</Step>
+
+<Step number={4} title="Додавання декоратора `IntlayerProvider` та панелі інструментів локалей">
 
 Те саме, що і для Vite - додайте декоратор та глобальний тип локалі в `.storybook/preview.tsx`:
 
@@ -335,6 +382,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Оголошення вмісту
 
 Створіть файл `*.content.ts` поруч із кожним компонентом. Intlayer автоматично знайде його під час компіляції.

package/docs/uk/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Як перекласти додаток SvelteKit у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на SvelteKit багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його з використанням Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: SvelteKit i18n - Повний посібник з перекладу SvelteKit
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть SvelteKit сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація (i18n)
   - Документація
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна, відкрита бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки кількох мов у сучасних вебзастосунках. Вона безшовно працює з можливостями Server-Side Rendering (SSR) у **SvelteKit**.
+Порівняно з основними рішеннями, такими як `svelte-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка SvelteKit">
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та вміст.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів.
-- **Використовувати SSR SvelteKit** для SEO‑дружньої інтернаціоналізації.
+Intlayer оптимізовано для ідеальної роботи зі SvelteKit, пропонуючи **багатомовну маршрутизацію**, **підтримку SSR** і всі функції, необхідні для масштабування інтернаціоналізації (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>
 
 ---
 
@@ -118,7 +149,9 @@ history:
 └── vite.config.ts
 ```
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -150,7 +183,9 @@ bun x intlayer init
 - **svelte-intlayer**: Надає провайдери контексту та stores для Svelte/SvelteKit.
 - **vite-intlayer**: Плагін Vite для інтеграції декларацій контенту в процес збірки.
 
-### Крок 2: Налаштування вашого проєкту
+</Step>
+
+<Step number={2} title="Налаштування вашого проєкту">
 
 Створіть файл конфігурації в корені вашого проєкту:
 
@@ -167,7 +202,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Крок 3: Інтеграція Intlayer у вашу Vite конфігурацію
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу Vite конфігурацію">
 
 Оновіть ваш `vite.config.ts`, щоб додати плагін Intlayer. Цей плагін обробляє транспіляцію ваших файлів вмісту.
 
@@ -181,7 +218,9 @@ export default defineConfig({
 });
 ```
 
-### Крок 4: Оголосіть ваш вміст
+</Step>
+
+<Step number={4} title="Оголосіть ваш вміст">
 
 Створюйте файли декларацій контенту в будь-якому місці вашої папки `src` (наприклад, `src/lib/content` або поруч із компонентами). Ці файли визначають перекладний контент для вашого застосунку, використовуючи функцію `t()` для кожної локалі.
 
@@ -203,7 +242,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Крок 5: Використання Intlayer у ваших компонентах
+</Step>
+
+<Step number={5} title="Використання Intlayer у ваших компонентах">
 
 Тепер ви можете використовувати функцію `useIntlayer` у будь-якому Svelte-компоненті. Вона повертає реактивний store, який автоматично оновлюється при зміні локалі. Функція автоматично враховує поточну локаль (як під час SSR, так і під час навігації на боці клієнта).
 
@@ -227,7 +268,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Необов'язково) Крок 6: Налаштування маршрутизації
+</Step>
+
+<Step number={6} title="Налаштування маршрутизації" isOptional={true}>
 
 Нижче наведено кроки для налаштування маршрутизації на основі локалі в SvelteKit. Це дозволяє додавати префікс локалі до ваших URL (наприклад, `/en/about`, `/fr/about`) для кращого SEO та зручності користувача.
 
@@ -252,7 +295,9 @@ export default heroContent;
         └── +layout.svelte         # Root layout для шрифтів і глобальних стилів
 ```
 
-### Крок 7: Обробка визначення локалі на сервері (Hooks)
+</Step>
+
+<Step number={7} title="Обробка визначення локалі на сервері">
 
 У SvelteKit сервер повинен знати локаль користувача, щоб відрендерити правильний вміст під час SSR. Ми використовуємо `hooks.server.ts` для виявлення локалі з URL або cookies.
 
@@ -464,7 +509,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Необов'язково) Крок 8: Інтернаціоналізовані посилання
+</Step>
+
+<Step number={8} title="Інтернаціоналізовані посилання" isOptional={true}>
 
 Для SEO рекомендується додавати префікс локалі до маршрутів (наприклад, `/en/about`, `/fr/about`). Цей компонент автоматично додає префікс поточної локалі до будь-якого посилання.
 
@@ -497,7 +544,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Переходить на /en/about або /fr/about залежно від локалі
 ```
 
-### (Необов'язково) Крок 9: Перемикач мови
+</Step>
+
+<Step number={9} title="Перемикач мови" isOptional={true}>
 
 Щоб дозволити користувачам переключати мову, оновіть URL.
 
@@ -538,7 +587,9 @@ goto(localizedPath); // Переходить на /en/about або /fr/about з
 </style>
 ```
 
-### (Необов'язково) Крок 10: Додати backend proxy
+</Step>
+
+<Step number={10} title="Додати backend proxy" isOptional={true}>
 
 Щоб додати backend proxy до вашого застосунку SvelteKit, ви можете використати функцію `intlayerProxy`, що надається плагіном `vite-intlayer`. Цей плагін автоматично визначатиме найкращу локаль для користувача на основі URL, cookies та мовних налаштувань браузера.
 
@@ -557,7 +608,9 @@ export default defineConfig({
 });
 ```
 
-### (Необов'язково) Крок 11: Налаштування редактора intlayer / CMS
+</Step>
+
+<Step number={11} title="Налаштування редактора intlayer / CMS" isOptional={true}>
 
 Щоб налаштувати редактор intlayer, дотримуйтесь [документації редактора intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md).
 
@@ -593,7 +646,9 @@ export default defineConfig({
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -693,3 +748,7 @@ bun run build # Or bun run dev
 
 - **Visual Editor**: Інтегруйте [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md), щоб редагувати переклади безпосередньо з UI.
 - **CMS**: Виносьте керування вмістом назовні, використовуючи [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Як перекласти додаток Tanstack Start за допомогою Solid.js у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) до вашого додатка Tanstack Start за допомогою Intlayer та Solid.js. Дотримуйтесь цього вичерпного посібника, щоб зробити свій додаток багатомовним із маршрутизацією, що враховує локаль.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Повний посібник з перекладу TanStack Start
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть TanStack Start and Solid застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -37,17 +37,47 @@ history:
 
 Цей посібник демонструє, як інтегрувати **Intlayer** для безперешкодної інтернаціоналізації в проектах Tanstack Start із Solid.js, маршрутизацією з урахуванням локалі, підтримкою TypeScript та сучасними практиками розробки.
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `react-i18next` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка TanStack Start">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути та вміст**.
-- **Забезпечити підтримку TypeScript** за допомогою автоматично згенерованих типів, покращуючи автодоповнення та виявлення помилок.
-- **Користуватися розширеними функціями**, такими як динамічне визначення та перемикання локалі.
-- **Увімкнути маршрутизацію з урахуванням локалі** за допомогою файлової системи маршрутизації Tanstack Start.
+Intlayer оптимізовано для ідеальної роботи з TanStack Start і Solid, пропонуючи **багатомовну маршрутизацію**, **карту сайту** та всі функції, необхідні для масштабування інтернаціоналізації (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>
 
 ---
 
@@ -85,11 +115,15 @@ history:
 
 Перегляньте [Шаблон додатка](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) на GitHub.
 
-### Крок 1: Створення проекту
+<Steps>
+
+<Step number={1} title="Створення проекту">
 
 Спочатку створіть новий проект TanStack Start, дотримуючись посібника [Початок нового проекту](https://tanstack.com/start/latest/docs/framework/solid/quick-start) на вебсайті TanStack Start.
 
-### Крок 2: Встановлення пакетів Intlayer
+</Step>
+
+<Step number={2} title="Встановлення пакетів Intlayer">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -127,7 +161,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включає плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення (middleware) для визначення бажаної локалі користувача, керування файлами cookie та обробки перенаправлення URL-адрес.
 
-### Крок 3: Конфігурація вашого проекту
+</Step>
+
+<Step number={3} title="Конфігурація вашого проекту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
@@ -148,7 +184,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації можна налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви файлів cookie, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі тощо. Повний список доступних параметрів див. у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 4: Інтеграція Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={4} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer у вашу конфігурацію:
 
@@ -176,7 +214,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує збірку файлів декларації вмісту та моніторить їх у режимі розробки. Він визначає змінні середовища Intlayer у додатку Vite. Крім того, він надає псевдоніми (aliases) для зменшення накладних витрат на продуктивність.
 
-### Крок 5: Створення кореневого макета (Root Layout)
+</Step>
+
+<Step number={5} title="Створення кореневого макета">
 
 Налаштуйте свій кореневий макет для підтримки інтернаціоналізації, використовуючи `useParams` для визначення поточної локалі та встановлюючи атрибути `lang` і `dir` на тегу `html`.
 
@@ -217,7 +257,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Крок 6: Створення макета локалі (опціонально)
+</Step>
+
+<Step number={6} title="Створення макета локалі">
 
 Створіть макет, який обробляє префікс локалі та виконує валідацію. Цей макет гарантуватиме, що обробляються лише дійсні локалі.
 
@@ -252,7 +294,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Для режиму `'prefix-all'` ви можете віддати перевагу перемиканню слота на `$locale`.
 > Для режиму `'no-prefix'` або `'search-params'` ви можете повністю видалити цей слот.
 
-### Крок 7: Декларування вмісту
+</Step>
+
+<Step number={7} title="Декларування вмісту">
 
 Створюйте декларації вмісту та керуйте ними для зберігання перекладів:
 
@@ -298,7 +342,9 @@ export default appContent;
 
 > Докладнішу інформацію див. у [документації з декларування вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 8: Використання компонентів та хуків з урахуванням локалі
+</Step>
+
+<Step number={8} title="Використання компонентів та хуків з урахуванням локалі">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -377,7 +423,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 9: Використання Intlayer на ваших сторінках
+</Step>
+
+<Step number={9} title="Використання Intlayer на ваших сторінках">
 
 Отримуйте доступ до своїх словників вмісту в усьому додатку:
 
@@ -420,7 +468,9 @@ function RouteComponent() {
 >
 > Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/solid-intlayer/useIntlayer.md).
 
-### Крок 10: Створення компонента перемикання локалі
+</Step>
+
+<Step number={10} title="Створення компонента перемикання локалі">
 
 Створіть компонент, який дозволить користувачам змінювати мову:
 
@@ -464,7 +514,9 @@ export default LocaleSwitcher;
 >
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/solid-intlayer/useLocale.md).
 
-### Крок 11: Керування атрибутами HTML
+</Step>
+
+<Step number={11} title="Керування атрибутами HTML">
 
 Як було показано на кроці 5, ви можете керувати атрибутами `lang` і `dir` тегу `html`, використовуючи `useParams` у вашому кореневому компоненті. Це гарантує, що правильні атрибути встановлено як на сервері, так і на клієнті.
 
@@ -483,7 +535,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Крок 12: Додавання Middleware (опціонально)
+</Step>
+
+<Step number={12} title="Додавання Middleware">
 
 Ви також можете використовувати `intlayerProxy`, щоб додати маршрутизацію на стороні сервера до вашого додатка. Цей плагін автоматично визначатиме поточну локаль на основі URL-адреси та встановлюватиме відповідний файл cookie локалі. Якщо локаль не вказано, плагін визначить найбільш підходящу локаль на основі налаштувань мови браузера користувача. Якщо локаль не виявлено, він перенаправить на локаль за замовчуванням.
 
@@ -514,7 +568,9 @@ export default defineConfig({
 
 ---
 
-### Крок 13: Інтернаціоналізація ваших метаданих (опціонально)
+</Step>
+
+<Step number={13} title="Інтернаціоналізація ваших метаданих">
 
 Ви також можете використовувати функцію `getIntlayer`, щоб отримати доступ до ваших словників вмісту в завантажувачі `head` для метаданих з урахуванням локалі:
 
@@ -561,7 +617,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Крок 14: Отримання локалі у ваших діях на сервері (опціонально)
+</Step>
+
+<Step number={14} title="Отримання локалі у ваших діях на сервері">
 
 Ви можете захотіти отримати доступ до поточної локалі з ваших серверних дій (server actions) або кінцевих точок API.
 Ви можете зробити це за допомогою допоміжної функції `getLocale` з `intlayer`.
@@ -598,7 +656,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Крок 15: Керування сторінками "не знайдено" (404) (опціонально)
+</Step>
+
+<Step number={15} title="Керування сторінками &quot;не знайдено&quot; (404)" isOptional={true}>
 
 Коли користувач відвідує неіснуючу сторінку, ви можете відобразити власну сторінку "не знайдено", і префікс локалі може вплинути на те, як ця сторінка запускається.
 
@@ -672,11 +732,13 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Опціонально) Крок 16: Вилучення вмісту з ваших компонентів
+</Step>
+
+<Step number={16} title="Вилучення вмісту з ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, трансформація тисяч файлів може зайняти багато часу.
 
-Щоб полегшити цей процес, Intlayer пропонує [компілятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) / [екстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md) для трансформації ваших компонентів та вилучення вмісту.
+Щоб полегшити цей процес, Intlayer пропонує [компілятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) / [екстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md) для трансформації ваших компонентів та екстракція вмісту.
 
 Щоб налаштувати його, ви можете додати розділ `compiler` у свій файл `intlayer.config.ts`:
 
@@ -785,7 +847,9 @@ bun run build # Або bun run dev
 
 ---
 
-### Крок 17: Конфігурація TypeScript (опціонально)
+</Step>
+
+<Step number={17} title="Конфігурація TypeScript">
 
 Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги TypeScript і зміцнити вашу кодову базу.
 
@@ -816,6 +880,10 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Розширення VS Code
 
 Щоб покращити свій досвід розробки з Intlayer, ви можете встановити офіційне **розширення Intlayer VS Code**.