@intlayer/docs 8.11.1 → 8.11.3

package/docs/uk/intlayer_with_vite+react_compiler.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Vite + React i18n - Перетворіть існуючий додаток на багатомовний у 2026
-description: Дізнайтеся, як зробити ваш існуючий додаток Vite та React багатомовним за допомогою Intlayer Compiler. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його за допомогою ШІ.
+updatedAt: 2026-05-31
+title: Vite + React i18n - Повний посібник з перекладу Complete
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть existing Vite and React застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -92,7 +92,9 @@ history:
 
 ## Покроковий посібник з налаштування Intlayer у додатку Vite та React
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -129,7 +131,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включає плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення для визначення бажаної мови користувача, керування файлами cookie та обробки перенаправлення URL-адрес.
 
-### Крок 2: Налаштування вашого проєкту
+</Step>
+
+<Step number={2} title="Налаштування вашого проєкту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
@@ -183,7 +187,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення проміжного програмного забезпечення, назви файлів cookie, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі тощо. Повний список доступних параметрів дивіться в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer у вашу конфігурацію.
 
@@ -202,7 +208,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayerCompiler()` використовується для витягування вмісту з компонентів і запису файлів `.content`.
 
-### Крок 4: Компіляція вашого коду
+</Step>
+
+<Step number={4} title="Компіляція вашого коду">
 
 Просто пишіть свої компоненти з жорстко закодованими рядками вашою мовою за замовчуванням. Компілятор зробить усе інше.
 
@@ -341,7 +349,9 @@ export default App;
 
 - **`IntlayerProvider`** використовується для надання локалі вкладеним компонентам.
 
-### (Опціонально) Крок 6: Зміна мови вашого вмісту
+</Step>
+
+<Step number={6} title="Зміна мови вашого вмісту" isOptional={true}>
 
 Щоб змінити мови вашого вмісту, ви можете використовувати функцію `setLocale`, яку надає хук `useLocale`. Ця функція дозволяє встановити локаль додатка та відповідним чином оновити вміст.
 
@@ -363,7 +373,9 @@ const LocaleSwitcher: FC = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md).
 
-### (Опціонально) Крок 7: Заповнити відсутні переклади
+</Step>
+
+<Step number={7} title="Заповнити відсутні переклади" isOptional={true}>
 
 Intlayer надає інструмент CLI, щоб допомогти вам заповнити відсутні переклади. Ви можете використовувати команду `intlayer` для тестування та заповнення відсутніх перекладів у вашому коді.
 
@@ -504,3 +516,7 @@ console.log("SEO files generated successfully.");
 ### Йти далі
 
 Щоб піти далі, ви можете впровадити [візуальний редактор](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).
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_vite+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Solid i18n - Як перекласти додаток Solid у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на Vite та Solid багатомовним. Слідуйте документації, щоб інтернаціоналізувати (i18n) і перекласти його.
+updatedAt: 2026-05-31
+title: Vite + Solid i18n - Повний посібник з перекладу Solid
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Vite and Solid застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -56,16 +56,47 @@ history:
 
 <!-- Див. [шаблон додатка](https://github.com/aymericzip/intlayer-solid-template) на GitHub. -->
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна, open-source бібліотека для інтернаціоналізації (i18n), створена щоб спростити підтримку багатомовності в сучасних вебзастосунках.
+Порівняно з основними рішеннями, такими як `@solid-primitives/i18n` або `i18next`, Intlayer — це рішення, яке постачається з інтегрованою оптимізацією, як-от:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повне суцільне покриття">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** з автоматично згенерованими типами, що покращують автодоповнення та виявлення помилок.
-- **Отримайте переваги розширених можливостей**, таких як динамічне виявлення мови та перемикання.
+Intlayer оптимізовано для ідеальної роботи з 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>
 
 ---
 
@@ -75,7 +106,9 @@ history:
 
 <TOC/>
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети, використовуючи npm:
 
@@ -113,7 +146,9 @@ bun x intlayer init
 - **vite-intlayer**
   Містить плагін для Vite для інтеграції Intlayer зі [збірником Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також middleware для визначення пріоритетної локалі користувача, керування cookies та обробки перенаправлень URL.
 
-### Крок 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 у вашу конфігурацію Vite
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer у вашу конфігурацію.
 
@@ -154,7 +191,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій вмісту та відстежує їх у режимі розробки. Він визначає змінні оточення Intlayer у застосунку Vite. Додатково він надає aliases для оптимізації продуктивності.
 
-### Крок 4: Оголосіть свій вміст
+</Step>
+
+<Step number={4} title="Оголосіть свій вміст">
 
 Створіть і керуйте деклараціями вмісту, щоб зберігати переклади:
 
@@ -181,7 +220,9 @@ export default appContent;
 
 > Для детальнішої інформації зверніться до [документації щодо декларації контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Отримайте доступ до ваших словників контенту в усьому додатку:
 
@@ -241,7 +282,9 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### (Необов'язково) Крок 6: Змінити мову вашого контенту
+</Step>
+
+<Step number={6} title="Змінити мову вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, ви можете використовувати функцію `setLocale`, надану хуком `useLocale`. Ця функція дозволяє вам встановити locale додатку та оновити контент відповідно.
 
@@ -270,7 +313,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Необов'язково) Крок 7: Додати локалізовану маршрутизацію до вашого додатку
+</Step>
+
+<Step number={7} title="Додати локалізовану маршрутизацію до вашого додатку" isOptional={true}>
 
 Мета цього кроку - створити унікальні маршрути для кожної мови. Це корисно для SEO та SEO-дружніх URL.
 Приклад:
@@ -335,7 +380,9 @@ const App: Component = () => (
 export default App;
 ```
 
