@intlayer/docs 5.5.8

package/ru/dictionary/translation.md

@@ -0,0 +1,322 @@
+# Перевод
+
+## Определение переводов
+
+Функция `t` в `intlayer` позволяет объявлять контент на нескольких языках. Эта функция обеспечивает типобезопасность, выдавая ошибку, если какой-либо перевод отсутствует, что особенно полезно в среде TypeScript.
+
+### Использование TypeScript
+
+Пример объявления контента с переводами.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+interface Content {
+  welcomeMessage: string;
+}
+
+export default {
+  key: "multi_lang",
+  content: {
+    welcomeMessage: t({
+      en: "Welcome to our application",
+      fr: "Bienvenue dans notre application",
+      es: "Bienvenido a nuestra aplicación",
+      ru: "Добро пожаловать в наше приложение",
+    }),
+  },
+} satisfies Dictionary<Content>;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+export default {
+  key: "multi_lang",
+  content: {
+    welcomeMessage: t({
+      en: "Welcome to our application",
+      fr: "Bienvenue dans notre application",
+      es: "Bienvenido a nuestra aplicación",
+      ru: "Добро пожаловать в наше приложение",
+    }),
+  },
+};
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+module.exports = {
+  key: "multi_lang",
+  content: {
+    welcomeMessage: t({
+      en: "Welcome to our application",
+      fr: "Bienvenue dans notre application",
+      es: "Bienvenido a nuestra aplicación",
+      ru: "Добро пожаловать в наше приложение",
+    }),
+  },
+};
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "multi_lang",
+  "content": {
+    "welcomeMessage": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Welcome to our application",
+        "fr": "Bienvenue dans notre application",
+        "es": "Bienvenido a nuestra aplicación",
+        "ru": "Добро пожаловать в наше приложение"
+      }
+    }
+  }
+}
+```
+
+## Конфигурация локалей
+
+Для обеспечения правильной обработки переводов вы можете настроить поддерживаемые локали в `intlayer.config.ts`. Эта конфигурация позволяет определить языки, которые поддерживает ваше приложение:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.RUSSIAN,
+    ],
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.RUSSIAN,
+    ],
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.RUSSIAN,
+    ],
+  },
+};
+
+module.exports = config;
+```
+
+## Использование переводов в React-компонентах
+
+С помощью `react-intlayer` вы можете использовать переводы в React-компонентах. Пример:
+
+```jsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const MyComponent = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+module.exports = MyComponent;
+```
+
+Этот компонент получает соответствующий перевод на основе текущей локали, установленной в вашем приложении.
+
+## Пользовательские объекты контента
+
+`intlayer` поддерживает пользовательские объекты контента для перевода, позволяя определять более сложные структуры при обеспечении типобезопасности. Пример с пользовательским объектом:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+interface ICustomContent {
+  title: string;
+  content: string;
+}
+
+const customContent = {
+  key: "custom_content",
+  content: {
+    profileText: t<ICustomContent>({
+      en: {
+        title: "Page Title",
+        content: "Page Content",
+      },
+      fr: {
+        title: "Titre de la Page",
+        content: "Contenu de la Page",
+      },
+      es: {
+        title: "Título de la Página",
+        content: "Contenido de la Página",
+      },
+      ru: {
+        title: "Заголовок страницы",
+        content: "Содержимое страницы",
+      },
+    }),
+  },
+} satisfies Dictionary;
+
+export default customContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+export default {
+  key: "custom_content",
+  content: {
+    profileText:
+      t <
+      ICustomContent >
+      {
+        en: {
+          title: "Page Title",
+          content: "Page Content",
+        },
+        fr: {
+          title: "Titre de la Page",
+          content: "Contenu de la Page",
+        },
+        es: {
+          title: "Título de la Página",
+          content: "Contenido de la Página",
+        },
+        ru: {
+          title: "Заголовок страницы",
+          content: "Содержимое страницы",
+        },
+      },
+  },
+};
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+module.exports = {
+  key: "custom_content",
+  content: {
+    profileText:
+      t <
+      ICustomContent >
+      {
+        en: {
+          title: "Page Title",
+          content: "Page Content",
+        },
+        fr: {
+          title: "Titre de la Page",
+          content: "Contenu de la Page",
+        },
+        es: {
+          title: "Título de la Página",
+          content: "Contenido de la Página",
+        },
+        ru: {
+          title: "Заголовок страницы",
+          content: "Содержимое страницы",
+        },
+      },
+  },
+};
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "custom_content",
+  "content": {
+    "profileText": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "title": "Page Title",
+          "content": "Page Content"
+        },
+        "fr": {
+          "title": "Titre de la Page",
+          "content": "Contenu de la Page"
+        },
+        "es": {
+          "title": "Título de la Página",
+          "content": "Contenido de la Página"
+        },
+        "ru": {
+          "title": "Заголовок страницы",
+          "content": "Содержимое страницы"
+        }
+      }
+    }
+  }
+}
+```

package/ru/environment/angular.md

@@ -0,0 +1,3 @@
+# Переведите свой сайт Angular
+
+// ... existing code ...

package/ru/header.md

@@ -0,0 +1,7 @@
+**Файл для перевода:**
+
+![Логотип](https://github.com/aymericzip/intlayer/blob/main/packages/@intlayer/design-system/src/components/Logo/logo_with_text_no_frame.svg)
+
+**Интернационализация стала проще**
+
+Intlayer предлагает более гибкий и современный подход к интернационализации вашего веб-сайта. Бесшовная интеграция с Next.js и React, настраиваемая конфигурация и поддержка различных форматов декларации контента делают его мощным выбором для интернационализации.

package/ru/how_works_intlayer.md

@@ -0,0 +1,217 @@
+# Как работает Intlayer
+
+## Обзор
+
+Основная идея Intlayer заключается в использовании управления контентом на уровне компонентов. Идея Intlayer состоит в том, чтобы позволить вам объявлять ваш контент в любом месте вашего кода, например, в той же директории, что и ваш компонент.
+
+```bash
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+Для этого роль Intlayer заключается в том, чтобы находить все ваши `файлы с объявлением контента` во всех различных форматах, присутствующих в вашем проекте, а затем генерировать из них `словарь`.
+
+Таким образом, есть два основных этапа:
+
+- Этап сборки
+- Этап интерпретации
+
+### Этап сборки словарей
+
+Этап сборки может быть выполнен тремя способами:
+
+- с использованием CLI с помощью `npx intlayer build`
+- с использованием [расширения vscode](https://github.com/aymericzip/intlayer/blob/main/docs/ru/vs_code_extension.md)
+- с использованием плагинов приложения, таких как пакет [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ru/packages/vite-intlayer/index.md), или их эквивалентов для [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/ru/packages/next-intlayer/index.md). При использовании одного из этих плагинов Intlayer автоматически создаст ваши словари при запуске (dev) или сборке (prod) вашего приложения.
+
+1. Объявление файлов контента
+
+   - Файлы контента могут быть определены в различных форматах, таких как TypeScript, ECMAScript, CommonJS или JSON.
+   - Файлы контента могут быть определены в любом месте проекта, что позволяет улучшить обслуживание и масштабируемость. Важно соблюдать соглашения о расширениях файлов для файлов контента. По умолчанию это расширение `*.content.{js|cjs|mjs|ts|tsx|json}`, но его можно изменить в [файле конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md).
+
+2. Генерация `словарей`
+
+   - Словари генерируются из файлов контента. По умолчанию словари Intlayer генерируются в директории `.intlayer/dictionaries` проекта.
+   - Эти словари генерируются в различных форматах, чтобы удовлетворить все потребности и оптимизировать производительность приложения.
+
+3. Генерация типов словарей
+
+На основе ваших `словарей` Intlayer будет генерировать типы, чтобы сделать их пригодными для использования в вашем приложении.
+
+- Типы словарей генерируются из `словарей` Intlayer. По умолчанию типы словарей Intlayer генерируются в директории `.intlayer/types` проекта.
+
+- [Расширение модулей](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) Intlayer — это функция TypeScript, которая позволяет вам определять дополнительные типы для Intlayer. Это упрощает процесс разработки, предлагая доступные или обязательные аргументы.
+  Среди сгенерированных типов добавляются типы словарей Intlayer или даже типы конфигурации языка в файл `types/intlayer.d.ts` и используются другими пакетами. Для этого необходимо, чтобы файл `tsconfig.json` был настроен на включение директории `types` проекта.
+
+### Этап интерпретации словарей
+
+С помощью Intlayer вы получите доступ к вашему контенту в приложении, используя хук `useIntlayer`.
+
+```tsx
+const MyComponent = () => {
+  const content = useIntlayer("my-component");
+  return <div>{content.title}</div>;
+};
+```
+
+Этот хук будет управлять обнаружением локали за вас и возвращать контент для текущей локали. Используя этот хук, вы также сможете интерпретировать markdown, управлять множественным числом и многое другое.
+
+> Чтобы увидеть все возможности Intlayer, вы можете прочитать [документацию по словарям](https://github.com/aymericzip/intlayer/blob/main/docs/ru/dictionary/get_started.md).
+
+## Удаленный контент
+
+Intlayer позволяет вам объявлять контент локально, а затем экспортировать его в CMS, чтобы ваша нетехническая команда могла редактировать его.
+
+Таким образом, вы сможете отправлять и получать контент из CMS в ваше приложение, аналогично тому, как вы работаете с Git для вашего кода.
+
+Если настроено в вашем проекте, Intlayer автоматически будет управлять загрузкой контента из CMS при запуске приложения (dev) / сборке (prod).
+
+## Визуальный редактор
+
+Intlayer также предоставляет визуальный редактор, позволяющий редактировать ваш контент визуально. Этот [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_visual_editor.md) доступен в отдельном пакете `intlayer-editor`.
+
+![визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
+
+## Оптимизация сборки приложения
+
+Для оптимизации размера сборки вашего приложения Intlayer предоставляет два плагина для оптимизации сборки: плагины `@intlayer/babel` и `@intlayer/swc`.
+
+В режиме разработки Intlayer использует централизованный статический импорт для словарей, чтобы упростить процесс разработки.
+
+При оптимизации сборки Intlayer заменит все вызовы словарей для оптимизации разбиения на чанки. Таким образом, финальная сборка будет импортировать только те словари, которые используются.
+
+Активировав опцию `activateDynamicImport` в [конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md), Intlayer будет использовать динамический импорт для загрузки словарей. Эта опция отключена по умолчанию, чтобы избежать асинхронной обработки при рендеринге приложения.
+
+> `@intlayer/babel` доступен по умолчанию в пакете `vite-intlayer`,
+
+> `@intlayer/swc` не установлен по умолчанию в пакете `next-intlayer`, так как плагины SWC все еще являются экспериментальными в Next.js.
+
+Чтобы узнать, как настроить сборку вашего приложения, вы можете прочитать [документацию по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md).
+
+## Пакеты
+
+Intlayer состоит из нескольких пакетов, каждый из которых выполняет определенную роль в процессе перевода. Вот графическое представление структуры этого пакета:
+
+![пакеты intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+Пакет `intlayer` используется в приложениях для объявления контента в файлах контента.
+
+### react-intlayer
+
+Пакет `react-intlayer` используется для интерпретации словарей Intlayer и их использования в React-приложениях.
+
+### next-intlayer
+
+Пакет `next-intlayer` используется как слой поверх `react-intlayer`, чтобы сделать словари Intlayer пригодными для использования в приложениях Next.js. Он интегрирует основные функции для работы Intlayer в среде Next.js, такие как промежуточное ПО для перевода, маршрутизация или конфигурация файла `next.config.js`.
+
+### vue-intlayer
+
+Пакет `vue-intlayer` используется для интерпретации словарей Intlayer и их использования в приложениях Vue.
+
+### svelte-intlayer (в разработке)
+
+Пакет `svelte-intlayer` используется для интерпретации словарей Intlayer и их использования в приложениях Svelte.
+
+### solid-intlayer (в разработке)
+
+Пакет `solid-intlayer` используется для интерпретации словарей Intlayer и их использования в приложениях Solid.js.
+
+### preact-intlayer
+
+Пакет `preact-intlayer` используется для интерпретации словарей Intlayer и их использования в приложениях Preact.
+
+### angular-intlayer (в разработке)
+
+Пакет `angular-intlayer` используется для интерпретации словарей Intlayer и их использования в приложениях Angular.
+
+### express-intlayer
+
+Пакет `express-intlayer` используется для работы с Intlayer на серверной стороне Express.js.
+
+### react-native-intlayer
+
+Пакет `react-native-intlayer` предоставляет инструменты, которые интегрируют плагины для работы Intlayer с Metro bundler.
+
+### lynx-intlayer
+
+Пакет `lynx-intlayer` предоставляет инструменты, которые интегрируют плагины для работы Intlayer с Lynx bundler.
+
+### vite-intlayer
+
+Включает плагин Vite для интеграции Intlayer с [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления cookies и обработки перенаправления URL.
+
+### react-scripts-intlayer
+
+### intlayer-editor
+
+Пакет `intlayer-editor` используется для обеспечения работы визуального редактора. Этот пакет, опциональный, может быть установлен в приложениях и будет использоваться пакетом `react-intlayer`.
+Он состоит из двух частей: сервера и клиента.
+
+Клиент содержит элементы пользовательского интерфейса, которые будут использоваться `react-intlayer`.
+
+Сервер, основанный на Express, используется для получения запросов визуального редактора и управления или изменения файлов контента.
+
+### intlayer-cli
+
+Пакет `intlayer-cli` может быть использован для генерации словарей с помощью команды `npx intlayer dictionaries build`. Если `intlayer` уже установлен, CLI автоматически устанавливается, и этот пакет не требуется.
+
+### @intlayer/core
+
+Пакет `@intlayer/core` является основным пакетом Intlayer. Он содержит функции управления переводами и словарями. `@intlayer/core` является мультиплатформенным и используется другими пакетами для интерпретации словарей.
+
+### @intlayer/config
+
+Пакет `@intlayer/config` используется для настройки параметров Intlayer, таких как доступные языки, параметры промежуточного программного обеспечения Next.js или настройки интегрированного редактора.
+
+### @intlayer/webpack
+
+Пакет `@intlayer/webpack` используется для предоставления конфигурации Webpack, чтобы приложение на основе Webpack работало с Intlayer. Пакет также предоставляет плагин для добавления в существующее приложение Webpack.
+
+### @intlayer/cli
+
+Пакет `@intlayer/cli` является пакетом NPM, который используется для объявления скриптов, связанных с интерфейсами командной строки Intlayer. Он обеспечивает единообразие всех команд CLI Intlayer. Этот пакет, в частности, используется пакетами [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/ru/packages/intlayer-cli/index.md) и [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/ru/packages/intlayer/index.md).
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+Пакеты `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` и `@intlayer/dynamic-dictionaries-entry` возвращают путь входа словарей Intlayer. Поскольку поиск файловой системы из браузера невозможен, использование сборщиков, таких как Webpack или Rollup, для получения пути входа словарей невозможно. Эти пакеты разработаны для алиасов, что позволяет оптимизировать сборку с использованием различных сборщиков, таких как Vite, Webpack и Turbopack.
+
+### @intlayer/chokidar
+
+Пакет `@intlayer/chokidar` используется для мониторинга файлов контента и регенерации измененного словаря при каждом изменении.
+
+### @intlayer/editor
+
+Пакет `@intlayer/editor` предоставляет утилиты, связанные с редактором словарей. Он включает API для интерфейса приложения с редактором Intlayer и утилиты для работы со словарями. Этот пакет является кроссплатформенным.
+
+### @intlayer/editor-react
+
+Пакет `@intlayer/editor-react` предоставляет состояния, контексты, хуки и компоненты для интерфейса React-приложения с редактором Intlayer.
+
+### @intlayer/babel
+
+Пакет `@intlayer/babel` предоставляет инструменты, которые оптимизируют сборку словарей для приложений на основе Vite и Webpack.
+
+### @intlayer/swc (WIP)
+
+Пакет `@intlayer/swc` предоставляет инструменты, которые оптимизируют сборку словарей для приложений Next.js.
+
+### @intlayer/api
+
+Пакет `@intlayer/api` является SDK API для взаимодействия с бэкендом.
+
+### @intlayer/design-system
+
+Пакет `@intlayer/design-system` используется для совместного использования элементов дизайна между CMS и визуальным редактором.
+
+### @intlayer/backend
+
+Пакет `@intlayer/backend` экспортирует типы бэкенда и в будущем предложит бэкенд как автономный пакет.
+
+## Общайтесь с нашей умной документацией
+
+- [Задайте свои вопросы нашей умной документации](https://intlayer.org/doc/chat)