@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ru/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Как перевести приложение Tanstack Start в 2026
-description: Узнайте, как добавить интернационализацию (i18n) в ваше приложение Tanstack Start с помощью Intlayer. Следуйте этому подробному руководству, чтобы сделать ваше приложение многоязычным с маршрутизацией, учитывающей локаль.
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения TanStack Start. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -55,17 +55,54 @@ history:
 
 Это руководство демонстрирует, как интегрировать **Intlayer** для бесшовной интернационализации в проектах Tanstack Start с маршрутизацией, учитывающей локаль, поддержкой TypeScript и современными практиками разработки.
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer**, это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+По сравнению с основными решениями, такими как «react-i18next», «use-intl» или «paraglide», Intlayer — это решение со встроенными оптимизациями, такими как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Воспользоваться расширенными функциями**, такими как динамическое определение и переключение локали.
-- **Включите маршрутизацию с учетом локали** с помощью файловой системы маршрутизации Tanstack Start.
+<Accordion header="Полное покрытие TanStack Start">
+
+Intlayer полностью оптимизирован для TanStack Start и обеспечивает **многоязычную маршрутизацию**, **управление файлами cookie**, **генерацию карты сайта**, **динамическую загрузку контента** и все функции, необходимые для масштабирования ваших усилий по интернационализации (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>
 
 ---
 
@@ -103,11 +140,15 @@ history:
 
 См. [Шаблон приложения](https://github.com/aymericzip/intlayer-tanstack-start-template) на GitHub.
 
-### Шаг 1: Создайте проект
+<Steps>
+
+<Step number={1} title="Создайте проект">
 
 Начните с создания нового проекта TanStack Start, следуя руководству [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) на сайте TanStack Start.
 
-### Шаг 2: Установите пакеты Intlayer
+</Step>
+
+<Step number={2} title="Установите пакеты Intlayer">
 
 Установите необходимые пакеты, используя предпочитаемый менеджер пакетов:
 
@@ -145,7 +186,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления куки и обработки перенаправления URL.
 
-### Шаг 3: Конфигурация вашего проекта
+</Step>
+
+<Step number={3} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -166,7 +209,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL, перенаправление через middleware, имена cookie, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 4: Интеграция Intlayer в вашу конфигурацию Vite
+</Step>
+
+<Step number={4} title="Интеграция Intlayer в вашу конфигурацию Vite">
 
 Добавьте плагин intlayer в вашу конфигурацию:
 
@@ -196,7 +241,9 @@ export default config;
 
 > Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Также он определяет переменные окружения Intlayer внутри приложения Vite. Дополнительно плагин предоставляет алиасы для оптимизации производительности.
 
-### Шаг 5: Создайте корневой макет
+</Step>
+
+<Step number={5} title="Создайте корневой макет">
 
 Настройте корневой макет для поддержки интернационализации, используя `useParams` для определения текущей локали и установив атрибуты `lang` и `dir` в теге `html`.
 
@@ -256,7 +303,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Шаг 6: Создайте макет локали
+</Step>
+
+<Step number={6} title="Создайте макет локали">
 
 Создайте макет, который обрабатывает префикс локали и выполняет валидацию.
 
@@ -288,7 +337,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Для режима `'prefix-all'` вы можете предпочесть переключить слот на `$locale`.
 > Для режимов `'no-prefix'` или `'search-params'` вы можете полностью удалить слот.
 
-### Шаг 7: Объявите ваш контент
+</Step>
+
+<Step number={7} title="Объявите ваш контент">
 
 Создавайте и управляйте объявлениями контента для хранения переводов:
 
@@ -334,7 +385,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` для навигации с учетом локали:
 
@@ -438,7 +491,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Шаг 9: Использование Intlayer на ваших страницах
+</Step>
+
+<Step number={9} title="Использование Intlayer на ваших страницах">
 
 Получайте доступ к вашим словарям контента по всему приложению:
 
@@ -486,7 +541,9 @@ function RouteComponent() {
 
 > Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayer.md).
 
-### Шаг 10: Создание компонента переключателя локали
+</Step>
+
+<Step number={10} title="Создание компонента переключателя локали">
 
 Создайте компонент, который позволит пользователям менять язык:
 
@@ -547,7 +604,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md).
 
-### Шаг 11: Управление атрибутами HTML
+</Step>
+
+<Step number={11} title="Управление атрибутами HTML">
 
 Как показано на шаге 5, вы можете управлять атрибутами `lang` и `dir` тега `html`, используя `useParams` в вашем корневом компоненте. Это гарантирует правильную установку атрибутов как на сервере, так и на клиенте.
 
@@ -566,7 +625,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Шаг 12: Добавление middleware (опционально)
+</Step>
+
+<Step number={12} title="Добавление middleware">
 
 Вы также можете использовать `intlayerProxy` для добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующий cookie с локалью. Если локаль не указана, плагин определит наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не будет обнаружена, произойдет перенаправление на локаль по умолчанию.
 
@@ -597,7 +658,9 @@ export default defineConfig({
 
 ---
 
-### Шаг 12: Интернационализация метаданных (опционально)
+</Step>
+
+<Step number={12} title="Интернационализация метаданных">
 
 Вы также можете использовать хук `getIntlayer` для доступа к вашим словарям контента во всем приложении:
 
@@ -644,7 +707,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Шаг 13: Получение локали в серверных действиях (опционально)
+</Step>
+
+<Step number={13} title="Получение локали в серверных действиях">
 
 Вы можете захотеть получить доступ к текущей локали внутри ваших серверных действий или конечных точек API.
 Вы можете сделать это с помощью помощника `getLocale` из `intlayer`.
@@ -681,7 +746,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Шаг 14: Управление страницами "не найдено" (опционально)
+</Step>
+
+<Step number={14} title="Управление страницами &quot;не найдено&quot;">
 
 Когда пользователь посещает несуществующую страницу, вы можете отобразить пользовательскую страницу "не найдено", и префикс локали может повлиять на способ срабатывания страницы "не найдено".
 
@@ -755,7 +822,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Опционально) Шаг 15: Извлечение содержимого ваших компонентов
+</Step>
+
+<Step number={15} title="Извлечение содержимого ваших компонентов" isOptional={true}>
 
 Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
 
@@ -853,7 +922,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Шаг 16: Генерация карты сайта (Sitemap) (опционально)
+</Step>
+
+<Step number={16} title="Генерация карты сайта (Sitemap)" isOptional={true}>
 
 Intlayer поставляется со встроенным генератором карты сайта, который поможет вам легко создать карту сайта для вашего приложения. Он учитывает локализованные маршруты и добавляет необходимые метаданные для поисковых систем.
 
@@ -928,7 +999,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Шаг 17: Настройка TypeScript (опционально)
+</Step>
+
+<Step number={17} title="Настройка TypeScript">
 
 Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать вашу кодовую базу более надежной.
 
@@ -946,6 +1019,10 @@ Intlayer использует расширение модулей (module augmen
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Конфигурация Git
 
 Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш Git-репозиторий.

package/docs/ru/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - Как перевести приложение на Vanilla JS в 2026 году
-description: Узнайте, как сделать ваш сайт на Vanilla JS многоязычным. Следуйте документации по интернационализации (i18n) и переводу.
+updatedAt: 2026-05-31
+title: "Vanilla JS i18n - Полное руководство по переводу вашего приложения"
+description: "Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения Vanilla JS. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность."
 keywords:
   - Интернационализация
   - Документация
@@ -57,28 +57,62 @@ history:
 
 <TOC/>
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
 
-**Intlayer** - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, созданная для упрощения поддержки нескольких языков в современных веб-приложениях.
+По сравнению с основными решениями, такими как i18next или i18n.js, Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
 
-- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** благодаря автоматически генерируемым типам, что улучшает автодополнение и обнаружение ошибок.
-- **Пользоваться расширенными функциями**, такими как динамическое определение и переключение языка.
+<Accordion header="Полное покрытие Vanilla JS">
 
-В этом руководстве показано, как использовать Intlayer в приложении на Vanilla JavaScript **без использования менеджера пакетов или сборщика** (такого как Vite, Webpack и т. д.).
+Intlayer оптимизирован для идеальной работы с Vanilla JavaScript, предлагая **независимое от платформы управление контентом**, **поддержку TypeScript** и все функции, необходимые для масштабирования интернационализации (i18n).
 
-Если ваше приложение использует сборщик (например, Vite), мы рекомендуем вместо этого следовать [Руководству по Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_vite+vanilla.md).
+</Accordion>
 
-Используя автономную сборку (standalone bundle), вы можете импортировать Intlayer напрямую в HTML-файлы через один JavaScript-файл, что делает его идеальным для устаревших проектов или простых статических сайтов.
+<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>
 
 ---
 
 ## Пошаговое руководство по настройке Intlayer в приложении на Vanilla JS
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -138,7 +172,9 @@ bun x intlayer build
 
 > Экспорт сборки (bunding) CLI `intlayer standalone` создает оптимизированную сборку за счет исключения неиспользуемого кода (tree-shaking) неиспользуемых пакетов, локалей и второстепенной логики (такой как редиректы или префиксы), специфичной для вашей конфигурации.
 
-### Шаг 2: Конфигурация вашего проекта
+</Step>
+
+<Step number={2} title="Конфигурация вашего проекта">
 
 Создайте файл конфигурации для настройки языков вашего приложения:
 
@@ -162,7 +198,9 @@ export default config;
 
 > Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление через middleware, имена куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Импорт сборки в ваш HTML
+</Step>
+
+<Step number={3} title="Импорт сборки в ваш HTML">
 
 После того как вы сгенерировали сборку `intlayer.js`, вы можете импортировать ее в свой HTML-файл:
 
@@ -186,7 +224,9 @@ export default config;
 
 Сборка предоставляет `Intlayer` и `VanillaIntlayer` в качестве глобальных объектов на `window`.
 
-### Шаг 4: Инициализация Intlayer в точке входа
+</Step>
+
+<Step number={4} title="Инициализация Intlayer в точке входа">
 
 В вашем `src/main.js` вызовите `installIntlayer()` **до** того, как какой-либо контент будет отрисован, чтобы глобальный синглтон языка был готов.
 
@@ -206,7 +246,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Шаг 5: Объявление вашего контента
+</Step>
+
+<Step number={5} title="Объявление вашего контента">
 
 Создавайте и управляйте объявлениями контента для хранения переводов:
 
@@ -284,7 +326,9 @@ export default appContent;
 >
 > Для получения более подробной информации см. [документацию по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 6: Использование Intlayer в вашем JavaScript
+</Step>
+
+<Step number={6} title="Использование Intlayer в вашем JavaScript">
 
 Объект `window.VanillaIntlayer` предоставляет вспомогательные функции API: `useIntlayer(key, locale?)` возвращает переведенный контент для заданного ключа.
 
@@ -318,7 +362,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Опционально) Шаг 7: Изменение языка вашего контента
+</Step>
+
+<Step number={7} title="Изменение языка вашего контента" isOptional={true}>
 
 Чтобы изменить язык вашего контента, используйте функцию `setLocale`, предоставляемую `useLocale`.
 
@@ -353,7 +399,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Опционально) Шаг 8: Переключение атрибутов языка и направления текста HTML
+</Step>
+
+<Step number={8} title="Переключение атрибутов языка и направления текста HTML" isOptional={true}>
 
 Обновляйте атрибуты `lang` и `dir` тега `<html>` в соответствии с текущим языком для обеспечения доступности и SEO.
 
@@ -371,7 +419,9 @@ useLocale({
 });
 ```
 
-### (Опционально) Шаг 9: Ленивая загрузка словарей по языкам
+</Step>
+
+<Step number={9} title="Ленивая загрузка словарей по языкам" isOptional={true}>
 
 Если вы хотите загружать словари лениво для каждого языка, вы можете использовать `useDictionaryDynamic`. Это полезно, если вы не хотите включать все переводы в начальный файл `intlayer.js`.
 
@@ -393,6 +443,9 @@ const unsubscribe = useDictionaryDynamic(
 ```
 
 > Примечание: `useDictionaryDynamic` требует, чтобы словари были доступны в виде отдельных файлов ESM. Этот подход обычно используется, если у вас есть веб-сервер, раздающий словари.
+> </Step>
+
+</Steps>
 
 ### Настройка TypeScript