@intlayer/docs 8.11.2 → 8.11.3

package/docs/ru/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:
   - Интернационализация
   - Документация
@@ -78,7 +78,7 @@ history:
 ## Что такое Intlayer Compiler?
 
 **Intlayer Compiler** был создан, чтобы пропустить эту рутинную ручную работу. Вместо того чтобы вы извлекали строки вручную, компилятор делает это за вас. Он сканирует ваш код, находит текст и использует ИИ для генерации словарей за кулисами.
-Затем он изменяет ваш код во время сборки, чтобы внедрить необходимые хуки i18n. По сути, вы продолжаете писать свое приложение так, как если бы оно было одноязычным, а компилятор автоматически обрабатывает многоязычную трансформацию.
+Затем он изменяет ваш код во время сборки (build time), чтобы внедрить необходимые хуки i18n. По сути, вы продолжаете писать свое приложение так, как если бы оно было одноязычным, а компилятор автоматически обрабатывает многоязычную трансформацию.
 
 > Документация компилятора: [https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md)
 
@@ -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), а также промежуточное ПО для определения предпочтительной локали пользователя, управления куки и обработки перенаправления URL.
 
-### Шаг 2: Настройка вашего проекта
+</Step>
+
+<Step number={2} title="Настройка вашего проекта">
 
 Создайте конфигурационный файл для настройки языков вашего приложения:
 
@@ -183,7 +187,9 @@ export default config;
 
 > Через этот конфигурационный файл вы можете настроить локализованные URL-адреса, перенаправление middleware, имена куки, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/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/ru/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/ru/intlayer_visual_editor.md) или вынести свой контент с помощью [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/ru/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** - это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как @solid-primitives/i18n или i18next, Intlayer — это решение со встроенными оптимизациями, такими как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное твердое покрытие">
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и содержимое.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Воспользуйтесь расширенными возможностями**, такими как динамическое определение и переключение локали.
+Intlayer оптимизирован для идеальной работы с Solid, предлагая **охват контента на уровне компонентов**, **реактивные переводы** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (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="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](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), а также промежуточное ПО для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
 
-### Шаг 2: Настройка вашего проекта
+</Step>
+
+<Step number={2} title="Настройка вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -137,7 +172,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL, перенаправление в промежуточном ПО, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/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. Дополнительно предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Объявите ваш контент
+</Step>
+
+<Step number={4} title="Объявите ваш контент">
 
 Создайте и управляйте декларациями контента для хранения переводов:
 
@@ -181,7 +220,9 @@ export default appContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/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`. Эта функция позволяет установить локаль приложения и обновить контент соответственно.
 
@@ -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 при смене локали
+</Step>
+
+<Step number={8} title="Изменение URL при смене локали" isOptional={true}>
 
 Чтобы изменить URL при смене локали, вы можете использовать проп `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>`, чтобы они соответствовали текущей локали для доступности и 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.");
 Для расширения возможностей вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент во внешний [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
 
 ---
+
+</Step>
+
+</Steps>

package/docs/ru/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**, это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как «svelte-i18n» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Svelte">
 
-- **Легко управлять переводами** с помощью декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с автогенерируемыми типами, улучшая автодополнение и обнаружение ошибок.
-- **Воспользоваться расширенными возможностями**, такими как динамическое определение и переключение локали.
+Intlayer оптимизирован для идеальной работы со Svelte, предлагая **охват контента на уровне компонентов**, **реактивные переводы** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (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="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](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:
 
 Смотрите [Шаблон приложения](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](https://vite.dev/guide/why.html#why-bundle-for-production), а также middleware для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -150,7 +185,9 @@ export default config;
 
 > Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление в middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию.
 
@@ -167,7 +204,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Объявите ваш контент
+</Step>
+
+<Step number={4} title="Объявите ваш контент">
 
 Создайте и управляйте декларациями контента для хранения переводов:
 
@@ -209,7 +248,9 @@ export default appContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 5: Использование Intlayer в вашем коде
+</Step>
+
+<Step number={5} title="Использование Intlayer в вашем коде">
 
 ```svelte fileName="src/App.svelte"
 <script>
@@ -233,7 +274,9 @@ export default appContent;
 > Если ваше приложение уже существует, вы можете использовать [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) в сочетании с [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md), чтобы преобразовать тысячи компонентов за одну секунду.
 ```
 
-### (Необязательно) Шаг 6: Изменение языка вашего контента
+</Step>
+
+<Step number={6} title="Изменение языка вашего контента" isOptional={true}>
 
 ```svelte fileName="src/App.svelte"
 <script lang="ts">
@@ -262,7 +305,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.
 
@@ -283,13 +328,17 @@ Intlayer поддерживает отображение контента в ф
 
 > Вы также можете получить доступ к данным front-matter вашего markdown через свойство `content.markdownContent.metadata.xxx`.
 
-### (Необязательно) Шаг 8: Настройка редактора / CMS intlayer
+</Step>
+
+<Step number={8} title="Настройка редактора / CMS intlayer" isOptional={true}>
 
 Для настройки редактора intlayer необходимо следовать [документации редактора intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md).
 
 Для настройки CMS intlayer необходимо следовать [документации CMS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
 
-### (Необязательно) Шаг 7: Добавьте локализованную маршрутизацию в ваше приложение
+</Step>
+
+<Step number={7} title="Добавьте локализованную маршрутизацию в ваше приложение" isOptional={true}>
 
 Для обработки локализованной маршрутизации в вашем приложении на Svelte вы можете использовать `svelte-spa-router` вместе с `localeFlatMap` из Intlayer для генерации маршрутов для каждой локали.
 
@@ -394,7 +443,9 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 });
 ```
 
-### (Необязательно) Шаг 8: Изменение URL при смене локали
+</Step>
+
+<Step number={8} title="Изменение URL при смене локали" isOptional={true}>
 
 Чтобы позволить пользователям переключать языки и обновлять URL соответствующим образом, вы можете создать компонент `LocaleSwitcher`. Этот компонент будет использовать `getLocalizedUrl` из `intlayer` и `push` из `svelte-spa-router`.
 
@@ -458,7 +509,9 @@ const changeLocale = (event: Event) => {
 
 ---
 
-### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -631,3 +684,7 @@ console.log("SEO files generated successfully.");
 ### Продвинуться дальше
 
 Чтобы продвинуться дальше, вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент, используя [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
+
+</Step>
+
+</Steps>