@intlayer/docs 5.5.8

package/ru/packages/intlayer/index.md

@@ -0,0 +1,275 @@
+# intlayer: NPM Пакет для Управления Многоязычным Словарем (i18n)
+
+**Intlayer** , это набор пакетов, специально разработанных для разработчиков на JavaScript. Он совместим с такими фреймворками, как React, Next.js и Express.js.
+
+**Пакет `intlayer`** позволяет объявлять ваш контент в любом месте вашего кода. Он преобразует многоязычные декларации контента в структурированные словари, которые легко интегрируются в ваше приложение. С TypeScript **Intlayer** улучшает ваш процесс разработки, предоставляя более мощные и эффективные инструменты.
+
+## Почему стоит интегрировать Intlayer?
+
+- **Управление контентом на основе JavaScript**: Используйте гибкость JavaScript для эффективного определения и управления вашим контентом.
+- **Безопасная типизация**: Используйте TypeScript для обеспечения точности и отсутствия ошибок в определениях контента.
+- **Интегрированные файлы контента**: Держите переводы рядом с их соответствующими компонентами, улучшая удобство сопровождения и ясность.
+
+## Установка
+
+Установите необходимый пакет, используя предпочитаемый менеджер пакетов:
+
+```bash packageManager="npm"
+npm install intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer
+```
+
+```bash packageManager="yarn"
+yarn add intlayer
+```
+
+### Настройка Intlayer
+
+Intlayer предоставляет файл конфигурации для настройки вашего проекта. Разместите этот файл в корне вашего проекта.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+// Импортируем необходимые модули
+import { Locales, type IntlayerConfig } from "intlayer";
+
+// Конфигурация Intlayer
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+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],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+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],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md).
+
+## Пример использования
+
+С помощью Intlayer вы можете структурированно объявлять ваш контент в любом месте вашего кода.
+
+По умолчанию Intlayer сканирует файлы с расширением `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`.
+
+> Вы можете изменить расширение по умолчанию, установив свойство `contentDir` в [файле конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md).
+
+```bash codeFormat="typescript"
+.
+├── intlayer.config.ts
+└── src
+    ├── ClientComponent
+    │   ├── index.content.ts
+    │   └── index.tsx
+    └── ServerComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="esm"
+.
+├── intlayer.config.mjs
+└── src
+    ├── ClientComponent
+    │   ├── index.content.mjs
+    │   └── index.mjx
+    └── ServerComponent
+        ├── index.content.mjs
+        └── index.mjx
+```
+
+```bash codeFormat="commonjs"
+.
+├── intlayer.config.cjs
+└── src
+    ├── ClientComponent
+    │   ├── index.content.cjs
+    │   └── index.cjx
+    └── ServerComponent
+        ├── index.content.cjs
+        └── index.cjx
+```
+
+### Объявление контента
+
+Пример объявления контента:
+
+```tsx fileName="src/ClientComponent/index.content.ts" codeFormat="typescript"
+// Импортируем функции и типы
+import { t, type Dictionary } from "intlayer";
+
+// Объявляем контент для компонента клиента
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      ru: "Привет, мир",
+    }),
+    numberOfCar: enu({
+      "<-1": "Меньше минус одной машины",
+      "-1": "Минус одна машина",
+      "0": "Нет машин",
+      "1": "Одна машина",
+      ">5": "Несколько машин",
+      ">19": "Много машин",
+    }),
+  },
+} satisfies Dictionary;
+
+export default clientComponentContent;
+```
+
+```jsx fileName="src/ClientComponent/index.content.mjs" contentDeclarationFormat="esm"
+// Импортируем функции
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      ru: "Привет, мир",
+    }),
+    numberOfCar: enu({
+      "<-1": "Меньше минус одной машины",
+      "-1": "Минус одна машина",
+      "0": "Нет машин",
+      "1": "Одна машина",
+      ">5": "Несколько машин",
+      ">19": "Много машин",
+    }),
+  },
+};
+
+export default clientComponentContent;
+```
+
+```jsx fileName="src/ClientComponent/index.content.cjs" contentDeclarationFormat="commonjs"
+// Импортируем функции
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      ru: "Привет, мир",
+    }),
+    numberOfCar: enu({
+      "<-1": "Меньше минус одной машины",
+      "-1": "Минус одна машина",
+      "0": "Нет машин",
+      "1": "Одна машина",
+      ">5": "Несколько машин",
+      ">19": "Много машин",
+    }),
+  },
+};
+
+module.exports = clientComponentContent;
+```
+
+```json fileName="src/ClientComponent/index.content.json" codeFormat="json"
+{
+  "key": "client-component",
+  "content": {
+    "myTranslatedContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Hello World",
+        "fr": "Bonjour le monde",
+        "es": "Hola Mundo",
+        "ru": "Привет, мир"
+      }
+    },
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Меньше минус одной машины",
+        "-1": "Минус одна машина",
+        "0": "Нет машин",
+        "1": "Одна машина",
+        ">5": "Несколько машин",
+        ">19": "Много машин"
+      }
+    }
+  }
+}
+```
+
+### Сборка словарей
+
+Вы можете собрать свои словари, используя [intlayer-cli](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer-cli/readme.md).
+
+```bash packageManager="npm"
+npx intlayer dictionaries build
+```
+
+```bash packageManager="yarn"
+yarn intlayer build
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer build
+```
+
+Эта команда сканирует все файлы `*.content.*`, компилирует их и записывает результаты в директорию, указанную в вашем **`intlayer.config.ts`** (по умолчанию `./.intlayer`).
+
+Пример вывода:
+
+```bash
+.
+└── .intlayer
+    ├── dictionary  # Содержит словарь вашего контента
+    │   ├── client-component.json
+    │   └── server-component.json
+    ├── main  # Содержит точку входа словаря для использования в приложении
+    │   ├── dictionary.cjs
+    │   └── dictionary.mjs
+    └── types  # Содержит автоматически сгенерированные определения типов словаря
+        ├── intlayer.d.ts  # Определения типов Intlayer
+        ├── client-component.d.ts
+        └── server-component.d.ts
+```
+
+...

