Разделы по безопасности

feature/PaaS-PostgreSQL-to-main

See merge request common/lk-beecloud/beecloud-docs!10

.gitignore

@@ -14,3 +14,7 @@ src/.vuepress/.cache
 src/.vuepress/.temp
 src/.vitepress/cache
 packages-list.json
+/.vale
+/.vscode
+/.vale.ini
+/.markdownlint.json

.gitlab-ci.yml

@@ -12,6 +12,5 @@ variables:
   IMAGE_NAME: docs-portal
 
 include: 
-  - ci/develop.yml
-  - "ci/rules.yml"
+  - ci/*.yml
   - "ci/deploy/*.inc.yml"

VERSION

@@ -1 +1 @@
-0.0.2
+0.0.2-fix1

ci/build-image.yml

@@ -1,34 +1,4 @@
-develop:npm:
-  image: harbor.vimpelcom.ru/dockerhub/library/node:lts
-  stage: build
-  cache:
-    - key:
-        files:
-          - package.json
-      paths:
-        - node_modules/
-  rules:
-    - !reference [.build-npm-rules, rules]
-  variables:
-    PRODUCT: "$PRODUCT_PROD"
-  script:
-    - export PRODUCT_VERSION=$(node -p "require('./package.json').version")
-    - echo PRODUCT_VERSION="$PRODUCT_VERSION" >> .env
-    - echo PRODUCT="$PRODUCT_PROD" >> .env
-    - npm install
-    - npm run build
-    - export VITE_NEW_VERSION="true"
-    - echo "$DMZ_DIST_DIR"
-    - ./node_modules/.bin/vitepress build src --outDir "$DMZ_DIST_DIR"
-  artifacts:
-    paths:
-      - "$DIST_DIR"
-      - "$DMZ_DIST_DIR"
-    reports:
-      dotenv: .env
-    expire_in: 1h
-
-build-image-npm:
+build-image:
   image: harbor.vimpelcom.ru/dockerhub/library/docker:20.10.11-dind
   stage: package
   rules:
@@ -46,7 +16,7 @@ build-image-npm:
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:$PRODUCT_VERSION
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:latest
   needs:
-    - job: develop:npm
+    - job: build:npm
       artifacts: true
       optional: true
   artifacts:

ci/build-npm.yml

@@ -0,0 +1,29 @@
+build:npm:
+  image: harbor.vimpelcom.ru/dockerhub/library/node:lts
+  stage: build
+  cache:
+    - key:
+        files:
+          - package.json
+      paths:
+        - node_modules/
+  rules:
+    - !reference [.build-npm-rules, rules]
+  variables:
+    PRODUCT: "$PRODUCT_PROD"
+  script:
+    - export PRODUCT_VERSION=$(node -p "require('./package.json').version")
+    - echo PRODUCT_VERSION="$PRODUCT_VERSION" >> .env
+    - echo PRODUCT="$PRODUCT_PROD" >> .env
+    - npm install
+    - npm run build
+    - export VITE_NEW_VERSION="true"
+    - echo "$DMZ_DIST_DIR"
+    - ./node_modules/.bin/vitepress build src --outDir "$DMZ_DIST_DIR"
+  artifacts:
+    paths:
+      - "$DIST_DIR"
+      - "$DMZ_DIST_DIR"
+    reports:
+      dotenv: .env
+    expire_in: 1h

ci/deploy/deploy-cloud.inc.yml

@@ -1,11 +1,39 @@
-deploy-cloud:
+deploy-test-stand:
   stage: deploy
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
+  variables:
+    stand: cloud-stand.vega-dev.cloud.vimpelcom.ru
   rules:
-    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
-      when: never
     - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
       when: never
-    - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "feature/ci")
+    - if: $CI_PIPELINE_SOURCE == "push"
       when: manual
-  extends:
-    - .deploy-template
+  before_script:
+    - |
+      sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
+      apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
+      rm -rf /var/cache/apk/*
+    - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - chmod 600 ~/.ssh/id_rsa
+    - >
+      echo "stand: ${stand}"
+      ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+  script:
+    - >
+      echo -e "Connect to ${stand}..." &&
+      scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
+      ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
+      export PRODUCT=$PRODUCT &&
+      export PRODUCT_VERSION=$PRODUCT_VERSION &&
+      export IMAGE_NAME=$IMAGE_NAME &&
+      chmod 700 ~/deploy.sh &&
+      ~/deploy.sh ${IMAGE_NAME} &&
+      rm -f ~/deploy.sh"
+  needs:
+    - job: build-image
+      optional: true

ci/deploy/deploy-dmz.inc.yml

@@ -0,0 +1,40 @@
+deploy-prod:
+  stage: deploy
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
+  variables:
+    stand: beecloud-docs.beecloud-docs.cloud.vimpelcom.ru
+  rules:
+    - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
+      when: never
+    - if: $CI_PIPELINE_SOURCE == "push"
+      when: manual
+  before_script:
+    - |
+      sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
+      apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
+      rm -rf /var/cache/apk/*
+    - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - chmod 600 ~/.ssh/id_rsa
+    - >
+      echo "stand: ${stand}"
+      ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+    - PRODUCT="$PRODUCT_DMZ"
+  script:
+    - >
+      echo -e "Connect to ${stand}..." &&
+      scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
+      ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
+      export PRODUCT=$PRODUCT &&
+      export PRODUCT_VERSION=$PRODUCT_VERSION &&
+      export IMAGE_NAME=$IMAGE_NAME &&
+      chmod 700 ~/deploy.sh &&
+      ~/deploy.sh ${IMAGE_NAME} &&
+      rm -f ~/deploy.sh"
+  needs:
+    - job: build-image
+      optional: true

ci/deploy/deploy-template.inc.yml

@@ -23,7 +23,7 @@
 # - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip
 
 .deploy-template:
-  image: harbor.vimpelcom.ru/dockerhub/library/alpine
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
   before_script:
     - |
       sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
@@ -69,5 +69,5 @@
         rm -f ~/deploy.sh"
       done
   needs:
-    - job: build-image-npm
+    - job: build-image
       optional: true

ci/rules.yml

@@ -2,7 +2,4 @@
   rules:
     - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
       when: never
-    - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "feature/ci")
-      exists:
-        - .npmrc
-        - ./*/.npmrc
+    - if: $CI_PIPELINE_SOURCE == "push"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
-  "version": "0.6.1",
-  "description": "Vega docs portal",
+  "version": "0.6.5-main",
+  "description": "Beeline Cloud docs",
   "main": "index.js",
   "scripts": {
     "dev": "vitepress dev src",
@@ -15,16 +15,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@beeline/design-tokens": "^1.31.0",
-    "vue": "3.4.7"
+    "@beeline/design-tokens": "^1.31.6",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@docsearch/css": "3.3.0",
-    "@types/node": "20.10.7",
-    "@vitejs/plugin-vue": "4.3.4",
-    "sass": "1.69.7",
-    "typescript": "^5.8.3",
-    "vitepress": "1.0.0-rc.40",
-    "vitepress-plugin-tabs": "0.5.0"
+    "@docsearch/css": "4.1.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sass": "^1.70.0",
+    "typescript": "^5.9.3",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitepress": "^1.6.4",
+    "vitepress-plugin-tabs": "^0.7.3"
   }
-}
+}

scripts/build-cloud-stand.ps1

@@ -0,0 +1,22 @@
+#ps
+
+# Configs
+$Env:CONTAINER_REGISTRY = "harbor.vimpelcom.ru"
+$Env:PRODUCT            = "vega/cloud"
+$Env:IMAGE_NAME         = "docs"
+$Env:PRODUCT_VERSION    = "0.6.2" # node -p "require('./package.json').version" 
+$Env:PKG_NAME           = "vega-portal" # node -p "require('./package.json').name"
+
+# VITE VARS
+
+Remove-Item -Recurse -Force dist
+
+# Write-Output "Version: " node -p "require('./package.json').version"
+git pull
+Write-Output " Компиляция:" $env:PKG_NAME'@'$env:PRODUCT_VERSION
+npm install
+npm run build
+
+docker build -f ./build.Dockerfile -t $env:CONTAINER_REGISTRY/$env:PRODUCT/$env:IMAGE_NAME':'$env:PRODUCT_VERSION .
+docker image list | FINDSTR "$env:PRODUCT/$env:IMAGE_NAME"
+docker push $env:CONTAINER_REGISTRY/$env:PRODUCT/$env:IMAGE_NAME':'$env:PRODUCT_VERSION

src/.vitepress/config.mts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
 import { overrideComponents } from './override-components'
+import { resolve } from 'node:path'
+import { fileURLToPath, URL } from 'node:url'
 
 const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -42,10 +45,12 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Beeline Cloud",
+  srcDir: ".",
+  title: " ",
   description: "Документация Beeline Cloud",
   head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
   base: typeof new_version !== 'undefined' ? '/' : '/docs/',
