@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/uk/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-12-07
-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:
   - Інтернаціоналізація
   - Документація
@@ -47,17 +47,54 @@ 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>
 
 ---
 
@@ -95,7 +132,9 @@ history:
 
 Дивіться [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети, використовуючи обраний менеджер пакетів:
 
@@ -132,7 +171,9 @@ bun x intlayer init
 - **@react-router/fs-routes**
   Пакет, який дозволяє маршрутизацію на основі файлової системи для React Router v7.
 
-### Крок 2: Конфігурація вашого проєкту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації для налаштування мов вашого застосунку:
 
@@ -151,7 +192,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення в middleware, назви 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 до вашої конфігурації:
 
@@ -167,7 +210,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та їх моніторинг у режимі розробки. Він визначає змінні середовища Intlayer у Vite-застосунку. Крім того, він додає аліаси для оптимізації продуктивності.
 
-### Крок 4: Налаштування файлових маршрутів React Router v7
+</Step>
+
+<Step number={4} title="Налаштування файлових маршрутів React Router v7">
 
 Налаштуйте конфігурацію маршрутизації для використання файлової маршрутизації за допомогою `flatRoutes`:
 
@@ -188,7 +233,9 @@ export default routes;
 
 > Функція `flatRoutes` з `@react-router/fs-routes` дозволяє використовувати маршрутизацію на основі файлової системи, де структура файлів у директорії `routes/` визначає маршрути вашого застосунку. Опція `ignoredRouteFiles` гарантує, що файли декларації контенту Intlayer (наприклад, `.content.ts` тощо) не розглядатимуться як файли маршрутів.
 
-### Крок 5: Створіть файли маршрутів за конвенціями файлової системи
+</Step>
+
+<Step number={5} title="Створіть файли маршрутів за конвенціями файлової системи">
 
 При маршрутизації на основі файлової системи використовується плоска конвенція іменування, де крапки (`.`) позначають сегменти шляху, а дужки `()`, необов'язкові сегменти.
 
@@ -357,7 +404,9 @@ export default function AboutPage() {
 
 > Якщо ваш застосунок уже існує, ви можете скористатися [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), щоб перетворити тисячі компонентів за одну секунду.
 
-### Крок 6: Оголосіть свій контент
+</Step>
+
+<Step number={6} title="Оголосіть свій контент">
 
 Створюйте та керуйте деклараціями контенту для зберігання перекладів. Розміщуйте файли контенту поруч із файлами маршрутів:
 
@@ -426,7 +475,9 @@ export default aboutContent;
 
 > Для детальнішої інформації див. [документацію щодо декларацій контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 7: Створіть локалізовані компоненти
+</Step>
+
+<Step number={7} title="Створіть локалізовані компоненти">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -487,7 +538,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 8: Створіть компонент перемикача локалі
+</Step>
+
+<Step number={8} title="Створіть компонент перемикача локалі">
 
 Створіть компонент, який дозволить користувачам змінювати мову:
 
@@ -548,7 +601,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
-### Крок 9: Додати керування атрибутами HTML (необов'язково)
+</Step>
+
+<Step number={9} title="Додати керування атрибутами HTML">
 
 Створіть хук для керування атрибутами lang та dir у HTML:
 
@@ -569,7 +624,9 @@ export const useI18nHTMLAttributes = () => {
 
 Цей хук уже використовується в компоненті макета (`($locale)._layout.tsx`), показаному в кроці 5.
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -667,6 +724,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.
@@ -733,7 +794,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 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### Крок 10: Додати middleware (необов'язково)
+<Steps>
+
+<Step number={10} title="Додати middleware">
 
 Ви також можете використовувати `intlayerProxy` для додавання server-side routing до вашого додатка. Цей плагін автоматично визначатиме поточну локаль за URL і встановлюватиме відповідний cookie локалі. Якщо локаль явно не вказана, плагін підбере найвідповіднішу локаль на основі мовних налаштувань браузера користувача. Якщо локаль не буде виявлена, він перенаправить на локаль за замовчуванням.
 
@@ -756,6 +819,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Налаштування TypeScript
 
 Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги TypeScript і зробити вашу codebase більш стійкою.

package/docs/uk/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Як налаштувати Intlayer зі Storybook
-description: Дізнайтеся, як зробити вашу систему дизайну багатомовною за допомогою Intlayer та Storybook - компілюйте декларації вмісту, додавайте перемикач локалей та переглядайте свої компоненти будь-якою мовою.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Storybook. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -31,16 +31,54 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим кодом, розроблена для спрощення багатомовної підтримки в сучасних веб-додатках. Вона працює на **рівні компонентів** - кожен компонент має власні декларації вмісту - що дозволяє зберігати переклади разом із кодом, який їх використовує.
+Порівняно з основними рішеннями, такими як `storybook-react-i18next` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Керувати перекладами декларативно** за допомогою файлів вмісту для кожного компонента.
-- **Отримувати повну підтримку TypeScript** завдяки автоматично згенерованим типам та автодоповненню в IDE.
-- **Перемикати локалі під час виконання** без перезавантаження сторінки.
-- **Перекладати автоматично** за допомогою вбудованих інтеграцій з AI-провайдерами.
+<Accordion header="Повне висвітлення книги оповідань">
+
+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 +97,9 @@ Storybook - це галузевий стандартний інструмент
 <Tabs>
 <Tab value="Vite Setup">
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Крок 2: Створення конфігурації Intlayer
+</Step>
+
+<Step number={2} title="Створення конфігурації Intlayer">
 
 Створіть `intlayer.config.ts` у корені вашого проекту (або всередині пакету вашої дизайн-системи):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Крок 3: Додавання плагіна Vite до Storybook
+</Step>
+
+<Step number={3} title="Додавання плагіна Vite до Storybook">
 
 Хук `viteFinal` у Storybook дозволяє розширити внутрішню конфігурацію Vite. Імпортуйте та додайте плагін `intlayer()` туди:
 
@@ -159,7 +203,9 @@ export default config;
 
 ---
 
-### Крок 4: Додавання декоратора `IntlayerProvider` та панелі інструментів локалей
+</Step>
+
+<Step number={4} title="Додавання декоратора `IntlayerProvider` та панелі інструментів локалей">
 
 Файл `preview` у Storybook - це ідеальне місце, щоб обгорнути кожну історію в `IntlayerProvider` та додати перемикач локалей на панель інструментів:
 
@@ -216,7 +262,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 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Крок 2: Створення конфігурації Intlayer
+</Step>
+
+<Step number={2} title="Створення конфігурації Intlayer">
 
 Створіть `intlayer.config.ts` у корені вашого проекту:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Крок 3: Налаштування Webpack для Storybook
+</Step>
+
+<Step number={3} title="Налаштування Webpack для Storybook">
 
 Для налаштувань Storybook на базі Webpack (наприклад, `@storybook/react-webpack5`) розширте конфігурацію webpack через `webpackFinal`, щоб додати аліаси та завантажувач Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Крок 4: Додавання декоратора `IntlayerProvider` та панелі інструментів локалей
+</Step>
+
+<Step number={4} title="Додавання декоратора `IntlayerProvider` та панелі інструментів локалей">
 
 Те саме, що і для Vite - додайте декоратор та глобальний тип локалі в `.storybook/preview.tsx`:
 
@@ -335,6 +389,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 - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку SvelteKit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація (i18n)
   - Документація
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна, відкрита бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки кількох мов у сучасних вебзастосунках. Вона безшовно працює з можливостями Server-Side Rendering (SSR) у **SvelteKit**.
+Порівняно з основними рішеннями, такими як `svelte-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та вміст.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів.
-- **Використовувати SSR SvelteKit** для SEO‑дружньої інтернаціоналізації.
+<Accordion header="Повна підтримка SvelteKit">
+
+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 +156,9 @@ history:
 └── vite.config.ts
 ```
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -150,7 +190,9 @@ bun x intlayer init
 - **svelte-intlayer**: Надає провайдери контексту та stores для Svelte/SvelteKit.
 - **vite-intlayer**: Плагін Vite для інтеграції декларацій контенту в процес збірки.
 
-### Крок 2: Налаштування вашого проєкту
+</Step>
+
+<Step number={2} title="Налаштування вашого проєкту">
 
 Створіть файл конфігурації в корені вашого проєкту:
 
@@ -167,7 +209,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Крок 3: Інтеграція Intlayer у вашу Vite конфігурацію
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу Vite конфігурацію">
 
 Оновіть ваш `vite.config.ts`, щоб додати плагін Intlayer. Цей плагін обробляє транспіляцію ваших файлів вмісту.
 
@@ -181,7 +225,9 @@ export default defineConfig({
 });
 ```
 
-### Крок 4: Оголосіть ваш вміст
+</Step>
+
+<Step number={4} title="Оголосіть ваш вміст">
 
 Створюйте файли декларацій контенту в будь-якому місці вашої папки `src` (наприклад, `src/lib/content` або поруч із компонентами). Ці файли визначають перекладний контент для вашого застосунку, використовуючи функцію `t()` для кожної локалі.
 
@@ -203,7 +249,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Крок 5: Використання Intlayer у ваших компонентах
+</Step>
+
+<Step number={5} title="Використання Intlayer у ваших компонентах">
 
 Тепер ви можете використовувати функцію `useIntlayer` у будь-якому Svelte-компоненті. Вона повертає реактивний store, який автоматично оновлюється при зміні локалі. Функція автоматично враховує поточну локаль (як під час SSR, так і під час навігації на боці клієнта).
 
@@ -227,7 +275,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 +302,9 @@ export default heroContent;
         └── +layout.svelte         # Root layout для шрифтів і глобальних стилів
 ```
 
-### Крок 7: Обробка визначення локалі на сервері (Hooks)
+</Step>
+
+<Step number={7} title="Обробка визначення локалі на сервері">
 
 У SvelteKit сервер повинен знати локаль користувача, щоб відрендерити правильний вміст під час SSR. Ми використовуємо `hooks.server.ts` для виявлення локалі з URL або cookies.
 
@@ -464,7 +516,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Необов'язково) Крок 8: Інтернаціоналізовані посилання
+</Step>
+
+<Step number={8} title="Інтернаціоналізовані посилання" isOptional={true}>
 
 Для SEO рекомендується додавати префікс локалі до маршрутів (наприклад, `/en/about`, `/fr/about`). Цей компонент автоматично додає префікс поточної локалі до будь-якого посилання.
 
@@ -497,7 +551,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Переходить на /en/about або /fr/about залежно від локалі
 ```
 
-### (Необов'язково) Крок 9: Перемикач мови
+</Step>
+
+<Step number={9} title="Перемикач мови" isOptional={true}>
 
 Щоб дозволити користувачам переключати мову, оновіть URL.
 
@@ -538,7 +594,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 +615,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).
 
@@ -582,18 +642,9 @@ export default defineConfig({
 </div>
 ```
 
-### Налаштування Git
-
-Рекомендується ігнорувати файли, згенеровані Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ігнорувати файли, згенеровані Intlayer
-.intlayer
-```
-
----
+</Step>
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -688,6 +739,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Налаштування Git
+
+Рекомендується ігнорувати файли, згенеровані Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ігнорувати файли, згенеровані Intlayer
+.intlayer
+```
+
+---
 
 ### Далі