package/ru/packages/intlayer-cli/index.md

@@ -0,0 +1,41 @@
+# intlayer-cli: NPM Пакет для использования Intlayer CLI
+
+**Intlayer** , это набор пакетов, специально разработанных для JavaScript-разработчиков. Он совместим с такими фреймворками, как React, React и Express.js.
+
+Пакет **`intlayer-cli`** , это NPM пакет, который использует пакет `@intlayer/cli` и делает его доступным для интерфейсов командной строки `intlayer`.
+
+> Обратите внимание, что этот пакет не требуется, если установлен пакет [`intlayer`](https://github.com/aymericzip/intlayer/tree/main/docs/ru/packages/intlayer/index.md). В отличие от пакета `intlayer`, пакет `intlayer-cli` является более легким пакетом, который содержит только инструмент CLI, без зависимостей `@intlayer/core`.
+
+## Установка
+
+Установите необходимый пакет, используя предпочитаемый менеджер пакетов:
+
+```bash packageManager="npm"
+npm install intlayer-cli -g
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer-cli -g
+```
+
+```bash packageManager="yarn"
+yarn add intlayer-cli -g
+```
+
+## Использование
+
+Пример использования пакета `intlayer-cli`:
+
+```bash
+npx intlayer dictionaries build
+```
+
+## Команды CLI
+
+Intlayer предоставляет инструмент CLI для:
+
+- аудита ваших деклараций контента и заполнения отсутствующих переводов
+- создания словарей из ваших деклараций контента
+- загрузки и выгрузки удаленных словарей из вашей CMS в ваш локальный проект
+
+Обратитесь к [intlayer-cli](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_cli.md) для получения дополнительной информации.

package/ru/packages/intlayer-editor/index.md

@@ -0,0 +1,115 @@
+# intlayer-editor: NPM Пакет для использования визуального редактора Intlayer
+
+**Intlayer** , это набор пакетов, специально разработанных для JavaScript-разработчиков. Он совместим с такими фреймворками, как React, React и Express.js.
+
+Пакет **`intlayer-editor`** , это NPM пакет, который интегрирует визуальный редактор Intlayer в ваш проект на React.
+
+## Как работает редактор Intlayer
+
+Редактор Intlayer позволяет взаимодействовать с удаленным словарем Intlayer. Он может быть установлен на стороне клиента и преобразовать ваше приложение в редактор, похожий на CMS, для управления содержимым вашего сайта на всех настроенных языках.
+
+![Интерфейс редактора Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
+
+## Установка
+
+Установите необходимый пакет, используя предпочитаемый менеджер пакетов:
+
+```bash packageManager="npm"
+npm install intlayer-editor
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer-editor
+```
+
+```bash packageManager="yarn"
+yarn add intlayer-editor
+```
+
+### Конфигурация
+
+В вашем файле конфигурации Intlayer вы можете настроить параметры редактора:
+
+```typescript
+const config: IntlayerConfig = {
+  // ... другие настройки конфигурации
+  editor: {
+    enabled: process.env.INTLAYER_ENABLED === "true", // Если false, редактор неактивен и недоступен.
+    // Client ID и client secret необходимы для включения редактора.
+    // Они позволяют идентифицировать пользователя, редактирующего содержимое.
+    // Их можно получить, создав нового клиента в Intlayer Dashboard - Projects (https://intlayer.org/dashboard/projects).
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+```
+
+> Если у вас нет Client ID и client secret, вы можете получить их, создав нового клиента в [Intlayer Dashboard - Projects](https://intlayer.org/dashboard/projects).
+
+> Чтобы увидеть все доступные параметры, обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/ru/configuration.md)
+
+Пакет `intlayer-editor` основан на Intlayer и доступен для JavaScript приложений, таких как React (Create React App), Vite + React и Next.js.
+
+Для получения более подробной информации о том, как установить пакет, смотрите соответствующий раздел ниже:
+
+### Интеграция с Next.js
+
+Для интеграции с Next.js обратитесь к [руководству по настройке](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_with_nextjs_15.md).
+
+### Интеграция с Create React App
+
+Для интеграции с Create React App обратитесь к [руководству по настройке](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_with_create_react_app.md)
+
+### Интеграция с Vite + React
+
+Для интеграции с Vite + React обратитесь к [руководству по настройке](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_with_vite+react.md)
+
+### Пример интеграции
+
+Чтобы интегрировать визуальный редактор Intlayer в ваш проект на React, выполните следующие шаги:
+
+- Импортируйте компонент редактора Intlayer в ваше React-приложение:
+
+  ```tsx fileName="src/App.jsx"
+  import { IntlayerEditorProvider } from "intlayer-editor";
+  import { IntlayerProvider } from "react-intlayer";
+
+  export default function App() {
+    return (
+      <IntlayerProvider>
+        <IntlayerEditorProvider>
+          <IntlayerEditor>
+            {/* Ваше содержимое приложения здесь */}
+          </IntlayerEditor>
+        </IntlayerEditorProvider>
+      </IntlayerProvider>
+    );
+  }
+  ```
+
+- Импортируйте стили редактора Intlayer в ваше приложение Next.js:
+
+  ```tsx fileName="src/app/[locale]/layout.jsx"
+  import { IntlayerEditorStyles } from "intlayer-editor";
+
+  export default async function RootLayout({ children, params }) {
+    const { locale } = await params;
+    return (
+      <IntlayerClientProvider locale={locale}>
+        <IntlayerEditorProvider>
+          <html lang={locale}>
+            <body className={IntlayerEditorStyles}>{children}</body>
+          </html>
+        </IntlayerEditorProvider>
+      </IntlayerClientProvider>
+    );
+  }
+  ```
+
+## Использование редактора
+
+Когда редактор установлен, включен и запущен, вы можете просматривать каждое поле, индексированное Intlayer, наводя курсор на ваше содержимое.
+
+![Наведение на содержимое](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_hover_content.png)
+
+Если ваше содержимое выделено, вы можете долго нажимать на него, чтобы отобразить панель редактирования.

package/ru/packages/lynx-intlayer/index.md

@@ -0,0 +1,58 @@
+**Intlayer** , это набор пакетов, разработанных специально для JavaScript-разработчиков. Он совместим с такими фреймворками, как React, React и Express.js.
+
+**Пакет `lynx-intlayer`** позволяет интернационализировать ваше приложение Vite. Он включает плагин Metro для настройки конфигурации через переменные окружения в [Lynx bundler](https://lynxjs.org/index.html).
+
+## Зачем интернационализировать ваше приложение Lynx?
+
+Интернационализация вашего приложения Lynx необходима для эффективного обслуживания глобальной аудитории. Она позволяет вашему приложению предоставлять контент и сообщения на предпочтительном языке каждого пользователя. Эта возможность улучшает пользовательский опыт и расширяет охват вашего приложения, делая его более доступным и актуальным для людей из разных языковых сообществ.
+
+## Конфигурация
+
+Пакет `lynx-intlayer` работает без проблем с [`react-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/ru/packages/react-intlayer/index.md) и [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/ru/packages/intlayer/index.md). Ознакомьтесь с соответствующей документацией для получения дополнительной информации.
+
+## Установка
+
+Установите необходимый пакет с помощью вашего предпочтительного менеджера пакетов:
+
+```bash packageManager="npm"
+npm install lynx-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add lynx-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add lynx-intlayer
+```
+
+## Пример использования
+
+Посмотрите пример того, как включить плагины в вашу конфигурацию vite.
+
+```ts
+// lynx.config.ts
+import { defineConfig } from "@lynx-js/rspeedy";
+import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
+
+export default defineConfig({
+  plugins: [
+    // ... другие плагины
+    pluginIntlayerLynx(),
+  ],
+});
+```
+
+## Освоение интернационализации вашего приложения Vite
+
+Intlayer предоставляет множество функций, которые помогут вам интернационализировать ваше приложение Vite.
+
+**Чтобы узнать больше об этих функциях, обратитесь к руководству [React Internationalization (i18n) с Intlayer и Lynx](https://github.com/aymericzip/intlayer/blob/main/docs/ru/intlayer_with_lynx+react.md) для приложения Lynx.**
+
+## Узнайте больше о Intlayer
+
+- [Сайт Intlayer](https://intlayer.org)
+- [Документация Intlayer](https://intlayer.org/doc)
+- [Intlayer на GitHub](https://github.com/aymericzip/intlayer)
+
+- [Задайте свои вопросы нашей умной документации](https://intlayer.org/docchat)