@intlayer/docs 8.11.2 → 8.11.3

package/docs/ru/intlayer_with_astro_solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Solid i18n - Как перевести приложение Astro + Solid в 2026 году
-description: Узнайте, как добавить интернационализацию (i18n) на ваш сайт Astro + Solid с помощью Intlayer. Следуйте этому руководству, чтобы сделать ваш сайт многоязычным.
+updatedAt: 2026-05-31
+title: Astro + Solid i18n - Полное руководство по переводу Astro + Solid
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Astro and Solid сайт многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях.
+По сравнению с основными решениями, такими как astro-i18n или i18next, Intlayer представляет собой решение со встроенными оптимизациями, такими как:
 
-С Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Astro">
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение локали и переключение языков.
+Intlayer оптимизирован для идеальной работы с Astro, предлагая **многоязычную маршрутизацию**, **карту сайта** и все функции, необходимые для масштабирования интернационализации (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:
 
 Посмотреть [Шаблон приложения](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью вашего менеджера пакетов:
 
@@ -126,7 +159,9 @@ bun x intlayer init
 - **@astrojs/solid-js**
   Официальная интеграция Astro, которая позволяет использовать острова (islands) компонентов Solid.
 
-### Шаг 2: Настройка вашего проекта
+</Step>
+
+<Step number={2} title="Настройка вашего проекта">
 
 Создайте конфигурационный файл для настройки языков вашего приложения:
 
@@ -150,7 +185,9 @@ export default config;
 
 > Через этот конфигурационный файл вы можете настроить локализованные URL, перенаправления middleware, названия куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Astro
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Astro">
 
 Добавьте плагин intlayer и интеграцию Solid в вашу конфигурацию.
 
@@ -171,7 +208,9 @@ export default defineConfig({
 
 > Интеграция `solid()` позволяет использовать острова компонентов Solid через `client:only="solid-js"`.
 
-### Шаг 4: Объявление контента
+</Step>
+
+<Step number={4} title="Объявление контента">
 
 Создавайте и управляйте объявлениями контента для хранения переводов:
 
@@ -197,7 +236,9 @@ export default appContent;
 
 > Более подробную информацию см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 5: Использование контента в Astro
+</Step>
+
+<Step number={5} title="Использование контента в Astro">
 
 Вы можете использовать словари напрямую в файлах `.astro`, используя основные хелперы, экспортируемые из `intlayer`. Вам также следует добавить SEO-метаданные, такие как hreflang и канонические ссылки, на каждую страницу и встроить остров Solid для интерактивного контента на стороне клиента.
 
@@ -277,7 +318,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** Все URL имеют префикс языка. Вы можете использовать стандартный `[locale]`, если вам не нужно обрабатывать корень отдельно.
 > - **`search-param` или `no-prefix`:** Папка локали не нужна. Локаль обрабатывается через параметры поиска или куки.
 
-### Шаг 6: Создание компонента Острова Solid
+</Step>
+
+<Step number={6} title="Создание компонента Острова Solid">
 
 Создайте компонент острова, который оборачивает ваше приложение Solid и получает локаль, определенную сервером:
 
@@ -311,7 +354,9 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > В Solid `useIntlayer` возвращает функцию **accessor** (например, `content.). Вам нужно вызвать эту функцию, чтобы получить доступ к реактивному контенту.
 
-### Шаг 7: Добавление переключателя языков
+</Step>
+
+<Step number={7} title="Добавление переключателя языков">
 
 Создайте Solid-компонент `LocaleSwitcher`, который считывает доступные локали и переходит по локализованному URL, когда пользователь выбирает новый язык:
 
@@ -362,7 +407,9 @@ export function LocaleSwitcher() {
 
 > `LocaleSwitcher` должен отрисовываться внутри `IntlayerProvider` - используйте его внутри вашего компонента острова (как показано в Шаге 6).
 
-### Шаг 8: Sitemap и Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap и Robots.txt">
 
 Intlayer предоставляет утилиты для динамического создания локализованных карт сайта и файлов robots.txt.
 
@@ -470,7 +517,9 @@ Intlayer использует расширение модулей, чтобы в
 
 ---
 
-### (Опционально) Шаг 15: Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={15} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -571,3 +620,7 @@ bun run build # Or bun run dev
 ### Дальнейшие шаги
 
 Вы также можете внедрить [визуальный редактор](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_astro_svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Svelte i18n - Как перевести приложение Astro + Svelte в 2026 году
-description: Узнайте, как добавить интернационализацию (i18n) на ваш сайт Astro + Svelte с помощью Intlayer. Следуйте этому руководству, чтобы сделать ваш сайт многоязычным.
+updatedAt: 2026-05-31
+title: Astro + Svelte i18n - Полное руководство по переводу Astro + Svelte
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Astro and Svelte сайт многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях.
+По сравнению с основными решениями, такими как astro-i18n или i18next, Intlayer представляет собой решение со встроенными оптимизациями, такими как:
 
-С Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Astro">
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение локали и переключение языков.
+Intlayer оптимизирован для идеальной работы с Astro, предлагая **многоязычную маршрутизацию**, **карту сайта** и все функции, необходимые для масштабирования интернационализации (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:
 
 Посмотреть [Шаблон приложения](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью вашего менеджера пакетов:
 
@@ -126,7 +159,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Официальная интеграция Astro, которая позволяет использовать острова (islands) компонентов Svelte.
 
-### Шаг 2: Настройка вашего проекта
+</Step>
+
+<Step number={2} title="Настройка вашего проекта">
 
 Создайте конфигурационный файл для настройки языков вашего приложения:
 
@@ -150,7 +185,9 @@ export default config;
 
 > Через этот конфигурационный файл вы можете настроить локализованные URL, перенаправления middleware, названия куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Astro
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Astro">
 
 Добавьте плагин intlayer и интеграцию Svelte в вашу конфигурацию.
 
@@ -171,7 +208,9 @@ export default defineConfig({
 
 > Интеграция `svelte()` позволяет использовать острова компонентов Svelte через `client:only="svelte"`.
 
-### Шаг 4: Объявление контента
+</Step>
+
+<Step number={4} title="Объявление контента">
 
 Создавайте и управляйте объявлениями контента для хранения переводов:
 
@@ -197,7 +236,9 @@ export default appContent;
 
 > Более подробную информацию см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 5: Использование контента в Astro
+</Step>
+
+<Step number={5} title="Использование контента в Astro">
 
 Вы можете использовать словари напрямую в файлах `.astro`, используя основные хелперы, экспортируемые из `intlayer`. Вам также следует добавить SEO-метаданные, такие как hreflang и канонические ссылки, на каждую страницу и встроить остров Svelte для интерактивного контента на стороне клиента.
 
@@ -277,7 +318,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** Все URL имеют префикс языка. Вы можете использовать стандартный `[locale]`, если вам не нужно обрабатывать корень отдельно.
 > - **`search-param` или `no-prefix`:** Папка локали не нужна. Локаль обрабатывается через параметры поиска или куки.
 
-### Шаг 6: Создание компонента Острова Svelte
+</Step>
+
+<Step number={6} title="Создание компонента Острова Svelte">
 
 Создайте компонент острова, который оборачивает ваше приложение Svelte. Функция `setupIntlayer` должна быть вызвана с локалью, определенной сервером, до обращения к любому хранилищу (store).
 
@@ -322,7 +365,9 @@ const { title } = getIntlayer("app", locale);
 
 > Проп `locale` передается со страницы Astro (определенной сервером) и используется для инициализации `setupIntlayer`, что делает её начальной локалью для всех хранилищ в компоненте.
 
-### Шаг 7: Добавление переключателя языков
+</Step>
+
+<Step number={7} title="Добавление переключателя языков">
 
 Переключатель языков встроен непосредственно в остров Svelte (показано в Шаге 6). Он использует `useLocale` из `svelte-intlayer` и переходит по локализованному URL, когда пользователь выбирает новый язык:
 
@@ -366,7 +411,9 @@ const { title } = getIntlayer("app", locale);
 > **Примечание по сохранению состояния:**
 > Использование `onLocaleChange` для перенаправления через `window.location.href` гарантирует посещение нового языкового URL, позволяя middleware Intlayer установить куки языка и запомнить предпочтение пользователя для будущих посещений.
 
-### Шаг 8: Sitemap и Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap и Robots.txt">
 
 Intlayer предоставляет утилиты для динамического создания локализованных карт сайта и файлов robots.txt.
 
@@ -474,7 +521,9 @@ Intlayer использует расширение модулей, чтобы в
 
 ---
 
-### (Опционально) Шаг 15: Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={15} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -575,3 +624,7 @@ bun run build # Or bun run dev
 ### Дальнейшие шаги
 
 Вы также можете внедрить [визуальный редактор](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_astro_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vanilla JS i18n - Как перевести приложение Astro + Vanilla JS в 2026 году
-description: Узнайте, как добавить интернационализацию (i18n) на ваш сайт Astro + Vanilla JS с помощью Intlayer. Следуйте этому руководству, чтобы сделать ваш сайт многоязычным.
+updatedAt: 2026-05-31
+title: Astro + Vanilla JS i18n - Полное руководство по переводу Astro + Vanilla JS
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Astro and Vanilla JS сайт многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях.
+По сравнению с основными решениями, такими как astro-i18n или i18next, Intlayer представляет собой решение со встроенными оптимизациями, такими как:
 
-С Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Astro">
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение локали и переключение языков.
+Intlayer оптимизирован для идеальной работы с Astro, предлагая **многоязычную маршрутизацию**, **карту сайта** и все функции, необходимые для масштабирования интернационализации (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:
 
 Посмотреть [Шаблон приложения](https://github.com/aymericzip/intlayer-astro-template) на GitHub.
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью вашего менеджера пакетов:
 
@@ -120,7 +153,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   Пакет, который интегрирует Intlayer с приложениями на чистом JavaScript / TypeScript. Он предоставляет синглтон pub/sub (`IntlayerClient`) и хелперы на основе обратных вызовов (`useIntlayer`, `useLocale` и т. д.), чтобы любая часть ваших блоков `<script>` в Astro могла реагировать на изменения языка без использования UI-фреймворка.
 
-### Шаг 2: Настройка вашего проекта
+</Step>
+
+<Step number={2} title="Настройка вашего проекта">
 
 Создайте конфигурационный файл для настройки языков вашего приложения:
 
@@ -144,7 +179,9 @@ export default config;
 
 > Через этот конфигурационный файл вы можете настроить локализованные URL, перенаправления middleware, названия куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Astro
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Astro">
 
 Добавьте плагин intlayer в вашу конфигурацию. Для Vanilla JS не требуются дополнительные интеграции UI-фреймворков.
 
@@ -162,7 +199,9 @@ export default defineConfig({
 
 > Плагин интеграции `intlayer()` используется для интеграции Intlayer с Astro. Он обеспечивает сборку файлов объявления контента и отслеживает их изменения в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Astro. Кроме того, он предоставляет псевдонимы для оптимизации производительности.
 
-### Шаг 4: Объявление контента
+</Step>
+
+<Step number={4} title="Объявление контента">
 
 Создавайте и управляйте объявлениями контента для хранения переводов:
 
@@ -200,7 +239,9 @@ export default appContent;
 
 > Более подробную информацию см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 5: Использование контента в Astro
+</Step>
+
+<Step number={5} title="Использование контента в Astro">
 
 В случае Vanilla JS вся отрисовка выполняется непосредственно в файле `.astro` с использованием `getIntlayer` для начального рендеринга на стороне сервера. Блок `<script>` затем инициализирует `vanilla-intlayer` на стороне клиента для переключения языков.
 
@@ -301,7 +342,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** Все URL имеют префикс языка. Вы можете использовать стандартный `[locale]`, если вам не нужно обрабатывать корень отдельно.
 > - **`search-param` или `no-prefix`:** Папка локали не нужна. Локаль обрабатывается через параметры поиска или куки.
 
-### Шаг 6: Добавление переключателя языков
+</Step>
+
+<Step number={6} title="Добавление переключателя языков">
 
 В случае Vanilla JS в Astro переключатель языков рендерится на стороне сервера в виде обычных ссылок и гидрируется на клиенте через блок `<script>`. Когда пользователь нажимает на ссылку языка, `vanilla-intlayer` устанавливает куки языка через `setLocale` перед переходом по локализованному URL.
 
@@ -342,7 +385,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > **Примечание по прогрессивному улучшению:**
 > Ссылки переключения языка работают как стандартные теги `<a>` даже без JavaScript. Когда JS доступен, вызов `setLocale` обновляет куки перед переходом, чтобы промежуточное ПО могло выполнить правильное перенаправление.
 
-### Шаг 7: Sitemap и Robots.txt
+</Step>
+
+<Step number={7} title="Sitemap и Robots.txt">
 
 Intlayer предоставляет утилиты для динамического создания локализованных карт сайта (sitemaps) и файлов robots.txt.
 
@@ -450,7 +495,9 @@ Intlayer использует расширение модулей, чтобы в
 
 ---
 
-### (Опционально) Шаг 15: Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={15} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -551,3 +598,7 @@ bun run build # Or bun run dev
 ### Дальнейшие шаги
 
 Вы также можете внедрить [визуальный редактор](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>