diff --git a/_images/cover.png b/_images/cover.png new file mode 100644 index 0000000..f9247e8 Binary files /dev/null and b/_images/cover.png differ diff --git a/ru/project/page-constructor.md b/ru/project/page-constructor.md new file mode 100644 index 0000000..280c1c1 --- /dev/null +++ b/ru/project/page-constructor.md @@ -0,0 +1,41 @@ +# Page constructor + +Page constructor (далее -- PC) - это библиотека семейства [Gravity UI](https://gravity-ui.com/) для рендеринга веб-страниц на основе данных представленных в YAML формате. +При создании страниц используется компонентный подход: страница строится с использованием набора готовых блоков, которые можно размещать в любом порядке. Каждый блок имеет определенный тип и набор параметров входных данных. +Формат входных данных и список доступных блоков можно посмотреть в [документации библиотеки](https://preview.gravity-ui.com/page-constructor/?path=/docs/documentation-blocks--docs). + +**Примеры**: оформление разводящей страницы [1](./pc-example1.yaml) [2](./pc-example2.yaml) + +## Структура {#structure} + +Стандартная структура конфигурации PC страницы хранится в `.yaml` формате и имеет вид: + +```yaml +blocks: + - type: 'header-block' + width: 's' + offset: 'default' + title: 'Diplodoc' + resetPaddings: true + verticalOffset: 'l' + description: 'Платформа для создания технической документации в концепции Docs as Сode с открытым исходным кодом. Простое и удобное решение для развёртывания документации больших и маленьких команд.' + background: + image: + mobile: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-cover-mini.png' + desktop: '_assets/test-move.png' + color: '#C6FE4D' + fullWidth: false + buttons: + - text: 'Начать' + primary: true + theme: 'outlined' + size: 'promo' + url: '/quickstart' + - text: 'GitHub' + primary: true + theme: 'outlined' + size: 'promo' + url: 'https://github.com/diplodoc-platform' +``` + +Описание полей для каждого блока можно посмотреть в [документации](https://preview.gravity-ui.com/page-constructor/?path=/story/blocks-header--docs&viewMode=docs). diff --git a/ru/project/pc-example1.yaml b/ru/project/pc-example1.yaml new file mode 100644 index 0000000..cac5fde --- /dev/null +++ b/ru/project/pc-example1.yaml @@ -0,0 +1,231 @@ +blocks: + - type: 'header-block' + width: 's' + offset: 'default' + title: 'Diplodoc' + resetPaddings: true + verticalOffset: 'l' + description: 'Платформа для создания технической документации в концепции Docs as Сode с открытым исходным кодом. Простое и удобное решение для развёртывания документации больших и маленьких команд.' + background: + image: + mobile: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-cover-mini.png' + desktop: '../../_images/cover.png' + color: '#C6FE4D' + fullWidth: false + buttons: + - text: 'Начать' + primary: true + theme: 'outlined' + size: 'promo' + url: '/quickstart' + - text: 'GitHub' + primary: true + theme: 'outlined' + size: 'promo' + url: 'https://github.com/diplodoc-platform' + + - type: 'extended-features-block' + title: + text: 'Преимущества платформы' + items: + - title: 'Простота использования' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-1.svg' + text: 'Работа с документами как с кодом: в привычной среде и с минимальными усилиями по развёртыванию и поддержке.' + - title: 'Скорость работы' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-2.svg' + text: 'Быстрая сборка, валидация и выкладка документации любого размера. Полная интеграция в существующие CI/CD-системы для ускорения работы.' + - title: 'Общепринятый формат Markdown' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-3.svg' + text: 'Простой, понятный и широко распространенный синтаксис с поддержкой базового Markdown. Концентрируйтесь на контенте, а не на том, как доставить его до пользователя.' + - title: 'Обширная функциональность' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-4.svg' + text: 'Создание документов любой сложности, в том числе генерация из единого источника и работа с переменными. Широкие возможности по кастомизации и отображению гарантируют удовлетворённость конечных пользователей.' + - title: 'Интеграция с системами автоматической документации' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-5.svg' + text: 'Поддержка широко распространённой OpenAPI-спецификации «из коробки». Обеспечение работы специализированных систем через интерфейс подключаемых внешних документов.' + - title: 'Интегрированный поиск' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-icon-6.svg' + text: 'Самый частотный пользовательский сценарий по поиску документов на базе платформы без дополнительных затрат и усилий по поддержке.' + + - type: 'filter-block' + centered: true + title: + text: 'Нам доверяют' + tags: + - id: 'one' + label: 'DoubleСloud' + - id: 'two' + label: 'Yandex Support' + - id: 'three' + label: 'Yandex Cloud' + - id: 'four' + label: 'YDB' + - id: 'five' + label: 'CatBoost' + colSizes: + all: 12 + xl: 12 + md: 12 + sm: 12 + items: + - tags: + - 'one' + card: + type: 'layout-item' + media: + image: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/diplodoc-tab-1.png' + border: true + content: + links: + - text: 'Посмотреть документацию' + url: 'https://double.cloud/docs/en/' + theme: 'normal' + arrow: true + color: #54BA7E + + - tags: + - 'two' + card: + type: 'layout-item' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-trust-support.png' + border: true + content: + links: + - text: 'Посмотреть документацию' + url: 'https://yandex.ru/support2/audience/ru/' + theme: 'normal' + arrow: true + color: #54BA7E + - tags: + - 'three' + card: + type: 'layout-item' + media: + image: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/ddos-index-trust-yandex-cloud.png' + border: true + content: + links: + - text: 'Посмотреть документацию' + url: 'https://cloud.yandex.ru/docs/compute/' + theme: 'normal' + arrow: true + color: #54BA7E + - tags: + - 'four' + card: + type: 'layout-item' + media: + image: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/ddos-index-trust-ydb.png' + border: true + content: + links: + - text: 'Посмотреть документацию' + url: 'https://ydb.tech/en/docs/' + theme: 'normal' + arrow: true + color: #54BA7E + - tags: + - 'five' + card: + type: 'layout-item' + media: + image: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/ddos-index-trust-yandex-cat.png' + border: true + content: + links: + - text: 'Посмотреть документацию' + url: 'https://catboost.ai/en/docs/' + theme: 'normal' + arrow: true + color: #54BA7E + + - type: 'card-layout-block' + title: 'Как это работает?' + colSizes: + all: 12 + md: 4 + sm: 6 + children: + - type: 'layout-item' + content: + title: 'Архитектура' + text: 'Платформа Diplodoc имеет клиент-серверную архитектуру: серверная часть состоит из компонентов на Node.js, которые генерируют и отображают документационные проекты. Такая архитектура обеспечивает надёжность и горизонтальное масштабирование в случае необходимости. ' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-item-01-01.png' + fullScreen: true + border: true + disableCompress: true + - type: 'layout-item' + content: + title: 'Интеграция с GitHub' + text: 'Платформа Diplodoc имеет сквозную интеграцию с GitHub для обеспечения простого и стабильного механизма сборки и развёртывания документационных проектов. GitHub используется как хранилище исходного кода для документов и исполнения пайплайна проекта.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-item-01-02.png' + fullScreen: true + border: true + disableCompress: true + - type: 'layout-item' + content: + title: 'Развёртывание' + text: 'Компании – пользователи сервиса Diplodoc используют встроенные механизмы выкладки документационного проекта с последующей их индексацией и отслеживанием версий. Документы могут обновляться как в автоматическом, так и в полуавтоматическом режиме с привлечением администратора со стороны пользователя.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-item-01-03.png' + fullScreen: true + border: true + disableCompress: true + + - type: 'card-layout-block' + title: 'Как попробовать Diplodoc' + children: + - type: 'background-card' + title: 'Обсудить пилотный проект' + text: 'Расскажите нам про свой проект и пожелания — команда Diplodoc поможет вам сделать документацию.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-card-01.png' + disableCompress: true + paddingBottom: 'm' + buttons: + - text: 'Связаться с нами' + theme: 'outlined' + url: '/#contact' + border: none + - type: 'background-card' + title: 'Попробовать самостоятельно' + text: 'Создайте и опубликуйте проект документации для вашего продукта.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-card-02.png' + disableCompress: true + paddingBottom: 'm' + buttons: + - text: 'Открыть онлайн-демо' + theme: 'outlined' + url: 'https://github.com/codespaces/new?repo=688437532' + border: none + - type: 'background-card' + title: 'Посмотреть проект на GitHub' + text: 'Мы выложили исходный код нашей платформы в открытый доступ. Вы можете помочь нам стать лучше.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/index-diplodoc/ddos-index-card-03.png' + disableCompress: true + paddingBottom: 'm' + buttons: + - text: 'Перейти на GitHub' + theme: 'raised' + url: 'https://github.com/diplodoc-platform' + theme: 'dark' + border: none + + - type: 'icons-block' + size: 'm' + title: 'Присоединяйтесь к сообществу' + items: + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/github.svg' + text: 'GitHub' + url: 'https://github.com/diplodoc-platform' + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/telegram.svg' + text: 'Telegram' + url: 'https://t.me/diplodoc_ru' + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/stackoverflow.svg' + text: 'Stack Overflow' + url: 'https://stackoverflow.com/tags/diplodoc' \ No newline at end of file diff --git a/ru/project/pc-example2.yaml b/ru/project/pc-example2.yaml new file mode 100644 index 0000000..8120c4f --- /dev/null +++ b/ru/project/pc-example2.yaml @@ -0,0 +1,142 @@ +blocks: + - type: 'header-block' + width: 's' + offset: 'default' + title: 'Как всё устроено?' + resetPaddings: true + verticalOffset: 'l' + description: 'Diplodoc — это платформа документации со следущими компонентами: + + * клиентская часть отвечает за отображение документов в браузере на стороне пользователя; + + * серверная часть отвечает за хостинг и выдачу документов клиенту; + + * инструменты создания и преобразования документов из Markdown в статический сайт (Transform & Build). + + + Система выполняет основные операции на Node.js и React.' + background: + image: + desktop: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-cover.png' + mobile: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-cover-mini.png' + color: '#C6FE4D' + fullWidth: true + + - type: 'extended-features-block' + title: + text: 'Подход Docs as Сode' + colSizes: + all: 12 + xl: 3 + md: 4 + sm: 6 + items: + - title: 'Markdown' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/how-to-diplodoc/how-to-diplodoc-01.svg' + text: 'Документация пишется на языке разметки Markdown, а не в plain text или WYSIWYG-редакторе.' + - title: 'Хранение в репозитории' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/how-to-diplodoc/how-to-diplodoc-02.svg' + text: 'Документация хранится в репозитории с остальным кодом. Это может быть GitHub или ваше собственное решение. ' + - title: 'Налаженный процесс' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/how-to-diplodoc/how-to-diplodoc-03.svg' + text: 'Документация собирается в финальный проект при помощи генератора статических сайтов и публикуется автоматически.' + - title: 'Синхронизация' + icon: 'https://storage.yandexcloud.net/cloud-www-assets/pages/how-to-diplodoc/how-to-diplodoc-04.svg' + text: 'Документация пишется и обновляется совместно — точно так же, как и остальной код.' + + - type: 'card-layout-block' + title: 'Хранение данных' + children: + - type: 'layout-item' + content: + title: 'Добавление' + text: 'Исходный код документации хранится в репозитории клиента в формате Markdown.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-02-01.png' + - type: 'layout-item' + content: + title: 'Преобразование' + text: 'Преобразованный из Markdown-файлов документационный проект попадает в отдельную директорию S3-совместимого хранилища для каждого клиента.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-02-02.png' + - type: 'layout-item' + content: + title: 'Доступ' + text: 'Доступ к S3 регулируется с помощью уникальных ключей.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-02-03.png' + + - type: 'card-layout-block' + title: 'Развёртывание' + colSizes: + all: 12 + xl: 3 + md: 4 + sm: 6 + children: + - type: 'layout-item' + content: + title: 'Хранение' + text: 'Документационный проект из S3-совместимого хранилища выкладывается на Diplodoc.com.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-03-01.png' + - type: 'layout-item' + content: + title: 'Проксирование' + text: 'Возможно проксирование с сайта клиента на сайт diplodoc.com для бесшовной интеграции.' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-03-02.png' + - type: 'layout-item' + content: + title: 'Поиск' + text: 'Поддержка поиска с помощью Elasticsearch. ' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-03-03.png' + - type: 'layout-item' + content: + title: 'Локализация' + text: 'Поддержка локализации и кастомизации проекта документации. ' + media: + image: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-item-03-04.png' + + - type: 'card-layout-block' + title: 'Полная совместимость' + children: + - type: 'background-card' + title: 'YFM' + text: 'Диалект Markdown, соответствующий спецификации CommonMark, с поддержкой плагинов и дополнительными возможностями разметки.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-card-01.png' + disableCompress: true + paddingBottom: 'm' + border: none + - type: 'background-card' + title: 'GitHub' + text: 'Полная интеграция с системами контроля версий, в первую очередь, с GitHub — одним из основных инструментов разработки.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-card-02.png' + disableCompress: true + paddingBottom: 'm' + border: none + - type: 'background-card' + title: 'Elasticsearch' + text: 'Быстрая индексация и поиск на основе Elasticsearch для обеспечения релевантности и точности результатов запросов.' + background: + src: 'https://storage.yandexcloud.net/diplodoc-www-assets/pages/how-to-diplodoc/ddos-how-card-03.png' + disableCompress: true + paddingBottom: 'm' + border: none + + - type: 'icons-block' + size: 'm' + title: 'Присоединяйтесь к сообществу' + items: + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/github.svg' + text: 'GitHub' + url: 'https://github.com/diplodoc-platform' + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/telegram.svg' + text: 'Telegram' + url: 'https://t.me/diplodoc_ru' + - src: 'https://storage.yandexcloud.net/cloud-www-assets/pages/index-diplodoc/stackoverflow.svg' + text: 'Stack Overflow' + url: 'https://stackoverflow.com/tags/diplodoc' \ No newline at end of file diff --git a/ru/toc.yaml b/ru/toc.yaml index 82a692b..87be24b 100644 --- a/ru/toc.yaml +++ b/ru/toc.yaml @@ -74,6 +74,14 @@ items: href: project/navigation.md - name: Разводящая страница href: project/leading-page.md + - name: Page constructor + items: + - name: Обзор + href: project/page-constructor.md + - name: Пример 1 + href: project/pc-example1.yaml + - name: Пример 2 + href: project/pc-example2.yaml - name: Пресеты переменных href: project/presets.md - name: Файл конфигурации