Add RU locale

content/ru/docs/1.index.md

@@ -0,0 +1,37 @@
+---
+description: Rete.js — это фреймворк для создания визуальных интерфейсов и рабочих процессов. Он предоставляет готовые решения для визуализации с использованием различных библиотек и фреймворков, а также решения для обработки графов на основе подходов потока данных и потока управления.
+keywords: введение, экосистема
+---
+
+# Введение
+
+:introduction
+
+**Rete.js** (произносится /ˈriː.ti/, что означает "сеть" на итальянском) — это фреймворк для создания визуальных интерфейсов и рабочих процессов. Он предоставляет готовые решения для визуализации с использованием различных библиотек и фреймворков, а также решения для обработки графов на основе подходов потока данных и потока управления.
+
+::alert
+**Вы читаете документацию для Rete.js v2**
+
+- Документация Rete.js v1 по-прежнему доступна по адресу [rete.js.org](https://rete.js.org)
+- Переходите с Rete.js v1? Посмотрите руководство [Миграция](/ru/docs/migration).
+::
+
+В интерактивном примере выше вы можете увидеть нотацию основных элементов классического редактора и обработку графа с использованием механизма на основе потока данных. Это демонстрирует основные возможности фреймворка:
+
+- **Визуализация**: вы можете выбрать React.js, Vue.js, Angular или Svelte для визуализации узлов, сокетов, контролов и связей. Эти визуальные компоненты можно настроить под ваши конкретные потребности, создавая специальные компоненты для каждого фреймворка, и все они могут сосуществовать в одном редакторе.
+- **Обработка**: фреймворк предлагает различные типы механизмов, позволяющих обрабатывать графы в зависимости от их природы, включая поток данных и поток управления. Эти типы можно комбинировать в одном графе.
+
+:youtube-video{name="intro"}
+
+### Экосистема {#ecosystem}
+
+Фреймворк состоит из различных пакетов, включая основной пакет `rete` и различные плагины.
+
+Этот подход обеспечивает гибкость выбора только необходимых пакетов для вашего конкретного использования, избегая ненужных зависимостей. Он также предоставляет гибкость выбора различных версий (например, тестирование RC-версии определенного плагина) и замены этих пакетов вашими собственными сборками (форками или плагинами, созданными с нуля).
+
+Каждый из пакетов имеет собственное хранилище, обеспечивая гибкость разработки, но также добавляя дополнительные расходы. По этой причине был создан **Rete CLI** для создания модулей на TypeScript с встроенной поддержкой ESLint и Jest, что уменьшает шаблонный код и предоставляет базовые инструменты для разработки и отладки плагинов, что, в конечном итоге, экономит время разработчиков.
+
+Rete.js предоставляет разнообразные удобные ресурсы и инструменты для быстрого старта:
+- **Примеры**: посмотрите страницу [Примеры](/ru/examples) или [Codesandbox](https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=rete.js) для примеров кода.
+- **Rete Kit**: с помощью этого инструмента легко создать базовый проект для выбранного вами фреймворка. Чтобы узнать больше, посетите страницу [Rete Kit](/ru/docs/development/rete-kit).
+- **Руководства**: получите практический опыт, следуя [пошаговым инструкциям](/ru/docs/guides/basic). Это позволит вам изучить доступные функции и узнать, как расширить и настроить фреймворк в соответствии с вашими потребностями.

content/ru/docs/2.getting-started.md

@@ -0,0 +1,69 @@
+---
+description: "Rete.js предлагает два простых способа начать работу: форк наших примеров на Codesandbox или создание локального приложения с помощью Rete Kit. Следуйте нашим руководствам, чтобы ознакомиться с нашими функциями и возможностями"
+keywords: начало работы, установка, настройка, предпосылки, плейграунды, форк, rete kit
+---
+
+# Начало работы
+
+::references
+:ref-example{title="Примеры" link="/ru/examples"}
+:ref-guide{title="Rete Kit" link="/ru/docs/development/rete-kit"}
+:ref-external{title="Codesandbox" link="https://codesandbox.io/s/rete-js-v2-yrzxe5"}
+:ref-external{title="Codepen" link="https://codepen.io/Ni55aN/pen/rNZKejd"}
+::
+
+Существует два простых способа начать работу с фреймворком: сделать fork [примеров](/ru/examples) на Codesandbox или создать локальное приложение с помощью [Rete Kit](/ru/docs/development/rete-kit). Первый вариант позволяет экспериментировать с функциональностью, которая не всегда описана в руководствах. Кроме того, второй вариант позволяет создать локальное приложение с специальными функциями редактора узлов для выбранной версии **React.js**, **Vue.js**, **Angular** или **Svelte**. Затем, следуя руководствам, вы сможете ознакомиться с функциями и возможностями фреймворка.
+
+:youtube-video{name="getting-started"}
+
+## Предпосылки
+
+Прежде чем погрузиться в Rete.js, важно иметь понимание основ JavaScript или TypeScript. Фреймворк разработан в первую очередь с учетом TypeScript, с примерами и руководствами, демонстрирующими код на этом языке. Однако для новичков в TypeScript или тех, кто хочет быстро создавать прототипы, все еще можно использовать Rete.js непосредственно в JavaScript.
+
+Если вы предпочитаете TypeScript, убедитесь, что у вас установлена версия TypeScript 4.7 или новее.
+
+## Плейграунды {#playgrounds}
+
+- [Codesandbox](https://codesandbox.io/s/rete-js-v2-yrzxe5)
+- [Codepen](https://codepen.io/Ni55aN/pen/rNZKejd)
+
+## Создание приложения с использованием Rete Kit {#devkit}
+
+Используйте [Rete Kit](/ru/docs/development/rete-kit), чтобы быстро установить приложение на Rete.js. Он позволяет выбрать стек (**React.js**, **Vue.js**, **Angular** или **Svelte**) и набор функций.
+
+## Добавление Rete.js в ваше приложение {#app}
+
+Пакеты фреймворка доступны на NPM и поддерживают такие общие форматы, как ES (.esm.js), CommonJS (.common.js) и UMD (.min.js).
+
+Ниже приведен пример установки пакетов фреймворка для последней версии.
+
+```bash
+npm i rete rete-area-plugin rete-connection-plugin rete-render-utils rete-react-plugin react react-dom
+```
+
+Для получения конкретной информации о необходимых пакетах обратитесь к одному из руководств.
+
+Для получения конкретной информации о необходимых пакетах обратитесь к [одному из руководств](/ru/docs/guides/basic).
+
+## Использование с CDN {#cdn}
+
+Пакеты фреймворка также доступны на множестве CDN, обслуживающих пакеты npm. Чтобы добавить их на HTML-страницу, используйте следующий пример:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/rete/rete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rete-area-plugin/rete-area-plugin.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin/rete-connection-plugin.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rete-render-utils/rete-render-utils.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rete-react-plugin/rete-react-plugin.min.js"></script>
+```
+
+Используйте эти пакеты, получив доступ к их пространству имен, которое можно найти в поле `name` файла `rete.config.ts` для каждого пакета. Обязательно добавьте необходимые одноранговые зависимости:
+
+```js
+Rete
+ReteAreaPlugin
+ReteConnectionPlugin
+ReteReactPlugin
+```
+
+Кроме того, вы можете интегрировать их на таких платформах, как [Codepen](https://codepen.io), используя [esm.sh](https://esm.sh).

content/ru/docs/3.concepts/1.plugin-system.md

@@ -0,0 +1,101 @@
+---
+description: Исследуйте нашу систему плагинов и посмотрите, как она может улучшить функциональность вашего проекта. Наш пример кода показывает, как сигналы передаются между родительскими и дочерними плагинами.
+keywords: плагин, область, родительский, дочерний, addpipe, сигналы
+---
+
+# Система плагинов
+
+::references
+:ref-github{title="Исходный код" link="https://github.com/retejs/rete/blob/main/src/scope.ts"}
+::
+
+Плагины предоставляют возможность добавлять новые функции в основном через одну точку входа. Они взаимодействуют друг с другом с помощью сигналов, которые передаются от родительских плагинов к дочерним. Поскольку плагины могут иметь несколько дочерних плагинов, эти сигналы передаются в порядке их подключения (это может быть важно при включении плагинов, таких как `rete-readonly-plugin`).
+
+:diagram{name="plugin-system/architecture" caption="Архитектура"}
+
+Следующий пример кода демонстрирует создание двух областей: родительской и дочерней. Обе области регистрируют сигналы.
+
+```ts
+import { Scope } from 'rete';
+
+const parentScope = new Scope<number>('parent'); // number это производимый тип
+const childScope = new Scope<string, [number]>('child'); // [number] это ожидаемый тип родительской цепочки
+
+parentScope.addPipe((context) => { // добавить pipe к родительской области
+  console.log('parent', context); // number
+
+  return context;
+});
+
+childScope.addPipe((context) => { // добавить pipe к дочерней области
+  console.log('child', context); // string | number
+
+  return context;
+});
+
+parentScope.use(childScope); // forward all signals to child scope
+
+const returnedNumber = await parentScope.emit(1); // can emit number
+const returnedString = await childScope.emit('a'); // can emit string
+```
+
+Обратите внимание, что порядок `use` и `addPipe` влияет на порядок вызова родительских и дочерних обработчиков.
+
+Логи:
+```log
+parent 1
+child 1
+child a
+```
+
+В некоторых случаях сигналы можно изменять или блокировать.
+
+:diagram{name="plugin-system/addPipe" caption="Блокировать или изменить"}
+
+```ts
+parentScope.addPipe((context) => {
+  return context * 2;
+});
+childScope.addPipe((context) => {
+  if (context === 'b') return // предотвращение распространения 'b'
+  return context;
+});
+
+const doubledNumber = await parentScope.emit(1); // 2
+const expectedString = await childScope.emit('a'); // 'a'
+const expectedUndefined = await childScope.emit('b'); // undefined
+```
+
+Статическая типизация используется для обеспечения совместимости ожидаемых сигналов используемых плагинов с сигналами, созданными родительским плагином.
+
+```ts
+import { Scope } from 'rete';
+
+const parentScope = new Scope<number>('parent');
+const childScope = new Scope<string, [number | boolean]>('child');
+
+parentScope.use(childScope); // Type 'boolean' is not assignable to type 'string | number'.ts(2345)
+```
+
+Дочерние плагины могут получить доступ к экземпляру родительского плагина как для прямого доступа к его интерфейсам, так и для генерации сигналов от имени родительского плагина.
+
+```ts
+import { Scope } from 'rete';
+
+class Root extends Scope<number> {
+  isRoot = true
+}
+
+class Root2 extends Scope<number> {
+  isRoot2 = true
+}
+
+const parentScope = new Root('parent');
+const childScope = new Scope<string, [number]>('child');
+
+parentScope.use(childScope);
+
+const parent = childScope.parentScope(); // экземпляр Root, но Scope с точки зрения TS
+const root = childScope.parentScope<Root>(Root); // экземпляр Root
+const wrongInstance = childScope.parentScope<Root2>(Root2); // выбрасывает исключение
+```

content/ru/examples/0.index.md

@@ -0,0 +1,16 @@
+---
+title: Обзор примеров
+description: Эта страница содержит подробный список примеров и превью, демонстрирующих различные типы редакторов узлов или визуальных рабочих процессов, созданных с использованием Rete.js
+keywords: обзор примеров, примеры, профессиональные примеры
+share:
+  title: Обзор примеров на основе Rete.js
+overview: true
+navigation:
+  noPreview: true
+---
+
+# Обзор
+
+:examples-overview{:top='true'}
+
+:examples-overview{:top='false'}

content/ru/examples/1.basic/1.react.md

@@ -0,0 +1,24 @@
+---
+image:
+  src: basic.png
+description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с React.js. В этом примере показан рендеринг с использованием rete-react-plugin
+keywords: react.js, базовый редактор, плагин react.js
+navigation:
+  preview: basic.png
+---
+
+# React.js
+
+::references
+:ref-guide{title="Базовый гайд" link="/ru/docs/guides/basic"}
+:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/react"}
+:ref-example{title="Элементы управления" link="/ru/examples/controls/react"}
+:ref-example{title="Кастомизация" link="/ru/examples/customization/react"}
+:ref-github{title="Core" link="https://github.com/retejs/rete"}
+:ref-github{title="Плагин" link="https://github.com/retejs/react-render-plugin"}
+:ref-external{title="React.js" link="https://react.dev/"}
+::
+
+Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-react-plugin` для плавной интеграции с **React.js**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами.
+
+:example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}

content/ru/examples/1.basic/2.vue.md

@@ -0,0 +1,22 @@
+---
+image:
+  src: basic.png
+description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с Vue.js. В этом примере показан рендеринг с использованием rete-vue-plugin
+keywords: vue.js, базовый редактор, плагин vue.js
+navigation:
+  preview: basic.png
+---
+
+# Vue.js
+
+::references
+:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/vue"}
+:ref-example{title="Элементы управления" link="/ru/examples/controls/vue"}
+:ref-example{title="Кастомизация" link="/ru/examples/customization/vue"}
+:ref-github{title="Плагин" link="https://github.com/retejs/vue-render-plugin"}
+:ref-external{title="Vue.js" link="https://vuejs.org/"}
+::
+
+Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-vue-plugin` для плавной интеграции с **Vue.js**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами.
+
+:example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}