@intlayer/docs 8.11.2 → 8.12.0-canary.0

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 - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Vite + Svelte. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -62,16 +62,54 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це інноваційна open-source бібліотека для інтернаціоналізації (i18n), створена для спрощення підтримки багатомовності в сучасних вебдодатках.
+Порівняно з основними рішеннями, такими як `svelte-i18n` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути й вміст.**
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автодоповнення та виявлення помилок.
-- **Скористатися розширеними можливостями**, такими як динамічне визначення та перемикання локалі.
+<Accordion header="Повна підтримка Svelte">
+
+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 +125,9 @@ history:
 
 Перегляньте [Application Template](https://github.com/aymericzip/intlayer-vite-svelte-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -125,7 +165,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 +191,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 +210,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-додатку. Додатково він надаєаліаси (aliases) для оптимізації продуктивності.
 
-### Крок 4: Оголосіть свій контент
+</Step>
+
+<Step number={4} title="Оголосіть свій контент">
 
 Створюйте та керуйте деклараціями контенту для зберігання перекладів:
 
@@ -210,7 +256,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 +282,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 +313,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 +336,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 +455,9 @@ export default defineConfig({
 });
 ```
 
-### (Необов'язково) Крок 8: Зміна URL при зміні локалі
+</Step>
+
+<Step number={8} title="Зміна URL при зміні локалі" isOptional={true}>
 
 Щоб дозволити користувачам змінювати мову й відповідно оновлювати URL, ви можете створити компонент `LocaleSwitcher`. Цей компонент використовуватиме `getLocalizedUrl` з `intlayer` та `push` із `svelte-spa-router`.
 
@@ -435,7 +493,9 @@ const changeLocale = (event: Event) => {
 </div>
 ```
 
-### (Необов'язково) Крок 9: Інтернаціоналізовані посилання
+</Step>
+
+<Step number={9} title="Інтернаціоналізовані посилання" isOptional={true}>
 
 Для SEO рекомендується додавати префікс локалі до ваших маршрутів (наприклад, `/about`, `/fr/about`).
 
@@ -456,35 +516,9 @@ const changeLocale = (event: Event) => {
 </a>
 ```
 
-### Конфігурація Git
-
-Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх коміту до вашого Git-репозиторію.
-
-Для цього можна додати наступні інструкції до файлу `.gitignore`:
-
-```bash
-#  Ігнорувати файли, згенеровані Intlayer
-.intlayer
-```
-
-### Розширення VS Code
+</Step>
 
-Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне **Intlayer VS Code Extension**.
-
-[Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Це розширення надає:
-
-- **Автозаповнення** для ключів перекладу.
-- **Виявлення помилок у реальному часі** для відсутніх перекладів.
-- **Вбудовані попередні перегляди** перекладеного контенту.
-- **Швидкі дії** для швидкого створення й оновлення перекладів.
-
-Для детальнішої інформації про використання розширення зверніться до документації [розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -579,6 +613,37 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Конфігурація Git
+
+Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх коміту до вашого Git-репозиторію.
+
+Для цього можна додати наступні інструкції до файлу `.gitignore`:
+
+```bash
+#  Ігнорувати файли, згенеровані Intlayer
+.intlayer
+```
+
+### Розширення VS Code
+
+Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне **Intlayer VS Code Extension**.
+
+[Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Це розширення надає:
+
+- **Автозаповнення** для ключів перекладу.
+- **Виявлення помилок у реальному часі** для відсутніх перекладів.
+- **Вбудовані попередні перегляди** перекладеного контенту.
+- **Швидкі дії** для швидкого створення й оновлення перекладів.
+
+Для детальнішої інформації про використання розширення зверніться до документації [розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
 
 ### (Опційно) Sitemap і robots.txt (генерація під час збірки)
 

package/docs/uk/intlayer_with_vite+vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Vanilla JS - Як перекласти додаток Vanilla JS у 2026 році
-description: Дізнайтеся, як зробити свій веб-сайт Vite та Vanilla JS багатомовним. Дотримуйтесь документації щодо інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: "Vite + Vanilla JS i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Vite + Vanilla JS. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -58,22 +58,62 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатомовності в сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `i18next` або `i18n.js`, Intlayer — це рішення, яке поставляється з інтегрованою оптимізацією, як-от:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та вміст.
-- **Забезпечити підтримку TypeScript** за допомогою автоматично згенерованих типів, що покращує автодоповнення та виявлення помилок.
-- **Використовувати розширені функції**, такі як динамічне визначення та перемикання мови.
+<Accordion header="Повна підтримка Vite">
+
+Intlayer оптимізовано для ідеальної роботи з Vite, пропонуючи **незалежне від фреймворку керування вмістом**, **підтримку TypeScript** і всі функції, необхідні для масштабування інтернаціоналізації (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 у додатку Vite та Vanilla JS
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -110,7 +150,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включає плагін Vite для інтеграції Intlayer із [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення (middleware) для визначення мови користувача, керування файлами cookie та обробки перенаправлень URL-адрес.
 
-### Крок 2: Конфігурація вашого проекту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проекту">
 
 Створіть конфігураційний файл для налаштування мов вашого додатка:
 
@@ -134,7 +176,9 @@ export default config;
 
 > Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, перенаправлення проміжного ПЗ, назви файлів 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 до вашої конфігурації.
 
@@ -150,7 +194,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer із Vite. Він забезпечує побудову файлів декларації вмісту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у додатку Vite. Крім того, він надає псевдоніми (aliases) для оптимізації продуктивності.
 
-### Крок 4: Запустіть Intlayer у вашій точці входу
+</Step>
+
+<Step number={4} title="Запустіть Intlayer у вашій точці входу">
 
 Викличте `installIntlayer()` **перед** візуалізацією будь-якого вмісту, щоб глобальний синглтон локалі був готовий.
 
@@ -175,7 +221,9 @@ installIntlayerMarkdown();
 import "./app.js";
 ```
 
-### Крок 5: Декларуйте ваш контент
+</Step>
+
+<Step number={5} title="Декларуйте ваш контент">
 
 Створюйте та керуйте деклараціями вмісту для зберігання перекладів:
 
@@ -253,7 +301,9 @@ export default appContent;
 >
 > Докладніше див. у [документації з декларації вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 6: Використовуйте Intlayer у вашому JavaScript
+</Step>
+
+<Step number={6} title="Використовуйте Intlayer у вашому JavaScript">
 
 `vanilla-intlayer` відображає API поверхні `react-intlayer`: `useIntlayer(key, locale?)` повертає перекладений вміст безпосередньо. Приєднайте `.onChange()` до результату, щоб підписатися на зміни локалі - явний еквівалент перерендерингу в React.
 
@@ -289,7 +339,9 @@ document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Необов’язково) Крок 7: Змініть мову вашого вмісту
+</Step>
+
+<Step number={7} title="Змініть мову вашого вмісту" isOptional={true}>
 
 Щоб змінити мову вмісту, використовуйте функцію `setLocale`, надану `useLocale`.
 
@@ -324,7 +376,9 @@ export function setupLocaleSwitcher(container: HTMLElement): () => void {
 }
 ```
 
-### (Необов’язково) Крок 8: Рендеринг вмісту Markdown та HTML
+</Step>
+
+<Step number={8} title="Рендеринг вмісту Markdown та HTML" isOptional={true}>
 
 Intlayer підтримує декларації вмісту `md()` та `html()`. У чистому JS скомпільований вихідний код вставляється як необроблений HTML через `innerHTML`.
 
@@ -383,7 +437,9 @@ document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
 > });
 > ```
 
-### (Необов’язково) Крок 9: Додайте локалізовану маршрутизацію (Localized Routing) до свого додатка
+</Step>
+
+<Step number={9} title="Додайте локалізовану маршрутизацію (Localized Routing) до свого додатка" isOptional={true}>
 
 Щоб створити унікальні маршрути для кожної мови (корисно для SEO), ви можете використовувати `intlayerProxy` у вашій конфігурації Vite для визначення локалі на стороні сервера.
 
@@ -403,7 +459,9 @@ export default defineConfig({
 });
 ```
 
-### (Необов’язково) Крок 10: Зміна URL при зміні локалі
+</Step>
+
+<Step number={10} title="Зміна URL при зміні локалі" isOptional={true}>
 
 Щоб оновити URL браузера при зміні локалі, викличте `useRewriteURL()` після встановлення Intlayer:
 
@@ -417,7 +475,9 @@ installIntlayer();
 const stopRewriteURL = useRewriteURL();
 ```
 
-### (Необов’язково) Крок 11: Перемикання атрибутів мови та напрямку HTML
+</Step>
+
+<Step number={11} title="Перемикання атрибутів мови та напрямку HTML" isOptional={true}>
 
 Оновлюйте атрибути `lang` та `dir` тегу `<html>` відповідно до поточної локалі для підтримки доступності та SEO.
 
@@ -435,7 +495,9 @@ useLocale({
 });
 ```
 
-### (Необов’язково) Крок 12: Ліниве завантаження словників за локалями
+</Step>
+
+<Step number={12} title="Ліниве завантаження словників за локалями" isOptional={true}>
 
 Для великих додатків ви можете розділити словник кожної локалі на власний фрагмент (chunk). Використовуйте `useDictionaryDynamic` разом із динамічним `import()` від Vite:
 
@@ -458,11 +520,13 @@ const unsubscribe = useDictionaryDynamic(
 
 > Пакет кожної локалі завантажується лише тоді, коли ця локаль стає активною, а результат кешується - наступні перемикання на ту саму локаль відбуваються миттєво.
 
-### (Необов’язково) Крок 13: Отримайте вміст ваших компонентів (Extract)
+</Step>
+
+<Step number={13} 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`:
 
@@ -554,6 +618,9 @@ bun run build # Або bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### (Опційно) Sitemap і robots.txt (генерація під час збірки)