+  appearance: false,
   markdown: {
     config(md) {
       md.use(tabsMarkdownPlugin)
@@ -53,8 +58,31 @@ export default defineConfig({
   },
   vite: {
     resolve: {
-      alias: overrideComponents(),
-    }
+      alias: [
+        ...overrideComponents(),
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./theme', import.meta.url))
+        },
+      ],
+    },
+    plugins: [
+      viteStaticCopy({
+        targets: [
+          {
+            src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
+            dest: 'assets',
+          },
+        ],
+      }),
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
   },
   locales: {
     root: {
@@ -63,7 +91,11 @@ export default defineConfig({
     }
   },
   themeConfig: {
-    logo: '/favicon.svg',
+    logo: {
+      light: '/img/logo-cloud.svg',
+      dark: '/img/logo-cloud.svg',
+      alt: '',
+    },
     search: {
       provider: 'local',
       options: {
@@ -75,14 +107,8 @@ export default defineConfig({
                 buttonAriaLabel: 'Поиск'
               },
               modal: {
-                noResultsText: 'Нет результатов для',
+                noResultsText: 'По вашему запросу ничего не найдено',
                 resetButtonTitle: 'Сбросить',
-                displayDetails: 'Показать расширенный список',
-                footer: {
-                  selectText: 'Выбрать',
-                  closeText: 'Закрыть',
-                  navigateText: 'Перейти',
-                }
               }
             }
           }
@@ -91,151 +117,282 @@ export default defineConfig({
     },
     // https://vitepress.dev/reference/default-theme-config
     // nav: [
-    //   ],
-
-    //  socialLinks: [
-    //    { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
-    //  ],
-
-    // editLink: {
-    //   pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
-    //   text: 'Отредактируйте эту страницу на GitLab'
-    // },
+    //   {
+    //     text: 'Документация',
+    //     link: '/guide/',
+    //   },
+    //   {
+    //     text: 'API',
+    //     link: '',
+    //   },
+    //   {
+    //     text: 'Terraform',
+    //     // link: '/terraform/',
+    //     link: '',
+    //   },
+    // ],
 
     docFooter: {
       next: 'Вперед',
       prev: 'Назад'
     },
 
-    // lastUpdated: {
-    //   text: 'Обновлена',
-    //   formatOptions: {
-    //     dateStyle: 'long',
-    //   }
-    // },
-
     outline: {
       label: 'Содержание'
     },
     sidebar: {
-      '/platform/': [
-        {
-          text: 'Платформа Beeline Cloud', link: '/platform/index.md',
-          collapsed: true,
+    '/platform/': [
+      {
+        text: 'Платформа Beeline Cloud', link: '/platform/index.md',
+        collapsed: true,
           items: [
-            { text: 'Сервисы', link: '/platform/services/services.md' },
-            { text: 'Техническая поддержка', link: '/platform/support/support-overview.md' },
+            {text: 'Обзор', link: '/platform/about.md'},
+            {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'}, 
           ],
         },
       ],
-      '/start/': [
-        {
-          text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
-          collapsed: true,
-          items: [
-            { text: 'Начать работу', link: '/start/getting-started.md' },
-            { text: 'Бесплатный период', link: '/start/trial.md' },
-            { text: 'Платное использование', link: '/start/organization.md' },
-          ],
-        },
-      ],
-      //  '/billing/': [
+    '/start/': [
+      {
+        text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
+      },
+      {text: 'Начать работу', link: '/start/getting-started.md'},
+      {text: 'Бесплатный период', link: '/start/trial.md'}, 
+      {text: 'Платное использование', link: '/start/organization.md'},
+    ],
 
-      //   ],
+    '/PaaS/': [
+      {
+        text: 'Начало работы в Cloud PostgreSQL', link: '/PaaS/index.md',
+      },
+      { text: 'Cloud PostgreSQL', link: '/PaaS/PostgreSQL/PostgreSQL-index.md',
+        collapsed: true,
+        items: [
+          {text: 'Обзор сервиса', link: '/PaaS/PostgreSQL/about.md'}, 
+          {text: 'Описание технических параметров', link: '/PaaS/PostgreSQL/cluster-parameter.md'},
+          {text: 'Общая схема подключения', link: '/PaaS/PostgreSQL/connection.md'},
+          {text: 'Возможности пользователя', link: '/PaaS/PostgreSQL/user-capabilities.md'},
+          {text: 'Веб-интерфейс pgAdmin', link: '/PaaS/PostgreSQL/pgadmin.md'}, 
+          {text: 'Веб-интерфейс Grafana', link: '/PaaS/PostgreSQL/grafana.md'},
+        ],
+      },  
+      {text: 'Параметры конфигурации IPSEC', link: '/PaaS/IPSEC.md'},
+    ],
+
+    //  '/billing/': [
+ 
+    //   ],
+    '/backups/': [
+      {
+          text: 'Резервное копирование', link: '/backups/index.md',
+        },
+      {
+        text: 'Обзор сервиса', link: '/backups/backups-overview.md',
+        collapsed: true,
+              items: [  
+                {text: 'О сервисе', link: '/backups/about.md'},
+                {text: 'Квоты и лимиты', link: '/backups/backup-quatos.md'},
+           ]
+      },
+      {text: 'Резервное копирование виртуальных машин Beeline Cloud', link: '/backups/backup-internal-infra.md'},
+      {text: 'Резервное копирование собственной инфраструктуры в Beeline Cloud', link: '/backups/backup-external-infra.md'},
+      {text: 'Каталог резервных копий', link: '/backups/view-backups.md'},
+      
+    ],
       '/vdc/': [
         {
           text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
           collapsed: true,
-          items: [
-            { text: 'Обзор сервиса', link: '/vdc/vdc-overview.md' },
-            { text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md' },
-            {
-              text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
+              items: [  
+                { text: 'О сервисе', link: '/vdc/vdc-about.md' },
+                { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
+                { text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
+           ]
+        },
+        {
+          text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'
+        }, 
+
+        { text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md', 
               collapsed: true,
               items: [
-                { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
-                { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
-                { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md' },
-                {
-                  text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md',
+            { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
+            { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
+            { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md'},
+            ],  
+            },   
+            { text: 'Виртуальные машины', link: '/vdc/vdc-how-to/vm/vm-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Создание ВМ', link: '/vdc/vdc-how-to/vm/create-vm.md'}, 
+                {text: 'Создание vApp', link: '/vdc/vdc-how-to/vm/create-vapp.md'},
+                {text: 'Управление состоянием ВМ', link: '/vdc/vdc-how-to/vm/manage-vm.md'},
+                {text: 'Клонирование ВМ', link: '/vdc/vdc-how-to/vm/clone-vm.md'},       
+                {text: 'Изменение конфигурации ВМ', link: '/vdc/vdc-how-to/vm/edit-vm.md'},       
+                {text: 'Удаление ВМ', link: '/vdc/vdc-how-to/vm/delete-vm.md'},  
+                {text: 'Группы размещения', link: '/vdc/vdc-how-to/vm/create-affinity-rules.md'},
+                {text: 'Снимки ВМ', link: '/vdc/vdc-how-to/vm/create-snapshot.md'},
+                {text: 'VMware Tools', link: '/vdc/vdc-how-to/vm/vmware-tools.md'},
+              ],  
+            },
+            { text: 'Диски', link: '/vdc/vdc-how-to/disks/disks-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/disks/about.md'}, 
+                {text: 'Создание диска', link: '/vdc/vdc-how-to/disks/create-disk.md'},
+                {text: 'Проверка состояния диска', link: '/vdc/vdc-how-to/disks/view-disk.md'},
+                {text: 'Управление выделенными дисками', link: '/vdc/vdc-how-to/disks/attach-disk.md'},    
+                {text: 'Изменение политики хранения дисков ВМ', link: '/vdc/vdc-how-to/disks/change-storage-policy-of-vm.md'},  
+                {text: 'Редактирование параметров диска', link: '/vdc/vdc-how-to/disks/edit-disk.md'},
+                {text: 'Удаление диска', link: '/vdc/vdc-how-to/disks/delete-disk.md'},
+              ],  
+            },
+            { text: 'Сети', link: '/vdc/vdc-how-to/networks/networks-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/networks/about.md'},
+                {text: 'Настройка доступа к ВМ из интернета', link: '/vdc/vdc-how-to/networks/allow-external-connections-to-vm.md'},     
+                {text: 'Подключение ВМ в vApp к сети', link: '/vdc/vdc-how-to/networks/connect-vapp-to-network.md'},       
+                {text: 'Подключение ВМ к интернету', link: '/vdc/vdc-how-to/networks/connect-vm-to-network.md'},       
+                {text: 'Создание сети в организации и подключение к Edge Gateway', link: '/vdc/vdc-how-to/networks/create-network.md'},  
+                {text: 'Подключение сети к Edge Gateway', link: '/vdc/vdc-how-to/networks/connect-to-edge-gateway.md'},
+                {text: 'Создание Pre-Shared Key', link: '/vdc/vdc-how-to/networks/create-psk.md'},     
+                { text: 'Настройка site-to-site подключения с помощью IPSec', link: '/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md',
                   collapsed: true,
                   items: [
-                    { text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md' },
-                    { text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md' },
-                  ],
+                    {text: 'Настройка IPSec VPN', link: '/vdc/vdc-how-to/networks/ipsec/setup-ipsec-vpn.md'},
+                    {text: 'Настройка ASAv', link: '/vdc/vdc-how-to/networks/ipsec/asav.md'},     
+                    {text: 'Настройка CSR 1000v', link: '/vdc/vdc-how-to/networks/ipsec/csr1000v.md'},     
+                    {text: 'Настройка Fortigate', link: '/vdc/vdc-how-to/networks/ipsec/fortigate.md'},
+                    {text: 'Проверить сетевую связанность', link: '/vdc/vdc-how-to/networks/ipsec/check-vpn-status.md'},    
+                  ],  
                 },
-              ],
+              ],  
+            },
+            { text: 'Пользователи и роли', link: '/vdc/vdc-how-to/users/users-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Ролевая модель', link: '/vdc/vdc-how-to/users/roles.md'},
+                {text: 'Создание пользователя', link: '/vdc/vdc-how-to/users/add-user.md'},
+                {text: 'Изменение пароля пользователя', link: '/vdc/vdc-how-to/users/change-users-password.md'},
+                {text: 'Настройка квот', link: '/vdc/vdc-how-to/users/quotas.md'},            
+              ],  
+            },
+            { text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md', 
+              collapsed: true,
+              items: [
+                {text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md'},
+                {text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md'},      
+              ],  
             },
-            // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
           ],
-        },
-      ],
+
+        // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
       '/compute/': [
         {
           text: 'Виртуальные машины', link: '/compute/index.md',
+        },
+        { text: 'Обзор сервиса', link: '/compute/compute-overview-index.md' ,
+          collapsed: true,
+              items: [  
+            { text: 'Техническое описание', link: '/compute/compute-overview.md' },
+            { text: 'Квоты и лимиты', link: '/compute/compute-quatos.md' },
+           ]
+        },
+        {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'},
+        { text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
           collapsed: true,
           items: [
-            { text: 'Обзор сервиса', link: '/compute/compute-overview.md' },
-            //  {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'}, 
-            {
-              text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
-              collapsed: true,
-              items: [
                 { text: 'Создание ВМ', link: '/compute/compute-how-to/compute-servers-create.md' },
-                { text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect.md' },
+                { text: 'Создание ВМ джамп-хоста', link: '/compute/compute-how-to/compute-servers-jump-create.md' },
+                { text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect-index.md',
+                  collapsed: true,
+                  items: [
+                    { text: 'Подключение по SSH по внешнему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-public.md'},
+                    { text: 'Подключение по SSH по внутреннему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-inside.md' },
+                    { text: 'Подключение по SSH по логину и паролю', link: '/compute/compute-how-to/compute-connect-pwd.md' },   
+                 ]
+                },
                 { text: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
-              ],
-            },
-            { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
-            { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
-            { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
-            {
-              text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
-              collapsed: true,
-              items: [
-                { text: 'Подключение по SSH к ВМ закрытого контура', link: '/compute/compute-guide/compute-guide-ssh-inside.md' },
-              ],
-            },
-          ],
-        },
-
-      ],
-      '/admin/': [
-        {
-          text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
+                ],
+              },
+        { text: 'Диски', link: '/compute/compute-how-to/compute-disks/compute-disk-index.md',
           collapsed: true,
           items: [
-            { text: 'Управление ключевыми парами', link: '/admin/ssh.md' },
-          ],
-        },
-      ],
-      '/yellowbe/': [
-        {
-          text: 'Дизайн-платформа Yellowbe', link: '/yellowbe/index.md',
-          collapsed: false,
-          items: [
-            {
-              text: 'Начать работу',
-              link: '/yellowbe/get-started/index.md',
-              collapsed: true,
-              items: [
-                {
-                  text: 'Разработчику',
-                  link: '/yellowbe/get-started/dev.md',
-                }, {
-                  text: 'Дизайнеру',
-                  link: '/yellowbe/get-started/design.md',
-                },
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-disks/compute-disk-about.md' },
+                { text: 'Создание диска', link: '/compute/compute-how-to/compute-disks/compute-disk-create.md' },
+                { text: 'Управление дисками', link: '/compute/compute-how-to/compute-disks/compute-disk-manage.md' },
+                { text: 'Удаление диска', link: '/compute/compute-how-to/compute-disks/compute-disk-del.md' },
               ]
             },
-            {
-                  text: 'Состав дизайн-платформы',
-                  link: '/yellowbe/about.md',
-            }
+        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-index.md', 
+          collapsed: true,
+          items: [  
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-ip/compute-ip-about.md' },
+                { text: 'Просмотр IP-адресов', link: '/compute/compute-how-to/compute-ip/compute-ip-view.md' },
+                { text: 'Создание IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-create.md' },
+                { text: 'Управление IP-адресами', link: '/compute/compute-how-to/compute-ip/compute-ip-manager.md' },
+                { text: 'Удаление IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-del.md' },
+              ]
+        },
+        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-index.md', 
+          collapsed: true,
+          items: [
+            { text: 'Обзор', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-about.md'},
+            { text: 'Создание группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-create.md'},
+            { text: 'Управление группами размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-manager.md' },   
+            { text: 'Удаление группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-del.md' },
+          ]
+        },
+        { text: 'Сети', link: '/compute/compute-how-to/compute-network/compute-network-index.md',
+          collapsed: true,
+          items: [
+            { text: 'Настройка site-to-site VPN с помощью VyOS', link: '/compute/compute-how-to/compute-network/compute-vpn-vyos.md' },
+            { text: 'Подключение ВМ закрытого контура к интернету', link: '/compute/compute-how-to/compute-network/compute-network-inside.md' },
           ],
         },
       ],
+      '/admin/': [
+      {
+        text: 'Администрирование', link: '/admin/index.md',
+      },
+      {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
+      ],
+      '/vdi/': [
+        {
+          text: 'Виртуальные рабочие столы', link: '/vdi/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdi/vdi-overview.md',
+          collapsed: true,
+              items: [  
+            { text: 'О сервисе', link: '/vdi/vdi-about.md' },
+            { text: 'Техническое описание', link: '/vdi/vdi-tech.md' },
+            { text: 'Квоты и лимиты', link: '/vdi/vdi-quatos.md' },
+            { text: 'Тарификация', link: '/vdi/vdi-tarif.md' },
+              ]
+        },
+        {
+          text: 'Заказ виртуальных рабочих столов', link: '/vdi/vdi-how-to/vdi-create.md'
+        },
+        {
+          text: 'Настройка сервиса', link: '/vdi/vdi-how-to/vdi-nastroika.md',
+          collapsed: true,
+              items: [  
+            { text: 'Настройка интеграции с Active Directory', link: '/vdi/vdi-how-to/vdi-connect-to-ad.md' },
+            { text: 'Настройка сети', link: '/vdi/vdi-how-to/vdi-interconnect.md' },
+              ]
+        },
+        // {
+       //   text: 'Gold-образ', link: '/vdi/vdi-how-to/vdi-gold.md'
+       // },
+        {
+          text: 'Подключение к виртуальному рабочему месту', link: '/vdi/vdi-how-to/vdi-connect.md'
+        }, 
+       ],    
+      },  
     },
-  },
-}
+  }
 )

src/.vitepress/matomo.ts

@@ -106,7 +106,7 @@ export default function(parameters: IParameters) {
     // window._paq elsewhere when needed, including closure scopes.
     const _paq = window._paq;
     // If user requests consent checking, do this before we actually track.
-    // Note: this doesn't work at the moment because the user has no way to set
+    // tip: this doesn't work at the moment because the user has no way to set
     // whether consent was given. Oops.
     if (requireConsent) {
       _paq.push(['requireConsent']);

src/.vitepress/override-components.ts

@@ -26,6 +26,12 @@ export const overrideComponents = () => (
             new URL('./theme/components/CustomContent.vue', import.meta.url)
           ) 
         },
+        {
+          find: /^.*\/VPHome\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/CustomHome.vue', import.meta.url)
+          ) 
+        },
         {
           find: /^.*\/VPDocFooter\.vue$/,
           replacement: fileURLToPath(
@@ -41,7 +47,7 @@ export const overrideComponents = () => (
         {
           find: /^.*\/VPFeature\.vue$/,
           replacement: fileURLToPath(
-            new URL('./theme/components/CustomFeature.vue', import.meta.url)
+            new URL('./theme/components/CustomHomeFeature.vue', import.meta.url)
           ) 
         },
         {
@@ -62,6 +68,12 @@ export const overrideComponents = () => (
             new URL('./theme/components/CustomNavBarSearchButton.vue', import.meta.url)
           ) 
         },
+        {
+          find: /^.*\/VPHomeHero\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/CustomHomeHero.vue', import.meta.url)
+          ) 
+        },
         {
           find: /^.*\/VPLocalSearchBox\.vue$/,
           replacement: fileURLToPath(

src/.vitepress/theme/components/CustomAvatar.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="[$style.CustomFeatureImage, classes]">
+    <CustomIcon :icon="icon" size="large" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
+import { computed, useCssModule } from 'vue';
+import CustomIcon from './CustomIcon.vue';
+
+const { size = 'medium' } = defineProps<{
+  icon: Icons,
+  size?: 'medium' | 'small'
+}>()
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomAvatar]: true,
+  [style.CustomAvatarSmall]: size === 'small'
+}))
+</script>
+
+<style lang="scss" module>
+@use '@beeline/design-tokens/scss/tokens/components/avatar';
+@use "@beeline/design-tokens/scss/tokens/themes";
+
+.CustomAvatar {
+  border-radius: avatar.$avatar-squircle-border-radius;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: avatar.$avatar-medium-height;
+  width: avatar.$avatar-medium-width;
+  letter-spacing: avatar.$avatar-medium-text-font-letter-spacing;
+  line-height: avatar.$avatar-medium-text-font-line-height;
+  font-size: avatar.$avatar-medium-text-font-size;
+  background-color: themes.$color-status-neutral-background;
+
+  &Small {
+    height: avatar.$avatar-small-height;
+    width: avatar.$avatar-small-width;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomButton.vue

@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
 
 interface Props {
   tag?: string
-  size?: 'medium' | 'big'
+  size?: 'medium' | 'big' | 'small'
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
@@ -51,6 +51,15 @@ const component = computed(() => {
   transition: color 0.1s, border-color 0.1s, background-color 0.1s;
 }
 
+.VPButton.small {
+  border-radius: 12px;
+  padding: 0 16px;
+  line-height: 20px;
+  height: 40px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
 .VPButton.medium {
   border-radius: 12px;
   padding: 0 20px;

src/.vitepress/theme/components/CustomContent.vue

@@ -11,49 +11,82 @@ const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <div
-    class="VPContent CustomContent"
-    id="VPContent"
-    :class="{
+  <div class="VPContent CustomContent" id="VPContent" :class="{
       'has-sidebar': hasSidebar,
       'is-home': frontmatter.layout === 'home'
-    }"
-  >
-    <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
+}">
+    <slot name="not-found" v-if="page.isNotFound">
+      <NotFound />
+    </slot>
 
     <VPPage v-else-if="frontmatter.layout === 'page'">
-      <template #page-top><slot name="page-top" /></template>
-      <template #page-bottom><slot name="page-bottom" /></template>
+      <template #page-top>
+        <slot name="page-top" />
+      </template>
+      <template #page-bottom>
+        <slot name="page-bottom" />
+      </template>
     </VPPage>
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
-      <template #home-hero-before><slot name="home-hero-before" /></template>
-      <template #home-hero-info><slot name="home-hero-info" /></template>
-      <template #home-hero-image><slot name="home-hero-image" /></template>
-      <template #home-hero-after><slot name="home-hero-after" /></template>
-      <template #home-features-before><slot name="home-features-before" /></template>
-      <template #home-features-after><slot name="home-features-after" /></template>
+      <template #home-hero-before>
+        <slot name="home-hero-before" />
+      </template>
+      <template #home-hero-info>
+        <slot name="home-hero-info" />
+      </template>
+      <template #home-hero-image>
+        <slot name="home-hero-image" />
+      </template>
+      <template #home-hero-after>
+        <slot name="home-hero-after" />
+      </template>
+      <template #home-features-before>
+        <slot name="home-features-before" />
+      </template>
+      <template #home-features-after>
+        <slot name="home-features-after" />
+      </template>
     </VPHome>
 
-    <component
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
+    <component v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" :is="frontmatter.layout" />
 
     <CustomDoc v-else>
-      <template #doc-top><slot name="doc-top" /></template>
-      <template #doc-bottom><slot name="doc-bottom" /></template>
+      <template #doc-top>
+        <slot name="doc-top" />
+      </template>
+      <template #doc-bottom>
+        <slot name="doc-bottom" />
+      </template>
 
-      <template #doc-footer-before><slot name="doc-footer-before" /></template>
-      <template #doc-before><slot name="doc-before" /></template>
-      <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-footer-before>
+        <slot name="doc-footer-before" />
+      </template>
+      <template #doc-before>
+        <slot name="doc-before" />
+      </template>
+      <template #doc-after>
+        <slot name="doc-after" />
+      </template>
 
-      <template #aside-top><slot name="aside-top" /></template>
-      <template #aside-outline-before><slot name="aside-outline-before" /></template>
-      <template #aside-outline-after><slot name="aside-outline-after" /></template>
-      <template #aside-ads-before><slot name="aside-ads-before" /></template>
-      <template #aside-ads-after><slot name="aside-ads-after" /></template>
-      <template #aside-bottom><slot name="aside-bottom" /></template>
+      <template #aside-top>
+        <slot name="aside-top" />
+      </template>
+      <template #aside-outline-before>
+        <slot name="aside-outline-before" />
+      </template>
+      <template #aside-outline-after>
+        <slot name="aside-outline-after" />
+      </template>
+      <template #aside-ads-before>
+        <slot name="aside-ads-before" />
+      </template>
+      <template #aside-ads-after>
+        <slot name="aside-ads-after" />
+      </template>
+      <template #aside-bottom>
+        <slot name="aside-bottom" />
+      </template>
     </CustomDoc>
   </div>
 </template>
@@ -82,7 +115,7 @@ const { hasSidebar } = useSidebar()
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
+    padding-left: 320px;
   }
 }
 

src/.vitepress/theme/components/CustomDoc.vue

@@ -54,10 +54,12 @@ const pageName = computed(() =>
         <div class="content-container">
           <slot name="doc-before" />
           <main class="main">
-            <Content class="vp-doc" :class="[
-                pageName,
-                theme.externalLinkIcon && 'external-link-icon-enabled'
-]" />
+            <div class="vp-doc" :class="[
+              pageName,
+              theme.externalLinkIcon && 'external-link-icon-enabled'
+            ]">
+              <Content />
+            </div>
             <SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
           </main>
           <VPDocFooter>
@@ -73,58 +75,70 @@ const pageName = computed(() =>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@use '@/scss/helpers/media';
+
 .VPDoc {
   padding: 32px 24px 96px;
   width: 100%;
-}
 
-@media (min-width: 768px) {
-  .VPDoc {
+  @include media.media_min(960px) {
+    padding: 48px 32px 0;
+  }
+
+  @include media.media_max(768px) {
     padding: 48px 32px 128px;
   }
 }
 
-@media (min-width: 960px) {
-  .VPDoc {
-    padding: 48px 32px 0;
+.VPDoc:not(.has-sidebar) .container {  
+  @include media.media_min(1440px) {
+    max-width: 1104px;
   }
 
-  .VPDoc:not(.has-sidebar) .container {
-    display: flex;
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;display: flex;
     justify-content: center;
     max-width: 992px;
   }
+}
 
-  .VPDoc:not(.has-sidebar) .content {
+.VPDoc:not(.has-sidebar) .content {
+  @include media.media_min(1440px) {
+    max-width: 784px;
+  }
+
+  @include media.media_max(960px) {
     max-width: 752px;
   }
 }
 
-@media (min-width: 1280px) {
-  .VPDoc .container {
+.VPDoc .container {
+  @include media.media_min(1280px) {
     display: flex;
     justify-content: center;
   }
-
-  .VPDoc .aside {
-    display: block;
-  }
 }
 
-@media (min-width: 1440px) {
-  .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
-  }
-
-  .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+.VPDoc .aside {
+  @include media.media_min(1280px) {
+    display: block;
   }
 }
 
 .container {
   margin: 0 auto;
   width: 100%;
+
+  @include media.media_min(1280px) {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;
+  }
 }
 
 .aside {
@@ -180,20 +194,6 @@ const pageName = computed(() =>
   width: 100%;
 }
 
-@media (min-width: 960px) {
-  .content {
-    padding: 0 32px 128px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .content {
-    order: 1;
-    margin: 0;
-    min-width: 640px;
-  }
-}
-
 .content-container {
   margin: 0 auto;
 }

src/.vitepress/theme/components/CustomDocFooter.vue

@@ -6,6 +6,8 @@ import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/pre
 import VPIconEdit from 'vitepress/dist/client/theme-default/components/icons/VPIconEdit.vue'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
 import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
+import CustomIcon from './CustomIcon.vue'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
 
 const { theme, page, frontmatter } = useData()
 
@@ -43,14 +45,14 @@ const showFooter = computed(() => {
     <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
       <div class="pager">
         <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
-          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
+          <CustomIcon class="desc-prev" :icon="Icons.ArrowRight" />
           <span class="title" v-html="control.prev.text"></span>
         </VPLink>
       </div>
       <div class="pager">
         <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
-          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
           <span class="title" v-html="control.next.text"></span>
+          <CustomIcon class="desc-next" :icon="Icons.ArrowRight" />
         </VPLink>
       </div>
     </nav>
@@ -59,7 +61,7 @@ const showFooter = computed(() => {
 
 <style lang="scss" scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 40px;
 }
 
 .edit-info {
@@ -98,8 +100,6 @@ const showFooter = computed(() => {
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
   display: grid;
   grid-row-gap: 8px;
 }
@@ -115,10 +115,19 @@ const showFooter = computed(() => {
   display: block;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  padding: 11px 16px 13px;
+  padding: 10px 16px 10px 12px;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
+  display: flex;
+  gap: 8px;
+  
+  color: #1a73e8;
+
+  &.next {
+    padding: 10px 12px 10px 16px;
+    justify-content: flex-end;
+  }
 }
 
 .pager-link:hover {
@@ -136,6 +145,14 @@ const showFooter = computed(() => {
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
+
+  &-next {
+    rotate: -270deg;
+  }
+
+  &-prev {
+    rotate: -90deg;
+  }
 }
 
 .title {

src/.vitepress/theme/components/CustomFeature.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
-import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
-import VPIconArrowRight from 'vitepress/dist/client/theme-default/components/icons/VPIconArrowRight.vue'
-
-defineProps<{
-  icon?: DefaultTheme.FeatureIcon
-  title: string
-  details?: string
-  link?: string
-  linkText?: string
-  rel?: string
-  target?: string
-}>()
-</script>
-
-<template>
-  <VPLink
-    class="VPFeature CustomFeature"
-    :href="link"
-    :rel="rel"
-    :target="target"
-    :no-icon="true"
-    :tag="link ? 'a' : 'div'"
-  >
-    <article class="box">
-      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
-        <VPImage
-          :image="icon"
-          :alt="icon.alt"
-          :height="icon.height || 48"
-          :width="icon.width || 48"
-        />
-      </div>
-      <VPImage
-        v-else-if="typeof icon === 'object'"
-        :image="icon"
-        :alt="icon.alt"
-        :height="icon.height || 48"
-        :width="icon.width || 48"
-      />
-      <div v-else-if="icon" class="icon" v-html="icon"></div>
-      <h2 class="title" v-html="title"></h2>
-      <p v-if="details" class="details" v-html="details"></p>
-
-      <div v-if="linkText" class="link-text">
-        <p class="link-text-value">
-          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
-        </p>
-      </div>
-    </article>
-  </VPLink>
-</template>
-
-<style scoped>
-.VPFeature {
-  display: block;
-  border: 1px solid var(--vp-c-bg-soft);
-  border-radius: 12px;
-  height: 100%;
-  background-color: var(--vp-c-bg-soft);
-  transition: border-color 0.25s, background-color 0.25s;
-}
-
-.VPFeature.link:hover {
-  border-color: var(--vp-c-brand-1);
-}
-
-.box {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  height: 100%;
-}
-
-.box > :deep(.VPImage) {
-  margin-bottom: 20px;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-  border-radius: 6px;
-  background-color: var(--vp-c-default-soft);
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
-  transition: background-color 0.25s;
-}
-
-.title {
-  line-height: 24px;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--color-text-active);
-}
-
-.details {
-  flex-grow: 1;
-  padding-top: 8px;
-  line-height: 24px;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--color-text-inactive);
-}
-
-.link-text {
-  padding-top: 8px;
-}
-
-.link-text-value {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-}
-
-.link-text-icon {
-  display: inline-block;
-  margin-left: 6px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-</style>

src/.vitepress/theme/components/CustomHero.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { type Ref, inject } from 'vue'
+import { type Ref, inject, ref } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import CustomButton from './CustomButton.vue'
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
+import HomeHeroSearchButton from './HomeHeroSearchButton.vue'
+import VPLocalSearchBox from 'vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -14,11 +16,14 @@ defineProps<{
   name?: string
   text?: string
   tagline?: string
+  search?: boolean
   image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 
 const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+
+const showSearch = ref(false)
 </script>
 
 <template>
@@ -27,21 +32,20 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
       <div class="main">
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
-            <span v-html="name" class="clip"></span>
+            {{ name }}
           </h1>
           <p v-if="text" v-html="text" class="text"></p>
           <p v-if="tagline" v-html="tagline" class="tagline"></p>
         </slot>
 
+        <div v-if="search" class="VPHeroSearchWrapper">
+          <VPLocalSearchBox v-if="showSearch" @close="showSearch = false" />
+          <HomeHeroSearchButton @click="showSearch = true" />
+        </div>
+
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">
-            <CustomButton
-              tag="a"
-              size="medium"
-              :theme="action.theme"
-              :text="action.text"
-              :href="action.link"
-            />
+            <CustomButton tag="a" size="medium" :theme="action.theme" :text="action.text" :href="action.link" />
           </div>
         </div>
       </div>
@@ -59,20 +63,26 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 </template>
 
 <style lang="scss" scoped>
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/mixin";
+
+$topSpacing: 40px;
+
 .VPHero {
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 64px 64px;
   }
 }
 
@@ -80,7 +90,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 1080px;
 }
 
 @media (min-width: 960px) {
@@ -95,46 +105,41 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   order: 2;
   flex-grow: 1;
   flex-shrink: 0;
-}
-
-.VPHero.has-image .container {
-  text-align: center;
-}
-
-@media (min-width: 960px) {
+  background-color: themes.$color-background-secondary;
+  padding: 98px 92px;
+  border-radius: sizes.$size-border-radius-x6;
+  
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: center;
   }
-}
+  
+  @media (min-width: 960px) {
+    .main {
+      order: 1;
+      width: calc((100% / 3) * 2);
+    }
 
-@media (min-width: 960px) {
-  .main {
-    order: 1;
-    width: calc((100% / 3) * 2);
+    .VPHero.has-image .main {
+      max-width: 592px;
+    }
   }
 
-  .VPHero.has-image .main {
-    max-width: 592px;
+  .name,
+  .text {
+    @include mixin.h1;
+    white-space: pre-wrap;
   }
-}
 
-.name,
-.text {
-  max-width: 392px;
-  letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
-  font-weight: 700;
-  white-space: pre-wrap;
-}
-
-.VPHero.has-image .name,
-.VPHero.has-image .text {
-  margin: 0 auto;
-}
-
-.name {
-  color: var(--vp-home-hero-name-color);
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0 auto;
+  }
+  
+  .name {
+    color: themes.$color-text-active;
+    padding-bottom: 40px;
+    text-align: center;
+  }
 }
 
 .clip {
@@ -144,22 +149,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
-@media (min-width: 640px) {
-  .name,
-  .text {
-    max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
-  }
-}
-
 @media (min-width: 960px) {
-  .name,
-  .text {
-    line-height: 64px;
-    font-size: 56px;
-  }
-
   .VPHero.has-image .name,
   .VPHero.has-image .text {
     margin: 0;
@@ -168,7 +158,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 .tagline {
   padding-top: 8px;
-  max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
@@ -183,7 +172,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 @media (min-width: 640px) {
   .tagline {
     padding-top: 12px;
-    max-width: 576px;
     line-height: 32px;
     font-size: 20px;
   }

src/.vitepress/theme/components/CustomHome.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import VPHomeHero from 'vitepress/dist/client/theme-default/components/VPHomeHero.vue'
+import CustomHomeFeatures from './CustomHomeFeatures.vue';
+import CustomHomeServices from './CustomHomeServices.vue';
+</script>
+
+<template>
+  <div class="VPHome CustomHome">
+    <slot name="home-hero-before" />
+    <VPHomeHero>
+      <template #home-hero-info>
+        <slot name="home-hero-info" />
+      </template>
+      <template #home-hero-image>
+        <slot name="home-hero-image" />
+      </template>
+    </VPHomeHero>
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <CustomHomeFeatures />
+    <slot name="home-features-after" />
+
+    <CustomHomeServices />
+
+    <Content />
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  padding-bottom: 96px;
+}
+
+.VPHome :deep(.VPHomeSponsors) {
+  margin-top: 112px;
+  margin-bottom: -128px;
+}
+</style>

src/.vitepress/theme/components/CustomHomeFeature.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { computed, useCssModule } from 'vue';
+import { NAVBAR_HEIGHT } from '../constants'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
+import CustomAvatar from './CustomAvatar.vue';
+
+const { disabled, scrollTo, link, items } = defineProps<{
+  icon: string
+  title: string
+  link?: string
+  scrollTo?: string
+  disabled?: boolean
+  items?: ItemFeature[]
+}>()
+
+type ItemFeature = { 
+  title: string
+  link?: string
+}
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomFeature]: true,
+  [style.CustomFeatureDisabled]: disabled || !link && !scrollTo,
+}))
+
+const handleClick = (event: Event) => {
+  if (scrollTo) {
+    const targetElTop = document.querySelector(scrollTo)?.getBoundingClientRect().top
+
+    if (targetElTop) {
+      event.stopPropagation()
+      window.scrollTo({ behavior: 'smooth', top: targetElTop + window.scrollY - NAVBAR_HEIGHT - 32 })
+    }
+  }
+}
+</script>
+
+<template>
+  <Component :is="!disabled && link ? VPLink : 'article'"
+    :class="classes" @click="handleClick">
+    <CustomAvatar :class="$style.CustomFeatureIcon" :icon="icon as Icons" />
+  
+    <div :class="$style.CustomFeatureContent">
+     <Component :is="!disabled && link ? VPLink : 'article'" v-bind="{ ...(!disabled && link && { href: link }) }">
+        <p :class="$style.CustomFeatureTitle" :href="`/docs${link}`">
+          {{ title }}
+        </p>
+      </Component>
+      <div :class="$style.CustomFeatureContainer">
+        <div v-for="(item, i) in items" :key="i">
+          <Component
+            :is="!disabled && item.link ? VPLink : 'article'"
+            v-bind="{ ...(!disabled && item.link && { href: item.link }) }"
+            :class="{ [style.CustomFeatureDisabled]: disabled || !item.link }"
+          >
+            <p :class="$style.CustomFeatureSubtitle">{{ item.title }}</p>
+          </Component>
+        </div>
+      </div>
+    </div>
+  </Component>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomFeature {
+  $el: &;
+  border-radius: sizes.$size-border-radius-x6;
+  border: 1px solid themes.$color-border;
+  max-width: 344px;
+  padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+  
+  &WithScroll {
+    cursor: pointer;
+  }
+
+  &Icon {
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+  }
+
+  &Content {
+    display: flex;
+    flex-direction: column;
+    padding-top: sizes.$size-spacing-x4;
+    gap: sizes.$size-spacing-x6;
+  }
+
+  &Title {
+    @include mixin.h4;
+    color: themes.$color-text-active;
+
+    &:hover {
+      color: themes.$color-text-link;
+    }
+
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+  }
+
+  &Subtitle {
+    @include mixin.caption;
+
+    &:hover {
+      color: themes.$color-text-link;
+    }
+
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+
+    #{$el}WithScroll & {
+      color: themes.$color-text-active;
+    }
+  }
+
+  &Container {
+    display: flex;
+    gap: sizes.$size-spacing-x4;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomHomeFeatures.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import CustomHomeFeature from './CustomHomeFeature.vue'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div v-if="Array.isArray(frontmatter.features)" :class="$style.HomeFeatures">
+    <CustomHomeFeature v-for="feature in frontmatter.features" :key="feature.title" :title="feature.title"
+      :icon="feature.icon" :link="feature.link" :scrollTo="feature.scroll_to" :disabled="feature.disabled" :items="feature.items" />
+  </div>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+
+.HomeFeatures {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+  max-width: 1080px;
+  margin: 0 auto;
+  margin-bottom: 80px;
+}
+</style>

src/.vitepress/theme/components/CustomHomeHero.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import VPHero from 'vitepress/dist/client/theme-default/components/VPHero.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <VPHero v-if="fm.hero" class="CustomHomeHero" :name="fm.hero.name" :text="fm.hero.text" :tagline="fm.hero.tagline"
+    :search="fm.hero.search" :image="fm.hero.image" :actions="fm.hero.actions">
+    <template #home-hero-info>
+      <slot name="home-hero-info" />
+    </template>
+    <template #home-hero-image>
+      <slot name="home-hero-image" />
+    </template>
+  </VPHero>
+</template>

src/.vitepress/theme/components/CustomHomeServiceCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="$style.CustomHomeServiceCard">
+    <h3 :class="$style.CustomHomeServiceCardTitle">{{ title }}</h3>
+
+    <div :class="$style.CustomHomeServiceCardLinks">
+      <Component v-for="article in articles" :is="!article.disabled && article.link ? VPLink : 'div'"
+        v-bind="{ ...(!article.disabled && article.link && { href: article.link }) }"
+        :class="[$style.CustomHomeServiceCardLink, { [$style.CustomHomeServiceCardLinkDisabled]: article.disabled || !article.link }]">
+        <div :class="$style.CustomHomeServiceCardLinkTitle">
+          <div :class="[$style.CustomHomeServiceCardLinkTitleIcon, { [$style.CustomHomeServiceCardLinkTitleIconActive] : article.link && article.icon === 'magic' }]">
+            <CustomIcon :icon="(article.icon || 'cloud') as Icons" />
+          </div>
+          <div :class="[$style.CustomHomeServiceCardLinkTitleText, { [$style.CustomHomeServiceCardLinkTitleTextActive]: article.link }]">
+            {{ article.title }}
+          </div>
+        </div>
+        <div :class="$style.CustomHomeServiceCardLinkDescription">
+          {{ article.description }}
+        </div>
+      </Component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import CustomIcon from './CustomIcon.vue'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
+
+export type ServiceArticle = {
+  title: string
+  description: string
+  icon: string
+  link?: string
+  disabled?: boolean
+}
+
+defineProps<{
+  title: string
+  articles: ServiceArticle[]
+}>()
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomHomeServiceCard {
+  background-color: themes.$color-background-secondary;
+  border-radius: sizes.$size-border-radius-x6;
+  padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+
+  &Title {
+    @include mixin.h4();
+    color: themes.$color-text-active;
+    margin-bottom: sizes.$size-spacing-x6;
+  }
+
+  &Links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: sizes.$size-spacing-x6;
+  }
+
+  &Link {
+    $iconRightSpacing: 8px;
+    $iconSize: 20px;
+    $el: &;
+
+    color: themes.$color-text-active !important;
+  
+    &Disabled {
+      color: themes.$color-text-disabled !important;
+    }
+
+    &Title {
+      margin-bottom: sizes.$size-spacing-x1;
+      display: flex;
+      align-items: center;
+
+      &Icon {
+        width: $iconSize;
+        height: $iconSize;
+        margin-right: $iconRightSpacing;
+
+        &Active {
+          color: themes.$color-text-link;
+        }
+      }
+
+      &Text {
+        @include mixin.subtitle2;
+
+        &Active:hover {
+          color: themes.$color-text-link;
+        }
+      }
+
+    }
+
+    &Description {
+      padding-left: calc($iconSize + $iconRightSpacing);
+      color: themes.$color-text-inactive;
+      @include mixin.caption;
+    }
+  }
+}
+</style>

src/.vitepress/theme/components/CustomHomeServices.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="$style.CustomHomeServices">
+    <h2 id="home-services-section-title" :class="$style.CustomHomeServicesTitle">Документация по сервисам</h2>
+
+    <div v-if="Array.isArray(frontmatter.services)" :class="$style.CustomHomeServicesList">
+      <CustomHomeServiceCard v-for="service in frontmatter.services" :key="service.title" :title="service.title"
+        :articles="service.articles" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import CustomHomeServiceCard from './CustomHomeServiceCard.vue';
+
+const { frontmatter } = useData()
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomHomeServices {
+  max-width: 1080px;
+  margin: 0 auto;
+
+  &Title {
+    @include mixin.h2;
+    text-align: center;
+    margin-bottom: 40px;
+    color: themes.$color-text-active;
+  }
+
+  &List {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x6;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <i :class="['beeline-icons', `beeline-icons-${icon}`, classes]"></i>
+</template>
+
+<script setup lang="ts">
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
+import { computed, useCssModule } from 'vue';
+
+const { size = 'medium' } = defineProps<{
+  icon: Icons,
+  size?: 'large' | 'medium' | 'small'
+}>()
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomIcon]: true,
+  [style.CustomIconLarge]: size === 'large',
+  [style.CustomIconSmall]: size === 'small'
+}))
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/components/icon";
+
+.CustomIcon {
+  font-size: icon.$icon-medium-size !important;
+  
+  &Large {
+    font-size: icon.$icon-large-size !important;
+  }
+
+  &Small {
+    font-size: icon.$icon-small-size !important;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomLocalSearchBox.vue

@@ -10,7 +10,7 @@ import {
   useSessionStorage
 } from '@vueuse/core'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import Mark from 'mark.js/src/vanilla.js'
+import Mark from 'mark.js/dist/mark'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { dataSymbol, inBrowser, useRouter } from 'vitepress'
 import {
@@ -20,6 +20,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  Raw,
   ref,
   shallowRef,
   watch,
@@ -32,6 +33,8 @@ import { escapeRegExp } from 'vitepress/dist/client/shared'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { LRUCache } from 'vitepress/dist/client/theme-default/support/lru'
 import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
+import CustomIcon from './CustomIcon.vue';
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
 
 const emit = defineEmits<{
   (e: 'close'): void
@@ -132,6 +135,7 @@ watchEffect(() => {
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
 const enableNoResults = ref(false)
+const loadig = ref(true)
 
 watch(filterText, () => {
   enableNoResults.value = false
@@ -160,11 +164,7 @@ debouncedWatch(
     if (!index) return
 
     // Search
-    results.value = index
-      .search(filterTextValue)
-      .slice(0, 16) as (SearchResult & Result)[]
-    enableNoResults.value = true
-
+    retrySearch(index, filterTextValue)
     // Highlighting
     const mods = showDetailedListValue
       ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
@@ -268,6 +268,16 @@ function focusSearchInput(select = true) {
   select && searchInput.value?.select()
 }
 
+const retrySearch = (index: Raw<MiniSearch<Result>>, filter: string) => {
+  if (!index) return
+
+  results.value = index
+    .search(filter)
+    .slice(0, 16) as (SearchResult & Result)[]
+
+  enableNoResults.value = true
+}
+
 onMounted(() => {
   focusSearchInput()
 })
@@ -481,33 +491,6 @@ function formMarkRegex(terms: Set<string>) {
             class="search-input"
           />
           <div class="search-actions">
-            <button
-              v-if="!disableDetailedView"
-              class="toggle-layout-button"
-              type="button"
-              :class="{ 'detailed-list': showDetailedList }"
-              :title="$t('modal.displayDetails')"
-              @click="
-                selectedIndex > -1 && (showDetailedList = !showDetailedList)
-              "
-            >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
-                />
-              </svg>
-            </button>
-
             <button
               class="clear-button"
               type="reset"
@@ -515,26 +498,13 @@ function formMarkRegex(terms: Set<string>) {
               :title="$t('modal.resetButtonTitle')"
               @click="resetSearch"
             >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
-                />
-              </svg>
+              <CustomIcon :icon="Icons.Close" size="large" style="padding: 12px 0;" />
             </button>
           </div>
         </form>
 
         <ul
+          v-if="!!results.length"
           ref="resultsEl"
           :id="results?.length ? 'localsearch-list' : undefined"
           :role="results?.length ? 'listbox' : undefined"
@@ -561,29 +531,21 @@ function formMarkRegex(terms: Set<string>) {
             >
               <div>
                 <div class="titles">
-                  <span class="title-icon">#</span>
                   <span
                     v-for="(t, index) in p.titles"
                     :key="index"
                     class="title"
                   >
                     <span class="text" v-html="t" />
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m9 18l6-6l-6-6"
-                      />
-                    </svg>
+                    <span class="text"> > </span>
                   </span>
                   <span class="title main">
                     <span class="text" v-html="p.title" />
                   </span>
                 </div>
 
+                <span v-html="p.title" />
+
                 <div v-if="showDetailedList" class="excerpt-wrapper">
                   <div v-if="p.text" class="excerpt" inert>
                     <div class="vp-doc" v-html="p.text" />
@@ -594,65 +556,15 @@ function formMarkRegex(terms: Set<string>) {
               </div>
             </a>
           </li>
-          <li
-            v-if="filterText && !results.length && enableNoResults"
-            class="no-results"
-          >
-            {{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
-            >"
-          </li>
         </ul>
-
-        <div class="search-keyboard-shortcuts">
-          <span>
-            <kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19V5m-7 7l7-7l7 7"
-                />
-              </svg>
-            </kbd>
-            <kbd :aria-label="$t('modal.footer.navigateDownKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 5v14m7-7l-7 7l-7-7"
-                />
-              </svg>
-            </kbd>
-            {{ $t('modal.footer.navigateText') }}
-          </span>
-          <span>
-            <kbd :aria-label="$t('modal.footer.selectKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <g
-                  fill="none"
-                  stroke="currentcolor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                >
-                  <path d="m9 10l-5 5l5 5" />
-                  <path d="M20 4v7a4 4 0 0 1-4 4H4" />
-                </g>
-              </svg>
-            </kbd>
-            {{ $t('modal.footer.selectText') }}
-          </span>
-          <span>
-            <kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
-            {{ $t('modal.footer.closeText') }}
-          </span>
-        </div>
+        <ul
+          v-else-if="filterText && !results.length && enableNoResults"
+          class="no-results"
+        >
+          <p class="no-results-text">
+            {{ $t('modal.noResultsText') }}
+          </p>
+        </ul>
       </div>
     </div>
   </Teleport>
@@ -675,16 +587,12 @@ function formMarkRegex(terms: Set<string>) {
 
 .shell {
   position: relative;
-  padding: 12px;
+  padding: 24px;
   margin: 64px auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
   background: var(--vp-local-search-bg);
   width: min(100vw - 60px, 900px);
   height: min-content;
-  max-height: min(100vh - 128px, 900px);
-  border-radius: 6px;
+  border-radius: 12px;
 }
 
 @media (max-width: 767px) {
@@ -698,7 +606,7 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .search-bar {
-  border: 1px solid var(--vp-c-divider);
+  border: 1px solid rgb(32, 33, 35);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -712,10 +620,6 @@ function formMarkRegex(terms: Set<string>) {
   }
 }
 
-.search-bar:focus-within {
-  border-color: var(--vp-c-brand-1);
-}
-
 .search-icon {
   margin: 8px;
 }
@@ -756,7 +660,7 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .search-actions button {
-  padding: 8px;
+  padding: 0px;
 }
 
 .search-actions button:not([disabled]):hover,
@@ -802,27 +706,31 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .results {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  padding: 8px 0;
+  max-height: min(100vh - 214px, 900px);
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
+
+  li:hover {
+    background-color: rgba(25, 28, 52, 0.08);
+  }
 }
 
 .result {
   display: flex;
   align-items: center;
   gap: 8px;
-  border-radius: 12px;
   transition: none;
-  line-height: 1rem;
-  border: solid 2px var(--vp-local-search-result-border);
   outline: none;
+  min-height: 66px;
 }
 
 .result > div {
-  margin: 12px;
+  margin: 12px 16px;
   width: 100%;
   overflow: hidden;
 }
@@ -840,6 +748,13 @@ function formMarkRegex(terms: Set<string>) {
   position: relative;
   z-index: 1001;
   padding: 2px 0;
+  font-size: 13px !important;
+  line-height: 16px !important;
+}
+
+:deep(mark) {
+  background-color: transparent;
+  color: none;
 }
 
 .title {
@@ -852,21 +767,10 @@ function formMarkRegex(terms: Set<string>) {
   font-weight: 500;
 }
 
-.title-icon {
-  opacity: 0.5;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-}
-
 .title svg {
   opacity: 0.5;
 }
 
-.result.selected {
-  --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
-  border-color: var(--vp-local-search-result-selected-border);
-}
-
 .excerpt-wrapper {
   position: relative;
 }
@@ -892,10 +796,7 @@ function formMarkRegex(terms: Set<string>) {
 
 .titles :deep(mark),
 .excerpt :deep(mark) {
-  background-color: var(--vp-local-search-highlight-bg);
-  color: var(--vp-local-search-highlight-text);
-  border-radius: 2px;
-  padding: 0 2px;
+  background-color: transparent;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {
@@ -932,12 +833,44 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .no-results {
-  font-size: 0.9rem;
-  text-align: center;
-  padding: 12px;
+  padding: 28px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  z-index: 100;
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  background-color: rgb(255, 255, 255);
+}
+
+.no-results-text {
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: 0.2px;
+  color: rgba(25, 28, 52, 0.48);
+}
+
+.no-results-button {
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  padding: 13px 20px;
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: 0.2px;
+  color: rgba(9, 11, 22, 0.94);
 }
 
 svg {
   flex: none;
 }
+
+.text {
+  font-size: 13px !important;
+  line-height: 16px !important;
+  color: rgba(25, 28, 52, 0.48);
+}
 </style>

src/.vitepress/theme/components/CustomNavBar.vue

@@ -12,6 +12,7 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
 import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
 import CustomNavBarTitle from './CustomNavBarTitle.vue'
 import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+import CustomButton from './CustomButton.vue'
 
 defineProps<{
   isScreenOpen: boolean
@@ -27,6 +28,7 @@ const { hasLocalNav } = useLocalNav()
 const { frontmatter } = useData()
 
 const classes = ref<Record<string, boolean>>({})
+const loginUrl = import.meta.env.VITE_LOGIN_URL
 
 watchPostEffect(() => {
   classes.value = {
@@ -43,22 +45,21 @@ watchPostEffect(() => {
       <div class="container">
         <div class="title">
           <CustomNavBarTitle>
-            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
-            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+            <template #nav-bar-title-before>
+              <slot name="nav-bar-title-before" />
+            </template>
+            <template #nav-bar-title-after>
+              <slot name="nav-bar-title-after" />
+            </template>
           </CustomNavBarTitle>
         </div>
 
         <div class="content">
           <div class="content-body">
             <slot name="nav-bar-content-before" />
-            <VPNavBarSearch class="search" />
             <VPNavBarMenu class="menu" />
-            <VPNavBarTranslations class="translations" />
-            <VPNavBarAppearance class="appearance" />
-            <VPNavBarSocialLinks class="social-links" />
-            <VPNavBarExtra class="extra" />
-            <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarSearch class="search" />
+          <!--  <CustomButton text="Войти" size="small" :href="loginUrl" /> -->
           </div>
         </div>
       </div>
@@ -105,7 +106,7 @@ watchPostEffect(() => {
 
 @media (min-width: 768px) {
   .wrapper {
-    padding: 0 32px;
+    padding: 0 24px;
   }
 }
 
@@ -174,7 +175,7 @@ watchPostEffect(() => {
     position: relative;
     z-index: 1;
     padding-right: 32px;
-    padding-left: var(--vp-sidebar-width);
+    padding-left: 0px;
   }
 }
 
@@ -187,7 +188,7 @@ watchPostEffect(() => {
 
 .content-body {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   height: var(--vp-nav-height);
   transition: background-color 0.5s;
@@ -221,6 +222,10 @@ watchPostEffect(() => {
   height: 24px;
   background-color: var(--vp-c-divider);
   content: "";
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
 }
 
 .menu + .appearance::before,
@@ -251,4 +256,9 @@ watchPostEffect(() => {
     background-color: rgba(255, 255, 255, 0.2);
   }
 }
+
+.search {
+  justify-content: flex-end;
+  margin-right: 24px;
+}
 </style>

src/.vitepress/theme/components/CustomNavBarMenuLink.vue

@@ -3,12 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { isActive } from 'vitepress/dist/client/shared'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { computed, ref } from 'vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
+const textRef = ref<HTMLElement | null>(null)
+
+const wrapperWidth = computed(() => textRef.value?.offsetWidth)
 </script>
 
 <template>
@@ -20,22 +24,32 @@ const { page } = useData()
         page.relativePath,
         item.activeMatch || item.link,
         !!item.activeMatch
-      )
+      ),
+      disabled: !isActive(
+        page.relativePath,
+        item.activeMatch || item.link,
+        !!item.activeMatch
+      ) && !item.link ? 'disabled' : '',
     }"
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
     tabindex="0"
   >
-    <span v-html="item.text"></span>
+    <span
+      ref="textRef"
+      v-html="item.text"
+    />
   </VPLink>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@use '@beeline/design-tokens/scss/tokens/globals/colors';
+
 .VPNavBarMenuLink {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 24px;
   line-height: var(--vp-nav-height);
   font-size: 16px;
   font-weight: 500;
@@ -45,9 +59,32 @@ const { page } = useData()
 
 .VPNavBarMenuLink.active {
   color: var(--color-text-active);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    height: 4px;
+    display: none;
+    width: calc(v-bind(wrapperWidth) * 1px);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    background-color: colors.$color-background-brand;
+  }
+
+  &.active {
+    &::after {
+      display: block;
+    }
+  }
 }
 
-.VPNavBarMenuLink:hover {
+.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.VPNavBarMenuLink:hover:not(.disabled) {
   color: var(--color-text-active);
 }
 </style>

src/.vitepress/theme/components/CustomNavBarSearchButton.vue

@@ -14,31 +14,22 @@ const $t = createSearchTranslate(defaultTranslations)
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
-    <span class="DocSearch-Button-Container">
-      <svg
-        class="DocSearch-Search-Icon"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        aria-label="search icon"
-      >
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
-    </span>
-    <span class="DocSearch-Button-Keys">
-      <kbd class="DocSearch-Button-Key"></kbd>
-      <kbd class="DocSearch-Button-Key">K</kbd>
-    </span>
-  </button>
+  <svg
+    class="DocSearch-Search-Icon"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    aria-label="search icon"
+  >
+    <path
+      d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+      stroke="currentColor"
+      fill="none"
+      fill-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
 
 <style>
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
   --docsearch-hit-shadow: none;
 }
 
-.DocSearch-Button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  margin: 0;
-  padding: 0;
-  width: 48px;
-  height: 55px;
-  background: transparent;
-  transition: border-color 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
-
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--vp-c-bg-alt);
-  }
-
-  .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand-1);
-    background: var(--vp-c-bg-alt);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
+.DocSearch-Search-Icon {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--vp-c-text-2);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
-  /*rtl:begin:ignore*/
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  /*rtl:end:ignore*/
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  line-height: 22px;
-  font-family: var(--vp-font-family-base);
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
-  border-right: 1px solid var(--vp-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-  /*rtl:end:ignore*/
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 0 !important;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: 'Ctrl';
-  font-size: 12px;
-  letter-spacing: normal;
-  color: var(--docsearch-muted-color);
-}
-
-.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: '\2318';
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
+  margin: 8px;
 }
 </style>

src/.vitepress/theme/components/CustomNavBarTitle.vue

@@ -38,10 +38,10 @@ const target = computed(() =>
       :target="target"
     >
       <slot name="nav-bar-title-before" />
-      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
       <slot name="nav-bar-title-after" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
     </a>
   </div>
 </template>
@@ -53,10 +53,13 @@ const target = computed(() =>
   border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+  font-size: 25px;
+  font-weight: 500;
+  line-height: 28px;
+  color: var(--color-text-inactive);
   transition: opacity 0.25s;
+  gap: 20px;
+  margin-right: 24px;
 }
 
 @media (min-width: 960px) {
@@ -72,7 +75,6 @@ const target = computed(() =>
 }
 
 :deep(.logo) {
-  margin-right: 8px;
   height: var(--vp-nav-logo-height);
 }
 </style>

src/.vitepress/theme/components/CustomSidebar.vue

@@ -60,9 +60,8 @@ watch(
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px 32px;
-  width: 256px;
-  max-width: 320px;
+  padding: 0px 0px 96px 0px;
+  width: 320px;
   background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
@@ -88,8 +87,6 @@ watch(
 @media (min-width: 960px) {
   .VPSidebar {
     padding-top: var(--vp-nav-height);
-    // width: var(--vp-sidebar-width);
-    // max-width: 100%;
     background-color: var(--vp-sidebar-bg-color);
     opacity: 1;
     visibility: visible;
@@ -98,13 +95,6 @@ watch(
   }
 }
 
-@media (min-width: 1440px) {
-  .VPSidebar {
-    // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    // width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
-  }
-}
-
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
@@ -121,17 +111,14 @@ watch(
 
 .nav {
   outline: 0;
-}
-
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  padding-top: 24px;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    width: 100%;
   }
 }
+
 </style>

src/.vitepress/theme/components/HomeHeroSearchButton.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { ButtonTranslations } from 'vitepress/types/local-search'
+import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
+
+const defaultTranslations: { button: ButtonTranslations } = {
+  button: {
+    buttonText: 'Поиск',
+    buttonAriaLabel: 'Поиск'
+  }
+}
+
+const $t = createSearchTranslate(defaultTranslations)
+</script>
+
+<template>
+  <button type="button" :class="$style.HomeHeroSearchButton" :aria-label="$t('button.buttonAriaLabel')">
+    <span :class="$style.HomeHeroSearchButtonContainer">
+      <img :class="$style.HomeHeroSearchButtonIcon" src="/icons/search.svg" alt="Поиск">
+      <span :class="$style.HomeHeroSearchButtonPlaceholder">{{ $t('button.buttonText') }}</span>
+    </span>
+  </button>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/mixin";
+@use "@beeline/design-tokens/scss/tokens/components/search";
+
+.HomeHeroSearchButton {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: search.$search-border-radius;
+  height: search.$search-medium-height;
+  background: search.$search-background-color;
+
+  &Container {
+    display: flex;
+  }
+
+  &Icon {
+    margin: 0 search.$search-category-icon-spacing;
+    color: themes.$color-text-inactive;
+    fill: currentColor;
+  }
+
+  &Placeholder {
+    @include mixin.body2;
+    color: themes.$color-text-disabled;
+  }
+}
+</style>

src/.vitepress/theme/constants.ts

@@ -0,0 +1 @@
+export const NAVBAR_HEIGHT = 64

src/.vitepress/theme/scss/components/vp-custom-block.scss

@@ -1,11 +1,329 @@
-.custom-block {
-    padding: 24px;
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
 
-    &-title {
-        font-size: 18px;
-        line-height: 22px;
-        font-weight: 500;
-        letter-spacing: .2px;
-        margin-bottom: 12px;
+.custom-block {
+  padding: 24px;
+    
+  &-title {
+    font-size: 17px !important;
+    line-height: 22px !important;
+    font-weight: 700 !important;
+    letter-spacing: .2px !important;
+    margin-bottom: 12px;
+  }
+
+  &.tip a {
+    color: #1a73e8;
+
+    &:hover {
+      color: #1a73e8;
     }
-}
+  }
+}
+
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 24px 24px 24px 64px;
+  line-height: 24px;
+  font-size: var(--vp-custom-block-font-size);
+  color: var(--vp-c-text-2);
+
+  &.custom-block.details {
+    padding: 0px;
+  }
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.info a:hover,
+.custom-block.info a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.note {
+  border-color: var(--vp-custom-block-note-border);
+  color: var(--vp-custom-block-note-text);
+  background-color: var(--vp-custom-block-note-bg);
+}
+
+.custom-block.note a,
+.custom-block.note code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.note code {
+  background-color: var(--vp-custom-block-note-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-clock);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--vp-c-tip-1);
+}
+
+.custom-block.tip a:hover,
+.custom-block.tip a:hover > code {
+  color: var(--vp-c-tip-2);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.important {
+  border-color: var(--vp-custom-block-important-border);
+  color: var(--vp-custom-block-important-text);
+  background-color: var(--vp-custom-block-important-bg);
+}
+
+.custom-block.important a,
+.custom-block.important code {
+  color: var(--vp-c-important-1);
+}
+
+.custom-block.important a:hover,
+.custom-block.important a:hover > code {
+  color: var(--vp-c-important-2);
+}
+
+.custom-block.important code {
+  background-color: var(--vp-custom-block-important-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-info-circled);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.warning a,
+.custom-block.warning code {
+  color: $color-text-link;
+}
+
+.custom-block.warning a:hover,
+.custom-block.warning a:hover > code {
+  color: $color-text-link;
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-warning-triangle);
+    content: '';
+    position: absolute;
+    left: 24px;
+  }
+}
+
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--vp-c-danger-1);
+}
+
+.custom-block.danger a:hover,
+.custom-block.danger a:hover > code {
+  color: var(--vp-c-danger-2);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.caution {
+  border-color: var(--vp-custom-block-caution-border);
+  color: var(--vp-custom-block-caution-text);
+  background-color: var(--vp-custom-block-caution-bg);
+}
+
+.custom-block.caution a,
+.custom-block.caution code {
+  color: var(--vp-c-caution-1);
+}
+
+.custom-block.caution a:hover,
+.custom-block.caution a:hover > code {
+  color: var(--vp-c-caution-2);
+}
+
+.custom-block.caution code {
+  background-color: var(--vp-custom-block-caution-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: transparent;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+
+  pre {
+    border: none !important;
+    
+  }
+
+  div {
+    margin: 0 !important;
+  }
+
+  &:open {
+    &.custom-block.details summary {
+      background-color: $color-background-base-hover;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+
+      &::before {
+        background-image: var(--vp-icon-nav-arrow-up);
+      }
+    }
+  }
+}
+
+.custom-block.details a {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.details a:hover,
+.custom-block.details a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0;
+  padding: 24px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  font-size: 19px;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  display: block;
+
+  &::before {
+    position: absolute;
+    right: 24px;
+    content: '';
+    background-image: var(--vp-icon-nav-arrow-down);
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.custom-block.details {
+  h1, h2, h3, h4, h5, ul, p {
+    margin: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+
+  ol {
+    padding: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+}
+
+.custom-block.details summary + p {
+  padding: 24px;
+  margin: 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.75;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--vp-custom-block-font-size);
+  color: inherit;
+}
+
+

src/.vitepress/theme/scss/components/vp-doc-aside.scss

@@ -1,10 +1,53 @@
-.VPDocAside {
-    .outline-link {
-        font-size: 16px;
-    }
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
 
-    .outline-title {
-        font-size: 17px;
-        font-weight: 500;
+.VPDocAside {
+  .outline-link {
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    white-space: unset;
+    color: colors.$color-text-grey-inactive;
+  }
+
+  .outline-link.active {
+    font-weight: 500 !important;
+    color: colors.$color-text-black-active;
+  }
+
+  .outline-title {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 18px;
+    padding-bottom: 16px;
+    color: colors.$color-text-black-active;
+  }
+
+  .content {
+    padding-left: 0px !important;
+    border-left: 0px !important;
+
+    nav {
+      border-left: 1px solid var(--vp-c-divider) !important;
+
+      .outline-link {
+        padding-left: 20px !important;
+        
+        &.active {
+          padding-left: 16px !important;
+          position: relative !important;
+          left: -1px !important;
+          border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+            navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+
+          border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
+          border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
+  
+        }
+      }
     }
+  }
 }

src/.vitepress/theme/scss/components/vp-doc.scss

@@ -1,135 +1,566 @@
 @use "@beeline/design-tokens/scss/tokens/globals/colors";
 @use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
 
 @mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
-    font-size: $fontSize;
-    font-weight: $fontWeight;
-    line-height: $lineHeight;
-    letter-spacing: $letterSpacing;
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+  line-height: $lineHeight;
+  letter-spacing: $letterSpacing;
 }
 
 @mixin generate-numbered-list-styles($start, $end) {
-    @for $counter from $start through $end {
-        $counter-name: list + ' ' + ($counter - 1);
-        ol[start*="#{$counter}"] {
-            list-style-type: none;
-            counter-reset: $counter-name;
-        }
+  @for $counter from $start through $end {
+    $counter-name: list + ' ' + ($counter - 1);
+    ol[start*="#{$counter}"] {
+      list-style-type: none;
+      counter-reset: $counter-name;
     }
+  }
 }
 
 .vp-doc {
-    font-size: 17px;
+  font-size: 17px;
 
-    // Titles
-    h1 {
-        @include font_style(44px, 500, 46px, 0.3px);
-        margin-bottom: 24px;
-    }
+  // Titles
+  h1 {
+    @include font_style(44px, 500, 56px, 0.3px);
+    margin-bottom: 24px;
+  }
 
-    h2 {
-        @include font_style(34px, 400, 36px, 0.3px);
-        margin-bottom: 12px;
-    }
+  h2 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin: 40px 0 24px;
+  }
 
-    h3 {
-        @include font_style(26px, 500, 32px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h3 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    h4 {
-        @include font_style(20px, 700, 28px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h4 {
+    @include font_style(20px, 700, 28px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    h5 {
-        @include font_style(17px, 500, 22px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h5 {
+    @include font_style(17px, 500, 22px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    // Text
-    ol {
-        list-style-type: none;
-        counter-reset: list;
-        margin: 0 0 0 50px;
-        padding: 0 0 5px 0;
-        font-size: 16px;
+  // Text
+  ol {
+    list-style-type: none;
+    counter-reset: list;
+    margin: 0 0 0 50px;
+    padding: 0;
+    font-size: 15px;
   
-        & > * + * {
-            margin-top: 50px;
-        }
+    & > * + * {
+      margin-top: 50px;
+    }
+  }
+
+  @include generate-numbered-list-styles(2, 50);
+
+  ol li {
+    position: relative;
+    padding: 8px 0 0 0;
+    line-height: 18px;
+  }
+
+  li + li {
+    margin-top: 30px;
+  }
+
+  ul li {
+    padding-bottom: 0;
+    padding-top: 0;
+    margin-top: 8px;
+    @include font_style(15px, 400, 18px, 0.2px);
+  }
+  
+  ol li:nth-last-of-type(n+2)::after {
+    content: '';
+    border-left: 1px solid rgb(201, 197, 197);
+    position: absolute;
+    line-height: 100%;
+    left: -30px;
+    top: 43px;
+    bottom: -25px;
+  }
+
+  ol li::before {
+    content: counter(list);
+    counter-increment: list;
+    display: inline-flex;
+    position: absolute;
+    top: 0;
+    left: -48px;
+    width: 35px;
+    height: 35px;
+    background-color: colors.$color-background-brand;
+    color: themes.$color-text-active;
+    @include font_style(15px, 400, 18px, 0.2px);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ul li:nth-last-of-type(n):after {
+    content: none;
+  }
+
+  ol ul li::before {
+    counter-increment: list;
+    content: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ol li:last-child {
+    margin-bottom: 40px;
+  }
+
+  ul li:last-child {
+    margin-bottom: 20px;
+  }
+
+  ol li p {
+    margin-top: 0;
+  }
+
+  p {
+    @include font_style(15px, 400, 18px, 0.2px);
+    margin: 24px 0;
+  }
+
+  // Links
+  a {
+    color: #1a73e8;
+    text-decoration: none;
+
+    &:hover, &:focus-visible, &:focus, &:active {
+      color: #1a73e8;
     }
 
-    @include generate-numbered-list-styles(2, 50);
-
-    ol li {
-        position: relative;
-        padding: 5px 0 0 0;
-        line-height: 1.4;
+    &:visited {
+      color: #7e00ed;
     }
+  }
+}
 
-    li + li {
-        margin-top: 34px;
+// Tabs
+.plugin-tabs {
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  background-color: revert-layer !important;
+
+  &--tab {
+    border-bottom: 1px solid transparent;
+  }
+
+  &--content { 
+    padding: 24px !important;
+  
+    .language- {
+      border: none;
+      padding: 0px !important;
+      overflow-y: hidden !important;
+      overflow-x: hidden !important;
     }
+  }
+}
 
-    ul li {
-        padding-bottom: 0;
-        padding-top: 0;
-        margin-top: 8px;
-    }
-    
-    ol li::before {
-        content: counter(list);
-        counter-increment: list;
-        display: inline-flex;
-        position: absolute;
-        top: 0;
-        left: -48px;
-        width: 35px;
-        height: 35px;
-        background-color: colors.$color-background-brand;
-        color: themes.$color-text-active;
-        text-align: center;
-        line-height: 25px;
-        font-size: 16px;
-        border-radius: 50%;
-        justify-content: center;
-        align-items: center;
-    }
+// Code
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}
 
-    ul li:nth-last-of-type(n):after {
-        content: none;
-    }
+.vp-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  background-color: var(--vp-code-bg);
+  transition:
+    color 0.25s,
+    background-color 0.5s;
+}
 
-    ol ul li::before {
-        counter-increment: list;
-        content: none;
-        margin: 0;
-        padding: 0;
-    }
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
 
-    ol li:last-child, ul li:last-child {
-        margin-bottom: 40px;
-    }
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
 
-    ol li p {
-        margin-top: 0;
-    }
+.vp-doc h1 > code,
+.vp-doc h2 > code,
+.vp-doc h3 > code {
+  font-size: 0.9em;
+}
 
-    p {
-        line-height: 22px;
-    }
+.vp-doc div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px -24px;
+  background-color: transparent;
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
 
-    // Links
-    a {
-        color: #1a73e8;
+@media (min-width: 640px) {
+  .vp-doc div[class*='language-'],
+  .vp-block {
+    border-radius: 12px;
+    margin: 16px 0;
+  }
+}
 
-        &:hover, &:focus-visible, &:focus, &:active {
-            color: #1a73e8;
-        }
+@media (max-width: 639px) {
+  .vp-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
 
-        &:visited {
-            color: #7e00ed;
-        }
-    }
-}
+.vp-doc div[class*='language-'] + div[class*='language-'],
+.vp-doc div[class$='-api'] + div[class*='language-'],
+.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.vp-doc [class*='language-'] pre,
+.vp-doc [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.vp-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 24px;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+}
+
+.vp-doc [class*='language-'] code {
+  display: block;
+  padding: 0px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+  transition: color 0.5s;
+}
+
+.vp-doc [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.vp-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition:
+    border-color 0.5s,
+    color 0.5s;
+}
+
+.vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: none;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  opacity: 1;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] > button.copy:hover,
+.vp-doc [class*='language-'] > button.copy.copied {
+  border: none;
+  background-color: transparent;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied,
+.vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  background-color: transparent;
+  background-image: none;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  /*rtl:ignore*/
+  border-right: 0;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  white-space: nowrap;
+  content: '';
+}
+
+.vp-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition:
+    color 0.4s,
+    opacity 0.4s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+// Banner
+.vp-doc .custom-block {
+  margin: 40px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 18px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+  border-radius: 12px;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+// Table
+.vp-doc table {
+  display: block;
+  border-collapse: collapse;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  // width: 100%;
+  margin: 24px 0;
+}
+
+.vp-doc tr {
+  border-top: hidden;
+  transition: background-color 0.5s;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc th,
+.vp-doc td {
+  padding: 18px 16px;
+  padding: 18px 16px;
+  width: 100vh;
+  background-color: var(--vp-c-bg);
+  border: none;
+}
+
+.vp-doc tbody tr {
+  border-top: 1px solid $color-border;
+
+  &:last-child{
+    border-bottom: hidden;
+  }
+}
+
+.vp-doc th {
+  @include font_style(15px, 500, 20px, 0.2px);
+  color: $color-text-active;
+  background-color: var(--vp-c-bg);
+  border-top: 1px solid $color-border;
+}
+
+.vp-doc td {
+  @include font_style(15px, 400, 18px, 0.2px);
+  padding: 18px 16px;
+  background-color: var(--vp-c-bg);
+  border-right: hidden;
+  border-left: hidden;
+  color: $color-text-active;
+}
+
+// Block
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 40px 0;
+  border-radius: 12px;
+
+  &.vp-doc .custom-block {
+    margin: 0;
+    border: none;
+  }
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}

src/.vitepress/theme/scss/components/vp-sidebar.scss

@@ -1,7 +1,116 @@
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
+@use '@/scss/helpers/media';
+
 .VPSidebar {
-    &Item {
-        .text {
-            font-size: 15px;
-        }
+  --vp-sidebar-bg-color: var(--vp-c-bg);
+}
+
+.VPSidebar .VPSidebarItem .item {
+  margin: 4px 0;
+}
+
+.VPSidebar .VPSidebarItem .link {
+  display: flex;
+  align-items: center;
+}
+
+.indicator {
+  border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
+  border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
+  position: absolute !important;
+  left: 0 !important;
+}
+
+.VPSidebarItem.is-active > .item .link > .text {
+  color: theme.$color-text-active !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+}
+
+.VPSidebarItem {
+  .item {
+    padding: 12px 32px !important;
+    border-top-right-radius: 12px !important; 
+    border-bottom-right-radius: 12px !important;
+    color: theme.$color-text-inactive;
+    
+    &:hover {
+      background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+      color: theme.$color-text-inactive;
     }
+  }
+
+  &.is-active > .item > .indicator {
+    border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+      navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+  }
+}
+
+.VPSidebarItem.collapsible {
+  .items {
+    margin-left: 16px;
+
+    .item {
+      padding: 12px 16px 12px 56px !important;
+      border-top-left-radius: 12px !important; 
+      border-bottom-left-radius: 12px !important;
+    }
+  }
+
+  &.is-active,
+  &.has-active {
+    > .item {
+      .indicator {
+        display: block !important;
+        border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+          navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+      }
+      
+      .text {
+        color: theme.$color-text-active !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+
+  .items .VPSidebarItem.is-active > .item {
+    background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+    
+    .text {
+      color: theme.$color-text-active !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.VPSidebarItem.collapsible .items .item .indicator {
+  display: none !important;
+}
+
+.text {
+  padding: 0px !important;
+  font-weight: 400 !important;
+  font-size: 15px !important;
+  line-height: 18px !important;
+  letter-spacing: 0.2px !important;
+  
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  color: theme.$color-text-inactive !important;
+}
+
+.VPSidebarItem .items {
+  border-left: 0px !important;
+}
+
+.VPSidebarItem {
+  padding-bottom: 0px !important;
+}
+
+.VPLocalNav.has-sidebar {
+  @include media.max(sm) {
+    padding-left: 0px;
+  }
 }

src/.vitepress/theme/scss/design-tokens.scss

@@ -1,3 +1,8 @@
+@use '@beeline/design-tokens/scss/font-face';
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '../assets/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
 @use '@beeline/design-tokens/scss/tokens/themes/dark';
 @use '@beeline/design-tokens/scss/tokens/themes';
 

src/.vitepress/theme/scss/fonts.scss

@@ -1,52 +0,0 @@
-$font-path-beeline-sans: '/fonts/beeline-sans' !default;
-
-@mixin beeline-sans-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Beeline Sans";
-    src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin beeline-sans-font-pair($type, $weight) {
-  @include beeline-sans-font($type, $weight);
-  
-}
-
-@include beeline-sans-font-pair(Regular, 400);
-
-@include beeline-sans-font-pair(Medium, 500);
-
-@include beeline-sans-font-pair(Bold, 700);
-
-@include beeline-sans-font-pair(Black, 900);
-
-$font-path-roboto-mono: '/fonts/roboto-mono' !default;
-
-@mixin roboto-mono-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Roboto Mono";
-    src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin roboto-mono-font-pair($type, $weight) {
-  @include roboto-mono-font($type, $weight);
-  
-}
-
-@include roboto-mono-font-pair(Light, 300);
-
-@include roboto-mono-font-pair(Regular, 400);
-
-@include roboto-mono-font-pair(Medium, 500);
-
-@include roboto-mono-font-pair(Bold, 700);
-

src/.vitepress/theme/scss/helpers/_index.scss

@@ -0,0 +1 @@
+@forward "media";

src/.vitepress/theme/scss/helpers/_media.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+// @deprecated
+@mixin media($minWidth, $maxWidth) {
+  @media (min-width: $minWidth) and (max-width: $maxWidth) {
+    @content;
+  }
+}
+
+// @deprecated
+@mixin media_max($maxWidth) {
+  @media (max-width: $maxWidth) {
+    @content;
+  }
+}
+
+// @deprecated
+@mixin media_min($minWidth) {
+  @media (min-width: $minWidth) {
+    @content;
+  }
+}
+
+$breakpoints: (
+  xl: 1600px,
+  lg: 1400px,
+  md: 1200px,
+  sm: 960px,
+);
+
+@mixin max($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+
+  @if $value {
+    @media (max-width: $value) {
+      @content;
+    }
+  } @else {
+    @error "Breakpoint #{$breakpoint} not found";
+  }
+}

src/.vitepress/theme/scss/style.scss

@@ -1,4 +1,3 @@
-@use "fonts";
-@use "design-system";
+@use "design-tokens";
 @use "vars";
 @use "components";

src/.vitepress/theme/scss/vars.scss

@@ -111,7 +111,7 @@
 
 :root {
   --vp-font-family-base: 'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --vp-font-family-mono: 'Roboto Mono', monospace;
+  --vp-font-family-mono: 'JetBrains Mono', monospace;
 
   // Code
   // --vp-code-font-size: ;
@@ -183,16 +183,18 @@
   --vp-custom-block-code-font-size: 17px;
   --vp-custom-block-tip-border: transparent;
   --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: #f1f1f3;
+  --vp-custom-block-tip-bg: #f9f9f9;
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-warning-bg: #fff4e1;
-  --vp-custom-block-danger-bg: #ffecef;
+  --vp-custom-block-warning-bg: #e3f2ff;
+  --vp-custom-block-warning-icon: #1a73e8;
+  --vp-custom-block-danger-bg: #fff4e1;
+  --vp-custom-block-danger-icon: #ff9419;
 }
 
 .dark {
-  --vp-custom-block-warning-bg: #3d392a;
+  --vp-custom-block-warning-bg: #132338;
   --vp-custom-block-tip-bg: #36383c;
-  --vp-custom-block-danger-bg: #371313;
+  --vp-custom-block-danger-bg: #3d392a;
 }
 
 /**
@@ -203,3 +205,12 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+:root {
+  --vp-icon-copy: url('../../../public/icons/copy.svg');
+  --vp-icon-clock: url('../../../public/icons/clock.svg');
+  --vp-icon-info-circled: url('../../../public/icons/info_circled.svg');
+  --vp-icon-warning-triangle: url('../../../public/icons/warning_triangle.svg');
+  --vp-icon-nav-arrow-down: url('../../../public/icons/nav_arrow_down.svg');
+  --vp-icon-nav-arrow-up: url('../../../public/icons/nav_arrow_up.svg');
+  --vp-sidebar-width: 320px;
+}

src/PaaS/IPSEC.md

@@ -0,0 +1,144 @@
+# Параметры конфигурации IPsec-соединения
+
+В данном разделе приведены параметры конфигурации IPsec-соединения, используемого для организации защищенного канала связи между инфраструктурой заказчика и кластерами. Материал описывает настройки этапов установки соединения и передачи данных, включая методы аутентификации, алгоритмы шифрования и хеширования, группы Диффи-Хеллмана, а также параметры времени жизни ключей.
+
+Ниже приведены основные параметры, задаваемые при развертывании кластера Kafka. Часть параметров определяется клиентом на этапе заказа услуги, часть - фиксирована и не подлежит изменению.
+
+## Данные о конфигурации IPSEC
+
+Параметры подключения (имя туннеля, устройство, публичный IP-адрес) заполняются вручную на основании информации, предоставленной заказчиком.
+
+#### Версия IKE (Internet Key Exchange)
+
+Версия IKE выбирается из выпадающего списка, который содержит в себе два параметра - **v1** и **v2**.
+
+- **IKE v1** - более ранняя версия протокола;
+- **IKE v2** - более современная версия (обеспечивает более устойчивое соединение и гибкую обработку ошибок).
+
+Рекомендуется использовать **IKE v2**, если оборудование заказчика это поддерживает.
+
+## Метод аутентификации
+
+Метод аутентификации выбирается вручную из выпадающего списка, который содержит два варианта:
+
+- **PSK (Pre-Shared Key)** - метод аутентификации, при котором используется заранее согласованный общий ключ;
+- **Certificate** - аутентификация с использованием цифровых сертификатов.
+
+## Этап 1 - установка защищенного соединения
+
+#### Hash
+
+Определяет алгоритм хеширования **для защиты управляющего канала**.
+
+Данный параметр заполняется вручную из выпадающего списка следующего содержания:
+
+- **SHA 1** - Формирует хеш длиной 160 бит, имеет коллизии (уязвимости), в современных системах считается устаревшим, используется только для совместимости со старым оборудованием;
+- **SHA 2 - 256** - Формирует хеш длиной 256 бит, существенно более устойчив к атакам, оптимальный баланс между безопасностью и производительностью, а также, на сегодняшний день, является стандартом по умолчанию в большинстве систем;
+- **SHA 2 - 384** - Длина хеша составляет 384 бита, имеет повышенную криптостойкость, требует больше вычислительных ресурсов, чем SHA-1 и SHA 2-256. Используется в средах с повышенными требованиями к безопасности;
+- **SHA 2 - 512** - Длина хеша составляет 512 бит, осуществляет самый высокий уровень стойкости из перечисленных, а также создает большую нагрузку на процессор. Обычно применяется в системах с повышенными требованиями к криптографии.
+
+#### Шифрование
+
+Определяет **алгоритм симметричного шифрования.**
+
+Данный параметр заполняется вручную из выпадающего списка следующего содержания:
+
+- **AES 128** - имеет 128-битный ключ, обеспечивает быстрое шифрование, имеет достаточный уровень безопасности для большинства задач;
+- **AES 256** - имеет 256-битный ключ, обеспечивает более высокую криптостойкость, оказывает немного большую нагрузку на CPU;
+- **AES GCM 12** / **AES GCM 192** / **AES GCM 256** - данные алгоритмы совмещают шифрование и контроль целостности, обладают более современным режимом работы, считаются более эффективными по производительности, а также рекомендуются в современных конфигурациях. Разница между этими тремя алгоритмами лишь в длине ключа.
+
+#### DH Group - группа Деффи Хеллмана
+
+Механизм Diffie-Hellman используется **для безопасной генерации общего секретного ключа** между сторонами туннеля без передачи этого ключа по сети.
+Чем выше номер группы и длина ключа - тем выше криптографическая стойкость соединения.
+
+Данный параметр так же содержит в себе выпадающий список, состоящий из следующих значений:
+- **group 2**;
+- **group 5**;
+- **group 14**;
+- **group 15**;
+- **group 16**;
+- **group 19**;
+- **group 20**;
+- **group 21**.
+
+#### IKE Mode (только для IKEv1)
+
+Параметр IKE Mode **определяет способ установления соединения** на этапе 1 при использовании протокола IKEv1.
+
+Доступны два режима: **Main** и **Aggressive**. Они отличаются количеством сообщений при установке соединения и уровнем защиты идентификационных данных.
+- Main Mode - является стандартным и более безопасным режимом работы IKEv1.
+- Aggressive Mode - упрощённый и ускоренный режим установления соединения. (более низкий уровень защиты данных)
+
+#### Время жизни
+
+Определяет, как долго действуют согласованные ключи в рамках первой фазы.
+
+- Рекомендуемое значение: 86400 секунд (24 часа);
+- После истечения времени выполняется повторная генерация ключей.
+
+
+## Этап 2 - передача данных
+
+Этап 2 IPsec-соединения отвечает за шифрование и защиту пользовательского трафика после того, как защищённый канал был установлен на этапе 1. Этот этап регулирует передачу данных между сторонами через безопасный туннель, который обеспечивает конфиденциальность и целостность данных.
+
+#### Hash
+
+Аналогично этапу 1, параметр Hash используется **для защиты целостности передаваемых данных**. Он обеспечивает проверку, что данные не были изменены при передаче. 
+
+Содержит элементы для выбора:
+
+- **SHA 1**;
+- **SHA 2 - 256**;
+- **SHA 2 - 384**;
+- **SHA 2 - 512**.
+
+#### Шифрование
+
+Этап 2 отвечает за **шифрование пользовательского трафика**. Это важнейший параметр, который защищает данные при их передаче по сети. 
+
+Доступны следующие алгоритмы:
+
+- **AES 128**; 
+- **AES 256**;
+- **AES GCM 128**;
+- **AES GCM 192**; 
+- **AES GCM 256**.
+
+#### PFS
+
+**Enable perfect forward secrecy (PFS)** - параметр, активирующий генерацию нового ключа на этапе 2. При включенном PFS группа DH будет такая же как и на 1-й фазе. Данный параметр представлен в виде чекбокса.
+
+При его включении:
+
+- На этапе 2 выполняется дополнительный обмен ключами Diffie-Hellman;
+- Для каждой новой IPsec-сессии формируется новый независимый криптографический секрет;
+- Ключи шифрования пользовательского трафика не зависят от ключей этапа 1.
+
+#### DH Group - группа Деффи Хеллмана
+
+Группа DH **определяет параметры обмена ключами** между сторонами. Чем выше номер группы, тем выше криптографическая стойкость и безопасность обмена.
+
+Данный параметр так же содержит в себе выпадающий список, состоящий из следующих значений:
+
+- **group 2**;
+- **group 5**;
+- **group 14**;
+- **group 15**;
+- **group 16**;
+- **group 19**;
+- **group 20**;
+- **group 21**.
+
+#### Время жизни (в секундах)
+
+Определяет, как долго действуют согласованные ключи в рамках второй фазы.
+
+- Рекомендуемое значение: 3600 секунд (1 час).
+- После истечения времени выполняется повторная генерация ключей.
+
+#### Префиксы локальной сети заказчика
+
+Этот параметр определяет, какие сети на стороне заказчика будут маршрутизироваться через IPsec-туннель. 
+
+Префиксы задаются в формате `192.168.1.0/24`, который позволяет указать диапазон IP-адресов.

src/PaaS/PostgreSQL/PostgreSQL-index.md

@@ -0,0 +1,25 @@
+---
+section_links:
+  - title: Назначение сервиса
+    link: /PaaS/PostgreSQL/about.md
+    description: Конфигурации и возможности сервиса
+  - title: Параметры кластера PostgreSQL
+    link: /PaaS/PostgreSQL/cluster-parameter.md
+    description: Технические параметры кластера PostgreSQL
+  - title: Схема подключения
+    link: /PaaS/PostgreSQL/connection.md
+    description: Общая схема подключения к Cloud PostgreSQL 
+  - title: Возможности пользователя 
+    link: /PaaS/PostgreSQL/user-capabilities.md
+    description: Возможности пользователя при создании сервиса
+  - title: Веб-интерфейс Grafana
+    link: /PaaS/PostgreSQL/grafana.md
+    description: Инструкция по работе с Grafana
+  - title: Веб-интерфейс PgAdmin
+    link: /PaaS/PostgreSQL/pgadmin.md
+    description: Инструкция по работе с PgAdmin
+---    
+
+# Cloud PostgreSQL
+
+В данном разделе представлена документация по управляемому сервису **Cloud PostgreSQL** платформы Beeline Cloud.

src/PaaS/PostgreSQL/about.md

@@ -0,0 +1,87 @@
+# Cloud PostgreSQL
+
+## Назначение сервиса
+
+**Cloud PostgreSQL** - это управляемый облачный сервис реляционной базы данных PostgreSQL. Он позволяет развернуть и использовать отказоустойчивый кластер базы данных без необходимости самостоятельно настраивать серверы, репликацию и механизмы отказоустойчивости.
+
+PostgreSQL - это современная система управления базами данных, которая поддерживает стандарт SQL и используется для хранения и обработки данных приложений.
+
+В **Cloud PostgreSQL** все основные операции по управлению кластером выполняются автоматически.  
+
+Сервис самостоятельно:
+- управляет ролями серверов базы данных (основной сервер и реплики);
+- отслеживает состояние узлов;
+- автоматически переключает основной сервер при сбоях.
+
+Для обеспечения стабильной работы сервиса используется несколько инфраструктурных компонентов:
+- **Patroni** - управляет кластером PostgreSQL и автоматическим переключением при отказах;
+- **etcd** - хранит состояние кластера и обеспечивает согласованность работы узлов;
+- **HAProxy** - обеспечивает единую точку подключения и распределяет клиентские подключения между узлами.
+
+Подключение к базе данных выполняется через прокси-узлы сервиса. Пользователю не требуется подключаться к отдельным серверам кластера — все операции производятся через единую точку доступа.
+
+Для управления базами данных и пользователями доступен [web-интерфейс **pgAdmin**](./pgadmin.md), позволяющий выполнять администрирование непосредственно через браузер.
+
+## Конфигурации кластера
+
+Сервис **Cloud PostgreSQL** поддерживает версии СУБД с 13 по 17 включительно.
+
+Кластер предоставляется в архитектуре Primary–Standby, которая обеспечивает:
+
+- синхронную репликацию данных;
+- повышенную отказоустойчивость.
+
+В рамках данной конфигурации создаётся кластер из виртуальных серверов, включающий:
+
+- **Primary** (основной сервер) — обязательный узел, на котором выполняются операции записи данных;
+- **Replica** (реплики) — дополнительные узлы (от 0 до 4), создаваемые по желанию пользователя.
+
+Реплики являются полноценными участниками кластера PostgreSQL и могут использоваться для выполнения запросов, не изменяющих данные (например, SELECT).
+
+В многоузловой конфигурации серверы кластера размещаются на разных физических хостах гипервизора, что повышает устойчивость сервиса к отказам оборудования.
+
+## Режимы репликации
+
+По умолчанию фиксация изменений выполняется в **синхронном режиме**. Это означает, что операция записи считается завершённой только после того, как данные будут зафиксированы как на основном сервере, так и на одной из реплик.
+
+Если в кластере настроено несколько реплик, синхронный режим применяется только к одной из них. Остальные реплики работают в асинхронном режиме — изменения передаются на них без ожидания подтверждения.
+
+При необходимости режим репликации может быть изменён на полностью **асинхронный**. В этом случае изменения сначала фиксируются на основном сервере, а затем передаются на реплики с задержкой.
+
+## Доступ к серверам и оптимизация соединений
+
+Прямой доступ к серверам кластера (например, по протоколу SSH) не предоставляется. Пользователь взаимодействует с базой данных исключительно через точки подключения, предоставленные сервисом.
+
+На каждом узле кластера установлен пулер соединений **PgBouncer**, который может использоваться для ускорения работы приложений за счёт оптимизации подключений к базе данных.
+
+::: warning Примечание
+
+Использование PgBouncer не является обязательным - подключение возможно как напрямую к PostgreSQL, так и через пулер, а также одновременно обоими способами.
+
+:::
+
+## Возможности сервиса
+
+**Cloud PostgreSQL** предоставляет набор возможностей, позволяющих использовать PostgreSQL в облаке без необходимости самостоятельного администрирования инфраструктуры.
+
+Сервис обеспечивает:
+
+- автоматическое управление кластером PostgreSQL;
+- высокую доступность за счёт репликации и автоматического переключения primary-узла;
+- единую точку подключения к базе данных через прокси;
+- автоматическое переключение при отказе узлов кластера без вмешательства пользователя;
+- web-доступ к управлению базами данных и пользователями через pgAdmin;
+- совместимость со стандартными клиентскими инструментами PostgreSQL;
+- возможность установки расширений PostgreSQL в базу данных.
+
+## Сценарии использования сервиса
+
+**Cloud PostgreSQL** подходит для использования в системах, где требуется надёжное хранение данных и упрощённое управление инфраструктурой базы данных.
+
+Сервис может применяться в следующих сценариях:
+
+- размещение production-баз данных с высокими требованиями к доступности;
+- использование PostgreSQL в микросервисной архитектуре с единой точкой подключения к базе данных;
+- хранение критичных данных с минимальным временем простоя при отказах инфраструктуры;
+- быстрое развёртывание PostgreSQL-кластера без необходимости ручной настройки репликации и failover;
+- администрирование баз данных через веб-интерфейс без прямого доступа к серверам кластера.

src/PaaS/PostgreSQL/cluster-parameter.md

@@ -0,0 +1,81 @@
+# Описание технических параметров
+
+Данный раздел содержит технические параметры кластера PostgreSQL и порядок их первичной конфигурации.
+
+Настройка указанных параметров выполняется администратором облачного провайдера на этапе развёртывания сервиса. Пользователь не имеет прямого доступа к их самостоятельной установке.
+
+Перед созданием кластера клиент предоставляет перечень требуемых параметров менеджеру. Администратор облачного провайдера выполняет конфигурацию в соответствии с согласованными требованиями.
+
+## Выбор типа и размера дискового хранилища
+
+Производительность базы данных напрямую зависит от скорости, с которой она может читать и записывать данные на диск. При заказе кластера необходимо выбрать тип дискового хранилища, который определит максимальную скорость работы (IOPS) и время отклика.
+
+**IOPS (Input/Output Operations Per Second)** — количество операций чтения или записи, которые диск может выполнить за секунду. Чем выше этот показатель, тем быстрее база данных обрабатывает запросы.
+
+## Доступные типы хранилищ:
+
+| Название       | Лимит IOPS         |
+| -------------- | ------------------ |
+| **Fast SAS**   | до 2 IOPS на 1 ГБ  |
+| **SSD**        | до 5 IOPS на 1 ГБ  |
+| **Fast SSD**   | до 10 IOPS на 1 ГБ |
+| **Ultra NVMe** | до 25 IOPS на 1 ГБ |
+
+::: warning Примечание
+
+После выбора типа диска необходимо указать объем дискового хранилища, который будет выделен под данные кластера PostgreSQL. Минимальный объем - 50 ГБ.
+
+:::
+
+## Конфигурация вычислительных ресурсов
+
+В данном разделе определяются вычислительные мощности кластера: процессорные ресурсы, оперативная память и количество серверов (нод), из которых будет состоять кластер PostgreSQL.
+
+#### Количество нод в кластере
+
+Количество нод определяет отказоустойчивость кластера и возможность распределять запросы на чтение между репликами. Чем больше нод, тем выше надёжность и производительность операций чтения.
+
+Количество нод выбирается в диапазоне **от 1 до 5**.
+
+#### Процессор (CPU)
+
+Процессор — это вычислительная мощность, выделяемая каждой ноде кластера. Количество vCPU определяет, насколько быстро база данных сможет:
+
+- обрабатывать запросы;
+- выполнять сложные операции (сортировки, объединения таблиц);
+- обслуживать одновременные подключения.
+
+Доступный диапазон: **от 2 до 24 vCPU** на ноду.
+
+#### Оперативная память (RAM)
+
+Оперативная память — один из ключевых ресурсов для производительности базы данных. Данные, помещающиеся в RAM, обрабатываются максимально быстро, без обращения к диску.
+
+Доступный диапазон: **от 4 до 768 ГБ RAM** на ноду.
+
+#### Доступ в интернет
+
+При заказе сервиса можно выбрать пропускную способность канала связи, через который будет осуществляться доступ к кластеру PostgreSQL из сети интернет.
+
+**Доступные варианты скорости:**
+- 50 Мбит/с;
+- 100 Мбит/с;
+- 200 Мбит/с;
+- 300 Мбит/с;
+- 400 Мбит/с;
+- 500 Мбит/с;
+- 1000 Мбит/с (1 Гбит/с).
+
+::: warning Примечание
+
+Для выбранного канала предоставляется статический белый IP-адрес.
+
+:::
+
+## Сетевой доступ к кластеру
+
+Для организации защищенного подключения к кластеру Kafka доступны стандартные механизмы, используемые во всех сервисах платформы:
+- **IPsec-подключение** - организация защищенного туннеля между инфраструктурой и кластером PostgreSQL. Подробнее см. [раздел IPsec](../IPSEC.md);
+- **Interconnection** - прямое сетевое соединение между сервисами внутри платформы без выхода в интернет. Подробнее см. раздел Interconnection.
+
+Выбор конкретного способа подключения зависит от архитектуры приложений и требований к безопасности.

src/PaaS/PostgreSQL/connection.md

@@ -0,0 +1,88 @@
+# Общая схема подключения
+
+Подключение к кластеру **Cloud PostgreSQL** осуществляется через прокси-сервер. Клиентские подключения принимаются прокси, который маршрутизирует трафик к соответствующим узлам кластера (master или replica) в зависимости от выбранного порта.
+
+Прокси является единой точкой входа для всех клиентских подключений и принимает входящие соединения от приложений, административных инструментов и пользователей.
+
+В зависимости от выбранного порта прокси автоматически направляет трафик:
+- **на активный primary-узел** - для операций чтения и записи
+- **на реплики** - для операций только чтения
+
+::: warning Примечание
+Прямое подключение к отдельным узлам базы данных **не используется и не предоставляется**. Взаимодействие с кластером всегда выполняется **через прокси-сервер**.
+::: 
+
+## Подключение к базе данных
+
+Для подключения к базе данных необходимо использовать IP-адрес прокси-сервера, который предоставляется после заказа услуги.
+
+Этот IP-адрес является единой точкой входа для работы с кластером PostgreSQL. Все подключения к базе данных - как из приложений, так и из клиентских инструментов - выполняются через него.
+
+Использование других IP-адресов или попытка прямого подключения к отдельным узлам кластера не предусмотрены.
+
+## Доступные порты
+
+Для разных типов нагрузки используются разные порты:
+
+|Порт  |Назначение                               |
+|------|-----------------------------------------|
+|5432  |Primary (чтение и запись)                |
+|15432 |Replica (только чтение)                  |
+|6432  |Primary через PgBouncer (чтение и запись)|
+|16432 |Replica через PgBouncer (только чтение)  |
+
+#### Особенности работы портов
+
+- Порты **для чтения и записи** (5432, 6432) всегда направляют трафик на активный primary-узел. При смене primary переключение происходит автоматически;
+- Порты **только для чтения** (15432, 16432) направляют трафик на активные реплики. Если реплик несколько, нагрузка распределяется между ними по принципу round-robin;
+- Если в кластере **отсутствуют реплики**, порты для чтения не используются - подключение по ним не устанавливается.
+
+#### Рекомендации по выбору порта
+
+- Для OLTP-нагрузки и большого количества соединений рекомендуется использовать **порты PgBouncer (6432 или 16432)**;
+- Для операций записи используйте **master-порты (5432 или 6432)**;
+- Для read-only запросов можно использовать **replica-порты (15432 или 16432)**.
+
+## Доступ к pgAdmin
+
+Для администрирования базы данных используется [web-интерфейс pgAdmin](./pgadmin.md).
+Доступ осуществляется по DNS-имени, которое нужно прописать локально в инфраструктуре откуда будет происходить доступ к web-интерфейсу сервиса:
+`10.X.X.4 <domain>.cloud-pg.dfcloud.ru`
+
+После добавления записи pgAdmin будет доступен по адресу:
+`https://<domain>.cloud-pg.dfcloud.ru`
+
+Авторизация выполняется с использованием учётных данных, предоставленных вместе с доступом к сервису.
+
+::: warning Примечание
+
+- подключение к базе данных возможно только через указанный прокси-IP;
+- в интерфейсе pgAdmin уже добавлен сервер базы данных, созданный для данной инсталляции. Для подключения требуется ввести пароль от учётной записи базы данных;
+- pgAdmin предназначен для администрирования и не рекомендуется для выполнения тяжёлых или длительных запросов в production-среде.
+
+:::
+
+## Примеры подключения к PostgreSQL
+
+Подключение к primary:
+`psql -h 10.X.X.4 -p 5432 -U <username> -d <database>`
+
+Подключение через PgBouncer:
+`psql -h 10.X.X.4 -p 6432 -U <username> -d <database>`
+
+#### Подключение через DBeaver / DataGrip
+
+При создании подключения укажите:
+- Host: 10.X.X.4;
+- Port: 5432 или 6432;
+- Database: `<database>`;
+- User / Password: согласно выданным доступам;
+- Тип подключения: PostgreSQL.
+
+#### Пример строки подключения
+
+Primary:
+`postgresql://<username>:<password>@10.X.X.4:5432/<database>`
+
+Через PgBouncer:
+`postgresql://<username>:<password>@10.X.X.4:6432/<database>`

src/PaaS/PostgreSQL/grafana.md

@@ -0,0 +1,104 @@
+# Grafana
+
+## Инструкция по работе с метриками
+
+Доступ к метрикам кластера предоставляется после запроса соответствующих прав. После получения доступа можно перейти в систему мониторинга по ссылке: https://metrics.dfcloud.ru. После перехода по ссылке будет представлена главная страница Grafana. 
+
+Для просмотра метрик кластера PostgreSQL выполните следующие шаги:
+
+1. В левом боковом меню нажмите **Dashboard**;
+2. В списке доступных дашбордов выберите **папку Cloud PostgreSQL**;
+3. Внутри папки выберите **дашборд Cloud PostgreSQL** — в нём отображаются все метрики кластера.
+
+## Управление отображаемыми данными
+
+В верхней части дашборда доступны селекторы для настройки отображения:
+
+- **InstallationID** - выбор одного опеределенного кластера;
+- **Cluster node name** - выбор конкретного нода кластера, в котором значения графиков меняются в зависимости от выбранного хоста (селектор влияет на все графики, кроме блока Patroni);
+- **Database** - выбор базы данных, по которым отображаются метрики;
+- **Lock table** - выбор типа блокировки для отображения (применим не для всех графиков).
+
+## Метрики PostgreSQL
+
+Метрики отображают ключевые параметры конфигурации и текущие показатели работы экземпляра PostgreSQL.
+
+| Наименование метрики     | Описание метрики                                                                                                                                |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------|
+| **Version**              | Показывает текущую версию PostgreSQL, установленную на кластере.                                                                                |
+| **Current fetch data**   | Объем данных, извлеченных из базы за текущий период (операции чтения).                                                                          |
+| **Current insert data**  | Объем данных, вставленных в базу (операции записи новых данных).                                                                                |
+| **Current update data**  | Объем данных, обновленных в базе.                                                                                                               |
+| **Seq Page Cost**        | Стоимость последовательного чтения страницы данных. Влияет на выбор плана запроса: чем выше значение, тем реже оптимизатор будет выбирать последовательное сканирование таблиц. |
+| **Random Page Cost**     | Стоимость чтения случайной страницы данных. Низкое значение говорит о том, что в системе используются быстрые диски, и оптимизатор будет чаще выбирать доступ по индексам.      |
+| **Max Connections**      | Максимальное количество одновременных подключений к базе данных, разрешенное на сервере.                                                        |
+| **Shared Buffers**       | Объем оперативной памяти, выделенный под кэш данных PostgreSQL. Здесь хранятся часто используемые данные для ускорения доступа к ним.           |
+| **Effective Cache**      | Предполагаемый размер системного кэша файлов. Используется оптимизатором для оценки вероятности нахождения данных в кэше операционной системы.  |
+| **Maintenance Work Mem** | Объем памяти для выполнения операций обслуживания.                                                                                              |
+| **Work Mem**             | Объем памяти, выделяемый для внутренних сортировок и хеш-таблиц при выполнении запросов (на каждую операцию).                                   |
+| **Max WAL Size**         | Максимальный размер журнала предзаписи, после достижения которого запускается процесс контрольной точки (checkpoint).                           |
+| **Max Worker Processes** | Максимальное количество фоновых процессов, которые могут быть запущены в системе.                                                               |
+| **Max Parallel Workers** | Максимальное количество параллельных процессов, которые могут быть задействованы при выполнении одного запроса.                                 |
+
+## Метрики Database Stats
+
+Метрики отображают текущую нагрузку и состояние баз данных в кластере PostgreSQL. Данные метрики позволяют:
+- оценить эффективность работы баз данных;
+- отследить скачки нагрузки;
+- своевременно среагировать на потенциальные проблемы до того, как они повлияют на работу приложений.
+
+| Наименование              | Описание           |
+|---------------------------| -------------------|
+| **Average CPU Usage**     | Показывает время, затраченное на выполнение пользовательских и системных задач, а также, насколько интенсивно используются вычислительные ресурсы сервера базы данных. |
+| **Average Memory Usage**  | Средний объем оперативной памяти, используемой процессами PostgreSQL за 5-минутные интервалы. Показывает, сколько памяти потребляет база данных в процессе работы. |
+| **Open File Descriptors** | Количество открытых файловых дескрипторов процессами PostgreSQL. Метрика показывает среднее (Mean), последнее (Last), максимальное (Max) и минимальное (Min) значение за интервал. |
+| **Active sessions**       | Показывает, сколько в данный момент выполняется запросов к PostgreSQL. Метрика показывает среднее (Mean), последнее (Last), максимальное (Max) значение. |
+| **Transcations**          | Количество транзакций в базах данных кластера. Метрика разделена на два типа операций: commits (успешно завершенные транзакции) и rollbacks (откаченные транзакции). |
+| **Update data**           | Объем данных, обновленных в базах данных кластера. Показывает, сколько данных было изменено в результате выполнения операций UPDATE. |
+| **Fetch data (SELECT)**   | Объем данных, извлеченных из базы с помощью запросов SELECT. Показывает, сколько данных было считано из базы в результате операций чтения. |
+| **Insert data**           | Объем данных, вставленных в базы данных кластера. Показывает, сколько данных было добавлено в результате выполнения операций INSERT. |
+| **Lock tables**           | Количество блокировок таблиц в базах данных кластера. Показывает, сколько раз таблицы были заблокированы для выполнения операций.<br>AccessShareLock - это блокировка, которая возникает, когда кто-то читает данные из таблицы (делает SELECT). Данная блокировка не мешает операциям чтения, но не дает удалить в этот момент таблицу или изменить ее структуру. |
+| **Return data**           | Объем данных, возвращаемых клиенту в результате выполнения запросов. Показывает, сколько данных было отправлено обратно клиенту после обработки запросов в базе. |
+| **Idle sessions**         | Количество бездействующих сессий подключения к базе данных. Показывает, сколько открытых подключений в данный момент не выполняют никаких запросов и просто ждут. |
+| **Delete data**           | Объем данных, удаленных из базы данных в результате выполнения операций DELETE. Показывает, сколько данных было удалено из таблиц. |
+| **Cache Hit Rate**        | Показывает процент запросов к данным, которые были удовлетворены из кэша (оперативной памяти), без обращения к диску. Показывает, насколько эффективно используется кэш PostgreSQL. |
+| **Buffers (bgwriter)**    | Метрика, показывающая активность фонового процесса записи, который занимается синхронизацией данных из оперативной памяти на диск.  |
+| **Conflicts/Deadlocks**   | Метрика, отслеживающая две проблемы при работе с базой данных: конфликты восстановления и взаимоблокировки.                                                        |
+| **Temp File (Bytes)**     | Объем данных, записанных во временные файлы при выполнении запросов в базах данных. PostgreSQL создает временные файлы на диске, когда для выполнения запроса не хватает оперативной памяти.                   |
+| **Checkpoint Stats**      | Метрика, показывающая время, затрачиваемое на выполнение checkpoints в PostgreSQL, где: <br>- **write_time** - время, затраченное на запись данных на диск во время checkpoint (сколько миллисекунд ушло на запись файлов).<br>- **sync_time** - время, затраченное на синхронизацию файлов с диском (чтобы данные гарантированно сохранились). |
+
+## Метрики Patroni
+
+Метрик отображают состояние и конфигурацию кластера PostgreSQL под управлением Patroni. Эти метрики позволяют контролировать отказоустойчивость кластера, отслеживать переключения мастера и убеждаться, что репликация работает штатно.
+
+| Наименование                       | Описание                                                                                                                               |
+|------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
+| **Patroni Leader**                 | Метрика, которая показывает, какая нода в кластере PostgreSQL в данный момент является master-сервером, принимающим запросы на запись. |
+| **Patroni Replica**                | Метрика, которая показывает, какие узлы кластера PostgreSQL в данный момент выполняют роль реплики.                                    |
+| **Sync Standby**                   | Метрика, которая показывает, какая из реплик в кластере PostgreSQL назначена синхронной.                                               |
+| **PostgreSQL WAL Replay**          | Метрика, которая показывает, включена ли на узлах кластера синхронизация данных через WAL.                                             |
+| **PostgreSQL Pending Restart**     | Метрика, которая показывает, требуется ли перезагрузка PostgreSQL на узлах кластера после изменения конфигурационных параметров.       |
+| **Patroni Primary Node**           | Метрика, которая показывает, какой узел в кластере PostgreSQL в данный момент является основным и принимает запросы на запись.         |
+| **Patroni Secondary Nodes**        | Метрика, которая показывает, какие узлы кластера PostgreSQL в определенные моменты времени выполняли роль реплик.                      |
+| **Replicas Received WAL Location** | Метрика, показывающая объем журналов предзаписи (WAL), полученных каждой репликой кластера.                                            |
+| **Primary WAL Location**           | Метрика, показывающая объем журналов предзаписи (WAL), на основном сервере кластера PostgreSQL.                                        |
+| **Replicas Replayed WAL Location** | Метрика, показывающая объем журналов предзаписи (WAL), которые были не просто получены, а уже применены на репликах кластера.          |
+| **WAL Replay Paused**              | Метрика, которая отслеживает, не приостановлен ли процесс применения WAL-журналов на узлах кластера. Если передача или применение WAL-файлов останавливается, на графике происходит скачок. |
+
+## Метрики Hosts
+
+Блок Hosts управляется селектором **Cluster node name**. Метрики отображают состояние и ресурсы серверов, на которых развернут кластер PostgreSQL. Данные метрики позволяют оценить, хватает ли серверу ресурсов для текущей нагрузки, и своевременно обнаружить проблемы с производительностью или нехваткой места на дисках.
+
+| Наименование                   | Описание                                                                                                                      |
+| -------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
+| **CPU Busy**                   | Метрика, показывающая общую загруженность всех процессорных ядер на сервере, где работает PostgreSQL.                         |
+| **RAM Used**                   | Метрика, показывающая процент оперативной памяти, который занят на сервере всеми процессами.                                  |
+| **CPU Cores**                  | Метрика, показывающая общее количество процессорных ядер, доступных на сервере, где работает PostgreSQL.                      |
+| **RAM Total**                  | Метрика, показывающая общий объем оперативной памяти, установленный на сервере.                                               |
+| **DB Disk Total**              | Метрика, показывающая общий объем дискового пространства, выделенного для хранения данных базы данных PostgreSQL на сервере.  |
+| **CPU Basic**                  | Метрика, которая показывает детальную разбивку загрузки процессора по типам выполняемых задач. Она позволяет увидеть, на что именно тратится процессорное время на сервере. |
+| **Memory Basic**               | Метрика, которая показывает детальную разбивку использования оперативной памяти на сервере, а также информацию о SWAP.        |
+| **Disk IOps**                  | Метрика, показывающая количество операций чтения и записи, выполняемых на диске сервера в секунду.                            |
+| **Disk Space Used Basic**      | Метрика, показывающая процент занятого дискового пространства на всех подключенных файловых системах сервера.                 |
+| **Disk R/W Data**              | Показывает объем данных в байтах, читаемых с диска и записываемых на диск в секунду.                                          |
+| **Filesystem space available** | Метрика, показывающая объем свободного дискового пространства на файловой системе сервера.                                    |

src/PaaS/PostgreSQL/pgadmin.md

@@ -0,0 +1,67 @@
+# PgAdmin
+
+После предоставления доступа к сервису **Cloud PostgreSQL** пользователь получает возможность управлять базами данных через веб-интерфейс **pgAdmin**. Ниже приведена инструкция по входу в систему и выполнению основных операций.
+
+## Вход в pgAdmin
+
+1. Откройте веб-браузер и перейдите по адресу, предоставленному для доступа к pgAdmin;
+2. На странице авторизации введите **логин и пароль от pgAdmin**;
+> Учетные данные направляются пользователю на электронную почту при предоставлении доступа.
+3. После входа в систему в левой панели навигации откройте раздел **Servers**;
+4. Выберите предварительно настроенный сервер с названием **PostgreSQL**;
+5. В открывшемся окне введите пароль;
+> Важно: на данном этапе необходимо указать **пароль учетной записи базы данных**, а не пароль от pgAdmin.
+6. Нажмите **ОК**.
+
+После успешной аутентификации станет доступен веб-интерфейс СУБД PostgreSQL.
+
+## Реплики и параметры конфигураций
+
+pgAdmin позволяет осуществлять мониторинг реплик, входящих в состав кластера. Чтобы просмотреть список реплик необходимо открыть раздел **Replica nodes** в панели навигации.
+
+
+### Просмотр состояния репликаций
+
+Чтобы проверить состояние репликации:
+1. Выберите нужную реплику в разделе **Replica nodes**;
+2. Перейдите в подраздел **Replication**;
+3. Откройте пункт **Replication stats**;
+4. Разверните раздел **Подробности** - в нем отображаются все параметры и текущее состояние репликации.
+
+Вкладка **Replication** позволяет определить, выполняется ли передача данных на дополнительные узлы кластера. 
+
+### Просмотр конфигураций реплики
+
+Чтобы просмотреть **параметры конфигурации PostgreSQL**, применённые к конкретной реплике, перейдите в раздел **Конфигурация**, расположенный в блоке **Replica nodes**.
+
+Раздел **Конфигурация** содержит следующие параметры:
+- **Имя** - наименование конфигурационного параметра;
+- **Категория** - логическая группа параметра;
+- **Значение** - текущее установленное значение;
+- **Единицы** - единицы измерения (если применимо);
+- **Описание** - краткое пояснение назначения параметра.
+> Вкладка **Конфигурация** предназначена для просмотра текущих настроек реплики.
+
+## Базы данных
+
+### Просмотр существующих баз данных:
+
+Чтобы просмотреть существующие базы данных, откройте раздел Базы данных в левой панели навигации. В этом разделе отображается перечень всех созданных баз.
+
+### Создание новой базы данных:
+
+1. Щелкните правой кнопкой мыши по разделу **Базы данных**;
+2. В контекстном меню выберите **Создать**, затем - **База данных**;
+3. Заполните обязательные поля в открывшейся форме;
+4. Нажмите **Сохранить**.
+
+## Роли входа / группы
+
+В разделе **Роли входа/группы** отображается список пользователей (ролей), имеющих доступ к базам данных кластера.
+
+### Создание новой роли:
+
+1. Щелкните правой кнопкой мыши по разделу **Роли входа/группы**;
+2. Выберите **Создать**, затем - **Роль входа/группы**;
+3. Заполните необходимые параметры в форме создания роли;
+4. Нажмите **Сохранить**.

src/PaaS/PostgreSQL/user-capabilities.md

@@ -0,0 +1,119 @@
+# Возможности пользователя
+
+Данный раздел описывает права, которые предоставляются пользователю PostgreSQL при создании сервиса **Cloud PostgreSQL**, а также перечень административных операций, доступных ему для самостоятельного выполнения.
+
+При развертывании сервиса автоматически создаётся пользователь базы данных с преднастроенными атрибутами и привилегиями. Эти права позволяют заказчику самостоятельно управлять своими базами данных, ролями и пользователями в рамках созданного экземпляра PostgreSQL.
+
+
+## Общая информация о пользователе
+
+При инициализации сервиса автоматически создаётся пользователь:
+
+```nginx
+client 
+```
+
+Данный пользователь является основной учётной записью для административной работы в рамках предоставленного экземпляра PostgreSQL. 
+
+Он предназначен для самостоятельного управления в пределах выданных привилегий:
+- базами данных;
+- ролями;
+- правами доступа.
+
+
+## Выданные права и ограничения
+
+Пользователю `client` назначается набор атрибутов и привилегий, позволяющих выполнять административные операции в рамках своего экземпляра базы данных.
+
+#### Атрибуты роли
+
+Пользователь создаётся со следующими атрибутами:
+- `CREATEDB` — разрешено создание и удаление баз данных;
+- `CREATEROLE` — разрешено создание ролей и пользователей, а также управление их.
+
+Атрибут `SUPERUSER` пользователю не предоставляется. Соответственно, доступ к системным операциям уровня кластера и настройкам сервера отсутствует.
+
+#### Права на системную базу postgres:
+
+К стандартной базе данных `postgres` пользователю предоставлено только право подключения — `CONNECT`
+
+**Иные привилегии (создание объектов, изменение схем и т.д.) на данную базу не выдаются.**
+
+
+## Мониторинг и системные представления
+
+Для выполнения базовых задач мониторинга пользователю дополнительно предоставлены:
+- членство в роли `pg_monitor`;
+- право `SELECT` на системное представление:
+```sql
+pg_catalog.pg_stat_replication
+```
+
+Доступ к системной информации предоставляется исключительно **в режиме чтения**. Изменение системных представлений и параметров сервера недоступно.
+
+
+## Изменение пароля
+
+После первого подключения к базе данных пользователь `client` обязан выполнить изменения пароля.
+
+Изменить пароля можно:
+- в открытом виде (с передачей нового значения пароля);
+- с указанием заранее сгенерированного хэша.
+
+На сервере используется алгоритм шифрования паролей:
+
+```
+scram-sha-256
+```
+
+При использовании **SCRAM** применяется следующий формат хэша:
+
+```
+$<iterations>:<salt>$<storedkey>:<serverkey>
+```
+
+| Операция | Описание | Команда SQL |
+|----------|----------|-------------|
+|Смена пароля в открытом виде | Для смены пароля в открытом виде | ```ALTER USER client WITH PASSWORD 'new_strong_password';``` |
+|Смена пароля с указанием хэша | Рекомендуется использовать сложный уникальный пароль, соответствующий требованиям информационной безопасности, и хранить его в защищённом хранилище | ```ALTER USER client WITH ENCRYPTED PASSWORD '$4096:...';``` |
+|Создание новой базы данных | Для создания базы данных | ```CREATE DATABASE app_db;``` |
+|Создание базы данных с указанием владельца | Пользователь, указанный как владелец, будет иметь полный контроль над базой данных, включая права на её удаление и изменение. По умолчанию владельцем создаваемой базы данных является пользователь, который её создает | ```CREATE DATABASE app_db OWNER client;``` |
+
+
+## Создание пользователей и ролей
+
+Пользователь `client` имеет право создавать новые роли и пользователей для приложений, а также управлять их правами доступа.
+
+| Операция | Описание | Команда SQL |
+|----------|----------|-------------|
+|Создание роли без логина | Для входа в базу данных (например, для организации прав доступа) | ```CREATE ROLE app_role; ```|
+|Создание пользователя с паролем | Для создания пользователя с паролем. После выполнения этой команды новый пользователь `app_user` будет иметь возможность входа в базу данных, используя указанный пароль. | ```CREATE USER app_user WITH PASSWORD 'app_password';``` |
+|Назначение роли пользователю | Для назначения роли пользователю. Данная команда позволяет управлять правами пользователя в рамках определённой роли. После выполнения этой команды пользователь `app_user` станет членом роли `app_role`, и будет наследовать все права, связанные с этой ролью. | ```GRANT app_role TO app_user; ``` |
+
+
+## Управление правами доступа
+
+После создания пользователей и ролей необходимо назначить им соответствующие права доступа.
+
+| Операция | Описание | Команда SQL |
+|----------|----------|-------------|
+|Передача владельца базы данных | Для передачи прав владения базой данных другому пользователю. После выполнения этой команды база данных `app_db` будет принадлежать пользователю `app_user`, и он будет иметь полный контроль над ней.| ```ALTER DATABASE app_db OWNER TO app_user;``` |
+|Выдача прав на подключение к базе данных | Для предоставления прав к подключению к базе данных. После выполнения этой команды пользователь может `app_user` подключаться к базе данных `app_db`. | ```GRANT CONNECT ON DATABASE app_db TO app_user;```|
+|Предоставление прав на схему public | Для предоставления прав на использование схемы `public`. После выполнения этой команды пользователь `app_user` может использовать объекты в схеме `public`, а также создавать новые объекты внутри неё. | ```GRANT USAGE, CREATE ON SCHEMA public TO app_user;```|
+|Предоставление прав на существующие таблицы | Для предоставления доступа пользователю к существующим таблицам в схеме `public`. После выполнения этой команды пользователь `app_user` может выполнять операции чтения, вставки, обновления и удаления данных в существующих таблицах схемы `public`.| ```GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO app_user;``` |
+|Предоставление прав на будущие таблицы | Если необходимо автоматически предоставить пользователю права на новые таблицы, создаваемые в схеме `public`. После выполнения этой команды все будущие таблицы, создаваемые в схеме `public`, будут автоматически иметь права для пользователя `app_user` на чтение, вставку, обновление и удаление данных. | ```ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO app_user;```|
+
+
+## Мониторинг репликации
+
+Пользователь `client` имеет доступ к системным представлениям для мониторинга состояния репликации в кластере PostgreSQL.
+
+| Операция | Описание | Команда SQL |
+|----------|----------|-------------|
+|Просмотр состояния репликации | Для просмотра текущего статуса репликации. Этот запрос возвращает информацию о всех репликах, подключённых к основному (primary) серверу. |```SELECT * FROM pg_stat_replication;```|
+
+::: warning Ограничения доступа реплкации
+
+Пользователь `client` имеет доступ к данным в представлении `pg_stat_replication` только в режиме **read-only**. Это означает, что он может просматривать состояние репликации, но не может изменять или вмешиваться в процесс репликации.
+
+::: 

src/PaaS/index.md

@@ -0,0 +1,12 @@
+---
+section_links:
+  - title: Cloud PostgreSQL
+    link: /PaaS/PostgreSQL/PostgreSQL-index.md
+    description: Обзор сервиса PostgreSQL
+  - title: IPSEC
+    link: /PaaS/IPSEC.md
+    description: Параметры конфигурации IPSEC
+
+---    
+
+# Начало работы в Cloud PostgreSQL

src/admin/availability-matrix.md

@@ -1,13 +0,0 @@
-# Матрица региональной доступности
-
-Регион доступности — это один или несколько центров обработки данных (ЦОД), в которых могут быть размещены компоненты облачной инфраструктуры.
-
-| Регион |  Статус | Гипервизор | Процессор | HDD| SSD | NVME|  
-|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
- | **ДатаФорт 1** |  Доступен | OpenStack |  Intel® Xeon® Gold 6248R | ✘ | ✘ | ✅ |  
-
-Условные обозначения:
-
-✅ — есть возможность выдачи ресурсов.
-
-✘ — нет возможности выдачи ресурсов.

src/admin/index.md

@@ -5,6 +5,8 @@ section_links:
     description: Добавление SSH-ключей для подключения к виртуальным машинам 
 --- 
 
-# Аккаунт Beeline Cloud
+# Администрирование
 
-Аккаунт Beeline Cloud создается при [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud. С помощью аккаунта можно управлять профилем пользователя.
+При [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud создается аккаунт и проект в Beeline Cloud.
+
+С помощью аккаунта можно управлять профилем пользователя - добавлять SSH-ключи, чтобы подключаться к виртуальным машинам без ввода пароля.

src/admin/limits.md

@@ -1,40 +0,0 @@
-# Квоты и лимиты
-
-Ограничения включают в себя лимиты и квоты на потребление ресурсов в проекте. 
-
-Квоты ограничивают потребление ресурсов в проекте. В проекте на каждый ресурс выделяется квота, не превышающая лимит.
-
-После создания проекту становятся доступны базовые квоты. Для них установлены значения по умолчанию.
-
-**Базовые квоты**
-
-| Название квоты      | Количество |
-|---------------------|------------|
-| Количество виртуальных ВМов | 3 штуки|
-| ЦПУ                 | 200        |
-| ОЗУ              | 200 Гбайт       |
-| Хранилище NVME   | 5000 Гбайт      |
-| Объектное хранилище | 100 Гбайт      |
-
-## Просмотр квот проекта
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-
-## Редактирование квот проекта
-
-::: tip Информация
-Изменить квоты проекта может пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-6. В правом верхнем углу нажмите **Изменить квоты**.
-7. Увеличите или уменьшите квоты для ресурсов.
-8. Нажмите **Сохранить**.

src/admin/projects.md

@@ -1,49 +0,0 @@
-# Управление проектами
-
-Проект — это структурная единица публичного облака, в которой содержатся ресурсы: виртуальные машины, хранилища, IP-адреса и др. 
-
-Ресурсы могут быть вычислительными и аппаратными.
-
-Вычислительные ресурсы:
-- оперативная память (ОЗУ);
-- ядра процессора (ЦПУ);
-- локальные диски;
-- сетевые диски;
-- IP-адреса.
-
-Аппаратные ресурсы (ВМы, сети, диски) размещены в центрах обработки данных (ЦОД). Каждый дата-центр разделен на модули. Модули оснащены независимыми системами электропитания и охлаждения.
-
-При получении доступа в публичное облако текущий пользователь становится менеджера проектов. Менеджер проектов может создавать новые проекты, в которых он получает роль владельца проекта. Владелец проекта может добавлять пользователей в проект, назначая им роли.
-
-Доступ к проекту осуществляется из консоли управления.
-
-## Создать проект
-
-1. Перейдите в консоль управления.
-2. Нажмите кнопку **Создать → Проект** в правом верхнем углу.
-3. Заполните информацию о проекте:
-   - **Название**: введите наименование проекта.
-   - **Идентификатор**: введите идентификатор проекта:
-     - допустимы строчные и прописные буквы латинского алфавита, цифры и дефис;
-     - длина не более 64 символов;
-     - не должно начинаться или заканчиваться дефисом.
-   - **Описание**: введите краткое описание проекта.
-4. Нажмите **Создать**.
-
-## Изменить имя проекта
-
-::: tip Информация
-Изменить имя и описание проекта может только пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Настройки → Основное**.
-6. Измените имя, описание проекта.
-7. Нажмите **Сохранить**.
-
-## Удаление проекта
-
-Функциональность не предусмотрена в публичном облаке.

src/admin/roles.md

@@ -1,49 +0,0 @@
-# Ролевая модель
-
-Управление проектом основано на ролевой модели.
-
-**Базовые роли**
-
-В проекте предусмотрен базовый набор ролей:
-
-- **Владелец продукта** — управление пользователями проекта, просмотр ресурсов.
-- **DevOps-инженер** — управление инфраструктурой, стандартное администрирование ОС UNIX по протоколу ssh и права управления виртуальными ВМами и дисками в консоли управления.
-
-## Матрица ролей
-
-| Действие | Владелец проекта | DevOps-инженер |
-|---|---|---|
-| Обзор проекта<br> (квоты и количество использованных ресурсов)| &#9989; | &#9989; |
-| ВМы: обзор | &#9989; | &#9989; |
-| ВМы: мониторинг | &#9989; | &#9989; |
-| ВМы: создать ВМ |&#10008; | &#9989; | 
-| ВМы: подключить диск | &#10008; | &#9989; | 
-| ВМы: отключить диск | &#10008; | &#9989; | 
-| ВМы: добавить диск | &#10008; | &#9989; | 
-| ВМы: теги | &#10008; |&#9989; | 
-| ВМы: масштабирование ВМа | &#10008; | &#9989; | 
-| ВМы: выключить ВМ | &#10008; | &#9989; | 
-| ВМы: включить ВМ | &#10008; | &#9989; | 
-| ВМы: перезагрузить ВМ | &#10008; | &#9989; | 
-| ВМы: принудительно перезагрузить ВМ | &#10008; | &#9989; |
-| ВМы: удалить ВМ | &#10008; | &#9989; |
-| ВМы: группы размещения | &#10008; | &#9989; |
-| ВМы: IP-адреса | &#10008; | &#9989; | 
-| Диски: просмотр дисков | &#9989; | &#9989; | 
-| Диски: добавление дискового пространства | &#10008; | &#9989; |
-| Диски: удалить диск| &#10008; | &#9989; |
-| Объектное хранилище: просмотр| &#9989; | &#9989; | 
-| Объектное хранилище: добавить хранилище | &#10008; | &#9989; |
-| Объектное хранилище: удалить хранилище | &#10008; |  &#9989;|
-| DNS: добавить зону | &#10008; | &#9989; |
-| DNS: редактировать зону | &#10008; | &#9989; | 
-| DNS: удалить зону |&#10008; | &#9989; | 
-| Настройки проекта: просмотр| &#9989; | &#9989; | 
-| Настройки проекта: изменить описание проекта |&#9989;  | &#10008; |
-| Участники: просмотр | &#9989; | &#9989; | 
-| Участники: добавить участника | &#9989; | &#10008; | 
-| Участники: удалить участника | &#9989; | &#10008; | 
-| Участники: назначить роль | &#9989;| &#10008; | 
-| Квоты: просмотр | &#9989; | &#9989; | 
-| Веб-обработчики | &#10008; | &#9989; |
-| Наблюдаемость | &#9989; | &#9989; |

src/admin/ssh.md

@@ -10,7 +10,7 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Добавить SSH-ключ
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Нажмите **Добавить ключ**.
@@ -31,14 +31,14 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Посмотреть SSH-ключи
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. В таблице показаны SSH-ключи пользователя.
 
 ## Изменить название SSH-ключа
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Выберите нужный ключ.
@@ -48,7 +48,7 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Удалить SSH-ключ
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Выберите нужный ключ.

src/admin/users.md

@@ -1,47 +0,0 @@
-# Управление пользователями в проекте
-
-В консоли управления можно добавлять пользователей, управлять ролями пользователей в проекте. Один пользователей может участвовать в нескольких проектах и иметь в них разные роли.
-
-::: tip Информация
-Добавлять и удалять пользователей, изменять права пользователей в проекте может только владелец проекта.
-:::
-
-## Добавить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Нажмите **Добавить пользователя**.
-4. Найдите пользователя по ФИО или email.
-5. Назначьте [роль](../admin/roles.md) пользователю.
-6. Нажмите **Добавить**.
-
-## Назначить права пользователю
-
-Каждому пользователю проекта должна быть выдана хотя бы одна роль. У пользователя может быть несколько ролей в одном проекте. 
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
-5. Назначьте [роль](../admin/roles.md) пользователю: установите флажок напротив роли.
-6. Нажмите **Сохранить**.
-
-Права на существующие ОС применятся в течение 10 минут.
-
-## Отозвать права у пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
-5. Отзовите роль у пользователя: уберите флажок напротив роли. Оставьте пользователю хотя бы одну роль в проекте. 
-6. Нажмите кнопку **Сохранить**.
-
-## Удалить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Удалить**.
-
-Пользователь будет удален из списка участников проекта. Ресурсы проекта станут недоступны пользователю.

src/assets/icons/astra.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0079C0;}
+</style>
+<g>
+	<path class="st0" fill="#0779c3" d="M996.4,397.2l-328.5-56.6c-28.2-59.7-124.3-263-124.3-263l-31.4-66.1L356.3,340.6L27.6,397.1l234.7,254.5
+		l-52.6,360.9l302.4-166l302.4,165.9l-52.9-360.9c41.9-45.4,184.5-199.9,191.5-207.5L996.4,397.2z M719.6,635.2l44.7,301.3
+		L512.2,798.2L259.8,936.7l44.7-301.4L108.1,422.5l274.7-47.4L512,102.2L641,375.1l274.8,47.4L719.6,635.2z"/>
+	<g>
+		<g>
+			<polygon class="st0" fill="#0779c3" points="327,690.8 418.1,814.8 457.3,793.2 305.9,479.7 505.2,766.9 512,763.2 581.6,801.4 428.4,463.9 
+				689.3,860.6 724.7,880 719.1,841.6 550.8,448.2 695.4,679.1 687.5,625.3 731.7,577.5 673.2,432.5 748.9,559 856.1,442.8 
+				620.6,402.3 512,172.9 403.4,402.3 168,442.8 336.6,625.3 			"/>
+			<polygon class="st0" fill="#0779c3" points="317.4,756.3 299.4,880 363,845.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/icons/beta.svg

@@ -0,0 +1,8 @@
+<svg width="46.000000" height="24.000000" viewBox="0 0 46 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<rect id=".❖ Master" rx="12.000000" width="46.000000" height="24.000000" fill="#7E00ED"/>
+	<path id="Text" d="M12.2151 6.80103C13.2844 6.80103 14.0889 7.05859 14.6284 7.57373C15.1704 8.08887 15.4414 8.76147 15.4414 9.59155C15.4414 10.0896 15.3328 10.5193 15.1155 10.8806C14.9006 11.2395 14.5784 11.519 14.1487 11.7192C14.7102 11.8486 15.146 12.1208 15.4561 12.5359C15.7661 12.9509 15.9211 13.4587 15.9211 14.0593C15.9211 14.97 15.6257 15.6877 15.0349 16.2126C14.4441 16.7375 13.6189 17 12.5593 17L9.05103 17L9.05103 6.80103L12.2151 6.80103ZM12.0503 11.1333C12.6509 11.1333 13.0928 11.0259 13.376 10.811C13.6616 10.5962 13.8044 10.2593 13.8044 9.80029C13.8044 9.3291 13.6616 8.99951 13.376 8.81152C13.0928 8.62109 12.6509 8.52588 12.0503 8.52588L10.6257 8.52588L10.6257 11.1333L12.0503 11.1333ZM12.4092 15.2751C13.0391 15.2751 13.509 15.1555 13.8191 14.9163C14.1292 14.6746 14.2842 14.3096 14.2842 13.8213C14.2842 13.3208 14.1292 12.9656 13.8191 12.7556C13.509 12.5457 13.0391 12.4407 12.4092 12.4407L10.6257 12.4407L10.6257 15.2751L12.4092 15.2751ZM24.0109 14.6599C23.9108 15.1091 23.7253 15.5217 23.4543 15.8977C23.1857 16.2737 22.8232 16.5764 22.3666 16.8059C21.9125 17.0354 21.3498 17.1501 20.6784 17.1501C19.9997 17.1501 19.3979 16.9854 18.873 16.6558C18.3481 16.3262 17.9379 15.8708 17.6425 15.2898C17.3471 14.7087 17.1994 14.0532 17.1994 13.3232C17.1994 12.5835 17.3495 11.9268 17.6498 11.353C17.9501 10.7769 18.3627 10.324 18.8876 9.99438C19.4125 9.66479 20.0204 9.5 20.7113 9.5C21.3998 9.5 22.0041 9.66235 22.5241 9.98706C23.0441 10.3118 23.4494 10.7646 23.7399 11.3457C24.0304 11.9243 24.1757 12.6042 24.1757 13.3855C24.1757 13.4148 24.1733 13.4673 24.1684 13.543C24.1635 13.6187 24.1611 13.6711 24.1611 13.7004L18.7155 13.7004C18.7741 14.3108 18.9804 14.7856 19.3344 15.125C19.6908 15.4644 20.1498 15.634 20.7113 15.634C21.2216 15.634 21.6342 15.5449 21.9491 15.3667C22.2641 15.186 22.4911 14.9504 22.6303 14.6599L24.0109 14.6599ZM20.7113 11.0161C20.1816 11.0161 19.7458 11.1638 19.404 11.4592C19.0646 11.7522 18.8449 12.1636 18.7448 12.6934L22.6449 12.6934C22.5741 12.1953 22.3764 11.7913 22.0517 11.4812C21.727 11.1711 21.2802 11.0161 20.7113 11.0161ZM28.3959 17.0916C27.915 17.0916 27.5024 17.0244 27.1581 16.8901C26.8139 16.7534 26.5465 16.5081 26.3561 16.1541C26.1657 15.7976 26.0705 15.2898 26.0705 14.6306L26.0705 11.1516L25.1549 11.1516L25.1549 9.65015L26.0851 9.65015L26.6711 7.896L27.539 7.896L27.539 9.65015L29.4762 9.65015L29.4762 11.1516L27.539 11.1516L27.539 14.2534C27.539 14.7539 27.6391 15.0872 27.8393 15.2532C28.0395 15.4167 28.3251 15.4985 28.6962 15.4985C28.8964 15.4985 29.0685 15.4888 29.2126 15.4692C29.3566 15.4497 29.4945 15.4253 29.6264 15.396L29.6264 16.9268C29.4652 16.9658 29.2773 17.0024 29.0624 17.0366C28.8476 17.0732 28.6254 17.0916 28.3959 17.0916ZM36.5013 17.0293C36.1107 17.0293 35.7945 16.9268 35.5528 16.7217C35.3135 16.5166 35.1695 16.2041 35.1207 15.7842C34.9009 16.1943 34.6153 16.5093 34.2637 16.729C33.9146 16.9487 33.4898 17.0586 32.9893 17.0586C32.3399 17.0586 31.8175 16.884 31.4219 16.5349C31.0264 16.1858 30.8287 15.6853 30.8287 15.0334C30.8287 14.6038 30.9117 14.2498 31.0777 13.9714C31.2437 13.6907 31.4866 13.4526 31.8065 13.2573C32.1263 13.062 32.5157 12.8801 32.9747 12.7117L34.9998 11.9609C34.9608 11.6094 34.8155 11.3689 34.564 11.2395C34.315 11.1101 34.0159 11.0454 33.6668 11.0454C33.2762 11.0454 32.9551 11.1162 32.7037 11.2578C32.4547 11.397 32.2996 11.6155 32.2386 11.9133L30.9202 11.9133C30.991 11.3738 31.1558 10.9246 31.4146 10.5657C31.6758 10.2043 32.0054 9.93701 32.4034 9.76367C32.8038 9.58789 33.2445 9.5 33.7254 9.5C34.5653 9.5 35.2403 9.72339 35.7506 10.1702C36.2608 10.6145 36.5111 11.3005 36.5013 12.2283L36.4537 14.8394C36.4537 15.1104 36.4964 15.2983 36.5819 15.4033C36.6673 15.5083 36.8052 15.5608 36.9957 15.5608L37.2191 15.5608L37.2191 17C37.1092 17.0098 36.9896 17.0171 36.8602 17.022C36.7308 17.0269 36.6112 17.0293 36.5013 17.0293ZM32.3155 14.7039C32.3155 14.9846 32.4229 15.1934 32.6378 15.3301C32.8526 15.4644 33.1346 15.5315 33.4837 15.5315C33.8157 15.5315 34.116 15.4839 34.3846 15.3887C34.6556 15.2935 34.8558 15.1702 34.9852 15.0188L35.0145 12.9937L33.6815 13.5063C33.1907 13.6943 32.8404 13.8713 32.6304 14.0374C32.4205 14.2034 32.3155 14.4255 32.3155 14.7039Z" fill-rule="evenodd" fill="#FFFFFF"/>
+</svg>

src/assets/icons/centos.svg

@@ -0,0 +1,28 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42974)">
+<g clip-path="url(#clip1_1668_42974)">
+<path d="M14.888 5.03516H5.03516V14.888H14.888V5.03516Z" fill="#9CCD2A"/>
+<path d="M26.9661 5.03516H17.1133V14.888H26.9661V5.03516Z" fill="#932279"/>
+<path d="M26.9661 17.1133H17.1133V26.9661H26.9661V17.1133Z" fill="#EFA724"/>
+<path d="M14.888 17.1133H5.03516V26.9661H14.888V17.1133Z" fill="#262577"/>
+</g>
+<g clip-path="url(#clip2_1668_42974)">
+<path d="M9.03301 24.5408L16 31.5078L22.967 24.5408L16 17.5738L9.03301 24.5408Z" fill="#9CCD2A"/>
+<path d="M0.493952 15.9998L7.46094 22.9668L14.4279 15.9998L7.46094 9.03282L0.493952 15.9998Z" fill="#932279"/>
+<path d="M9.03301 7.46075L16 14.4277L22.967 7.46075L16 0.493761L9.03301 7.46075Z" fill="#EFA724"/>
+<path d="M17.5721 15.9998L24.5391 22.9668L31.506 15.9998L24.5391 9.03282L17.5721 15.9998Z" fill="#262577"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0L20.6772 4.67722H27.3228V11.3228L32 16L27.3228 20.6772V27.3228H20.6772L16 32L11.3228 27.3228H4.67722V20.6772L0 16L4.67722 11.3228V4.67722H11.3228L16 0ZM10.6077 5.39234H5.39234V10.6077L7.49943 8.50057L13.4604 14.53H14.53V13.4604L8.50057 7.49943L10.6077 5.39234ZM15.2451 13.1618V4.67722H12.3341L16 1.01134L19.6659 4.67722H16.7549V13.1618L16 13.908L15.2451 13.1618ZM15.2451 14.1674V15.2451H14.1674L14.9136 16L14.1674 16.7549H15.2451V17.8326L16 17.0864L16.7549 17.8326V16.7549H17.8326L17.0864 16L17.8326 15.2451H16.7549V14.1674L16 14.9136L15.2451 14.1674ZM17.47 13.4604V14.53H18.5396L24.5006 8.50057L26.6077 10.6077V5.39234H21.3923L23.4994 7.49943L17.47 13.4604ZM20.381 5.39234H17.47V12.4548L22.4852 7.49653L20.381 5.39234ZM26.6077 11.619L24.5035 9.5148L19.5452 14.53H26.6077V11.619ZM18.8382 15.2451L18.092 16L18.8382 16.7549H27.3228V19.6659L30.9887 16L27.3228 12.3341V15.2451H18.8382ZM26.6077 20.381V17.47H19.5452L24.5035 22.4852L26.6077 20.381ZM18.5396 17.47H17.47V18.5396L23.4994 24.5006L21.3923 26.6077H26.6077V21.3923L24.5006 23.4994L18.5396 17.47ZM20.381 26.6077L22.4852 24.5035L17.47 19.5452V26.6077H20.381ZM16.7549 18.8382L16 18.092L15.2451 18.8382V27.3228H12.3341L16 30.9887L19.6659 27.3228H16.7549V18.8382ZM11.619 26.6077H14.53V19.5452L9.5148 24.5035L11.619 26.6077ZM14.53 18.5396V17.47H13.4604L7.49943 23.4994L5.39234 21.3923V26.6077H10.6077L8.50057 24.5006L14.53 18.5396ZM5.39234 20.381L7.49653 22.4852L12.4548 17.47H5.39234V20.381ZM13.1618 16.7549L13.908 16L13.1618 15.2451H4.67722V12.3341L1.01134 16L4.67722 19.6659V16.7549H13.1618ZM5.39234 11.619V14.53H12.4548L7.49653 9.5148L5.39234 11.619ZM14.53 12.4548L9.5148 7.49653L11.619 5.39234H14.53V12.4548Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1668_42974">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1668_42974">
+<rect width="21.9304" height="21.9304" fill="white" transform="translate(5.03516 5.03516)"/>
+</clipPath>
+<clipPath id="clip2_1668_42974">
+<rect width="21.9304" height="21.9304" fill="white" transform="translate(16 31.5078) rotate(-135)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/check.svg

@@ -0,0 +1,7 @@
+<svg width="13.710938" height="10.442871" viewBox="0 0 13.7109 10.4429" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="Icons name" d="M12.4453 0.0834961C12.3359 0.145996 11.0625 1.47412 8.625 4.06787L4.96875 7.9585L3.14062 6.10693C2.29688 5.26318 1.76953 4.73975 1.55859 4.53662C1.34766 4.3335 1.20312 4.22412 1.125 4.2085C0.90625 4.146 0.707031 4.15771 0.527344 4.24365C0.347656 4.32959 0.203125 4.46631 0.09375 4.65381C0.046875 4.74756 0.0195312 4.82178 0.0117188 4.87646C0.00390625 4.93115 0 5.00537 0 5.09912C0.015625 5.23975 0.0429688 5.34521 0.0820312 5.41553C0.121094 5.48584 0.941406 6.34131 2.54297 7.98193C4.14453 9.62256 4.96094 10.4429 4.99219 10.4429C5.02344 10.4429 6.46484 8.92725 9.31641 5.896C12.168 2.86475 13.6133 1.31006 13.6523 1.23193C13.6914 1.15381 13.7109 1.02881 13.7109 0.856934C13.7109 0.685059 13.6758 0.532715 13.6055 0.399902C13.5352 0.26709 13.4414 0.169434 13.3242 0.106934C13.207 0.0444336 13.0625 0.00927734 12.8906 0.00146484C12.7188 -0.00634766 12.5703 0.0209961 12.4453 0.0834961Z" fill-rule="evenodd" fill="#2CA853"/>
+</svg>

src/assets/icons/debian.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#A80030" d="M76.77 68.974c.74-.577 1.411-1.161 2.008-1.729-1.667.408-3.363.417-5.073.261-2.049.028.388 1.056 3.065 1.468zM84.71 64.762c1.222-1.685 2.111-3.53 2.425-5.438-.274 1.359-1.011 2.534-1.707 3.773-3.833 2.414-.36-1.433-.002-2.895-4.12 5.188-.566 3.111-.716 4.56zM88.773 54.192c.248-3.693-.727-2.525-1.055-1.117.383.199.685 2.603 1.055 1.117zM65.93 3.722c1.094.196 2.365.347 2.186.608 1.197-.262 1.469-.504-2.186-.608zM68.063 4.426l.053-.095-.773.159zM65.27 80.73c-2.951-1.381-5.653-3.468-7.874-6.021 1.178 1.726 2.451 3.403 4.096 4.721-2.783-.942-6.499-6.742-7.584-6.978 4.796 8.587 19.457 15.059 27.135 11.848-3.553.13-8.065.073-12.057-1.402-1.536-.791-3.573-2.355-3.589-2.869-.077.201-.206.4-.127.701zM65.426 79.933l-.03.097.03-.097zM109.475 46.345c.033-1.882.523-.986.713-1.449-.37-.213-1.339-1.656-1.93-4.424.428-.651 1.143 1.686 1.726 1.781-.375-2.201-1.02-3.878-1.045-5.568-1.7-3.553-.602.474-1.981-1.525-1.81-5.646 1.502-1.311 1.725-3.875 2.743 3.974 4.308 10.134 5.026 12.685-.549-3.11-1.433-6.123-2.514-9.04.833.352-1.342-6.399 1.083-1.929-2.591-9.531-11.085-18.436-18.901-22.614.956.875 2.164 1.975 1.73 2.146-3.887-2.314-3.204-2.495-3.76-3.472-3.167-1.288-3.375.103-5.472.002-5.968-3.165-7.118-2.829-12.611-4.813l.251 1.168c-3.955-1.317-4.607.5-8.88.004-.261-.203 1.369-.735 2.71-.93-3.823.504-3.644-.753-7.384.139.921-.646 1.896-1.075 2.879-1.625-3.116.189-7.441 1.814-6.106.336-5.084 2.271-14.115 5.456-19.183 10.208l-.159-1.065c-2.322 2.787-10.126 8.325-10.747 11.935l-.621.145c-1.209 2.046-1.991 4.365-2.949 6.47-1.581 2.693-2.317 1.036-2.091 1.459-3.109 6.302-4.653 11.598-5.986 15.94.951 1.421.022 8.553.382 14.26-1.561 28.19 19.784 55.559 43.115 61.879 3.42 1.222 8.506 1.176 12.832 1.302-5.105-1.46-5.765-.773-10.735-2.508-3.587-1.689-4.373-3.617-6.914-5.821l1.006 1.777c-4.982-1.763-2.897-2.182-6.951-3.466l1.074-1.402c-1.615-.123-4.277-2.721-5.004-4.161l-1.767.069c-2.122-2.618-3.253-4.505-3.171-5.967l-.571 1.018c-.647-1.111-7.807-9.822-4.092-7.793-.691-.632-1.608-1.028-2.603-2.835l.756-.865c-1.788-2.299-3.291-5.249-3.177-6.231.954 1.289 1.616 1.529 2.271 1.75-4.515-11.204-4.768-.618-8.188-11.405l.723-.058c-.555-.836-.891-1.743-1.337-2.633l.314-3.138c-3.25-3.759-.91-15.982-.44-22.686.325-2.727 2.713-5.628 4.529-10.178l-1.106-.191c2.115-3.69 12.079-14.82 16.693-14.247 2.235-2.809-.443-.01-.88-.718 4.91-5.082 6.453-3.591 9.767-4.504 3.573-2.121-3.066.827-1.373-.809 6.178-1.578 4.378-3.587 12.438-4.388.851.484-1.973.747-2.682 1.375 5.148-2.518 16.289-1.946 23.525 1.397 8.397 3.925 17.832 15.525 18.204 26.439l.423.113c-.213 4.339.665 9.356-.858 13.965l1.037-2.182c.121 3.316-.971 4.925-1.955 7.773l-1.772.884c-1.45 2.817.14 1.789-.897 4.03-2.265 2.013-6.871 6.298-8.345 6.689-1.077-.024.729-1.269.964-1.759-3.029 2.082-2.431 3.125-7.065 4.39l-.136-.302c-11.432 5.378-27.312-5.28-27.102-19.822-.123.924-.347.692-.601 1.067-.589-7.483 3.456-14.998 10.278-18.065 6.674-3.305 14.497-1.948 19.276 2.507-2.625-3.44-7.851-7.085-14.046-6.744-6.066.096-11.742 3.952-13.636 8.137-3.109 1.957-3.469 7.544-4.824 8.565-1.822 13.394 3.428 19.179 12.309 25.985.718.484.801.757.739 1.005l.011-.02c10.477 3.915 21.301 2.966 30.366-4.302 2.306-1.796 4.825-4.852 5.553-4.895-1.096 1.649.188.793-.655 2.249 2.298-3.707-.999-1.509 2.375-6.401l1.247 1.716c-.463-3.075 3.819-6.812 3.385-11.676.982-1.488 1.097 1.601.053 5.024 1.446-3.798.381-4.408.754-7.542.401 1.053.928 2.173 1.199 3.284-.943-3.67.967-6.181 1.439-8.313-.462-.204-1.451 1.624-1.677-2.711zM51.037 71.758c1.348 1.831 2.417 3.814 4.138 5.245-1.238-2.417-2.157-3.415-3.85-6.683l-.288 1.438zM54.51 70.195c-.713-.789-1.136-1.738-1.608-2.685.453 1.663 1.377 3.091 2.239 4.545l-.631-1.86zM107.01 70.102c2.02-3.797 3.326-7.952 3.875-12.16l-.302.756c-.553 3.922-1.745 7.805-3.573 11.404zM71.214 2.126c-1.917.161-3.825.257-5.709.499l.83.114c1.387-.509 3.408-.279 4.879-.613zM18.227 30.775c1.424-3.207-.395-1.149-.552-2.007.221 2.846-2.19 3.924.552 2.007zM15.389 38.012c-1.775 2.269-.817 2.752-1.004 4.296.642-1.972.76-3.156 1.004-4.296z"/></svg>

src/assets/icons/docker.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.3605 13.4952C30.2797 13.4287 29.5529 12.884 27.9918 12.884C27.5881 12.884 27.1708 12.9239 26.7671 12.9903C26.471 10.9573 24.7618 9.97399 24.6945 9.92086L24.2773 9.68164L24.0081 10.067C23.6717 10.5852 23.4159 11.1699 23.2679 11.7678C22.9853 12.9239 23.1602 14.0134 23.7524 14.9435C23.0391 15.3422 21.8817 15.4352 21.6395 15.4485H2.52846C2.03051 15.4485 1.62675 15.8471 1.62675 16.3388C1.59987 17.9864 1.88247 19.6341 2.46121 21.1887C3.12064 22.8895 4.10313 24.1519 5.36823 24.9226C6.79481 25.7862 9.1231 26.2779 11.7475 26.2779C12.9318 26.2779 14.1161 26.1716 15.287 25.959C16.9155 25.6666 18.4767 25.1086 19.9167 24.298C21.0969 23.6226 22.1603 22.7611 23.066 21.7468C24.5868 20.0593 25.4885 18.1725 26.1479 16.4982H26.4171C28.0725 16.4982 29.0953 15.8471 29.6606 15.289C30.0374 14.9435 30.32 14.5184 30.5219 14.04L30.6431 13.6946L30.3605 13.4952Z" fill="#0091E2"/>
+<path d="M4.30691 14.9044H6.86399C6.98515 14.9044 7.09282 14.8114 7.09282 14.6785V12.4196C7.09282 12.3 6.99859 12.1938 6.86399 12.1938H4.30691C4.1858 12.1938 4.07812 12.2867 4.07812 12.4196V14.6785C4.09157 14.8114 4.1858 14.9044 4.30691 14.9044V14.9044ZM7.83299 14.9044H10.3901C10.5112 14.9044 10.6189 14.8114 10.6189 14.6785V12.4196C10.6189 12.3 10.5247 12.1938 10.3901 12.1938H7.83294C7.71183 12.1938 7.60416 12.2867 7.60416 12.4196V14.6785C7.61765 14.8114 7.71188 14.9044 7.83294 14.9044M11.4263 14.9044H13.9834C14.1046 14.9044 14.2122 14.8114 14.2122 14.6785V12.4196C14.2122 12.3 14.118 12.1938 13.9834 12.1938H11.4263C11.3052 12.1938 11.1975 12.2867 11.1975 12.4196V14.6785C11.1975 14.8114 11.2918 14.9044 11.4263 14.9044ZM14.9659 14.9044H17.523C17.6441 14.9044 17.7518 14.8114 17.7518 14.6785V12.4196C17.7518 12.3 17.6576 12.1938 17.523 12.1938H14.9659C14.8448 12.1938 14.7371 12.2867 14.7371 12.4196V14.6785C14.7371 14.8114 14.8448 14.9044 14.9659 14.9044ZM7.83299 11.6755H10.3901C10.5112 11.6755 10.6189 11.5693 10.6189 11.4497V9.19075C10.6189 9.07114 10.5246 8.96483 10.3901 8.96483H7.83294C7.71183 8.96483 7.60416 9.05785 7.60416 9.19075V11.4497C7.61765 11.5692 7.71193 11.6755 7.83299 11.6755ZM11.4263 11.6755H13.9834C14.1046 11.6755 14.2122 11.5693 14.2122 11.4497V9.19075C14.2122 9.07114 14.118 8.96483 13.9834 8.96483H11.4263C11.3052 8.96483 11.1975 9.05785 11.1975 9.19075V11.4497C11.1975 11.5692 11.2918 11.6755 11.4263 11.6755ZM14.9659 11.6755H17.523C17.6441 11.6755 17.7518 11.5693 17.7518 11.4497V9.19075C17.7518 9.07114 17.6441 8.96483 17.523 8.96483H14.9659C14.8448 8.96483 14.7371 9.05785 14.7371 9.19075V11.4497C14.7371 11.5692 14.8448 11.6755 14.9659 11.6755ZM14.9659 8.43335H17.523C17.6441 8.43335 17.7518 8.34033 17.7518 8.20748V5.94858C17.7518 5.82897 17.6441 5.72266 17.523 5.72266H14.9659C14.8448 5.72266 14.7371 5.81568 14.7371 5.94858V8.20748C14.7371 8.32704 14.8448 8.43335 14.9659 8.43335ZM18.5324 14.9044H21.0895C21.2106 14.9044 21.3183 14.8114 21.3183 14.6785V12.4196C21.3183 12.3 21.2241 12.1938 21.0895 12.1938H18.5324C18.4112 12.1938 18.3036 12.2867 18.3036 12.4196V14.6785C18.3171 14.8114 18.4113 14.9044 18.5324 14.9044" fill="#0091E2"/>
+</svg>

src/assets/icons/fedora.svg

@@ -0,0 +1,35 @@
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.0"
+   width="267"
+   height="267"
+   id="svg2">
+   <defs
+      id="defs5" />
+   <path
+      d="M 266.62575,133.50613 C 266.62575,59.98128 207.02222,0.37583 133.49792,0.37583 C 60.00668,0.37583 0.42639,59.93123 0.37425,133.41225 L 0.37425,236.4333 C 0.4138,253.11763 13.94545,266.62417 30.64027,266.62417 L 133.55192,266.62417 C 207.05167,266.59532 266.62575,207.01142 266.62575,133.50613"
+      id="voice"
+      style="fill:#294172" />
+   <path
+      d="M 77.126289,142.09756 C 77.126289,142.09756 124.97104,142.09756 124.97104,142.09756 C 124.97104,142.09756 124.97104,189.94234 124.97104,189.94234 C 124.97104,216.35263 103.53659,237.78707 77.126289,237.78707 C 50.715979,237.78707 29.28153,216.35263 29.28153,189.94234 C 29.28153,163.53203 50.715979,142.09756 77.126289,142.09756 z"
+      id="in"
+      style="fill:none;stroke:#3c6eb4;stroke-width:29.21" />
+   <use
+      transform="matrix(-1,0,0,-1,249.71151,284.2882)"
+      id="finity"
+      xlink:href="#in" />
+   <path
+      d="M 139.6074,127.52923 L 139.6074,189.87541 C 139.6074,224.37943 111.63203,252.35541 77.12679,252.35541 C 71.89185,252.35541 68.1703,251.7644 63.32444,250.49771 C 56.25849,248.64859 50.48398,242.85518 50.48158,236.1166 C 50.48158,227.97147 56.39394,222.0467 65.23187,222.0467 C 69.43824,222.0467 70.96454,222.85435 77.12679,222.85435 C 95.3184,222.85435 110.07443,208.11916 110.10634,189.92756 L 110.10634,161.27099 C 110.10634,158.70324 108.01971,156.62274 105.44767,156.62274 L 83.78246,156.61846 C 75.71034,156.61846 69.18845,150.18003 69.18845,142.0858 C 69.18414,133.94124 75.77725,127.52923 83.93653,127.52923"
+      id="free"
+      style="fill:#ffffff" />
+   <use
+      transform="matrix(-1,0,0,-1,249.71152,284.28821)"
+      id="dom"
+      xlink:href="#free" />
+   <path
+      d="M 243.65456,243.58425 C 243.65456,243.58425 243.6546,238.05286 243.6546,238.05286 L 241.12607,243.85062 C 241.12607,243.85062 238.66466,238.05286 238.66466,238.05286 L 238.66513,243.58425 L 237.24683,243.58425 L 237.24683,234.84933 L 238.73387,234.84933 C 238.73387,234.84933 241.16784,240.42984 241.16784,240.42984 L 243.56495,234.84933 L 245.07039,234.84933 L 245.07039,243.58425 L 243.65456,243.58425 z M 233.32154,236.31241 L 233.32154,243.58425 L 231.83941,243.58425 L 231.83941,236.31241 L 229.35453,236.31241 L 229.35453,234.84933 L 235.80399,234.84933 L 235.80399,236.31241"
+      id="TM"
+      style="fill:#3c6eb4" />
+</svg>

src/assets/icons/freebsd.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    aria-label="FreeBSD" role="img"
+    viewBox="0 0 512 512">
+    <rect
+        width="512" height="512"
+        rx="15%" fill="#ffffff" />
+    <path
+        d="m420.1 119.5c18 17.9-31.8 96.8-40.2 105.2-8.4 8.4-29.8 0.7-47.7-17.3-18-17.9-25.7-39.3-17.3-47.7 8.4-8.4 87.3-58.2 105.2-40.2M168.4 138.5 168.4 138.5 168.4 138.5c-27.4-15.6-66.4-32.9-78.8-20.4-12.6 12.6 5.4 52.4 21.1 79.9 14-24.3 33.9-44.8 57.7-59.5M392.8 218.6c2.5 8.6 2.1 15.6-2 19.7-9.6 9.6-35.4-0.6-58.7-22.8-1.6-1.5-3.2-3-4.8-4.6-8.4-8.4-15-17.4-19.2-25.6-8.2-14.6-10.2-27.5-4-33.7 3.4-3.4 8.7-4.3 15.3-3.1 4.3-2.7 9.3-5.7 14.9-8.8-22.5-11.7-48.1-18.4-75.2-18.4-90 0-163 73-163 163 0 90 73 163 163 163 90 0 163-73 163-163 0-29.1-7.6-56.3-21-79.9-2.9 5.3-5.7 10.1-8.2 14.2"
+        fill="#ab2b28" />
+</svg>

src/assets/icons/oel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>

src/assets/icons/oracle-linux.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0883 26.0646C4.47919 26.0646 0 21.5959 0 16.0001C0 10.4042 4.47919 5.93555 10.0883 5.93555H21.9117C27.5208 5.93555 32 10.4042 32 16.0001C32 21.5959 27.5208 26.0646 21.9117 26.0646H10.0883ZM21.6091 22.5017C25.2812 22.5017 28.1261 19.5528 28.1261 16.0001C28.1261 12.3366 25.1702 9.49838 21.6091 9.49838H10.3909C6.71879 9.49838 3.8739 12.4473 3.8739 16.0001C3.8739 19.5528 6.82976 22.5017 10.3909 22.5017H21.6091Z" fill="#C74634"/>
+</svg>

src/assets/icons/pdf.svg

@@ -0,0 +1,11 @@
+<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="clip9113_47347">
+            <rect id="Format files" rx="4.000000" width="20.000000" height="20.000000" fill="white" fill-opacity="0"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#clip9113_47347)">
+        <rect id="Icon" width="20.000000" height="20.000000" fill="#FF5555" fill-opacity="1.000000"/>
+        <path id="Icon" d="M14.33 12.95C13.43 12.89 12.56 12.55 11.86 11.95C10.49 12.25 9.19 12.69 7.89 13.22C6.86 15.06 5.89 16 5.06 16C4.89 16 4.69 15.96 4.56 15.86C4.19 15.69 4 15.33 4 14.96C4 14.66 4.06 13.82 7.23 12.45C7.96 11.12 8.53 9.75 8.99 8.31C8.59 7.51 7.73 5.54 8.33 4.53C8.53 4.16 8.93 3.97 9.36 4C9.69 4 10.03 4.16 10.23 4.43C10.66 5.03 10.63 6.3 10.06 8.17C10.59 9.18 11.29 10.08 12.13 10.85C12.83 10.72 13.53 10.61 14.23 10.61C15.79 10.65 16.03 11.38 15.99 11.82C15.99 12.95 14.89 12.95 14.33 12.95ZM4.99 15.03L5.09 14.99C5.56 14.83 5.93 14.49 6.19 14.06C5.69 14.26 5.29 14.59 4.99 15.03L4.99 15.03ZM9.43 5L9.33 5C9.29 5 9.23 5 9.19 5.03C9.06 5.6 9.16 6.2 9.39 6.74C9.59 6.17 9.59 5.57 9.43 5ZM9.66 9.85L9.63 9.91L9.59 9.88C9.29 10.65 8.96 11.42 8.59 12.15L8.66 12.12L8.66 12.19C9.4 11.92 10.16 11.69 10.93 11.52L10.89 11.48L10.99 11.48C10.49 10.98 10.03 10.41 9.66 9.85ZM14.19 11.62C13.89 11.62 13.63 11.62 13.33 11.68C13.66 11.85 13.99 11.92 14.33 11.95C14.56 11.99 14.79 11.95 14.99 11.89C14.99 11.78 14.86 11.62 14.19 11.62Z" fill="#FFECEF" fill-opacity="1.000000" fill-rule="nonzero"/>
+    </g>
+</svg>

src/assets/icons/redhat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M116.4 97.9c-2.4-.5-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.7-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.4-5.8 1.4s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.3c8.3 24.7 31.7 42.4 59.2 42.4 21.9.3 41.2-11 52.3-28.2"/><path d="M116.4 97.9c-2.4-.6-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.8-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.3-5.8 1.3s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.4c-2.1-6-3.2-12.7-3.2-19.7 0-34.5 27.9-62.4 62.4-62.4s62.4 27.9 62.4 62.4c0 12.5-3.7 24.1-10 33.9M77.7 92.2c.3.3.9 1.4.2 2.7-.4.7-.8 1.2-1.5 1.8-.9.7-2.6 1.5-4.9 0-1.3-.8-1.3-1.1-3.1-.8-1.2.2-1.7-1.1-1.3-2.1.5-1 2.3-1.9 4.6-.5 1 .6 2.6 1.9 4 .7.6-.5.9-.8 1.7-1.7l.1-.1c.2-.1.2 0 .2 0"/><path fill="#E93442" d="M59.1 31.3c-7.2.5-8 1.3-9.3 2.7-1.9 2-4.4-2.6-4.4-2.6-1.5-.3-3.3-2.7-2.3-5 1-2.2 2.8-1.6 3.3-.9.7.8 2.1 2.2 4 2.2 1.9-.1 4.1-.4 7.1-.4 3.1 0 5.2 1.1 5.3 2.1.1.9-.2 1.7-3.7 1.9m7.6-11.9c-.1 0-.2-.1-.2-.2s0-.1.1-.2c1.4-.7 3.5-1.3 5.9-1.6.7-.1 1.4-.1 2.1-.1h.4c4 .1 7.2 1.7 7.2 3.6-.1 1.9-3.3 3.3-7.3 3.2-1.3 0-2.5-.2-3.6-.5-.1 0-.2-.1-.2-.3 0-.1.1-.2.2-.3 2.5-.6 4.2-1.5 4.1-2.4-.2-1.2-3.4-1.8-7.3-1.4-.6.1-1 .2-1.4.2m32.5 28c-.6 2.1-1.5 4.7-5.4 6.7-.6.3-.8-.2-.5-.6 1.5-2.5 1.7-3.1 2.2-4.1.6-1.4.9-3.5-.3-7.8-2.3-8.4-7.2-19.7-10.8-23.4-3.4-3.5-9.7-4.5-15.3-3.1-2.1.5-6.1 2.6-13.6.9-13-2.9-14.9 3.6-15.7 6.4-.8 2.8-2.5 10.9-2.5 10.9-.6 3.3-1.4 9 18.8 12.8 9.4 1.8 9.9 4.2 10.3 6 .7 3.1 1.9 4.9 3.3 5.8 1.3.9 0 1.6-1.5 1.8-4 .4-18.8-3.8-27.6-8.8-7.2-4.4-7.3-8.3-5.6-11.7-10.8-1.2-19 1-20.4 6.1-2.6 9 19.2 24 44.1 31.5 26.1 7.9 53 2.4 56-14 1.4-7.5-4.9-13-15.5-15.4"/></svg>

src/assets/icons/rocky.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1097 21.2763C31.6865 19.6243 32 17.8488 32 16C32 7.16345 24.8365 0 16 0C7.16345 0 0 7.16345 0 16C0 20.3723 1.75383 24.3352 4.59638 27.223L20.8263 10.9931L24.8333 15L31.1097 21.2763ZM28.187 26.3675L20.8263 19.007L9.29963 30.5337C11.3378 31.4748 13.6076 32 16 32C20.8813 32 25.2523 29.814 28.187 26.3675Z" fill="#10B981"/>
+</svg>

src/assets/icons/suselinux.svg

@@ -0,0 +1,57 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="538.58264"
+   height="327.75589"
+   id="svg4472">
+   <defs
+      id="defs4474" />
+   <metadata
+      id="metadata4477">
+      <rdf:RDF>
+         <cc:Work
+            rdf:about="">
+            <dc:format>image/svg+xml</dc:format>
+            <dc:type
+               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+            <dc:title></dc:title>
+         </cc:Work>
+      </rdf:RDF>
+   </metadata>
+   <g
+      transform="translate(-108.64408,-344.69353)"
+      id="layer1">
+      <g
+         transform="matrix(4.5126211,0,0,4.5126211,-1435.2769,-2076.7792)"
+         id="g4497">
+         <path
+            d="m 349.82612,583.65342 c -3.81226,0 -6.90695,2.95238 -6.90695,6.58607 l 0,1.94322 c 0,3.48901 2.59744,5.92308 6.3163,5.92308 l 6.92398,0 c 0.93956,0 1.89286,0.56227 1.89286,1.6401 l 0,1.79213 c 0,1.00915 -0.98443,1.63369 -1.89286,1.63369 l -12.92306,0 0,3.06319 c 0,1.18406 0.99084,2.04395 2.34798,2.04395 l 11.48259,0 c 3.8434,0 6.96519,-2.95879 6.96519,-6.59157 l 0,-2.60714 c 0,-3.54029 -2.28296,-5.56776 -6.26373,-5.56776 l -6.86812,0 c -1.19505,0 -2,-0.61355 -2,-1.53662 l 0,-1.53297 c 0,-0.8837 1.02839,-1.68498 2.15842,-1.68498 l 11.07875,0 0,-3.06685 c 0,-1.27747 -0.75,-2.03754 -2.00641,-2.03754 l -10.30494,0"
+            id="path3111"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 386.4314,589.8036 c -1.2152,0 -2.06135,0.92216 -2.06135,2.2445 l 0,9.02472 c 0,1.15934 -0.99451,2.09889 -2.21337,2.09889 l -6.17582,0 c -1.21795,0 -2.21245,-0.93955 -2.21245,-2.09889 l 0,-9.02472 c 0,-1.28022 -1.38919,-2.2445 -2.6282,-2.2445 l -1.23627,0 c -1.2152,0 -2.06593,0.92216 -2.06593,2.2445 l 0,9.38644 c 0,4.44138 2.87362,6.99724 7.87362,6.99724 l 0.80861,0 c 2.33424,0 4.26556,-0.96703 5.67398,-1.67582 0.81502,-0.40385 1.46154,-0.72802 1.89286,-0.72802 0.15842,0 0.54212,0.0311 0.74542,0.32417 l 1.40568,1.92674 1.92673,0 c 1.5641,0 2.13095,-1.25274 2.13095,-2.09523 l 0,-14.13552 c 0,-1.28022 -1.38919,-2.2445 -2.6282,-2.2445 l -1.23626,0"
+            id="path3113"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 401.14292,583.65342 c -3.80585,0 -6.90658,2.95238 -6.90658,6.58607 l 0,1.94322 c 0,3.48901 2.59706,5.92308 6.31959,5.92308 l 6.92398,0 c 0.93956,0 1.89286,0.56227 1.89286,1.6401 l 0,1.79213 c 0,1.00915 -0.9881,1.63369 -1.89286,1.63369 l -12.92306,0 0,3.06319 c 0,1.18406 0.98718,2.04395 2.3489,2.04395 l 11.48167,0 c 3.83974,0 6.96245,-2.95879 6.96245,-6.59157 l 0,-2.60714 c 0,-3.54029 -2.28297,-5.56776 -6.26465,-5.56776 l -6.86904,0 c -1.19414,0 -1.99542,-0.61355 -1.99542,-1.53662 l 0,-1.53297 c 0,-0.8837 1.02564,-1.68498 2.15476,-1.68498 l 11.36538,0 0,-3.06685 c 0,-1.20146 -0.93956,-2.03754 -2.2903,-2.03754 l -10.30768,0"
+            id="path3115"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 426.1896,583.65342 c -3.80494,0 -6.90933,2.95238 -6.90933,6.58607 l 0,11.44779 c 0,3.63278 3.10439,6.59157 6.90933,6.59157 l 9.65933,0 c 1.36081,0 2.34524,-0.85897 2.34524,-2.04395 l 0,-3.06319 -10.98534,0 c -1.17399,0 -2,-0.77747 -2,-1.8956 0,0 0,-2.76282 0,-3.11813 0.39103,0 13.16482,0 13.16482,0 1.94414,0 3.52564,-1.50915 3.52564,-3.37087 l 0,-4.54762 c 0,-3.63369 -3.09798,-6.58607 -6.90658,-6.58607 l -8.80311,0 0,0 z m -0.98077,6.94413 c 0,-1.01831 0.87821,-1.84066 1.9478,-1.84066 l 6.86538,0 c 1.07418,0 1.9478,0.82235 1.9478,1.84066 0,0 0,2.56319 0,2.91483 -0.37912,0 -10.38094,0 -10.76098,0 0,-0.35164 0,-2.91483 0,-2.91483"
+            id="path3117"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 450.07328,554.10308 0,0 c -2.26557,-0.0833 -4.04304,-1.99267 -3.96795,-4.2619 0.0348,-1.09798 0.50458,-2.11355 1.3022,-2.86263 0.80128,-0.75 1.84706,-1.14011 2.94596,-1.0989 2.26832,0.0797 4.0467,1.98626 3.9707,4.25823 -0.0339,1.09524 -0.49726,2.10989 -1.29762,2.86264 -0.80495,0.74725 -1.85165,1.13736 -2.95329,1.10256 l 0,0 z m 0.95329,-3.72618 c 1.00824,0 1.82692,-0.54579 1.82692,-1.21612 0,-0.67308 -0.81868,-1.21886 -1.82692,-1.21886 -1.00824,0 -1.82326,0.54578 -1.82326,1.21886 0,0.67033 0.81502,1.21612 1.82326,1.21612"
+            id="path3119"
+            style="fill:#73ba25;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+         <path
+            d="m 402.70336,578.25599 0.14927,-0.0137 0.0238,-0.17583 c -0.0376,-0.13827 -0.12729,-0.26282 -0.26557,-1.97527 -0.11721,-1.51648 -0.35531,-5.67399 1.73718,-7.73625 0.81135,-0.80403 2.05036,-1.51923 3.02838,-1.75092 4.01007,-0.9771 9.21428,-0.30036 13.65842,4.83882 2.29303,2.65476 3.41849,3.86722 3.98168,4.40934 l 0.19322,0.17949 0.23535,0.16941 c 0.18315,0.10348 7.63827,3.53663 7.63827,3.53663 l 0.15201,-0.0385 0.004,-0.16209 c -0.0485,-0.0549 -4.72435,-6.09523 -3.8956,-11.07142 0.65568,-3.96428 3.81227,-3.60805 8.17399,-3.1108 1.42674,0.16209 3.04944,0.3489 4.7271,0.38645 4.68589,0.0275 9.73534,-0.83242 12.84706,-2.19322 2.01281,-0.88004 3.29761,-1.46063 4.10256,-2.19231 0.28937,-0.23901 0.4423,-0.63187 0.59706,-1.0467 l 0.10715,-0.27931 c 0.13095,-0.33516 0.32143,-1.05311 0.40384,-1.44322 0.0385,-0.17307 0.0559,-0.35989 -0.0659,-0.45238 l -0.43132,0.0797 c -1.36355,0.81868 -4.7793,2.38004 -7.9771,2.44139 -3.96062,0.0824 -11.94504,-3.98443 -12.77746,-4.41666 l -0.0797,-0.0925 c -0.20055,-0.47711 -1.39926,-3.31227 -1.65109,-3.90934 5.74633,3.78388 10.51189,5.87729 14.16207,6.20146 4.06135,0.36264 7.22801,-1.85439 8.58149,-2.80036 0.26557,-0.18041 0.46703,-0.32509 0.54945,-0.35623 l 0.0861,-0.14102 c -0.22445,-1.42674 -2.34807,-8.33333 -3.95063,-9.99084 -0.44597,-0.45604 -0.80128,-0.89835 -1.52015,-1.31959 -5.80494,-3.3837 -19.58697,-5.42857 -20.23258,-5.52197 l -0.1108,0.0311 -0.0412,0.0971 c 0,0 -0.0522,2.85897 -0.0586,3.17765 -1.40842,-0.46978 -11.64101,-3.77472 -21.23441,-4.10952 -8.13278,-0.28626 -19.24266,-0.67362 -34.94136,8.9749 l -0.46245,0.2903 c -7.38369,4.60713 -12.47984,10.28387 -15.14651,16.88734 -0.83516,2.07509 -1.96153,6.7619 -0.8489,11.17124 0.48352,1.93131 1.37821,3.86446 2.587,5.59798 2.72435,3.91574 7.30036,6.51647 12.22801,6.95512 6.9542,0.62179 12.22526,-2.50366 14.0998,-8.35347 1.28754,-4.03755 0,-9.9597 -4.93864,-12.98076 -4.01648,-2.46245 -8.33974,-1.90018 -10.8434,-0.24542 -2.1749,1.44322 -3.40842,3.68131 -3.38369,6.14377 0.0476,4.3608 3.8086,6.68222 6.50915,6.68497 0.78754,0 1.57509,-0.13461 2.46611,-0.42399 0.31411,-0.0971 0.61447,-0.21429 0.94231,-0.4185 l 0.10073,-0.065 0.065,-0.0385 -0.0238,0.011 c 0.61814,-0.41483 0.99085,-1.0989 0.99085,-1.83058 0,-0.20055 -0.0311,-0.40385 -0.0861,-0.60806 -0.31777,-1.10165 -1.40843,-1.77106 -2.54121,-1.5641 l -0.15201,0.0311 -0.20696,0.0687 -0.30037,0.10073 c -0.62179,0.15568 -1.09157,0.16575 -1.18864,0.16941 -0.31685,-0.0211 -1.87454,-0.48718 -1.87454,-2.19322 l 0,-0.0202 c 0.004,-0.62545 0.25549,-1.0641 0.39377,-1.30219 0.47985,-0.76008 1.80586,-1.5055 3.59798,-1.34707 2.3489,0.19963 4.0412,1.40567 5.163,3.67765 1.04304,2.11355 0.77014,4.71062 -0.70147,6.61721 -1.46062,1.88828 -4.06043,2.68956 -7.52105,2.31318 -3.48809,-0.38278 -6.43681,-2.3901 -8.0879,-5.51464 -1.6163,-3.05311 -1.70605,-6.6749 -0.23169,-9.45878 3.53296,-6.66483 10.20146,-6.59615 13.85805,-5.96337 5.41483,0.93498 10.32966,5.26923 12.51555,11.03296 0.3489,0.91849 0.52747,1.64743 0.68315,2.31043 l 0.23535,0.99817 6.11538,2.98718 0.0824,0.0559 0,0 z m 43.47157,-32.5311 0,0 c -1.15385,1.07051 -1.81319,2.53113 -1.86813,4.10622 -0.10715,3.24633 2.44139,5.98076 5.68772,6.10164 1.5815,0.0522 3.07967,-0.50366 4.22985,-1.5815 1.15018,-1.07417 1.81044,-2.53113 1.86813,-4.10256 0.11081,-3.25 -2.43864,-5.98809 -5.69047,-6.1053 -1.57509,-0.0513 -3.07784,0.50366 -4.2271,1.5815"
+            id="path3121"
+            style="fill:#73ba25;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+      </g>
+   </g>
+</svg>

src/assets/icons/ubuntu.svg

@@ -0,0 +1,35 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42894)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9988 9.7607C12.5525 9.7607 9.75875 12.5544 9.75875 16.0007C9.75875 19.447 12.5525 22.2407 15.9988 22.2407C19.445 22.2407 22.2387 19.447 22.2387 16.0007C22.2387 12.5544 19.445 9.7607 15.9988 9.7607ZM6.71875 16.0007C6.71875 10.8755 10.8735 6.7207 15.9988 6.7207C21.124 6.7207 25.2788 10.8755 25.2788 16.0007C25.2788 21.1259 21.124 25.2807 15.9988 25.2807C10.8735 25.2807 6.71875 21.1259 6.71875 16.0007Z" fill="white"/>
+<g clip-path="url(#clip1_1668_42894)">
+<path d="M5.12113 19.0001C6.778 19.0001 8.12117 17.6569 8.12117 16C8.12117 14.3432 6.778 13 5.12113 13C3.46426 13 2.12109 14.3432 2.12109 16C2.12109 17.6569 3.46426 19.0001 5.12113 19.0001Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6024 16.575H22.0469V15.4238H25.6024V16.575Z" fill="#F47421"/>
+<path d="M5.12036 18.1352C6.30003 18.1352 7.25634 17.1789 7.25634 15.9993C7.25634 14.8196 6.30003 13.8633 5.12036 13.8633C3.94069 13.8633 2.98438 14.8196 2.98438 15.9993C2.98438 17.1789 3.94069 18.1352 5.12036 18.1352Z" fill="white"/>
+</g>
+<g clip-path="url(#clip2_1668_42894)">
+<path d="M18.8428 5.07854C18.0144 6.51344 18.506 8.34823 19.9409 9.17667C21.3758 10.0051 23.2106 9.51347 24.039 8.07858C24.8675 6.64368 24.3759 4.80889 22.941 3.98045C21.5061 3.15201 19.6713 3.64365 18.8428 5.07854Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7018 24.027L12.4796 20.9478L13.4766 21.5234L11.6988 24.6026L10.7018 24.027Z" fill="#F47421"/>
+<path d="M19.5918 5.51071C19.0019 6.53233 19.352 7.83868 20.3736 8.42851C21.3952 9.01835 22.7015 8.66831 23.2914 7.64669C23.8812 6.62507 23.5312 5.31872 22.5096 4.72888C21.4879 4.13905 20.1816 4.48908 19.5918 5.51071Z" fill="white"/>
+</g>
+<g clip-path="url(#clip3_1668_42894)">
+<path d="M24.0399 23.9214C23.2115 22.4865 21.3767 21.9949 19.9418 22.8233C18.5069 23.6517 18.0153 25.4865 18.8437 26.9214C19.6722 28.3563 21.507 28.848 22.9419 28.0195C24.3768 27.1911 24.8684 25.3563 24.0399 23.9214Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6997 7.39792L13.4775 10.4771L12.4805 11.0527L10.7027 7.97353L11.6997 7.39792Z" fill="#F47421"/>
+<path d="M23.2918 24.354C22.702 23.3324 21.3956 22.9824 20.374 23.5722C19.3524 24.1621 19.0023 25.4684 19.5922 26.49C20.182 27.5117 21.4883 27.8617 22.51 27.2719C23.5316 26.682 23.8816 25.3757 23.2918 24.354Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1668_42894">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(2.12109 13)"/>
+</clipPath>
+<clipPath id="clip2_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(25.5391 5.48047) rotate(120)"/>
+</clipPath>
+<clipPath id="clip3_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(20.3438 29.5195) rotate(-120)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/vyos.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65" fill="none">
+<path d="M46.72 8.18H56.32V40.18H64V0.5H46.72V8.18Z" fill="url(#paint0_linear_20201_573)"/>
+<path d="M39.68 0.5H0V17.78H7.68V8.18H39.68V0.5Z" fill="url(#paint1_linear_20201_573)"/>
+<path d="M7.68 24.82H0V64.5H17.28V56.82H7.68V24.82Z" fill="url(#paint2_linear_20201_573)"/>
+<path d="M24.32 56.82V64.5H64V47.22H56.32V56.82H24.32Z" fill="url(#paint3_linear_20201_573)"/>
+<path d="M14.08 14.58H21.76L35.84 50.42H28.16L14.08 14.58Z" fill="url(#paint4_linear_20201_573)"/>
+<path d="M49.92 14.58H42.24L28.16 50.42H35.84L49.92 14.58Z" fill="url(#paint5_linear_20201_573)"/>
+<defs>
+<linearGradient id="paint0_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint1_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint2_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint3_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint4_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint5_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/icons/windows.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42920)">
+<path d="M0 4.5284L13.0252 2.75465L13.0308 15.3184L0.0118275 15.3925L0 4.52852V4.5284ZM13.019 16.7659L13.0289 29.3406L0.0100845 27.5507L0.0093375 16.6816L13.019 16.7659ZM14.5979 2.52246L31.868 0.00195312V15.1586L14.5979 15.2955V2.52246ZM31.872 16.8842L31.8679 31.9724L14.5977 29.535L14.5736 16.8559L31.872 16.8842Z" fill="#00ADEF"/>
+</g>
+<defs>
+<clipPath id="clip0_1668_42920">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/debian.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#A80030" d="M76.77 68.974c.74-.577 1.411-1.161 2.008-1.729-1.667.408-3.363.417-5.073.261-2.049.028.388 1.056 3.065 1.468zM84.71 64.762c1.222-1.685 2.111-3.53 2.425-5.438-.274 1.359-1.011 2.534-1.707 3.773-3.833 2.414-.36-1.433-.002-2.895-4.12 5.188-.566 3.111-.716 4.56zM88.773 54.192c.248-3.693-.727-2.525-1.055-1.117.383.199.685 2.603 1.055 1.117zM65.93 3.722c1.094.196 2.365.347 2.186.608 1.197-.262 1.469-.504-2.186-.608zM68.063 4.426l.053-.095-.773.159zM65.27 80.73c-2.951-1.381-5.653-3.468-7.874-6.021 1.178 1.726 2.451 3.403 4.096 4.721-2.783-.942-6.499-6.742-7.584-6.978 4.796 8.587 19.457 15.059 27.135 11.848-3.553.13-8.065.073-12.057-1.402-1.536-.791-3.573-2.355-3.589-2.869-.077.201-.206.4-.127.701zM65.426 79.933l-.03.097.03-.097zM109.475 46.345c.033-1.882.523-.986.713-1.449-.37-.213-1.339-1.656-1.93-4.424.428-.651 1.143 1.686 1.726 1.781-.375-2.201-1.02-3.878-1.045-5.568-1.7-3.553-.602.474-1.981-1.525-1.81-5.646 1.502-1.311 1.725-3.875 2.743 3.974 4.308 10.134 5.026 12.685-.549-3.11-1.433-6.123-2.514-9.04.833.352-1.342-6.399 1.083-1.929-2.591-9.531-11.085-18.436-18.901-22.614.956.875 2.164 1.975 1.73 2.146-3.887-2.314-3.204-2.495-3.76-3.472-3.167-1.288-3.375.103-5.472.002-5.968-3.165-7.118-2.829-12.611-4.813l.251 1.168c-3.955-1.317-4.607.5-8.88.004-.261-.203 1.369-.735 2.71-.93-3.823.504-3.644-.753-7.384.139.921-.646 1.896-1.075 2.879-1.625-3.116.189-7.441 1.814-6.106.336-5.084 2.271-14.115 5.456-19.183 10.208l-.159-1.065c-2.322 2.787-10.126 8.325-10.747 11.935l-.621.145c-1.209 2.046-1.991 4.365-2.949 6.47-1.581 2.693-2.317 1.036-2.091 1.459-3.109 6.302-4.653 11.598-5.986 15.94.951 1.421.022 8.553.382 14.26-1.561 28.19 19.784 55.559 43.115 61.879 3.42 1.222 8.506 1.176 12.832 1.302-5.105-1.46-5.765-.773-10.735-2.508-3.587-1.689-4.373-3.617-6.914-5.821l1.006 1.777c-4.982-1.763-2.897-2.182-6.951-3.466l1.074-1.402c-1.615-.123-4.277-2.721-5.004-4.161l-1.767.069c-2.122-2.618-3.253-4.505-3.171-5.967l-.571 1.018c-.647-1.111-7.807-9.822-4.092-7.793-.691-.632-1.608-1.028-2.603-2.835l.756-.865c-1.788-2.299-3.291-5.249-3.177-6.231.954 1.289 1.616 1.529 2.271 1.75-4.515-11.204-4.768-.618-8.188-11.405l.723-.058c-.555-.836-.891-1.743-1.337-2.633l.314-3.138c-3.25-3.759-.91-15.982-.44-22.686.325-2.727 2.713-5.628 4.529-10.178l-1.106-.191c2.115-3.69 12.079-14.82 16.693-14.247 2.235-2.809-.443-.01-.88-.718 4.91-5.082 6.453-3.591 9.767-4.504 3.573-2.121-3.066.827-1.373-.809 6.178-1.578 4.378-3.587 12.438-4.388.851.484-1.973.747-2.682 1.375 5.148-2.518 16.289-1.946 23.525 1.397 8.397 3.925 17.832 15.525 18.204 26.439l.423.113c-.213 4.339.665 9.356-.858 13.965l1.037-2.182c.121 3.316-.971 4.925-1.955 7.773l-1.772.884c-1.45 2.817.14 1.789-.897 4.03-2.265 2.013-6.871 6.298-8.345 6.689-1.077-.024.729-1.269.964-1.759-3.029 2.082-2.431 3.125-7.065 4.39l-.136-.302c-11.432 5.378-27.312-5.28-27.102-19.822-.123.924-.347.692-.601 1.067-.589-7.483 3.456-14.998 10.278-18.065 6.674-3.305 14.497-1.948 19.276 2.507-2.625-3.44-7.851-7.085-14.046-6.744-6.066.096-11.742 3.952-13.636 8.137-3.109 1.957-3.469 7.544-4.824 8.565-1.822 13.394 3.428 19.179 12.309 25.985.718.484.801.757.739 1.005l.011-.02c10.477 3.915 21.301 2.966 30.366-4.302 2.306-1.796 4.825-4.852 5.553-4.895-1.096 1.649.188.793-.655 2.249 2.298-3.707-.999-1.509 2.375-6.401l1.247 1.716c-.463-3.075 3.819-6.812 3.385-11.676.982-1.488 1.097 1.601.053 5.024 1.446-3.798.381-4.408.754-7.542.401 1.053.928 2.173 1.199 3.284-.943-3.67.967-6.181 1.439-8.313-.462-.204-1.451 1.624-1.677-2.711zM51.037 71.758c1.348 1.831 2.417 3.814 4.138 5.245-1.238-2.417-2.157-3.415-3.85-6.683l-.288 1.438zM54.51 70.195c-.713-.789-1.136-1.738-1.608-2.685.453 1.663 1.377 3.091 2.239 4.545l-.631-1.86zM107.01 70.102c2.02-3.797 3.326-7.952 3.875-12.16l-.302.756c-.553 3.922-1.745 7.805-3.573 11.404zM71.214 2.126c-1.917.161-3.825.257-5.709.499l.83.114c1.387-.509 3.408-.279 4.879-.613zM18.227 30.775c1.424-3.207-.395-1.149-.552-2.007.221 2.846-2.19 3.924.552 2.007zM15.389 38.012c-1.775 2.269-.817 2.752-1.004 4.296.642-1.972.76-3.156 1.004-4.296z"/></svg>

src/assets/images/hyper-v.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="39.6875mm"
+   height="7.9375mm"
+   viewBox="0 0 39.6875 7.9375"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" /><defs
+     id="defs2" /><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.10224539,-0.10224913)"><path
+       style="fill:none;stroke:none;stroke-width:0.0762313;stroke-opacity:1;image-rendering:auto"
+       d="M 0.1022454,4.0709991 V 0.10224913 H 19.945996 39.789748 v 3.96874997 3.96875 H 19.945996 0.1022454 Z"
+       id="path931" /><path
+       fill="#00adef"
+       d="m 1.1760486,2.0837648 2.4419923,-0.332547 0.00105,2.355489 -2.4408256,0.01389 -0.00222,-2.036806 z m 2.4408255,2.294311 0.00187,2.357543 -2.4408028,-0.335582 -1.748e-4,-2.037763 2.4390514,0.0158 z m 0.2960179,-2.67039 3.2378459,-0.472549 v 2.841599 l -3.2378459,0.02568 v -2.394703 z m 3.2385919,2.692565 -7.89e-4,2.828785 -3.2378454,-0.456981 -0.00452,-2.377103 z"
+       id="path5503"
+       style="stroke-width:0.0233416" /><text
+       xml:space="preserve"
+       style="font-size:5.39239px;fill:none;stroke:#000000;stroke-width:0.449364;stroke-opacity:1"
+       x="8.1005516"
+       y="5.5274873"
+       id="text5929"><tspan
+         sodipodi:role="line"
+         id="tspan5927"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Microsoft Sans Serif';-inkscape-font-specification:'Microsoft Sans Serif';fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.449364"
+         x="8.1005516"
+         y="5.5274873">Hyper-v</tspan></text></g></svg>

src/assets/images/matrix.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#040404">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>

src/assets/images/oel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>

src/assets/images/openstack.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="39.6875mm"
+   height="7.9375mm"
+   viewBox="0 0 39.6875 7.9375"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" /><defs
+     id="defs2" /><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.10224539,-0.10224913)"><g
+       id="g57"
+       transform="matrix(0.06277301,0,0,0.06277301,1.1753106,1.2596941)"
+       inkscape:export-filename="g57.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"><path
+         d="m 21.630509,63.867877 v 3.42529 c 0,2.657552 2.153602,4.811154 4.811154,4.811154 v 0 h 42.890929 c 2.657553,0 4.811155,-2.153602 4.811155,-4.811154 v 0 -3.42529 H 95.770318 V 84.83695 c 0,4.893834 -4.004046,8.89788 -8.897879,8.89788 v 0 H 8.8978795 C 4.0040458,93.73483 0,89.730784 0,84.83695 v 0 -20.969073 z M 21.626572,36.05216 V 57.678732 H 0 V 36.05216 Z m 74.143746,0 V 57.678732 H 74.143747 V 36.05216 Z M 86.872439,0 c 4.893833,0 8.897879,4.0040458 8.897879,8.9018166 v 0 20.9651364 H 74.143747 v -3.42529 c 0,-2.657552 -2.153602,-4.811154 -4.811155,-4.811154 v 0 H 26.437726 c -2.657552,0 -4.811154,2.153602 -4.811154,4.811154 v 0 3.42529 H 0 V 8.8978795 C 0,4.0040458 4.0040458,0 8.8978795,0 v 0 z"
+         fill="#da1a32"
+         id="path53" /><path
+         d="m 192.57216,21.610823 c 9.7168,0 18.88634,8.157702 18.88634,24.571534 v 0 1.283499 c 0,16.319341 -9.07505,24.567597 -18.88634,24.567597 -7.05925,0 -11.2759,-3.944989 -14.20905,-8.252193 v 0 21.177741 H 168.00456 V 22.524234 h 10.35855 v 7.795487 c 3.02371,-4.673355 7.24036,-8.708898 14.20905,-8.708898 z m 257.45975,0 c 6.96869,0 11.5515,2.566999 15.58704,6.602542 v 0 l -5.77575,7.610443 c -2.567,-2.657553 -5.4096,-4.8584 -9.81129,-4.8584 -6.78759,0 -11.73654,6.508051 -11.73654,15.677591 v 0 0.456706 c 0,9.441201 4.94895,15.768145 12.0082,15.768145 4.21665,0 7.05925,-2.106357 9.90185,-4.948954 v 0 l 5.5907,6.874203 c -3.8505,4.307203 -8.7089,7.330908 -16.13036,7.334845 -12.64995,0 -21.81949,-10.177442 -21.81949,-24.662088 v 0 -0.917347 c 0,-14.484646 9.4412,-24.937686 22.18564,-24.937686 z m -212.20261,0 c 13.20114,0 20.16984,11.004236 20.16984,25.579435 v 0 l -2.2e-4,0.298827 c -10e-4,0.734465 -0.0119,2.006748 -0.0903,3.276074 v 0 h -30.43783 c 0.91341,8.157702 5.95685,12.559396 12.28379,12.559396 4.58281,0 7.9766,-2.015803 11.18535,-5.133998 v 0 l 5.40959,6.417497 c -4.40169,4.677293 -9.81129,7.515953 -17.05558,7.515953 -12.46884,0 -22.18564,-9.531755 -22.18564,-24.752641 v 0 -0.732304 c 0,-14.575199 8.80339,-25.028239 20.72104,-25.028239 z m -97.9633,-0.0039 c 12.835,0 22.2762,10.45304 22.2762,24.847132 v 0 0.826794 c 0,14.303538 -9.53569,24.843195 -22.4573,24.839259 -12.835,0 -22.28014,-10.358551 -22.28014,-24.752642 v 0 -0.822857 c 0,-14.303539 9.53176,-24.937686 22.46124,-24.937686 z m 188.84766,0.185045 c 5.40959,0 11.18534,1.925249 15.76814,5.224551 v 0 l -4.4017,7.610443 c -3.66545,-2.472508 -7.70099,-4.307204 -11.55149,-4.307204 -3.8505,0 -6.1419,2.110294 -6.1419,4.767846 v 0 0.185045 c 0,3.208748 3.8505,4.858399 9.53569,7.425398 7.51595,3.393793 13.20115,6.874203 13.20115,14.484646 v 0 0.09055 c 0,9.535693 -7.24036,14.760244 -16.591,14.764181 -5.77575,0 -12.46491,-2.110293 -18.05955,-6.783649 v 0 l 4.8584,-7.425398 c 4.4017,3.570963 9.07899,5.681256 13.38619,5.681256 4.3072,0 6.78365,-2.2914 6.78365,-5.319042 v 0 -0.09055 c 0,-3.484347 -3.75994,-5.043445 -9.53569,-7.51989 -7.24429,-3.118195 -13.29564,-6.417497 -13.29564,-14.394092 v 0 -0.185044 c 0,-8.708898 6.96869,-14.209047 16.04375,-14.209047 z m 73.88389,0.185044 c 6.32694,0 11.18534,1.740205 14.30354,4.948953 3.20875,3.208749 4.8584,7.976595 4.8584,14.031878 v 0 30.162236 H 411.58205 V 65.15925 c -2.8426,4.12216 -7.1498,6.874203 -13.47675,6.874203 -8.06714,0 -14.85079,-5.405659 -14.85079,-14.850797 v 0 -0.456705 c 0,-10.449103 6.96869,-15.583101 17.23668,-15.583101 4.58281,0 7.88605,0.822857 11.18535,1.925249 v 0 -2.01974 c 0,-6.508051 -3.8505,-9.901844 -10.45304,-9.901844 -4.67729,0 -8.52779,1.468544 -11.73654,2.933151 v 0 l -2.93315,-8.252193 c 4.67335,-2.291401 9.53569,-3.850498 16.04374,-3.850498 z M 366.38397,9.4097045 V 22.520297 h 10.90975 v 8.893942 h -10.90975 v 25.855033 c 0,3.759945 1.92525,5.319043 5.22455,5.319043 2.01974,0 3.85444,-0.456706 5.59464,-1.374054 v 0 8.527791 c -2.38195,1.2835 -5.134,2.110294 -8.62228,2.102475 -7.1498,0 -12.5594,-3.02376 -12.5594,-12.468898 v 0 -27.96139 h -3.61427 l -1.70083,-8.893942 h 5.31904 V 9.4097045 Z M 288.42122,21.610823 c 9.35065,0 14.94135,6.598605 14.94135,16.961091 v 0 32.548128 H 293.00402 V 41.505065 c 0,-6.783649 -3.20875,-10.543594 -8.7089,-10.543594 -5.40959,0 -9.16954,4.035543 -9.16954,10.728638 v 0 29.429933 H 264.76704 V 22.528171 h 10.35854 v 7.149801 c 2.75205,-4.307204 6.6931,-8.067149 13.29564,-8.067149 z m 209.08442,24.288062 14.49252,25.21722 H 499.98602 L 490.23379,53.714058 Z M 482.65878,4.9253307 V 43.887019 l 16.59494,-21.362785 h 12.28774 L 482.65878,57.092102 V 71.116105 H 472.30023 V 4.9253307 Z M 402.7826,48.19816 c -5.95686,0 -9.44121,3.023704 -9.44121,8.157702 v 0 0.185044 c 0,4.8584 3.38986,7.610443 7.88211,7.700997 5.96079,0.09055 10.54359,-3.944989 10.54359,-9.445139 v 0 -4.858399 C 409.38514,48.930463 406.26694,48.19816 402.7826,48.19816 Z M 139.67702,30.776427 c -7.24035,0 -11.91764,6.689158 -11.91764,15.768145 v 0 0.551196 c 0,9.078986 5.04344,15.953189 12.10269,15.949253 7.24035,0 11.91764,-6.78365 11.91764,-15.8587 v 0 -0.551196 c 0,-9.075049 -5.04344,-15.858698 -12.10269,-15.858698 z m 50.05254,0.0039 c -6.23245,0 -11.55149,6.047408 -11.55149,15.5831 v 0 0.917348 c 0,9.535692 5.31904,15.587038 11.55149,15.590975 6.32695,0 11.2759,-5.866301 11.2759,-15.587038 v 0 -0.826794 c 0,-9.716799 -5.03951,-15.677591 -11.2759,-15.677591 z m 48.09974,-0.460643 c -5.6852,0 -9.7168,5.043444 -10.44911,13.2917 v 0 h 20.53599 c -0.55119,-7.700997 -4.03554,-13.2917 -10.08688,-13.2917 z"
+         fill="#4e4540"
+         id="path55" /></g><path
+       style="fill:none;stroke:none;stroke-width:0.0762313;stroke-opacity:1;image-rendering:auto"
+       d="M 0.1022454,4.0709991 V 0.10224913 H 19.945996 39.789748 v 3.96874997 3.96875 H 19.945996 0.1022454 Z"
+       id="path931" /></g></svg>