@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ru/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Как перевести приложение SvelteKit в 2026
-description: Узнайте, как сделать ваш сайт на SvelteKit многоязычным. Следуйте документации по интернационализации (i18n) и переводу с использованием серверного рендеринга (SSR).
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения SvelteKit. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer**, это инновационная, с открытым исходным кодом библиотека интернационализации (i18n), разработанная для упрощения поддержки многоязычности в современных веб-приложениях. Она отлично интегрируется с возможностями серверного рендеринга (SSR) в **SvelteKit**.
+По сравнению с основными решениями, такими как «svelte-i18n» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов.
-- **Использовать SSR SvelteKit** для SEO-оптимизированной интернационализации.
+<Accordion header="Полное покрытие SvelteKit">
+
+Intlayer оптимизирован для идеальной работы со SvelteKit, предлагая **многоязычную маршрутизацию**, **поддержку SSR** и все функции, необходимые для масштабирования интернационализации (i18n).
+
+</Accordion>
+
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, 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>
 
 ---
 
@@ -116,7 +154,9 @@ history:
 └── vite.config.ts
 ```
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -148,7 +188,9 @@ bun x intlayer init
 - **svelte-intlayer**: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
 - **vite-intlayer**: Плагин Vite для интеграции деклараций контента в процесс сборки.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации в корне вашего проекта:
 
@@ -165,7 +207,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Vite">
 
 Обновите ваш файл `vite.config.ts`, чтобы включить плагин Intlayer. Этот плагин отвечает за транспиляцию ваших файлов с контентом.
 
@@ -179,7 +223,9 @@ export default defineConfig({
 });
 ```
 
-### Шаг 4: Объявите ваш контент
+</Step>
+
+<Step number={4} title="Объявите ваш контент">
 
 Создайте файлы объявления контента в любом месте внутри папки `src` (например, `src/lib/content` или рядом с вашими компонентами). Эти файлы определяют переводимый контент для вашего приложения с использованием функции `t()` для каждой локали.
 
@@ -200,13 +246,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Шаг 5: Используйте Intlayer в ваших компонентах
+</Step>
+
+<Step number={5} title="Используйте Intlayer в ваших компонентах">
 
 Теперь вы можете использовать функцию `useIntlayer` в любом Svelte-компоненте. Она возвращает реактивный store, который автоматически обновляется при изменении локали. Функция автоматически учитывает текущую локаль (как во время SSR, так и при навигации на клиенте).
 
 > **Примечание:** `useIntlayer` возвращает Svelte store, поэтому для доступа к его реактивному значению нужно использовать префикс `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Как перевести ваше приложение SvelteKit – руководство по i18n 2026
 > description: Узнайте, как сделать ваш сайт на SvelteKit многоязычным. Следуйте документации по интернационализации (i18n) и переводу с использованием серверного рендеринга (SSR).
 > keywords:
@@ -231,6 +279,10 @@ export default heroContent;
 
 # Перевод вашего сайта на SvelteKit с помощью Intlayer | Интернационализация (i18n)
 
+</Step>
+
+</Steps>
+
 ## Содержание
 
 <TOC/>
@@ -292,7 +344,9 @@ export default heroContent;
 └── vite.config.ts
 ```
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -324,7 +378,9 @@ bun x intlayer init
 - **svelte-intlayer**: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
 - **vite-intlayer**: Плагин Vite для интеграции деклараций контента в процесс сборки.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации в корне вашего проекта:
 
@@ -341,7 +397,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Vite
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Vite">
 
 Обновите ваш файл `vite.config.ts`, чтобы включить плагин Intlayer. Этот плагин отвечает за транспиляцию ваших файлов с контентом.
 