-### (Необов'язково) Крок 8: Змінити URL при зміні locale
+</Step>
+
+<Step number={8} title="Змінити URL при зміні locale" isOptional={true}>
 
 Щоб змінити URL при зміні locale, ви можете використовувати prop `onLocaleChange`, наданий хуком `useLocale`. Ви можете використовувати хуки `useNavigate` та `useLocation` з `@solidjs/router` для оновлення шляху URL.
 
@@ -372,7 +419,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### (Необов'язково) Крок 9: Переключити атрибути мови та напрямку HTML
+</Step>
+
+<Step number={9} title="Переключити атрибути мови та напрямку HTML" isOptional={true}>
 
 Оновіть атрибути `lang` та `dir` тега `<html>`, щоб вони відповідали поточному locale для доступності та SEO.
 
@@ -395,7 +444,9 @@ const AppContent: Component = () => {
 };
 ```
 
-### (Необов'язково) Крок 10: Створення локалізованого компонента посилання
+</Step>
+
+<Step number={10} title="Створення локалізованого компонента посилання" isOptional={true}>
 
 Створіть користувацький компонент `Link`, який автоматично додає префікс внутрішніх URL поточною мовою.
 
@@ -416,7 +467,9 @@ export const Link: ParentComponent<AnchorProps> = (props) => {
 };
 ```
 
-### (Необов'язково) Крок 11: Рендеринг Markdown
+</Step>
+
+<Step number={11} title="Рендеринг Markdown" isOptional={true}>
 
 Intlayer підтримує рендеринг контенту Markdown безпосередньо у вашому додатку Solid, використовуючи власний внутрішній парсер. За замовчуванням Markdown обробляється як звичайний текст. Щоб відрендерити його як багатий HTML, обгорніть ваш додаток у `MarkdownProvider`.
 