@@ -355,7 +413,9 @@ export default defineConfig({
 });
 ```
 
-### Шаг 4: Объявите ваш контент
+</Step>
+
+<Step number={4} title="Объявите ваш контент">
 
 Создайте файлы объявления контента в любом месте внутри папки `src` (например, `src/lib/content` или рядом с вашими компонентами). Эти файлы определяют переводимый контент для вашего приложения с использованием функции `t()` для каждой локали.
 
@@ -376,7 +436,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Шаг 5: Используйте Intlayer в ваших компонентах
+</Step>
+
+<Step number={5} title="Используйте Intlayer в ваших компонентах">
 
 (например, `$content.title`).
 
@@ -398,7 +460,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Необязательно) Шаг 6: Настройка маршрутизации
+</Step>
+
+<Step number={6} title="Настройка маршрутизации" isOptional={true}>
 
 Следующие шаги показывают, как настроить маршрутизацию на основе локали в SvelteKit. Это позволяет вашим URL включать префикс локали (например, `/en/about`, `/fr/about`) для улучшения SEO и удобства пользователей.
 
@@ -423,7 +487,9 @@ export default heroContent;
         └── +layout.svelte         # Корневой layout для шрифтов и глобальных стилей
 ```
 
-### Шаг 7: Обработка определения локали на стороне сервера (Hooks)
+</Step>
+
+<Step number={7} title="Обработка определения локали на стороне сервера">
 
 В SvelteKit сервер должен знать локаль пользователя, чтобы отобразить правильный контент во время SSR. Мы используем `hooks.server.ts` для определения локали из URL или cookies.
 
@@ -635,7 +701,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Необязательно) Шаг 8: Интернационализированные ссылки
+</Step>
+
+<Step number={8} title="Интернационализированные ссылки" isOptional={true}>
 
 Для SEO рекомендуется добавлять префикс локали к вашим маршрутам (например, `/en/about`, `/fr/about`). Этот компонент автоматически добавляет префикс текущей локали ко всем ссылкам.
 
@@ -668,7 +736,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Переходит на /en/about или /fr/about в зависимости от локали
 ```
 
-### (Необязательно) Шаг 9: Переключатель языка
+</Step>
+
+<Step number={9} title="Переключатель языка" isOptional={true}>
 
 Чтобы позволить пользователям переключать языки, обновляйте URL.
 
@@ -709,7 +779,9 @@ goto(localizedPath); // Переходит на /en/about или /fr/about в з
 </style>
 ```
 
-### (Необязательно) Шаг 10: Добавить backend proxy
+</Step>
+
+<Step number={10} title="Добавить backend proxy" isOptional={true}>
 
 Чтобы добавить backend proxy в ваше приложение SvelteKit, вы можете использовать функцию `intlayerProxy`, предоставляемую плагином `vite-intlayer`. Этот плагин автоматически определит лучшую локаль для пользователя на основе URL, cookies и предпочтений языка браузера.
 
@@ -728,7 +800,9 @@ export default defineConfig({
 });
 ```
 
-### (Необязательно) Шаг 11: Настройка редактора / CMS intlayer
+</Step>
+
+<Step number={11} title="Настройка редактора / CMS intlayer" isOptional={true}>
 
 Для настройки редактора intlayer необходимо следовать [документации редактора intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md).
 
@@ -753,18 +827,9 @@ export default defineConfig({
 </div>
 ```
 
-### Конфигурация Git
+</Step>
 
-Рекомендуется игнорировать файлы, сгенерированные Intlayer.
-
-```plaintext fileName=".gitignore"
-# Игнорировать файлы, сгенерированные Intlayer
-.intlayer
-```
-
----
-
-### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов
+<Step number={1} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -859,6 +924,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Конфигурация Git
+
+Рекомендуется игнорировать файлы, сгенерированные Intlayer.
+
+```plaintext fileName=".gitignore"
+# Игнорировать файлы, сгенерированные Intlayer
+.intlayer
+```
+
+---
 
 ### Дальнейшие шаги
 

package/docs/ru/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Как перевести приложение Tanstack Start с использованием Solid.js в 2026 году
-description: Узнайте, как добавить интернационализацию (i18n) в ваше приложение Tanstack Start с помощью Intlayer и Solid.js. Следуйте этому подробному руководству, чтобы сделать ваше приложение многоязычным с маршрутизацией, учитывающей локаль.
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения TanStack Start + Solid. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -38,17 +38,54 @@ history:
 
 Это руководство демонстрирует, как интегрировать **Intlayer** для бесшовной интернационализации в проектах Tanstack Start с Solid.js, маршрутизацией с учетом локали, поддержкой TypeScript и современными практиками разработки.
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях.
+По сравнению с основными решениями, такими как «react-i18next» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автоматически генерируемых типов, что улучшает автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение и переключение локали.
-- **Включить маршрутизацию с учетом локали** с помощью файловой системы маршрутизации Tanstack Start.
+<Accordion header="Полное покрытие TanStack Start">
+
+Intlayer оптимизирован для идеальной работы с TanStack Start и 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>
 
 ---
 
@@ -86,11 +123,15 @@ history:
 
 См. [Шаблон приложения](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) на GitHub.
 
-### Шаг 1: Создание проекта
+<Steps>
+
+<Step number={1} title="Создание проекта">
 
 Начните с создания нового проекта TanStack Start, следуя руководству [Запуск нового проекта](https://tanstack.com/start/latest/docs/framework/solid/quick-start) на сайте TanStack Start.
 
-### Шаг 2: Установка пакетов Intlayer
+</Step>
+
+<Step number={2} title="Установка пакетов Intlayer">
 
 Установите необходимые пакеты с помощью вашего любимого менеджера пакетов:
 
@@ -128,7 +169,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО (middleware) для определения предпочтительной локали пользователя, управления куки и обработки перенаправлений URL.
 
-### Шаг 3: Конфигурация вашего проекта
+</Step>
+
+<Step number={3} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -149,7 +192,9 @@ export default config;
 
 > Через этот файл конфигурации вы можете настроить локализованные URL-адреса, перенаправление middleware, имена куки, местоположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 4: Интеграция Intlayer в конфигурацию Vite
+</Step>
+
+<Step number={4} title="Интеграция Intlayer в конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию:
 
@@ -177,7 +222,9 @@ export default defineConfig({
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов декларации контента и отслеживает их изменения в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, он предоставляет псевдонимы (aliases) для оптимизации производительности.
 
-### Шаг 5: Создание корневого макета (Root Layout)
+</Step>
+
+<Step number={5} title="Создание корневого макета">
 
 Настройте ваш корневой макет для поддержки интернационализации, используя `useParams` для определения текущей локали и устанавливая атрибуты `lang` и `dir` для тега `html`.
 
@@ -218,7 +265,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Шаг 6: Создание макета локали (необязательно)
+</Step>
+
+<Step number={6} title="Создание макета локали">
 
 Создайте макет, который обрабатывает префикс локали и выполняет валидацию. Этот макет гарантирует, что будут обрабатываться только допустимые локали.
 
@@ -253,7 +302,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Для режима `'prefix-all'` вы можете предпочесть заменить сегмент на `$locale`.
 > Для режима `'no-prefix'` или `'search-params'` вы можете полностью удалить сегмент.
 
-### Шаг 7: Декларация вашего контента
+</Step>
+
+<Step number={7} title="Декларация вашего контента">
 
 Создавайте и управляйте декларациями контента для хранения переводов:
 
@@ -299,7 +350,9 @@ export default appContent;
 
 > Подробнее см. в [документации по декларации контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 8: Использование локально-зависимых компонентов и хуков
+</Step>
+
+<Step number={8} title="Использование локально-зависимых компонентов и хуков">
 
 Создайте компонент `LocalizedLink` для навигации с учетом локали:
 
@@ -378,7 +431,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Шаг 9: Использование Intlayer на ваших страницах
+</Step>
+
+<Step number={9} title="Использование Intlayer на ваших страницах">
 
 Получайте доступ к вашим словарям контента во всем приложении:
 
@@ -421,7 +476,9 @@ function RouteComponent() {
 >
 > Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/solid-intlayer/useIntlayer.md).
 
-### Шаг 10: Создание компонента переключения локали
+</Step>
+
+<Step number={10} title="Создание компонента переключения локали">
 
 Создайте компонент, позволяющий пользователям менять языки:
 
@@ -465,7 +522,9 @@ export default LocaleSwitcher;
 >
 > Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/solid-intlayer/useLocale.md).
 
-### Шаг 11: Управление HTML-атрибутами
+</Step>
+
+<Step number={11} title="Управление HTML-атрибутами">
 
 Как показано на шаге 5, вы можете управлять атрибутами `lang` и `dir` тега `html`, используя `useParams` в вашем корневом компоненте. Это гарантирует правильную установку атрибутов как на сервере, так и на клиенте.
 
@@ -484,7 +543,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Шаг 12: Добавление промежуточного ПО (необязательно)
+</Step>
+
+<Step number={12} title="Добавление промежуточного ПО">
 
 Вы также можете использовать `intlayerProxy` для добавления серверной маршрутизации в ваше приложение. Этот плагин будет автоматически определять текущую локаль на основе URL и устанавливать соответствующую локаль в куки. Если локаль не указана, плагин будет определять наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не обнаружена, произойдет перенаправление на локаль по умолчанию.
 
@@ -515,7 +576,9 @@ export default defineConfig({
 
 ---
 
-### Шаг 13: Интернационализация ваших метаданных (необязательно)
+</Step>
+
+<Step number={13} title="Интернационализация ваших метаданных">
 
 Вы также можете использовать функцию `getIntlayer` для доступа к вашим словарям контента внутри загрузчика `head` для метаданных с учетом локали:
 
@@ -562,7 +625,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Шаг 13: Получение локали в ваших серверных действиях (необязательно)
+</Step>
+
+<Step number={13} title="Получение локали в ваших серверных действиях">
 
 Возможно, вы захотите получить доступ к текущей локали внутри ваших серверных действий (server actions) или конечных точек API.
 Вы можете сделать это с помощью помощника `getLocale` из `intlayer`.
@@ -599,7 +664,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Шаг 14: Управление страницами 404 (необязательно)
+</Step>
+
+<Step number={14} title="Управление страницами 404">
 
 Когда пользователь посещает несуществующую страницу, вы можете отобразить кастомную страницу 404. Префикс локали может влиять на то, как срабатывает страница "Запрашиваемый ресурс не найден".
 
@@ -673,7 +740,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Необязательно) Шаг 15: Извлечение контента из ваших компонентов
+</Step>
+
+<Step number={15} title="Извлечение контента из ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, трансформация тысяч файлов может занять много времени.
 
@@ -786,7 +855,9 @@ bun run build # Или bun run dev
 
 ---
 
-### Шаг 16: Генерация карты сайта (Sitemap) (опционально)
+</Step>
+
+<Step number={16} title="Генерация карты сайта (Sitemap)" isOptional={true}>
 
 Intlayer поставляется со встроенным генератором карты сайта, который поможет вам легко создать карту сайта для вашего приложения. Он учитывает локализованные маршруты и добавляет необходимые метаданные для поисковых систем.
 
@@ -859,7 +930,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Шаг 17: Настройка TypeScript (необязательно)
+</Step>
+
+<Step number={17} title="Настройка TypeScript">
 
 Intlayer использует расширение модулей (module augmentation), чтобы задействовать преимущества TypeScript и сделать вашу кодовую базу более надежной.
 
@@ -877,6 +950,10 @@ Intlayer использует расширение модулей (module augmen
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Конфигурация Git
 
 Рекомендуется игнорировать файлы, генерируемые Intlayer. Это позволит избежать их коммита в ваш Git-репозиторий.