@@ -495,7 +548,9 @@ const MyComponent = () => {
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -670,3 +725,7 @@ console.log("SEO files generated successfully.");
 Щоб піти далі, ви можете реалізувати [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або винести свій вміст, використовуючи [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_vite+svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Svelte i18n - Як перекласти додаток Svelte у 2026
-description: "Дізнайтеся, як зробити ваш вебсайт на Vite та Svelte багатомовним. Дотримуйтеся документації, щоб інтернаціоналізувати (i18n) і перекласти його."
+updatedAt: 2026-05-31
+title: Vite + Svelte i18n - Повний посібник з перекладу Svelte
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Vite and Svelte застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -62,16 +62,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це інноваційна open-source бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних вебдодатках.
+Порівняно з основними рішеннями, такими як `svelte-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка Svelte">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути й вміст.**
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автодоповнення та виявлення помилок.
-- **Скористатися розширеними можливостями**, такими як динамічне визначення та перемикання локалі.
+Intlayer оптимізовано для ідеальної роботи зі Svelte, пропонуючи **визначення вмісту на рівні компонентів**, **реактивні переклади** та всі функції, необхідні для масштабування інтернаціоналізації (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>
 
 ---
 
@@ -87,7 +118,9 @@ history:
 
 Перегляньте [Application Template](https://github.com/aymericzip/intlayer-vite-svelte-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -125,7 +158,9 @@ bun x intlayer init
 - **vite-intlayer**
   Містить плагін Vite для інтеграції Intlayer з [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), а також middleware для виявлення переважної мови користувача, керування cookies та обробки перенаправлень URL.
 
-### Крок 2: Конфігурація вашого проєкту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проєкту">
 
 Створіть конфігураційний файл для налаштування мов вашого застосунку:
 
@@ -149,7 +184,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 до вашої конфігурації.
 
@@ -166,7 +203,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-додатку. Додатково він надаєаліаси (aliases) для оптимізації продуктивності.
 
-### Крок 4: Оголосіть свій контент
+</Step>
+
+<Step number={4} title="Оголосіть свій контент">
 
 Створюйте та керуйте деклараціями контенту для зберігання перекладів:
 
@@ -210,7 +249,9 @@ export default appContent;
 
 > Для докладнішої інформації зверніться до [документації щодо декларації контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -234,7 +275,9 @@ export default appContent;
 > Якщо ваш застосунок уже існує, ви можете скористатися [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="Змініть мову вашого вмісту" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -263,7 +306,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Необов'язково) Крок 7: Відображення Markdown
+</Step>
+
+<Step number={7} title="Відображення Markdown" isOptional={true}>
 
 Intlayer підтримує рендеринг вмісту в Markdown безпосередньо у вашому Svelte-застосунку. За замовчуванням Markdown розглядається як звичайний текст. Щоб перетворити Markdown у багате HTML-представлення, ви можете інтегрувати `@humanspeak/svelte-markdown` або інший Markdown-парсер.
 
@@ -284,13 +329,17 @@ Intlayer підтримує рендеринг вмісту в Markdown безп
 
 > Ви також можете отримати доступ до даних front-matter вашого markdown за допомогою властивості `content.markdownContent.metadata.xxx`.
 
-### (Необов'язково) Крок 8: Налаштування intlayer editor / CMS
+</Step>
+
+<Step number={8} title="Налаштування intlayer editor / CMS" isOptional={true}>
 
 Щоб налаштувати intlayer editor, дотримуйтесь [документації intlayer editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md).
 
 Щоб налаштувати intlayer CMS, дотримуйтесь [документації intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
 
-### (Необов'язково) Крок 7: Додайте локалізований Routing у ваш застосунок
+</Step>
+
+<Step number={7} title="Додайте локалізований Routing у ваш застосунок" isOptional={true}>
 
 Щоб обробляти локалізовану маршрутизацію в Svelte-застосунку, ви можете використовувати `svelte-spa-router` разом з `localeFlatMap` від Intlayer для генерації маршрутів для кожної локалі.
 
@@ -399,7 +448,9 @@ export default defineConfig({
 });
 ```
 
-### (Необов'язково) Крок 8: Зміна URL при зміні локалі
+</Step>
+
+<Step number={8} title="Зміна URL при зміні локалі" isOptional={true}>
 
 Щоб дозволити користувачам змінювати мову й відповідно оновлювати URL, ви можете створити компонент `LocaleSwitcher`. Цей компонент використовуватиме `getLocalizedUrl` з `intlayer` та `push` із `svelte-spa-router`.
 
@@ -435,7 +486,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Необов'язково) Крок 9: Інтернаціоналізовані посилання
+</Step>
+
+<Step number={9} title="Інтернаціоналізовані посилання" isOptional={true}>
 
 Для SEO рекомендується додавати префікс локалі до ваших маршрутів (наприклад, `/about`, `/fr/about`).
 
@@ -484,7 +537,9 @@ const changeLocale = (event: Event) => {
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -657,3 +712,7 @@ console.log("SEO files generated successfully.");
 ### Розширені можливості
 
 Щоб рухатися далі, ви можете реалізувати [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або винести свій контент у зовнішню систему за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
+
+</Step>
+
+</Steps>