Исправления ссылок

Feature/PaaS-Deckhouse

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

.gitignore

@@ -10,7 +10,12 @@ dist
 .basement
 config.local.js
 basement_dist
+.claude
 src/.vuepress/.cache
 src/.vuepress/.temp
 src/.vitepress/cache
 packages-list.json
+/.vale
+/.vscode
+/.vale.ini
+/.markdownlint.json

.gitlab-ci.yml

@@ -5,10 +5,12 @@ stages:
 
 variables:
   DIST_DIR: "./src/.vitepress/dist"
+  DMZ_DIST_DIR: "./dmz-dist"
   CONTAINER_REGISTRY: harbor.vimpelcom.ru
   PRODUCT_PROD: vega/beecloud
-  IMAGE_NAME: docs
+  PRODUCT_DMZ: vega/beecloud/dmz
+  IMAGE_NAME: docs-portal
 
 include: 
-  - ci/develop.yml
-  - "ci/rules.yml"
+  - ci/*.yml
+  - "ci/deploy/*.inc.yml"

.npmrc

@@ -1 +1,3 @@
+cafile=VimpelcomCAG2.pem
+@beeline:registry=https://nexus.vimpelcom.ru/repository/npm-all/
 registry=https://nexus.vimpelcom.ru/repository/npm-all/

VERSION

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

VimpelcomCAG2.pem

@@ -0,0 +1,59 @@
+-----BEGIN CERTIFICATE-----
+MIIDdTCCAl2gAwIBAgIQQaIoxfL+KLhIxGpv9/PUMzANBgkqhkiG9w0BAQsFADBN
+MRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/IsZAEZFgl2aW1wZWxjb20x
+HDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwHhcNMTgxMTIxMDkzMjE5WhcN
+MzgxMTIxMDk0MjE5WjBNMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/Is
+ZAEZFgl2aW1wZWxjb20xHDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQD7q+kJ4RNskizo7aNgVoAt9Z/p
+tcmjjcuH5iP/5MHLKN8eeWJWxwNm21tevwlIBGXWAvx43v4+xe77IELZdz3RErtA
+W1UYfdzI+c9eYyy9OORc5PgmcWDV2eWuVMFWFnkXbAX0evBM8FPzXie1n393vaT3
+BDmNuoiiuupq/uYY3z5iFVZBpLMZyBxrxYr5adq1oefbfMBeGJGT8N3sqIw1Jzt7
+TsUoYSgpgzSbMY7wbOY8yOcRb0NI1iWo3Rky5DBkyWBm4pvaIe2cXPq7gbXCSFRi
+ewP68+c2b4NTX091paEC542yb9KhKLBfTtcnZPbHAHOABtubhEwf9HfMsehlAgMB
+AAGjUTBPMAsGA1UdDwQEAwIBhjAPBgNVHRMBAf8EBTADAQH/MB0GA1UdDgQWBBTv
+4MjZ3yyuntT6y3fR60JeZm6wTjAQBgkrBgEEAYI3FQEEAwIBADANBgkqhkiG9w0B
+AQsFAAOCAQEApdVkNkRUMuu6p5hq32NdXkgHPTYKKdaxs+c2jEoB3giYrQFIfto+
+UVNPg3IE2iAlpxccRw0jyJ2neC/ai1Imgg6xCZ3a3RYFjoh5eaJWN/aSI8/pg1E8
+MDpzCCJGdo0Ei8zC2eDA8buSrbBtjDN8c//3X9/VhXkZzs3dL7jaIIxSR+EHXWH0
+3al6AavaN/X68qrRWHs2FBpw6qaecL8BPJiliaD3Rl1RyucTUibbUD6ryqeTgMrP
+aeaCPa0Ypb6pw7y0nLyJJPmsX9kgcgS0oEL6RsxhpjZ0eQZcRome/pV9BPUDJyLT
+z8mBO6VYVh9DcuqPmnBxgucMc6mjJiRIEg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIGqTCCBZGgAwIBAgITcgAAAAI2SdIO0pgfxQAAAAAAAjANBgkqhkiG9w0BAQsF
+ADBNMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/IsZAEZFgl2aW1wZWxj
+b20xHDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwHhcNMTgxMTI2MTAzNzUw
+WhcNMjgxMTI2MTA0NzUwWjBmMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJ
+k/IsZAEZFgl2aW1wZWxjb20xEzARBgoJkiaJk/IsZAEZFgNiZWUxIDAeBgNVBAMT
+F1ZpbXBlbGNvbSBJbnRlcm5hbENBIEcyMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A
+MIIBCgKCAQEA2uD2VDoEA25or20KxFS1fWZMIo1M61+WCwHE1kXZVJulbxOxMkEl
+1m8urNyvXkAbU9Gd+nZ6ZPSMkI9lx0ki9EPK5uaBxRY4FDACaT1sEjo+d/ZYMyBB
+P/s4VxIaISbqvD8/MH/h6N5e5eIgAnfqtyblEBKNUuJEDJAirIUb/VnjH7f8gvI/
+CqHa8KOSC/TE2ZqctlJRrm7mRJwwDHrL/VewC7LtwJD7bcWDHNc5+psJLmKc9R9R
+VREi5TfRKD8Mlr0syqmJxqzElfGOusUGSLJqpHS4LUlPrwXjoZ0ZMvWE5U3vftMX
+dHCCVmtB6R+O1iGaM6sK1jnliU8K8NssMwIDAQABo4IDZzCCA2MwEAYJKwYBBAGC
+NxUBBAMCAQAwHQYDVR0OBBYEFEhtK6bKwldIiW8e/DlSWntIC19xMBkGCSsGAQQB
+gjcUAgQMHgoAUwB1AGIAQwBBMAsGA1UdDwQEAwIBhjAPBgNVHRMBAf8EBTADAQH/
+MB8GA1UdIwQYMBaAFO/gyNnfLK6e1PrLd9HrQl5mbrBOMIIBZwYDVR0fBIIBXjCC
+AVowggFWoIIBUqCCAU6GgcZsZGFwOi8vL0NOPVZpbXBlbGNvbSUyMFJvb3RDQSUy
+MEcyLENOPVZpbXBlbFJvb3RDQUcyLENOPUNEUCxDTj1QdWJsaWMlMjBLZXklMjBT
+ZXJ2aWNlcyxDTj1TZXJ2aWNlcyxDTj1Db25maWd1cmF0aW9uLERDPXZpbXBlbGNv
+bSxEQz1ydT9jZXJ0aWZpY2F0ZVJldm9jYXRpb25MaXN0P2Jhc2U/b2JqZWN0Q2xh
+c3M9Y1JMRGlzdHJpYnV0aW9uUG9pbnSGRWh0dHA6Ly9wa2lpbnQuYmVlLnZpbXBl
+bGNvbS5ydS9DZXJ0RW5yb2xsL1ZpbXBlbGNvbSUyMFJvb3RDQSUyMEcyLmNybIY8
+aHR0cDovL3BraWV4dC5iZWVsaW5lLnJ1L3BraS9jZHAvVmltcGVsY29tJTIwUm9v
+dENBJTIwRzIuY3JsMIIBaQYIKwYBBQUHAQEEggFbMIIBVzCBtwYIKwYBBQUHMAKG
+gapsZGFwOi8vL0NOPVZpbXBlbGNvbSUyMFJvb3RDQSUyMEcyLENOPUFJQSxDTj1Q
+dWJsaWMlMjBLZXklMjBTZXJ2aWNlcyxDTj1TZXJ2aWNlcyxDTj1Db25maWd1cmF0
+aW9uLERDPXZpbXBlbGNvbSxEQz1ydT9jQUNlcnRpZmljYXRlP2Jhc2U/b2JqZWN0
+Q2xhc3M9Y2VydGlmaWNhdGlvbkF1dGhvcml0eTBRBggrBgEFBQcwAoZFaHR0cDov
+L3BraWludC5iZWUudmltcGVsY29tLnJ1L0NlcnRFbnJvbGwvVmltcGVsY29tJTIw
+Um9vdENBJTIwRzIuY3J0MEgGCCsGAQUFBzAChjxodHRwOi8vcGtpZXh0LmJlZWxp
+bmUucnUvcGtpL2FpYS9WaW1wZWxjb20lMjBSb290Q0ElMjBHMi5jcnQwDQYJKoZI
+hvcNAQELBQADggEBAHMJHkHITBOqVf2nbsnWveBmZHEjYogxOxNLYezU5f6ySnJl
+ySDz62n7tueq5PFyAPWI4gtDN0K0zdZALCR9CmOT3vf65Wx7HWNU44jBD1slncMi
+rAVkaQW7UcMiB4FWTJMq6B9ozVel6KHkTp96wOGahwaAZgF9g3YtEgZXmrnYaMtw
+g5cjruQ/XAQopeu+47g13kbHTzH1eKaX4rqZI/YHbO5Sv4lX179LjT08qmTx2dc6
+SUyJloalYAK0Spgza8JhEnHPTmwRB6zcZ+PifgkTZVGbx7krsmUyegr53Nlj9hFd
+g5VD1UoDfvcTmkzvdKMVEFfKM7299m0d264YnuM=
+-----END CERTIFICATE-----

ci/build-image.yml

@@ -1,30 +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
-  artifacts:
-    paths:
-      - "$DIST_DIR"
-    reports:
-      dotenv: .env
-    expire_in: 1h
-
-develop-image:
+build-image:
   image: harbor.vimpelcom.ru/dockerhub/library/docker:20.10.11-dind
   stage: package
   rules:
@@ -38,8 +12,11 @@ develop-image:
     - docker build --build-arg DIST_DIR=${DIST_DIR} -f ./build.Dockerfile -t ${CONTAINER_REGISTRY}/${PRODUCT}/${IMAGE_NAME}:$PRODUCT_VERSION -t ${CONTAINER_REGISTRY}/${PRODUCT}/${IMAGE_NAME}:latest .
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT}/${IMAGE_NAME}:$PRODUCT_VERSION
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT}/${IMAGE_NAME}:latest
+    - docker build --build-arg DIST_DIR=${DMZ_DIST_DIR} --build-arg WROOT_DIR="/usr/share/nginx/html" -f ./build.Dockerfile -t ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:$PRODUCT_VERSION -t ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:latest .
+    - 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

@@ -0,0 +1,39 @@
+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_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
+  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

@@ -0,0 +1,73 @@
+# echo -e   # ключ -e в комманде echo включает отображение "backslash escapes"; например \n - переход на следующую строку, \t -табуляция
+# echo -n   # ключ -n в команде echo сигнализирует, что после вывода информации не нужно переходить на следующую строку.
+
+# - > переносы строк удаляются
+# - | переносы строк не удаляются
+
+# Git add
+# - git submodule add -b main https://gitlab-ci-token:${CI_JOB_TOKEN}@$CI_SERVER_URL/products/vega/infra
+# - git submodule sync --recursive
+# - git submodule update --init --recursive
+
+# # Прокидываем name + email, чтобы gitlab не сыпал ошибки
+# - git config --global user.name "YourName"
+# - git config --global user.email "YourEmail"
+
+# # Вызываем наш скрипт, который инкрементирует версию
+# - node bumpVersion.js
+
+# # Добавляем и пушим наши изменения в ветку откуда стригерился pipeline
+# - git add ./package.json
+# - git commit -m "bump package.json version"
+# # Используем опцию gitlab -o ci.skip, для того, чтобы наш коммит не тригерил новый pipeline
+# - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip
+
+.deploy-template:
+  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 && \
+      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
+    # https://mikefarah.gitbook.io/yq/operators/traverse-read#nested-special-characters
+    - STANDS=$(echo "$STANDS" | yq '."'"${CI_COMMIT_REF_NAME}"'".[]')
+    - RED=$'\033[0;31m'
+    - RESET=$'\033[0m'
+    - >
+      if [[ -z "$STANDS" ]]; then
+        echo -e "${RED}STANDS for ${CI_COMMIT_REF_NAME:=CI_COMMIT_REF_NAME} is null${RESET}"
+        exit 1
+      fi
+    - >
+      for stand in $STANDS; do
+        echo "stand: ${stand}"
+        ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+      done
+    - chmod 644 ~/.ssh/known_hosts
+    # Если получилось что-то пустое
+    - >
+      if [[ -z "$APPVERSION" ]]; then 
+        APPVERSION="0.0.1"
+      fi
+  script:
+    - >
+      for stand in $STANDS; do
+        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"
+      done
+  needs:
+    - job: build-image
+      optional: true

ci/deploy/deploy.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+# CONTAINER_REGISTRY="harbor.vimpelcom.ru"
+# PRODUCT="vega/stage"
+# PRODUCT_VERSION="0.5.3"
+
+if [[ $# -eq 0 ]] ; then
+    echo "No arguments supplied"
+    exit 1
+fi
+
+if [[ -z "$1" ]] ; then
+    echo "No argument CONTAINER_NAME"
+    exit 1
+fi
+
+GREEN=$'\033[0;32m'
+RED=$'\033[0;31m' 
+BLUE=$'\033[0;36m' 
+WHITE=$'\033[0;37m' 
+RESET=$'\033[0m'
+
+CONTAINER_NAME=${1}
+IMAGE_URL="$CONTAINER_REGISTRY/$PRODUCT/$IMAGE_NAME:$PRODUCT_VERSION"
+DOCKER_COMPOSE_EXEC="docker-compose"
+
+echo -e "${GREEN}IMAGE_URL${RESET}: ${IMAGE_URL}"
+
+if ! [ -x "$(command -v docker-compose)" ]; then
+    DOCKER_COMPOSE_EXEC="docker compose"
+fi
+
+# для -z необходимо указывать параметры в двойных ковычках
+if [ -z "$(docker ps -aq -f name=^${CONTAINER_NAME}$)" ]; then
+  echo -e "${RED}${CONTAINER_NAME:-container} not running.${RESET}"
+  exit 1
+fi
+
+COMPOSE_FILE="$(docker inspect --format '{{index .Config.Labels "com.docker.compose.project.config_files"}}' $CONTAINER_NAME | tr , \\n | xargs grep -wH $IMAGE_NAME | cut -d: -sf1 | uniq)"
+COMPOSE_ALL_FILES="-f $COMPOSE_FILE"
+
+cp $COMPOSE_FILE "$COMPOSE_FILE.orig"
+# sed -i '/image: .*'$IMAGE_NAME'/ s|:.*|: '"$IMAGE_URL"'|' $COMPOSE_FILE
+sed -r -i '/image: .*'$IMAGE_NAME'(:|@|$)/ s|:.*|: '"$IMAGE_URL"'|' $COMPOSE_FILE
+
+if [ -e ~dorootless/docker-compose-svc.yaml ]; then
+COMPOSE_SVC_FILE=~dorootless/docker-compose-svc.yaml
+COMPOSE_ALL_FILES="-f $COMPOSE_SVC_FILE -f $COMPOSE_FILE"
+fi
+
+$DOCKER_COMPOSE_EXEC $COMPOSE_ALL_FILES pull $CONTAINER_NAME
+$DOCKER_COMPOSE_EXEC $COMPOSE_ALL_FILES up -d
+
+if [ "$(docker ps -a -q -f name=ingress)" ]; then
+  $DOCKER_COMPOSE_EXEC $COMPOSE_ALL_FILES exec ingress angie -s reload
+fi

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,12 +1,15 @@
 {
   "name": "docs",
-  "version": "0.5.0",
-  "description": "Vega docs portal",
+  "version": "0.6.5-billing",
+  "description": "Beeline Cloud docs",
   "main": "index.js",
   "scripts": {
+    "predev": "node scripts/check-links.mjs",
     "dev": "vitepress dev src",
+    "prebuild": "node scripts/check-links.mjs",
     "build": "vitepress build src",
-    "preview": "vitepress preview src"
+    "preview": "vitepress preview src",
+    "check-links": "node scripts/check-links.mjs"
   },
   "keywords": [],
   "authors": {
@@ -15,14 +18,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "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",
-    "sass": "1.69.7",
-    "vitepress": "1.0.0-rc.40",
-    "vitepress-plugin-tabs": "0.5.0",
-    "@vitejs/plugin-vue": "4.3.4"
+    "@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

scripts/check-links.mjs

@@ -0,0 +1,186 @@
+import { readFileSync, readdirSync, statSync, existsSync, realpathSync } from 'node:fs';
+import { join, dirname, resolve, relative, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = resolve(fileURLToPath(import.meta.url), '../..');
+const SRC = join(ROOT, 'src');
+const PUBLIC_DIR = join(SRC, 'public');
+const CONFIG = join(SRC, '.vitepress/config.mts');
+const HOME = join(SRC, 'index.md');
+
+function walk(dir, out = [], skipDirs = new Set()) {
+  if (!existsSync(dir)) return out;
+  for (const name of readdirSync(dir)) {
+    if (skipDirs.has(name)) continue;
+    const p = join(dir, name);
+    const s = statSync(p);
+    if (s.isDirectory()) walk(p, out, skipDirs);
+    else out.push(p);
+  }
+  return out;
+}
+
+const docFiles = walk(SRC, [], new Set(['node_modules', '.vitepress', 'public', 'assets']));
+const mdFiles = docFiles.filter(f => f.endsWith('.md'));
+
+function checkTarget(target, fromFile) {
+  const url = target.trim();
+  if (!url) return { ok: false, reason: 'empty' };
+  if (/^(https?:|mailto:|tel:|ftp:|data:|javascript:|#)/i.test(url)) return { ok: true, skip: true };
+  const [pathPart] = url.split('#');
+  const [pathOnly] = pathPart.split('?');
+  if (!pathOnly) return { ok: true, skip: true };
+
+  let abs;
+  if (pathOnly.startsWith('/')) {
+    abs = join(SRC, pathOnly);
+    if (!existsSync(abs)) {
+      const inPublic = join(PUBLIC_DIR, pathOnly);
+      if (existsSync(inPublic)) return { ok: true };
+    }
+  } else {
+    abs = resolve(dirname(fromFile), pathOnly);
+  }
+
+  if (existsSync(abs)) return { ok: true };
+  if (extname(abs) === '') {
+    if (existsSync(abs + '.md')) return { ok: true };
+    if (existsSync(join(abs, 'index.md'))) return { ok: true };
+  }
+  if (extname(abs) === '.html') {
+    if (existsSync(abs.replace(/\.html$/, '.md'))) return { ok: true };
+  }
+  return { ok: false, reason: 'not found' };
+}
+
+function resolveToMd(target, fromFile) {
+  const url = target.trim();
+  if (!url) return null;
+  if (/^(https?:|mailto:|tel:|ftp:|data:|javascript:|#)/i.test(url)) return null;
+  const [pathPart] = url.split('#');
+  const [pathOnly] = pathPart.split('?');
+  if (!pathOnly) return null;
+
+  const abs = pathOnly.startsWith('/')
+    ? join(SRC, pathOnly)
+    : resolve(dirname(fromFile), pathOnly);
+
+  if (extname(abs) === '.md' && existsSync(abs)) return abs;
+  if (extname(abs) === '') {
+    if (existsSync(abs + '.md')) return abs + '.md';
+    if (existsSync(join(abs, 'index.md'))) return join(abs, 'index.md');
+  }
+  if (extname(abs) === '.html') {
+    const asMd = abs.replace(/\.html$/, '.md');
+    if (existsSync(asMd)) return asMd;
+  }
+  return null;
+}
+
+const broken = [];
+const usedMd = new Set();
+const mdLinkRe = /(!?)\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+const htmlLinkRe = /<(?:img[^>]+src|a[^>]+href|source[^>]+src|video[^>]+src|link[^>]+href)\s*=\s*["']([^"']+)["']/gi;
+const frontmatterLinkRe = /^\s*-?\s*link:\s*['"]?([^\s'"#]+)['"]?\s*$/;
+const includeRe = /<!--\s*@include:\s*([^\s>-]+(?:\.md)?)[^>]*-->/g;
+
+function recordUse(target, fromFile) {
+  const md = resolveToMd(target, fromFile);
+  if (md) usedMd.add(md);
+}
+
+for (const file of mdFiles) {
+  const content = readFileSync(file, 'utf8');
+  const lines = content.split('\n');
+  let fmStart = -1, fmEnd = -1;
+  if (lines[0]?.trim() === '---') {
+    fmStart = 0;
+    for (let i = 1; i < lines.length; i++) {
+      if (lines[i].trim() === '---') { fmEnd = i; break; }
+    }
+  }
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const inFrontmatter = fmStart !== -1 && i > fmStart && i < fmEnd;
+    if (inFrontmatter) {
+      const m = line.match(frontmatterLinkRe);
+      if (m) {
+        const res = checkTarget(m[1], file);
+        if (!res.ok && !res.skip) {
+          broken.push({ file: relative(ROOT, file), line: i + 1, target: m[1], type: 'frontmatter' });
+        } else {
+          recordUse(m[1], file);
+        }
+      }
+      continue;
+    }
+    for (const m of line.matchAll(mdLinkRe)) {
+      const res = checkTarget(m[3], file);
+      if (!res.ok && !res.skip) {
+        broken.push({ file: relative(ROOT, file), line: i + 1, target: m[3], type: m[1] === '!' ? 'image' : 'link' });
+      } else {
+        recordUse(m[3], file);
+      }
+    }
+    for (const m of line.matchAll(htmlLinkRe)) {
+      const res = checkTarget(m[1], file);
+      if (!res.ok && !res.skip) {
+        broken.push({ file: relative(ROOT, file), line: i + 1, target: m[1], type: 'html' });
+      } else {
+        recordUse(m[1], file);
+      }
+    }
+    for (const m of line.matchAll(includeRe)) {
+      recordUse(m[1], file);
+    }
+  }
+}
+
+const cfgLines = readFileSync(CONFIG, 'utf8').split('\n');
+const sidebarLinkRe = /link:\s*['"]([^'"]+)['"]/g;
+for (let i = 0; i < cfgLines.length; i++) {
+  const line = cfgLines[i];
+  if (/^\s*\/\//.test(line)) continue;
+  for (const m of line.matchAll(sidebarLinkRe)) {
+    const target = m[1];
+    if (!target) continue;
+    const res = checkTarget(target, CONFIG);
+    if (!res.ok && !res.skip) {
+      broken.push({ file: relative(ROOT, CONFIG), line: i + 1, target, type: 'sidebar' });
+    } else {
+      recordUse(target, CONFIG);
+    }
+  }
+}
+
+const orphans = mdFiles
+  .filter(f => f !== HOME && !usedMd.has(f))
+  .map(f => relative(ROOT, f))
+  .sort();
+
+broken.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line);
+
+let hasBroken = false;
+
+if (broken.length === 0) {
+  console.log('OK: битых ссылок не найдено');
+} else {
+  hasBroken = true;
+  console.log(`Найдено битых ссылок: ${broken.length}\n`);
+  let lastFile = '';
+  for (const b of broken) {
+    if (b.file !== lastFile) { console.log(`\n${b.file}`); lastFile = b.file; }
+    console.log(`  L${b.line} [${b.type}] -> ${b.target}`);
+  }
+}
+
+console.log('');
+
+if (orphans.length === 0) {
+  console.log('OK: неиспользуемых страниц не найдено');
+} else {
+  console.log(`WARN: найдено неиспользуемых страниц (не упомянуты ни в sidebar, ни в других md): ${orphans.length}\n`);
+  for (const f of orphans) console.log(`  ${f}`);
+}
+
+process.exit(hasBroken ? 1 : 0);

src/.vitepress/config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import { overrideComponents } from './override-components'
+import { fileURLToPath, URL } from 'node:url'
 
 const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -42,9 +43,10 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "BeeCloud Docs",
-  description: "Документация публичного облака",
-  head: [['link', { rel: 'icon', href: '/favicon.svg' }]],
+  srcDir: ".",
+  title: 'Beeline Cloud',
+  description: "Документация Beeline Cloud",
+  head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
   base: typeof new_version !== 'undefined' ? '/' : '/docs/',
   markdown: {
     config(md) {
@@ -53,7 +55,13 @@ export default defineConfig({
   },
   vite: {
     resolve: {
-      alias: overrideComponents(),
+      alias: [
+        ...overrideComponents(),
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./theme', import.meta.url))
+        },
+      ],
     }
   },
   locales: {
@@ -63,7 +71,19 @@ export default defineConfig({
     }
   },
   themeConfig: {
-    logo: '/favicon.svg',
+    siteTitle: false,
+    notFound: {
+      title: 'Страница не найдена',
+      quote: 'Похоже, вы зашли в тупик. Но не волнуйтесь — всегда можно вернуться на главную.',
+      linkLabel: 'вернуться на главную',
+      linkText: 'Вернуться на главную',
+      code: '404',
+    },
+    logo: {
+      light: '/img/logo-cloud.svg',
+      dark: '/img/logo-cloud.svg',
+      alt: '',
+    },
     search: {
       provider: 'local',
       options: {
@@ -75,7 +95,7 @@ export default defineConfig({
                 buttonAriaLabel: 'Поиск'
               },
               modal: {
-                noResultsText: 'Нет результатов для',
+                noResultsText: 'Не удалось загрузить данные',
                 resetButtonTitle: 'Сбросить',
                 displayDetails: 'Показать расширенный список',
                 footer: {
@@ -90,412 +110,334 @@ export default defineConfig({
       }
     },
     // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      {
-        text: 'Документация',
-        link: '/guide/',
-      },
- //     {
- //       text: 'Wiki-DF',
- //       link: '/wikidf/',
- //     },
-
-      {
-        text: 'Terraform',
-        link: '/terraform/',
-      },
-      {
-        text: 'Консоль управления',
-        link: 'https://console.cloud.dfcloud.ru'
-      }
-    ],
-
-    //  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'
-    // },
+    // nav: [
+    //   {
+    //     text: 'Документация',
+    //     link: '/guide/',
+    //   },
+    //   {
+    //     text: 'API',
+    //     link: '',
+    //   },
+    //   {
+    //     text: 'Terraform',
+    //     // link: '/terraform/',
+    //     link: '',
+    //   },
+    // ],
 
     docFooter: {
       next: 'Вперед',
       prev: 'Назад'
     },
 
-    lastUpdated: {
-      text: 'Обновлена',
-      formatOptions: {
-        dateStyle: 'long',
-      }
-    },
-
     outline: {
       label: 'Содержание'
     },
     sidebar: {
-      '/guide/': [
-        {
-          text: 'Облачные вычисления',
-          collapsed: true,
-          items: [
-            { text: 'Обзор сервиса', link: '/guide/compute/compute-overview.md' },
-            { text: 'Быстрый старт', link: '/guide/compute/compute-getting-started.md' },
-            { text: 'Виртуальные серверы', link: '/guide/compute/compute-instructions/compute-servers-create.md' },
-            { text: 'Управление виртуальными серверами', link: '/guide/compute/compute-instructions/compute-servers-manage.md' },
-            { text: 'Диски', link: '/guide/compute/compute-instructions/compute-disks.md' },
-            { text: 'Группы размещения', link: '/guide/compute/compute-instructions/compute-affinity.md' },
-            { text: 'IP-адрес', link: '/guide/compute/compute-instructions/compute-ip.md' },
-            { text: 'Квоты и лимиты', link: '/guide/compute/compute-limits.md' },
-            { text: 'Уровень обслуживания', link: '/guide/compute/compute-ola.md' },
-          ]
-        },
-        {
-          text: 'Объектное хранилище',
-          collapsed: true,
-          items: [
-            { text: 'Обзор сервиса', link: '/guide/storage/storage-overview.md' },
-            {
-              text: 'Подключение к хранилищу',
-              collapsed: true,
-              items: [
-                { text: 'WinSCP', link: '/guide/storage/storage-instructions/s3-connect/winscp.md' },
-                { text: 'S3cmd', link: '/guide/storage/storage-instructions/s3-connect/s3cmd.md' },
-              ]
-            },
-            { text: 'Управление хранилищем', link: '/guide/storage/storage-instructions/storage-s3.md' },
-            { text: 'Квоты и лимиты', link: '/guide/storage/storage-limits.md' },
-            { text: 'Уровень обслуживания', link: '/guide/storage/storage-ola.md' },
-          ]
-        },
-        {
-          text: 'DNS',
-          collapsed: true,
-          items: [
-            { text: 'Обзор сервиса', link: '/guide/dns/dns-overview.md' },
-            { text: 'Ресурсные записи', link: '/guide/dns/dns-instructions/dns-create.md' },
-            { text: 'Квоты и лимиты', link: '/guide/dns/dns-limits.md' },
-          ]
-        },
-        {
-          text: 'Аккаунт',
-          collapsed: true,
-          items: [
-            { text: 'Проекты', link: '/guide/admin/projects.md' },
-            { text: 'Ролевая модель', link: '/guide/admin/roles.md' },
-            { text: 'Квоты и лимиты', link: '/guide/admin/limits.md' },
-            { text: 'Регионы', link: '/guide/admin/availability-matrix.md' },
-            { text: 'SSH ключи', link: '/guide/admin/ssh.md' },
-            { text: 'Участники проекта', link: '/guide/admin/users.md' },
-          ]
-        },
-        {
-          text: 'Wiki DF',
-          collapsed: true,
-          items: [
-            {
-              text: 'Cертификаты и лицензии beeline cloud',
-              collapsed: true,
-              items: [
-                { text: 'Лицензии', link: '/guide/wikidf/01-lic-sert/lic.md' },
-                { text: 'Cертификаты', link: '/guide/wikidf/01-lic-sert/sert.md' },
-              ]
-            },
-            { text: 'База знаний beeline cloud', link: '/guide/wikidf/02-kb/02-kb-overview.md' },
-            {
-              text: 'Инфраструктурные сервисы',
-              collapsed: true,
-              items: [
-                { text: 'Инфраструктурные сервисы - Обзор', link: '/guide/wikidf/03-iaas/03-0-iaas-overview.md' },
-                {
-                  text: 'BeeCloud Stack',
-                  collapsed: true,
-                  items: [
-                    { text: 'BeeCloud Stack - Обзор сервиса', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-0-stack-overview.md' },
-                    { text: '1. Архитектура сервиса', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-1.md' },
-                    { text: '2. Роли и авторизация', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-2.md' },
-                    {
-                      text: '3. Инструкция',
-                      collapsed: true,
-                      items: [
-                        {
-                          text: 'Вычисления',
-                          collapsed: true,
-                          items: [
-                            { text: 'A. Создание ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-a.md' },
-                            { text: 'B. Старт, стоп и рестарт ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-b.md' },
-                            { text: 'C. Модификация ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-c.md' },
-                            { text: 'D. Создание, удаление и откат к снимку ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-d.md' },
-                            { text: 'E. Доступ к консоли ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-e.md' },
-                            { text: 'F. Использование носителя для восстановления ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-f.md' },
-                            { text: 'G. Удаление ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-g.md' },
-                            { text: 'H. Cдувание ОЗУ гостевой ОС ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-h.md' },
-                            { text: 'I. Просмотр истории ВМ', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-1/03-1-3-1-i.md' },
-                          ]
-                        },
-                        {
-                          text: 'Программно-определяемый маршрутизатор (Edge)',
-                          collapsed: true,
-                          items: [
-                            { text: 'Edge - Обзор', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-0-overview.md' },
-                            { text: 'A. Создание роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-a.md' },
-                            { text: 'B. Удаление роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-b.md' },
-                            { text: 'C. Старт, стоп и рестарт роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-c.md' },
-                            { text: 'D. Добавление правил фаервола', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-d.md' },
-                            { text: 'E. Удаление правил фаервола', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-e.md' },
-                            { text: 'F. Добавление правил NAT', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-f.md' },
-                            { text: 'G. Добавление виртуального сетевого порта', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-g.md' },
-                            { text: 'H. Получение отчета о работе маршрутизатора', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-h.md' },
-                          ]
-                        },
-                        {
-                          text: 'Сети',
-                          collapsed: true,
-                          items: [
-                            { text: 'Edge - Обзор', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-0-overview.md' },
-                            { text: 'A. Создание роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-a.md' },
-                            { text: 'B. Удаление роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-b.md' },
-                            { text: 'C. Старт, стоп и рестарт роутера', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-c.md' },
-                            { text: 'D. Добавление правил фаервола', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-d.md' },
-                            { text: 'E. Удаление правил фаервола', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-e.md' },
-                            { text: 'F. Добавление правил NAT', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-f.md' },
-                            { text: 'G. Добавление виртуального сетевого порта', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-g.md' },
-                            { text: 'H. Получение отчета о работе маршрутизатора', link: '/guide/wikidf/03-iaas/03-1-stack/03-1-3/03-1-3-2/03-1-3-2-h.md' },
-                          ]
-                        },
-                      ]
-                    },
-                  ]
-                },
-                {
-                  text: 'Cloud Compute',
-                  collapsed: true,
-                  items: [
-                    { text: 'Cloud Compute - Назначение сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-0-cc-overview.md' },
-                    {
-                      text: '1. Описание сервиса',
-                      collapsed: true,
-                      items: [
-                        { text: '01. Состав сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-1.md' },
-                        {
-                          text: '02. Техническое описание сервиса',
-                          collapsed: true,
-                          items: [
-                            { text: 'Техническое описание сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-2/03-2-1-2-0-overview.md' },
-                            { text: 'A. Cloud Compute Metrocluster', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-2/03-2-1-2-1.md' },
-                          ]
-                        },
-                        { text: '03. Основные функциональные возможности', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-3.md' },
-                        { text: '04. Дополнительные возможности', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-4.md' },
-                        { text: '05. Основные опции', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-5.md' },
-                        { text: '06. Хранение данных сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-6.md' },
-                        { text: '07. Регионы доступности сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-7.md' },
-                        { text: '08. Подключение Terraform к VCD', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-1/03-2-1-8.md' },
-                      ]
-                    },
-                    { text: '2. Соответствие сервиса требованиям и стандартам безопасности сервиса', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-2.md' },
-                    { text: '3. Порядок подключения и зоны ответственности', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-3.md' },
-                    { text: '4. Тарификация и модели оплаты', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-4.md' },
-                    {
-                      text: '5. Инструкция по настройке Distributed Firewall (DFW)',
-                      collapsed: true,
-                      items: [
-                        { text: 'Инструкция по настройке DFW', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-5/03-2-5-0-overview.md' },
-                        { text: 'A. Добавление DFW в DCG', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-5/03-2-5-1.md' },
-                        { text: 'B. Дополнительные настройки', link: '/guide/wikidf/03-iaas/03-2-cloud-compute/03-2-5/03-2-5-2.md' },
-                      ]
-                    },
-                  ]
-                },
-                {
-                  text: 'Аварийное восстановление (Disaster Recovery)',
-                  collapsed: true,
-                  items: [
-                    { text: 'Аварийное восстановление (Disaster Recovery) - Назначение сервиса', link: '/guide/wikidf/03-iaas/03-3-recovery/03-3-0-overview.md' },
-                    { text: 'DRaaS', link: '/guide/wikidf/03-iaas/03-3-recovery/03-3-1.md' },
-                    { text: 'Репликация ВМ', link: '/guide/wikidf/03-iaas/03-3-recovery/03-3-2.md' },
-                  ]
-                },
-                {
-                  text: 'Миграция виртуальных машин',
-                  collapsed: true,
-                  items: [
-                    { text: 'Миграция виртуальных машин - Назначение сервиса', link: '/guide/wikidf/03-iaas/03-4-migration/03-4-0-overview.md' },
-                    { text: '1. Состав сервиса', link: '/guide/wikidf/03-iaas/03-4-migration/03-4-1.md' },
-                    { text: '2. Порядок предоставления сервиса. Зоны ответственности', link: '/guide/wikidf/03-iaas/03-4-migration/03-4-2.md' },
-                    { text: '3. Тарификация сервиса', link: '/guide/wikidf/03-iaas/03-4-migration/03-4-3.md' },
-                  ]
-                },
-                {
-                  text: 'Резервное копирование',
-                  collapsed: true,
-                  items: [
-                    { text: 'Назначение сервиса', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-0-overview.md' },
-                    { text: 'ПО Veeam в аренду', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-1.md' },
-                    {
-                      text: 'Резервное копирование Veeam',
-                      collapsed: true,
-                      items: [
-                        { text: 'Резервное копирование Veeam - Обзор', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-0-overview.md' },
-                        {
-                          text: '1. Резервное копирование виртуальных машин (ВМ) с администрированием (Managed Cloud Backup)',
-                          collapsed: true,
-                          items: [
-                            { text: 'Managed Cloud Backup - Обзор', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-1/03-5-2-1-0-overview.md' },
-                            { text: '01. Описание сервиса', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-1/03-5-2-1-1.md' },
-                          ]
-                        },
-                        {
-                          text: '2. Резервное копирование ВМ (Cloud Backup)',
-                          collapsed: true,
-                          items: [
-                            { text: 'Cloud Backup - Обзор', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-2/03-5-2-2-0-overview.md' },
-                            { text: '01. Описание сервиса', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-2/03-5-2-2-1.md' },
-                            { text: '02. Инструкция', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-2/03-5-2-2-2.md' },
-                          ]
-                        },
-                        {
-                          text: '3. Резервное копирование в облако на базе Veeam Cloud Connect (Veeam Cloud Connect Backup)',
-                          collapsed: true,
-                          items: [
-                            { text: 'Veeam Cloud Connect Backup - Обзор', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-3/03-5-2-3-0-overview.md' },
-                            { text: '01. Состав сервиса', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-3/03-5-2-3-1.md' },
-                            { text: '02. Порядок подключения и зоны ответственности', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-3/03-5-2-3-2.md' },
-                            { text: '03. Тарификация и порядок оплаты', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-3/03-5-2-3-3.md' },
-                          ]
-                        },
-                        {
-                          text: '4. Резервное копирование в облако на базе Veeam агента (Veeam Agent BackUp)',
-                          collapsed: true,
-                          items: [
-                            { text: 'Veeam Cloud Connect Backup - Обзор', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-0-overview.md' },
-                            { text: '01. Описание сервиса', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-1.md' },
-                            { text: '02. Инструкция',
-                              collapsed: true,
-                              items: [
-                                { text: '1. Описание портала', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-2/03-5-2-4-2-1.md' },
-                                { text: '2. Установка агента резервного копирования', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-2/03-5-2-4-2-2.md' },
-                                { text: '3. Настройка политики резервного копирования', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-2/03-5-2-4-2-3.md' },
-                                { text: '4. Восстановление из резервных копий', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-2/03-5-2-4/03-5-2-4-2/03-5-2-4-2-4.md' },
-                              ]
-                            },
-                          ]
-                        },
-                      ]
-                    },
-                    {
-                      text: 'Резервное копирование Киберпротект',
-                      collapsed: true,
-                      items: [
-                        { text: 'О сервисе', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-0-overview.md' },
-                        {
-                          text: 'Инструкция по работе с сервисом',
-                          collapsed: true,
-                          items: [
-                            { text: '1. Начало работы с сервисом', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-1.md' },
-                            { text: '2. Резервное копирование агентами', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-2.md' },
-                            { text: '3. Установка и настройка агентов', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-3.md' },
-                            { text: '4. Представления консоли резервного копирования', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-4.md' },
-                            { text: '5. Резервное копирование приложений Microsoft', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-5.md' },
-                            { text: '6. Восстановление: памятка', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-6.md' },
-                            { text: '7. Другие способы восстановления', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-7.md' },
-                            { text: '8. Восстановление из ISO-образа', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-8.md' },
-                            { text: '9. Кроссплатформенная миграция на базе Киберпротект Облачный Бэкап', link: '/guide/wikidf/03-iaas/03-5-backup/03-5-3/03-5-3-1/03-5-3-1-9.md' },
-                          ]
-                        },
-                      ]
-                    },
-                  ]
-                },
 
-              ]
-            },
-          ]
-        },
-      ],
-       '/terraform/': [
-        {
-          text: 'Terraform',
+
+    '/platform/': [
+      {
+        text: 'Платформа Beeline Cloud', link: '/platform/index.md',
+        collapsed: true,
           items: [
-            {
-              text: 'BeeCloud провайдер', link: '/terraform/providers/beecloud/index.md',
-              collapsed: true,
-              items: [
-                {
-                  text: 'Облачные вычисления',
-                  collapsed: true,
-                  items: [
-                    {
-                      text: 'Источники данных',
-                      items: [
-                        { text: 'beecloud_affinity_groups', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_affinity_groups.md' },
-                        { text: 'beecloud_flavors', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_flavors.md' },
-                        { text: 'beecloud_images', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_images.md' },
-                        { text: 'beecloud_regions', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_regions.md' },
-                        { text: 'beecloud_server', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_server.md' },
-                        { text: 'beecloud_servers', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_servers.md' },
-                        { text: 'beecloud_volume', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_volume.md' },
-                        { text: 'beecloud_volumes', link: '/terraform/providers/beecloud/compute/data-sources/beecloud_volumes.md' },
-                      ],
-                    },
-                    {
-                      text: 'Ресурсы',
-                      items: [
-                        { text: 'beecloud_address_ip', link: '/terraform/providers/beecloud/compute/resources/beecloud_address_ip.md' },
-                        { text: 'beecloud_affinity_group', link: '/terraform/providers/beecloud/compute/resources/beecloud_affinity_group.md' },
-                        { text: 'beecloud_server', link: '/terraform/providers/beecloud/compute/resources/beecloud_server.md' },
-                        { text: 'beecloud_volume_bind', link: '/terraform/providers/beecloud/compute/resources/beecloud_volume_bind.md' },
-                        { text: 'beecloud_volume', link: '/terraform/providers/beecloud/compute/resources/beecloud_volume.md' },
-                      ]
-                    },
-                  ]
-                },
-                {
-                  text: 'DNS',
-                  collapsed: true,
-                  items: [
-                    {
-                      text: 'Источники данных',
-                      items: [
-                        { text: 'beecloud_dns_records', link: '/terraform/providers/beecloud/dns/data-sources/beecloud_dns_records.md' },
-                        { text: 'beecloud_dns_zones', link: '/terraform/providers/beecloud/dns/data-sources/beecloud_dns_zones.md' },
-                      ],
-                    },
-                    {
-                      text: 'Ресурсы',
-                      items: [
-                        { text: 'beecloud_dns_record', link: '/terraform/providers/beecloud/dns/resources/beecloud_dns_record.md' },
-                      ]
-                    },
-                  ]
-                },
-              ]
-            },
-            {
-              text: 'Null провайдер', link: '/terraform/providers/null/index.md',
-              collapsed: true,
-              items: [
-                {
-                  text: 'Источники данных',
-                  collapsed: true,
-                  items: [
-                    { text: 'null_resource', link: '/terraform/providers/null/resources/null_resource.md' },
-                  ],
-                },
-                {
-                  text: 'Ресурсы',
-                  collapsed: true,
-                  items: [
-                    { text: 'null_data_source', link: '/terraform/providers/null/data-sources/null_data_source.md' },
-                  ]
-                },
-              ]
-            },
-            { text: 'Вопросы и ответы', link: '/terraform/faq.md' },
+            {text: 'Обзор', link: '/platform/about.md'},
+            {text: 'Типы тарификации', link: '/platform/billing-types.md'},
+            {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'},
           ],
         },
       ],
+
+
+      '/legal/': [
+        { text: 'Юридические документы', link: '/legal/index.md' },
+      ],
+
+
+      '/security/': [
+        {
+          text: 'Сервисы информационной безопасности в Beeline Cloud', link: '/security/index.md',
+        },
+        {
+          text: 'Cloud Security Awareness (SA)', link: '/security/Cloud-SA/SA-index.md',
+          collapsed: true,
+          items: [  
+            {
+              text: 'Состав сервиса SA', link: '/security/Cloud-SA/compond-SA/compond-index.md',
+              collapsed: true,
+              items: [  
+                { text: 'Обзор сервиса', link: '/security/Cloud-SA/compond-SA/about.md' },
+                { text: 'Состав сервиса', link: '/security/Cloud-SA/compond-SA/compond-SA.md' },
+                { text: 'Настройки сервиса по умолчанию', link: '/security/Cloud-SA/compond-SA/default-service.md' },
+                { text: 'Почтовый ретранслятор (SMTP relay)', link: '/security/Cloud-SA/compond-SA/mail-relay.md' },
+                { text: 'Мониторинг работоспособности платформы', link: '/security/Cloud-SA/compond-SA/monitoring.md' },
+                { text: 'Модули платформы', link: '/security/Cloud-SA/compond-SA/platform-modules.md' },
+                { text: 'Ограничения платформы', link: '/security/Cloud-SA/compond-SA/restrictions.md' },
+                { text: 'Отказоустойчивость сервиса', link: '/security/Cloud-SA/compond-SA/stability.md' },
+                { text: 'Шаблоны почтовых сообщений и веб-форм', link: '/security/Cloud-SA/compond-SA/templates.md' },
+                { text: 'Дополнительные работы ', link: '/security/Cloud-SA/compond-SA/work.md' },
+              ]
+            },          
+            { text: 'Качественные характеристики сервиса', link: '/security/Cloud-SA/characteristics.md' },
+            { text: 'Инструкции для начала работы с сревисом', link: '/security/Cloud-SA/instructions.md' },
+            { text: 'Порядок платежей', link: '/security/Cloud-SA/payment-procedure.md' },
+            { text: 'Сроки и условия предоставления сервиса', link: '/security/Cloud-SA/provision.md' },
+          ]
+      },  
+      {
+        text: 'Cloud Vulnerability Scanner (VS)', link: '/security/Cloud-VS/VS-index.md',
+        collapsed: true,
+        items: [  
+          { text: 'Обзор сервиса VS', link: '/security/Cloud-VS/about.md'},          
+          { text: 'Варианты предоставления сервиса', link: '/security/Cloud-VS/provision-service.md' },
+          { text: 'Мониторинг работоспособности и отказоустойчивость сервиса', link: '/security/Cloud-VS/monitoring.md' },
+          { text: 'Состав работ', link: '/security/Cloud-VS/scope-work.md' },
+          { text: 'Дополнительные работы', link: '/security/Cloud-VS/work.md' },
+          { text: 'Зоны ответсвенности', link: '/security/Cloud-VS/areas-responsibility.md' },
+          { text: 'Качественные характеристики сервиса', link: '/security/Cloud-VS/characteristics.md' },   
+          { text: 'Сроки предоставления сервиса', link: '/security/Cloud-VS/provision.md' },
+          { text: 'Порядок платежей', link: '/security/Cloud-VS/payment-procedure.md' },
+        ]
+      }, 
+      { 
+        text: 'Cloud Mobile Device Management (MDM)', link: '/security/Cloud-MDM/MDM-index.md',
+        collapsed: true,
+        items: [  
+          { text: 'Обзор сервиса', link: '/security/Cloud-MDM/about.md' },
+          {
+            text: 'Описание сервиса MDM', link: '/security/Cloud-MDM/description/description-index.md',
+            collapsed: true,
+            items: [  
+              { text: 'Состав сервиса', link: '/security/Cloud-MDM/description/compound.md' },
+              { text: 'Архитектура сервиса', link: '/security/Cloud-MDM/description/architecture.md' },
+              { text: 'Зоны ответственности', link: '/security/Cloud-MDM/description/areas-responsibility.md' },
+              { text: 'Мониторинг работоспособности и отказоустойчивость сервиса', link: '/security/Cloud-MDM/description/monitoring.md' },
+              { text: 'Дополнительные работы', link: '/security/Cloud-MDM/description/work.md' },
+            ]
+          },
+          { text: 'Качественные характеристики сервиса', link: '/security/Cloud-MDM/characteristics.md' },
+          { text: 'Сроки и условия предоставления сервиса', link: '/security/Cloud-MDM/provision.md' },
+          { text: 'Порядок платежей', link: '/security/Cloud-MDM/payments.md' },
+          {
+            text: 'Инструкиця', link: '/security/Cloud-MDM/instructions/index.md',
+            collapsed: true,
+            items: [
+              { text: 'Инструкция', link: '/security/Cloud-MDM/instructions/instructions.md' },
+              { text: 'Активация учетной записи', link: '/security/Cloud-MDM/instructions/activation.md' },
+              { text: 'Режим Device Owner', link: '/security/Cloud-MDM/instructions/device-owner.md' },
+            ]
+          },
+        ],
+      },
+      {
+        text: 'Cloud NGFW', link: '/security/Cloud-NGFW/NGFW-index.md',
+        collapsed: true,
+        items: [  
+          { text: 'Обзор сервиса', link: '/security/Cloud-NGFW/about.md'},          
+          { text: 'Основные возможности', link: '/security/Cloud-NGFW/possibilities.md' },
+          { text: 'Спецификация сервиса', link: '/security/Cloud-NGFW/specification.md' },
+          { text: 'Состав сервиса', link: '/security/Cloud-NGFW/compound.md' },
+          { text: 'Сроки и условия предоставления сервиса. Зоны ответственности', link: '/security/Cloud-NGFW/provision.md' },
+          { text: 'Структура платежей', link: '/security/Cloud-NGFW/payment.md' },
+        ]
+      },
+      {
+        text: 'Cloud NGFW F', link: '/security/Cloud-NGFW-F/NGFW-F-index.md',
+        collapsed: true,
+        items: [
+          { text: 'Обзор сервиса', link: '/security/Cloud-NGFW-F/about.md'},
+          { text: 'Порядок подключения сервиса', link: '/security/Cloud-NGFW-F/connection.md' },
+          { text: 'Варианты предоставления', link: '/security/Cloud-NGFW-F/delivery-options.md' },
+          { text: 'Состав сервиса', link: '/security/Cloud-NGFW-F/compound.md' },
+          { text: 'Функциональные возможности', link: '/security/Cloud-NGFW-F/functional-capabilities.md' },
+          { text: 'Порядок платежей', link: '/security/Cloud-NGFW-F/payment.md' },
+          { text: 'Тестирование сервиса', link: '/security/Cloud-NGFW-F/testing.md' },
+        ]
+      },
+      {
+        text: 'Cloud NGFW Pro', link: '/security/Cloud-NGFW-Pro/NGFW-Pro-index.md',
+        collapsed: true,
+        items: [
+          { text: 'Обзор сервиса', link: '/security/Cloud-NGFW-Pro/about.md'},
+          { text: 'Основные возможности', link: '/security/Cloud-NGFW-Pro/possibilities.md' },
+          { text: 'Спецификация сервиса', link: '/security/Cloud-NGFW-Pro/specification.md' },
+          { text: 'Состав сервиса', link: '/security/Cloud-NGFW-Pro/compound.md' },
+          { text: 'Сроки и условия предоставления сервиса', link: '/security/Cloud-NGFW-Pro/provision.md' },
+          { text: 'Демодоступ к сервису', link: '/security/Cloud-NGFW-Pro/demo-access.md' },
+          { text: 'Порядок платежей', link: '/security/Cloud-NGFW-Pro/payment.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'},
+    //        ]
+    //   },
+    // ],
+
+
+    '/PostgreSQL/': [
+      {
+        text: 'Начало работы в Cloud PostgreSQL', link: '/PostgreSQL/PostgreSQL-index.md',
+      },
+      {
+        text: 'Cloud PostgreSQL', link: '/PostgreSQL/service/service-index.md',
+        collapsed: true,
+        items: [
+          {text: 'Обзор сервиса', link: '/PostgreSQL/service/about.md'}, 
+          {text: 'Описание технических параметров', link: '/PostgreSQL/service/cluster-parameter.md'},
+          {text: 'Общая схема подключения', link: '/PostgreSQL/service/connection.md'},
+          {text: 'Возможности пользователя', link: '/PostgreSQL/service/user-capabilities.md'},
+          {text: 'Веб-интерфейс pgAdmin', link: '/PostgreSQL/service/pgadmin.md'}, 
+          {text: 'Веб-интерфейс Grafana', link: '/PostgreSQL/service/grafana.md'},
+        ],
+      },  
+      {text: 'IPSEC', link: '/PostgreSQL/IPSEC.md'},
+      {text: 'Cloud Interconnect', wip: true },
+      {text: '1C', wip: true },
+    ],
+
+
+    '/Deckhouse/': [    
+      { text: 'Deckhouse', link: '/Deckhouse/index.md',
+        collapsed: true,
+        items: [
+          {text: 'Обзор сервиса', link: '/Deckhouse/about.md'},
+          {text: 'Права и возможности пользователей', link: '/Deckhouse/user-permissions.md'},
+          {text: 'Описание технических параметров', link: '/Deckhouse/technical-parameters.md'},
+          {text: 'Подключение к сервису', link: '/Deckhouse/connection.md'}
+        ]
+      },
+    ],
+
+
+    '/Apache-Kafka/': [    
+      { text: 'Apache-Kafka', link: '/Apache-Kafka/Kafka-index.md',
+        collapsed: true,
+        items: [
+          {text: 'Обзор сервиса', link: '/Apache-Kafka/about-service.md'}, 
+          {text: 'Работа с кластером Kafka по тарифу Base', link: '/Apache-Kafka/base-tier-connection.md'},
+          {text: 'Настройка топика по тарифу Base', link: '/Apache-Kafka/base-tier-topics-guide.md'},
+          {text: 'Конфигурация кластера', link: '/Apache-Kafka/cluster-configuretion.md'},
+          {text: 'Работа с кластером Kafka по тарифу Full', link: '/Apache-Kafka/full-tier-connection.md'}, 
+        ],
+      }  
+    ],
+
+
+    '/finance/': [
+      { text: 'Финансы', link: '/finance/about.md' },
+      { text: 'Счета', wip: true },
+      { text: 'Анализ затрат', link: '/finance/cost-analysis.md' },
+      { text: 'Бюджеты', wip: true },
+      { text: 'Прогнозирование', wip: true },
+      { text: 'Рекомендации', wip: true },
+      { text: 'Управление тегами', wip: true },
+    ],
+
+
+    '/vdc/': [
+      {
+        text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
+      },
+      {
+        text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
+        collapsed: true,
+            items: [  
+          { text: 'О сервисе', link: '/vdc/vdc-about.md' },
+          { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
+         ]
+      },
+      { text: 'Подключиться к виртуальному дата-центру', link: '/vdc/vdc-getting-started.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: 'Диски',
+            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: 'Настройка IPSec VPN', link: '/vdc/vdc-how-to/networks/ipsec/setup-ipsec-vpn.md'},
+                  {text: 'Настройка ASAv для IPsec VPN', link: '/vdc/vdc-how-to/networks/ipsec/asav.md'},
+                  {text: 'Настройка CSR 1000v для IPsec VPN', link: '/vdc/vdc-how-to/networks/ipsec/csr1000v.md'},
+                  {text: 'Настройка Fortigate для IPsec VPN', 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' },
+      '/monitoring/': [
+      {
+        text: 'Мониторинг', link: '/monitoring/about.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

@@ -5,11 +5,13 @@ import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
 import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue'
 import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'
+import SectionLinkList from './SectionLinkList/SectionLinkList.vue'
 
 const { theme } = useData()
 
 const route = useRoute()
 const { hasSidebar, hasAside, leftAside } = useSidebar()
+const { frontmatter } = useData()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
@@ -17,10 +19,7 @@ const pageName = computed(() =>
 </script>
 
 <template>
-  <div
-    class="VPDoc CustomDoc"
-    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
-  >
+  <div class="VPDoc CustomDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }">
     <slot name="doc-top" />
     <div class="container">
       <div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
@@ -28,12 +27,24 @@ const pageName = computed(() =>
         <div class="aside-container">
           <div class="aside-content">
             <VPDocAside>
-              <template #aside-top><slot name="aside-top" /></template>
-              <template #aside-bottom><slot name="aside-bottom" /></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-top>
+                <slot name="aside-top" />
+              </template>
+              <template #aside-bottom>
+                <slot name="aside-bottom" />
+              </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>
             </VPDocAside>
           </div>
         </div>
@@ -43,16 +54,18 @@ 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>
-            <template #doc-footer-before><slot name="doc-footer-before" /></template>
+            <template #doc-footer-before>
+              <slot name="doc-footer-before" />
+            </template>
           </VPDocFooter>
           <slot name="doc-after" />
         </div>
@@ -62,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 {
@@ -169,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

@@ -44,8 +44,21 @@ watch(
 
       <slot name="sidebar-nav-before" />
 
-      <div v-for="item in sidebarGroups" :key="item.text" class="group">
-        <VPSidebarItem :item="item" :depth="0" />
+      <div v-for="group in sidebarGroups" :key="group.text ?? ''" class="group">
+        <!-- Named group with collapsible items — render via VPSidebarItem as-is -->
+        <template v-if="group.items && group.text">
+          <VPSidebarItem :item="group" :depth="0" />
+        </template>
+        <!-- Anonymous group (flat sidebar) — render items one by one to handle WIP -->
+        <template v-else-if="group.items">
+          <template v-for="item in group.items" :key="item.text">
+            <div v-if="(item as any).wip" class="wip-item" data-tooltip="Раздел в разработке">
+              <span class="text">{{ item.text }}</span>
+            </div>
+            <VPSidebarItem v-else :item="item" :depth="0" />
+          </template>
+        </template>
+        <VPSidebarItem v-else :item="group" :depth="0" />
       </div>
 
       <slot name="sidebar-nav-after" />
@@ -60,9 +73,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 +100,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 +108,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 +124,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/components/SectionLinkList/SectionLinkList.types.ts

@@ -0,0 +1,9 @@
+export type SectionLinkListItem = {
+  title: string,
+  link: string,
+  description?: string
+}
+
+export type SectionLinkListProps = {
+  links: SectionLinkListItem[]
+}

src/.vitepress/theme/components/SectionLinkList/SectionLinkList.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="$style.SectionLinkList">
+    <div v-for="link in links" :key="link.title" :class="$style.SectionLinkListItem">
+      <div :class="$style.SectionLinkListLink">
+        <VPLink :href="link.link">{{ link.title }}</VPLink>
+      </div>
+      <div :class="$style.SectionLinkListDescription">
+        {{ link.description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
+import { SectionLinkListProps } from './SectionLinkList.types'
+
+defineProps<SectionLinkListProps>()
+
+</script>
+
+<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";
+
+.SectionLinkList {
+  $el: &;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
+  margin-top: sizes.$size-spacing-x10;
+
+  &Item {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x2;
+    // max-width: 315px;
+  }
+
+  &Link {
+
+    a,
+    a:hover,
+    a:visited,
+    a:active {
+      color: themes.$color-text-link;
+      text-decoration: none;
+      @include mixin.subtitle3;
+    }
+  }
+
+  &Description {
+    color: themes.$color-text-inactive;
+    @include mixin.body3;
+  }
+}
+</style>

src/.vitepress/theme/constants.ts

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

src/.vitepress/theme/scss/components/SectionLinkList.scss

@@ -0,0 +1,27 @@
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+
+.SectionLinkList {
+  $el: &;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
+  margin-top: sizes.$size-spacing-x10;
+
+  &__Item {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x2;
+    max-width: 315px;
+  }
+
+  &__Link {
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &__Description {
+    color: themes.$color-text-inactive;
+  }
+}

src/.vitepress/theme/scss/components/_index.scss

@@ -1,4 +1,5 @@
-@use "vp-doc.scss";
-@use "vp-custom-block.scss";
-@use "vp-doc-aside.scss";
-@use "vp-sidebar.scss";
+@use "vp-doc";
+@use "vp-custom-block";
+@use "vp-doc-aside";
+@use "vp-sidebar";
+@use "SectionLinkList";

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,138 +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: 50px;
+// 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: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: -30px;
-    }
+// Code
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}
 
-    ol li::before {
-        content: counter(list);
-        counter-increment: list;
-        display: inline-flex;
-        position: absolute;
-        top: 0;
-        left: -48px;
-        width: 35px;
-        height: 35px;
-        background-color: #7e00ed;
-        color: #fff;
-        text-align: center;
-        line-height: 25px;
-        font-size: 16px;
-        border-radius: 50%;
-        justify-content: center;
-        align-items: center;
-    }
+.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;
+}
 
-    ul li:nth-last-of-type(n):after {
-        content: none;
-    }
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
 
-    ol ul li::before {
-        counter-increment: list;
-        content: none;
-        margin: 0;
-        padding: 0;
-    }
+.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,157 @@
+@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;
+}
+
+.wip-item {
+  position: relative;
+  padding: 12px 32px;
+  cursor: default;
+  user-select: none;
+
+  .text {
+    color: rgba(25, 28, 52, 0.28) !important;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+  }
+
+  &::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 32px;
+    top: calc(100% + 4px);
+    z-index: 100;
+    padding: 6px 10px;
+    border-radius: 6px;
+    background-color: rgba(9, 11, 22, 0.82);
+    color: #fff;
+    font-size: 13px;
+    line-height: 18px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0s;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+}
+
+.dark .wip-item .text {
+  color: rgba(255, 255, 255, 0.22) !important;
+}
+
+.VPLocalNav.has-sidebar {
+  @include media.max(sm) {
+    padding-left: 0px;
+  }
 }

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

@@ -1,3 +1,14 @@
+@use '@beeline/design-tokens/scss/font-face' with (
+  $font-path-beeline-sans: '/fonts/beeline-sans',
+  $font-path-roboto-mono: '/fonts/roboto-mono'
+);
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+@use '@beeline/design-tokens/scss/tokens/themes';
+
 :root {
     --color-text-active: rgba(9, 11, 22, 0.94);
     --color-text-inactive: rgba(25, 28, 52, 0.7);
@@ -7,9 +18,13 @@
     --color-button-contained-background-color: #fdd835;
     --color-button-contained-hover-background-color: #fdc435;
     --color-button-contained-text-color: rgba(9, 11, 22, 0.94);
+
+    @include themes.theme();
 }
 
 .dark {
     --color-text-active: rgba(255, 255, 255, 0.87);
     --color-text-inactive: rgba(255, 255, 255, 0.6);
+
+    @include themes.theme(dark.$theme);
 }

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.scss";
-@use "design-system.scss";
-@use "vars.scss";
+@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/Apache-Kafka/Kafka-index.md

@@ -0,0 +1,22 @@
+---
+section_links:
+  - title: Назначение сервиса
+    link: /Apache-Kafka/about-service.md
+    description: Назначения и преимущества сервиса
+  - title: Работа с кластером Kafka по тарифу Base
+    link: /Apache-Kafka/base-tier-connection.md
+    description: Подключение и работа с кластером Kafka по тарифу Base
+  - title: Настройка топика по тарифу Base
+    link: /Apache-Kafka/base-tier-topics-guide.md
+    description: Рекомендации по настройке топика Kafka по тарифу Base
+  - title: Конфигурация кластера 
+    link: /Apache-Kafka/cluster-configuretion.md
+    description: Конфигурации и возможности кластера Kafka
+  - title: Работа с кластером Kafka по тарифу Full
+    link: /Apache-Kafka/full-tier-connection.md
+    description: Подключение и работа с кластером Kafka по тарифу Full
+---    
+
+# Apache-Kafka
+
+В данном разделе представлена документация по управляемому сервису **Apache-Kafka** платформы Beeline Cloud. 

src/Apache-Kafka/about-service.md

@@ -0,0 +1,75 @@
+# Назначение сервиса
+
+Данный сервис предназначен для команд, которым требуется надёжный и масштабируемый конвейер данных без необходимости самостоятельно разворачивать и обслуживать инфраструктуру Kafka.
+
+**Apache Kafka** - это распределённая система для потоковой передачи данных в реальном времени. Сервис обеспечивает надёжную и масштабируемую доставку сообщений между компонентами приложений, гарантируя отказоустойчивость и высокую производительность.
+
+В архитектуре современных информационных систем Kafka выполняет роль централизованного конвейера данных: одни сервисы (продюсеры) публикуют сообщения, а другие (консьюмеры) получают эти сообщения по мере необходимости.
+
+## Основные понятия
+
+| Термин                         | Описание |
+|--------------------------------|----------|
+| **Продюсер (Producer)**        | Программный компонент, который отправляет данные в Kafka. Продюсером может выступать любой сервис, генерирующий события: модуль приложения, система логирования, датчик IoT-устройства. |
+| **Консьюмер (Consumer)**       | Программный компонент, который получает данные из Kafka. Консьюмер подписывается на интересующие его события и обрабатывает поступающие сообщения. |
+| **Топик (Topic)**              | Именованный канал для хранения сообщений определённого типа. Топики организуют потоки данных по смыслу: например, «заказы», «ошибки», «события авторизации». Консьюмеры подписываются на один или несколько топиков для получения релевантных данных. |
+| **Партиция (Partition)**       | Каждый топик разделяется на партиции - логические сегменты, распределяемые между серверами кластера. Партиции обеспечивают параллельную обработку данных: различные части одного топика могут обрабатываться одновременно несколькими консьюмерами. |
+| **Репликация (Replication)**   | Для обеспечения отказоустойчивости партиции копируются на несколько серверов (брокеров). При выходе одного сервера из строя данные остаются доступными на других узлах кластера. |
+| **Микросервисная архитектура** | Kafka является стандартным решением для организации связи между микросервисами. В такой архитектуре сервисы обмениваются событиями асинхронно, что повышает надёжность и масштабируемость системы в целом. |
+
+## Преимущества управляемого сервиса
+
+#### Администрирование
+
+Клиенту не требуется самостоятельно разворачивать и обслуживать кластер Kafka. Сервис включает в себя управление инфраструктурой, обновление версий, масштабирование и поддержку работоспособности.
+
+#### Мониторинг
+
+Предоставляются готовые дашборды в Grafana с визуализацией ключевых метрик:
+
+- состояние брокеров;
+- нагрузка на кластер;
+- настроенная система оповещений о критических событиях;
+- заполнение дискового пространства.
+
+#### Безопасность
+
+Поддерживается шифрованное подключение к кластеру с использованием SSL/TLS-сертификатов, что гарантирует защиту данных при передаче.
+
+#### Экспертная поддержка
+
+Сервис создан с учётом практического опыта администрирования более 500 кластеров Kafka. Накопленная экспертиза позволяет обеспечивать стабильность работы, своевременно выявлять и устранять потенциальные проблемы, оптимизировать конфигурации под конкретные задачи.
+
+## Тарифные планы
+
+### 1. Тариф "Base"
+
+Тарифный план для тех, кто имеет собственную экспертизу в работе с Kafka и желает самостоятельно управлять объектами верхнего уровня.
+
+**Обязательства провайдера:**
+
+- поддержка инсталляции кластера;
+- своевременное обновление версий Kafka;
+- расширение вычислительных ресурсов кластера по запросу клиента.
+
+**Возможности:**
+
+- **Управление учетными записями и правами доступа** – создание пользователей и настройка их прав для работы с Kafka;
+- **Администрирование топиков** - полный цикл управления: создание, конфигурирование, настройка параметров и удаление;
+- **Управление консьюмер-группами (Consumer Groups)** – возможность создавать, изменять и удалять логические объединения консьюмеров, которые совместно читают сообщения из топиков. Это обеспечивает высокую производительность и отказоустойчивость при обработке данных;
+- **Работа с transactional ID** – полный цикл управления транзакционными идентификаторами (создание, изменение, удаление). Транзакционный идентификатор присваивается продюсеру Kafka для обеспечения атомарности операций: запись нескольких сообщений или коммит оффсетов выполняются по принципу «всё или ничего», а также предотвращается появление «зомби-продюсеров» при перезапусках.
+
+Инфраструктурное ядро кластера (брокеры, репликация, отказоустойчивость) остаётся под управлением провайдера.
+
+### 2. Тариф "Full"
+
+Тарифный план для тех, кто предпочитает полностью делегировать задачи по администрированию Kafka.
+
+**Обязательства провайдера:**
+
+- полное управление кластером;
+- администрирование топиков;
+- управление консьюмер-группами;
+- работа с transactional id.
+
+Kafka используется как готовый сервис, не вовлекаясь в вопросы настройки и обслуживания.

src/Apache-Kafka/base-tier-connection.md

@@ -0,0 +1,244 @@
+# Подключение и работа с кластером Kafka (тариф Base)
+
+Раздел содержит описание способов подключения к управлению кластером Kafka. Поддерживаются два типа подключения:
+- `SASL_PLAINTEXT` - незашифрованное;
+- `SASL_SSL` - зашифрованное (через SSL-сертификат).
+
+Также в разделе приведены примеры работы с клиентскими утилитами и базовые операции администрирования.
+
+## Предварительные требования
+
+Для начала работы с кластером Kafka необходимо выполнить предварительную настройку:
+
+1. **Установить клиент Kafka** - скачивается дистрибутив Kafka (например, kafka_2.13-4.2.0) и распаковывается в удобную директорию;
+2. **Установить среду выполнения Java** - для работы необходимо установить среду выполнения, с помощью команды: `sudo apt install openjdk-17-jre-headless`. Рекомендуется использовать версию OpenJDK 17 или выше;
+3. **Доступ к брокерам** - адреса брокеров (bootstrap servers) предоставляются после развертывания кластера;
+4. **Учетные данные**:
+    - **Имя пользователя (username)** - стандартное значение client;
+    - **Пароль** - предоставляется после развертывания кластера.
+5. **Корневой сертификат (для SSL-подключения)** - сертификат для зашифрованного подключения предоставляется файлом при заказе сервиса Kafka.
+
+## Структура клиентского дистрибутива
+
+После распаковки архива Kafka в директории bin доступны основные скрипты для управления:
+
+| Скрипт                      | Назначение                                         |
+| --------------------------- | -------------------------------------------------- |
+| `kafka-topics.sh`           | Управление топиками (создание, удаление, просмотр) |
+| `kafka-console-producer.sh` | Отправка сообщений в топик                         |
+| `kafka-console-consumer.sh` | Чтение сообщений из топика                         |
+| `kafka-consumer-groups.sh`  | Управление консьюмер-группами                      |
+| `kafka-configs.sh`          | Изменение конфигурации топиков и других объектов   |
+| `kafka-acls.sh`             | Управление списками доступа (ACL)                  |
+
+В разделе ниже приведены примеры использования скриптов.
+
+Подробное описание операций с данными и другими скриптами приведено в [официальной документации Kafka](https://kafka.apache.org/42/getting-started/introduction/). Дополнительную информацию можно получить, выполнив любой скрипт с флагом --help:
+
+```
+./kafka-topics.sh --help
+```
+
+#### Конфигурационные файлы клиента
+
+Для подключения к Kafka используется файл настроек **client.properties**, который содержит параметры аутентификации, протокола и его механизмов (рекомендуются SCRAM_SHA_512 и SCRAM_SHA_256).
+
+## Незашифрованное подключение (SASL_PLAINTEXT)
+
+Создается файл **client.properties** со следующим содержимым:
+
+```
+sasl.mechanism=SCRAM-SHA-512
+security.protocol=SASLPLAINTEXT
+sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule required \
+    username="client" \
+    password="вашпароль";
+```
+
+::: warning Примечание
+Для незашифрованного подключения (SASL_PLAINTEXT) используется порт 9091;
+:::
+
+## Зашифрованное подключение (SASL_SSL)
+
+Для зашифрованного подключения (в production-средах рекомендуется использовать именно его) дополнительно требуется корневой сертификат и хранилище доверенных сертификатов (truststore).
+
+::: warning Примечание
+Для зашифрованного подключения (SASL_SSL) используется порт 9092.
+:::
+
+### Шаг 1. Создание truststore
+
+С помощью утилиты **keytool** выполняется импорт сертификата в хранилище:
+
+```
+keytool -importcert -storetype PKCS12 -keystore /путь/к/трастстору/truststore.jks -alias myalias -file ca.crt -storepass любойвашпароль -keypass любойвашпароль
+```
+
+Параметры:
+
+- **keystore** - путь к создаваемому хранилищу;
+- **alias** - псевдоним сертификата в хранилище;
+- **file** - путь к загруженному корневому сертификату;
+- **storepass** - пароль для доступа к хранилищу;
+- **keypass** - пароль для доступа к ключу.
+
+### Шаг 2. Настройка client.properties
+
+В файл **client.properties** добавляются параметры SSL:
+
+```
+sasl.mechanism=SCRAM-SHA-512
+security.protocol=SASLSSL
+sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule required \
+    username="client" \
+    password="вашпароль";
+ssl.truststore.location=/путь/к/трастстору/truststore.jks
+ssl.truststore.password=парольотхранилища
+```
+
+## Работа с кластером Kafka
+
+### Создание топиков
+
+```
+./kafka-topics.sh --bootstrap-server <IP машины 0>:9092,<IP машины 1>:9092,<IP машины X>:9092 --command-config ../config/client.properties --create --topic <имя топика> --partitions <количество партиций> --replication-factor <значение> --config min.insync.replicas=<значение>
+```
+
+**Ознакомиться с рекомендациями по настройке топиков можно в разделе [Настройка топиков](./base-tier-topics-guide.md).**
+
+По умолчанию топик создаётся с --partitions 10 --replication-factor 3 --config min.insync.replicas=2, поэтому, если нет необходимости создавать топик со специфическими настройками, эти флаги в команде можно не указывать.
+
+### Просмотр списка топиков
+
+Выполняется команда с указанием брокеров и файла конфигурации:
+
+```
+./kafka-topics.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_2>:9092 --command-config ~/client.properties --list
+```
+
+Параметры:
+
+- **bootstrap-server** - список брокеров кластера (адреса и порты);
+command-config - путь к файлу с настройками клиента;
+- **list** - вывод списка топиков.
+
+### Отправка сообщения в топик
+
+Выполняется команда с указанием брокеров, файла конфигурации и топика:
+
+```
+./kafka-console-producer.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_2>:9092 --command-config~/client.properties --topic test-topic
+```
+
+После выполнения команды сообщения вводятся построчно. Для завершения используется сочетание клавиш Ctrl+C.
+
+### Чтение сообщений из топика
+
+Выполняется команда с указанием топика и, при необходимости, consumer group:
+
+```
+./kafka-console-consumer.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_2>:9092 --command-config~/client.properties --topic test-topic --from-beginning --group my-new-consumer-group
+```
+
+Параметры:
+
+- **from-beginning**- чтение всех сообщений с начала (при отсутствии параметра чтение начинается с новых сообщений);
+- **group** - название consumer group, которая создастся автоматически.
+
+## Управление пользователями и доступом
+
+### Рекомендации к созданию пароля
+
+**Длина пароля (рекомендуемая):**
+
+- для учётной записи пользователя - не менее 12 знаков;
+- для учётных записей администраторов, технических и служебных учётных записей - не менее 16 знаков.
+
+**Сложность пароля:** рекомендуется использовать уникальный пароль, содержащий символы как минимум трёх из четырёх указанных ниже групп (при отсутствии технических ограничений):
+
+- буквы латинского алфавита в верхнем регистре (A-Z);
+- буквы латинского алфавита в нижнем регистре (a-z);
+- цифры (0-9);
+- специальные символы и знаки пунктуации (например, `!@#$%^&*(),.?`).
+
+**Периодичность смены:** рекомендуемая периодичность смены пароля - не реже одного раза в год.
+
+### Создание пользователей
+
+Для удобства можно написать скрипт, который создает пользователя сразу для двух методов шифрования - SHA-256 и SHA-512:
+
+```
+#!/bin/bash
+username="имя_пользователя"
+password="сгенерированный_пароль"
+bootstrap="<IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_X>:9092"
+
+/opt/kafka/bin/kafka-configs.sh \
+          --bootstrap-server $bootstrap \
+          --alter \
+          --add-config SCRAM-SHA-256=[password="$password"] \
+          --command-config /opt/kafka/config/client.properties \
+          --entity-type users \
+          --entity-name $username
+
+/opt/kafka/bin/kafka-configs.sh \
+          --bootstrap-server $bootstrap \
+          --alter \
+          --add-config SCRAM-SHA-512=[password="$password"] \
+          --command-config /opt/kafka/config/client.properties \
+          --entity-type users \
+          --entity-name $username
+```
+
+**Запуск скрипта:**
+
+```
+sudo ./kafka-user-add.sh
+```
+
+### Просмотр данных о пользователе
+
+Для просмотра информации о существующих пользователях выполняется команда:
+
+```
+sudo ./kafka-console-consumer.sh --bootstrap-server <IP_брокеров>:9092 --describe --command-config ../config/client.properties --entity-type users
+```
+
+### Управление consumer groups
+
+Consumer Group создается автоматически при обращении к ней. Например, при чтении сообщений из топика с указанием этой consumer group:
+
+```
+sudo ./kafka-console-consumer.sh --bootstrap-server <IP_брокеров>:9092 --command-config ../config/client.properties --topic test-topic --group test-group --from-beginning
+```
+
+### Просмотр списка ACL
+
+Действия с ACL из командной строки осуществляются скриптом kafka-acls.sh. Пример просмотра списка ACL:
+
+```
+sudo ./kafka-acls.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_X>:9092 --command-config ../config/client.properties --list
+```
+
+## Администрирование кластера
+
+#### Изменение объема RAM
+
+Для изменения объема оперативной памяти, выделенной под Kafka, направляется обращение в техническую поддержку с указанием требуемого объема RAM.
+
+#### Изменение количества брокеров
+
+Выполняется также через обращение в техническую поддержку.
+
+Брокеров в кластере рекомендуется поддерживать **нечетным** для корректной работы механизмов выборов лидера.
+
+После добавления брокера выполняется перераспределение существующих партиций с учетом нового узла с помощью утилиты **kafka-reassign-partitions.sh:**
+
+```
+./kafka-reassign-partitions.sh --bootstrap-server <адреса_брокеров> --generate --topics-to-move-json-file topics.json --broker-list "0,1,2" --execute
+```
+
+::: warning Примечание
+Операция перераспределения партиций требует времени и может создавать дополнительную нагрузку на кластер. Выполнение рекомендуется в период наименьшей активности.
+:::

src/Apache-Kafka/base-tier-topics-guide.md

@@ -0,0 +1,64 @@
+# Рекомендации по настройке топика (тариф Base)
+
+В разделе описаны основные параметры топиков Apache Kafka, влияющие на производительность, отказоустойчивость и параллелизм обработки данных.
+
+## Базовые параметры топика
+
+### Имя топика
+
+При именовании топика применяются следующие правила:
+
+**Допустимые символы:**
+- первый символ — буква (a–z, A–Z), цифра (0–9) или подчёркивание (_);
+- последующие символы — буквы, цифры, точки (.), дефисы (-) или подчёркивания;
+- длина имени — от 3 до 200 символов.
+
+**Ограничения:**
+- имя топика нельзя изменить после создания;
+- не рекомендуется использовать имена, различающиеся только точкой и подчёркиванием (например, `topic_1` и `topic.1`): Kafka не различает такие названия;
+- имена с двойным подчёркиванием в начале (например, `__consumer_offsets`) зарезервированы для внутренних топиков Kafka.
+
+### Количество партиций (partitions)
+
+Партиции определяют уровень параллелизма при чтении и записи данных. Количество партиций выбирается исходя из требуемой пропускной способности.
+
+**Правила:**
+- количество партиций можно только увеличивать (уменьшение невозможно);
+- при наличии нескольких брокеров рекомендуется выбирать число партиций, кратное количеству брокеров — для равномерного распределения нагрузки;
+- рекомендуется мониторить отставание потребителей (consumer lag) и при необходимости увеличивать число партиций.
+
+**Расчет количества партиций:**
+Количество партиций определяется по формуле:
+
+```
+Partitions = max(NP, NC)
+```
+где:
+- NP = TT / TP - количество необходимых продюсеров;
+- NC = TT / TC - количество необходимых консьюмеров;
+- TT - общая ожидаемая пропускная способность системы;
+- TP - максимальная пропускная способность одного продюсера для одной партиции;
+- TC - максимальная пропускная способность одного консьюмера для одной партиции.
+
+## Фактор репликации (replication-factor)
+
+Фактор репликации определяет количество копий данных, хранящихся на разных брокерах.
+
+**Рекомендация для production-сред:** установите значение **3**.  
+При этом каждая партиция получает одного лидера и две реплики, что обеспечивает отказоустойчивость при выходе одного брокера.
+
+## Дополнительные параметры конфигурации
+
+Параметр `min.insync.replicas` (минимальное количество синхронизированных реплик) работает вместе с настройкой продюсера `acks=all`. Он задаёт, сколько реплик (включая лидера) должны подтвердить запись, чтобы она считалась успешной.
+
+**Для production-кластера с фактором репликации = 3**  
+Установите `min.insync.replicas = 2`.
+
+Что это даёт:
+
+- **надёжность** — данные точно попали минимум на два брокера;
+- **доступность** — если один брокер упадёт, запись продолжится.
+
+::: warning Примечание
+Не рекомендуется устанавливать значение равным фактору репликации (например, `min.insync.replicas = 3`). Если один брокер перезагрузится, запись в топик станет невозможной — система будет ждать подтверждения от всех трёх реплик, а одна недоступна.
+:::

src/Apache-Kafka/cluster-configuretion.md

@@ -0,0 +1,108 @@
+# Конфигурация кластера
+
+В разделе описаны технические параметры кластера Kafka и порядок их первичной настройки.
+
+Конфигурация выполняется администратором облачного провайдера на этапе развёртывания сервиса. Пользователь не имеет прямого доступа к изменению этих параметров. Перед созданием кластера клиент передаёт менеджеру перечень требуемых параметров. Администратор выполняет настройку в соответствии с согласованными требованиями.
+
+## Выбор типа и размера дискового хранилища
+
+Производительность брокера сообщений напрямую зависит от скорости чтения и записи на диск. При заказе кластера необходимо выбрать тип дискового хранилища — он определяет максимальную скорость работы (IOPS) и время отклика.
+
+**IOPS** (Input/Output Operations Per Second) — количество операций чтения или записи, которые диск выполняет за секунду. Чем выше IOPS, тем быстрее брокер обрабатывает запросы.
+
+::: warning Примечание
+Каждые 15 IOPS обеспечивают примерно 1 Мбит/с скорости чтения или записи при размере блока данных 64 КБ.
+:::
+
+### Доступные типы хранилищ:
+
+|Название       | Лимит IOPS         |
+|---------------|--------------------|
+|**Fast SAS**   | до 2 IOPS на 1 ГБ  |
+|**SSD**        | до 5 IOPS на 1 ГБ  |
+|**Fast SSD**   | до 10 IOPS на 1 ГБ |
+|**Ultra NVMe** | до 25 IOPS на 1 ГБ |
+
+::: warning Примечание
+После выбора типа диска необходимо указать объем дискового хранилища, который будет выделен под данные кластера Kafka. Минимальный объем зависит от выбранного типа хранилища
+:::
+
+## Конфигурация вычислительных ресурсов
+
+В данном разделе определяются вычислительные мощности кластера: процессорные ресурсы, оперативная память и количество серверов (нод), из которых будет состоять кластер Kafka.
+
+#### Основные понятия
+
+| Термин                        | Описание |
+|-------------------------------|----------|
+| **Количество нод в кластере** | Количество нод определяет отказоустойчивость кластера и возможность распределять запросы на чтение между репликами. Чем больше нод, тем выше надежность и производительность чтения. Количество нод выбирается в диапазоне от 3 до 14. |
+| **Процессор (CPU)**           | Процессор - это вычислительная мощность, которая выделяется каждой ноде кластера. Количество vCPU определяет, насколько быстро брокер сообщений сможет обрабатывать запросы, выполнять сложные операции (сортировки, объединения таблиц) и обслуживать одновременные подключения. Доступный диапазон выбора процессора: от 2 шт до 24 шт. |
+| **Оперативная память (RAM)**  | Оперативная память - один из ключевых ресурсов для производительности. Данные, помещающиеся в RAM, обрабатываются максимально быстро, без обращения к диску. Доступный диапазон выбора оперативной памяти: от 4 ГБ до 768 ГБ. |
+
+## Интернет
+
+При заказе сервиса можно выбрать пропускную способность канала связи, через который будет осуществляться доступ к кластеру Kafka из сети интернет.
+
+**Доступные варианты скорости:**
+
+- 50 Мбит/с;
+- 100 Мбит/с;
+- 200 Мбит/с;
+- 300 Мбит/с;
+- 400 Мбит/с;
+- 500 Мбит/с;
+- 1000 Мбит/с (1 Гбит/с).
+
+::: warning Примечание
+Для выбранного канала предоставляется **публичный IP-адрес**.
+:::
+
+## Сетевой доступ к кластеру
+
+Выбор способа подключения зависит от архитектуры приложений и требований к безопасности. Доступны два варианта:
+
+- **IPsec-подключение** — организация защищённого туннеля между инфраструктурой клиента и кластером Kafka. Подробнее см. раздел «IPsec»;
+- **Interconnect** — прямое сетевое соединение между сервисами внутри платформы без использования публичных сетей. Подробнее см. раздел «Interconnect».
+
+**Особенности Interconnect:**
+- сначала закажите PaaS-сервис и дождитесь его предоставления;
+- затем отдельно закажите Interconnect через менеджера.
+
+## Калькулятор расчёта кластера
+
+Для расчёта параметров кластера Kafka разработан специализированный калькулятор — простое веб-приложение.
+
+**Как работает:**
+- в калькулятор вносятся исходные данные о планируемой нагрузке (пропускная способность, количество партиций и т.д.);
+- после нажатия кнопки **«Получить»** автоматически рассчитывается конфигурация кластера.
+
+Все поля обязательны для заполнения. Формы можно удалять, добавлять и дублировать — это позволяет гибко настраивать параметры под разные сценарии использования.
+
+## Параметры топиков
+
+| Параметр                              |Описание |
+|---------------------------------------|---------|
+| **Имя топика**                        |Уникальное наименование топика в рамках кластера. Поле обязательное. Используется для идентификации топика при расчетах.|
+| **Число партиций**                    |Количество партиций, на которые будет разбит топик. Значение должно быть больше числа консьюмеров.|
+| **Фактор репликации**                 |Количество копий данных, хранящихся на разных брокерах. Для продуктивных кластеров рекомендуется значение не менее 3.  <br>**Примечание:** Количество узлов кластера формируется на основании параметра фактора репликации. Рекомендуется выбирать нечетное количество узлов для корректной работы механизмов выборов лидера.|
+| **Средний размер сообщения**          |Средний объем одного сообщения, передаваемого через топик.|
+| **Максимальный размер сообщения**     |Максимальный объем одного сообщения. Используется для расчета пиковых нагрузок.|
+| **Частота сообщений**                 |Количество сообщений, отправляемых в топик за единицу времени.|
+| **Срок хранения сообщения**           |Период времени, в течение которого сообщения хранятся в топике после записи. По истечении этого срока данные удаляются.|
+| **Имя продюсера**                     |Наименование приложения-отправителя (для идентификации в расчетах)|
+| **Количество экземпляров продюсера**  |Число одновременно работающих экземпляров продюсера.|
+| **Имя консьюмера**                    |Наименование приложения-получателя (для идентификации в расчетах).|
+| **Количество экземпляров консьюмера** |Число одновременно работающих экземпляров консьюмера.  <br>**Примечание:** Формы продюсеров и консьюмеров можно добавлять, удалять и дублировать. Это позволяет учитывать множественные источники и приемники данных в рамках одного расчета.|
+
+## Расчет конфигурации кластера
+
+После заполнения всех полей нажимается кнопка **Получить**. Все расчеты выполняются в соответствии с планированием ресурсов, указанных в официальной документации Apache Kafka.  
+В результате, рассчитанные параметры служат основой для формирования заказа на управляемый сервис Kafka.
+
+Калькулятор автоматически производит расчет следующих параметров:
+
+- **Количество узлов** - формируется на основании параметра фактора репликации (replication.factor). Рекомендуется выбирать нечетное количество узлов для корректной работы механизмов выборов лидера;
+- **vCPU** - вычисляется из планируемого количества входящих сообщений и масштабируется в зависимости от числа узлов: чем больше кластер, тем меньше требуется CPU на отдельный сервер благодаря распределению нагрузки;
+- **RAM** - рассчитывается с учетом количества партиций, объема сообщений и числа подключений продюсеров и консьюмеров;
+- **Тип и объем дискового хранилища** - определяется на основе среднего и максимального размера сообщения, частоты отправки, срока хранения и фактора репликации;
+- **Параметры репликации** - учитывают заданный фактор репликации и обеспечивают отказоустойчивость кластера.

src/Apache-Kafka/full-tier-connection.md

@@ -0,0 +1,138 @@
+# Подключение и работа с кластером Kafka (тариф Full)
+
+Раздел содержит описание способов подключения к управлению кластером Kafka. Поддерживаются два типа подключения:
+- `SASL_PLAINTEXT` - незашифрованное;
+- `SASL_SSL` - зашифрованное (через SSL-сертификат).
+
+Также в разделе приведены примеры работы с клиентскими утилитами и базовые операции администрирования.
+
+## Предварительные требования
+
+Для начала работы с кластером Kafka необходимо выполнить предварительную настройку:
+
+1. **Установить клиент Kafka** - скачивается дистрибутив Kafka (например, kafka_2.13-4.2.0) и распаковывается в удобную директорию;
+2. **Установить среду выполнения Java** - для работы необходимо установить среду выполнения, с помощью команды: `sudo apt install openjdk-17-jre-headless`. Рекомендуется использовать версию OpenJDK 17 или выше;
+3. **Доступ к брокерам** - адреса брокеров (bootstrap servers) предоставляются после развертывания кластера;
+4. **Учетные данные**:
+    - Имя пользователя (username) - стандартное значение client;
+    - Пароль - предоставляется после развертывания кластера.
+5. **Корневой сертификат (для SSL-подключения)** - сертификат для зашифрованного подключения предоставляется файлом при заказе сервиса Kafka.
+
+## Структура клиентского дистрибутива 
+
+После распаковки архива Kafka в директории bin доступны скрипты, например:
+
+| Скрипт                    | Назначение               |
+|---------------------------|--------------------------|
+|`kafka-console-producer.sh`|Отправка сообщений в топик|
+|`kafka-console-consumer.sh`|Чтение сообщений из топика|
+
+В разделе ниже приведены примеры использования скриптов.
+
+Подробное описание операций с данными и другими скриптами приведено в [официальной документации Kafka](https://kafka.apache.org/42/getting-started/introduction/). Дополнительную информацию можно получить, выполнив любой скрипт с флагом --help:
+
+```
+./kafka-console-producer.sh
+```
+
+## Конфигурационные файлы клиента
+
+Для подключения к Kafka используется файл настроек **client.properties**, который содержит параметры аутентификации, протокола и его механизмов (рекомендуются SCRAM_SHA_512 и SCRAM_SHA_256).
+
+### Незашифрованное подключение (SASL_PLAINTEXT)
+
+Создается файл client.properties со следующим содержимым:
+
+```
+sasl.mechanism=SCRAM-SHA-512
+security.protocol=SASLPLAINTEXT
+sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule required \
+    username="вашлогин" \
+    password="вашпароль";
+```
+
+::: warning Примечание
+Для незашифрованного подключения (SASL_PLAINTEXT) используется порт 9091;
+:::
+
+### Зашифрованное подключение (SASL_SSL)
+
+Для зашифрованного подключения (в production-средах рекомендуется использовать именно его) дополнительно требуется корневой сертификат и хранилище доверенных сертификатов (truststore).
+
+::: warning Примечание
+Для зашифрованного подключения (SASL_SSL) используется порт 9092.
+:::
+
+### Шаг 1. Создание truststore
+
+С помощью утилиты **keytool** выполняется импорт сертификата в хранилище:
+
+```
+keytool -importcert -storetype PKCS12 -keystore /путь/к/трастстору/truststore.jks -alias myalias -file ca.crt -storepass любойвашпароль -keypass любойвашпароль
+```
+
+Параметры:
+
+- **keystore** - путь к создаваемому хранилищу;
+- **alias** - псевдоним сертификата в хранилище;
+- **file** - путь к загруженному корневому сертификату;
+- **storepass** - пароль для доступа к хранилищу;
+- **keypass** - пароль для доступа к ключу.
+
+### Шаг 2. Настройка client.properties
+
+В файл **client.properties** добавляются параметры SSL:
+
+```
+sasl.mechanism=SCRAM-SHA-512
+security.protocol=SASLSSL
+sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule required \
+    username="вашлогин" \
+    password="вашпароль";
+ssl.truststore.location=/путь/к/трастстору/truststore.jks
+ssl.truststore.password=парольотхранилища
+```
+
+### Отправка сообщения в топик
+
+Выполняется команда с указанием брокеров, файла конфигурации и топика:
+
+```
+./kafka-console-producer.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_2>:9092 --command-config~/client.properties --topic test-topic
+```
+
+Параметры:
+
+- **bootstrap-server** - список брокеров кластера (адреса и порты);
+- **command-config** - путь к файлу с настройками клиента;
+
+После выполнения команды сообщения вводятся построчно. Для завершения используется сочетание клавиш Ctrl+C.
+
+### Чтение сообщений из топика
+
+Выполняется команда с указанием топика и, при необходимости, consumer group:
+
+```
+./kafka-console-consumer.sh --bootstrap-server <IP_брокера_0>:9092,<IP_брокера_1>:9092,<IP_брокера_2>:9092 --command-config~/client.properties --topic test-topic --from-beginning --group my-new-consumer-group
+```
+
+Параметры:
+
+- **from-beginning** - чтение всех сообщений с начала (при отсутствии параметра чтение начинается с новых сообщений);
+- **group** - название consumer group, которая при её указании создастся автоматически.
+
+## Администрирование кластера
+
+::: warning Примечание
+Для изменения параметров кластера Kafka (CPU, RAM, DISK, количества брокеров, параметров топиков) необходимо направить запрос в **Service Desk** по адресу `servicedesk@datafort.ru` с указанием требуемых значений.
+:::
+
+### Изменение количества брокеров
+
+Выполняется также через обращение в техническую поддержку.
+
+Брокеров в кластере рекомендуется поддерживать **нечетным** для корректной работы механизмов выборов лидера.
+
+::: warning Примечание
+Операция перераспределения партиций требует времени и может создавать дополнительную нагрузку на кластер. Выполнение рекомендуется в период наименьшей активности.
+:::

src/Deckhouse/about.md

@@ -0,0 +1,107 @@
+# Cloud Deckhouse Kubernetes
+
+## Назначение сервиса
+
+**Cloud Deckhouse Kubernetes** — это управляемый облачный сервис на базе платформы оркестрации контейнеров Kubernetes.
+
+Сервис автоматизирует настройку:
+- серверов;
+- сети;
+- балансировщиков нагрузки;
+- механизмов отказоустойчивости.
+
+Пользователю не нужно самостоятельно управлять инфраструктурой — кластер работает «из коробки».
+
+> **Kubernetes** - это платформа для оркестрации контейнеров, которая автоматизирует развертывание, масштабирование и управление приложениями.
+
+## Автоматизация сервис
+
+**Cloud Deckhouse Kubernetes** самостоятельно выполняет следующие операции:
+
+| Операция                     | Описание                                              |
+|------------------------------|-------------------------------------------------------|
+| Управление ролями узлов      | Назначает узлам роли master, frontend, system, worker |
+| Мониторинг компонентов       | Отслеживает состояние всех частей платформы           |
+| Восстановление после отказов | Автоматически перезапускает отказавшие узлы и поды    |
+
+## Архитектура и компоненты
+
+Для стабильной работы сервиса используются три ключевых компонента:
+
+- **Deckhouse** — платформа управления. Устанавливает, обновляет и настраивает кластер.
+- **etcd** — распределенное хранилище. Сохраняет состояние кластера и данные конфигурации.
+- **Балансировщики нагрузки** — единая точка входа. Направляют трафик к работающим приложениям.
+
+## Доступ к приложениям
+
+Подключение к приложениям внутри кластера выполняется через единую точку доступа. Подключаться к отдельным узлам не требуется.
+
+## Управление и мониторинг
+
+| Задача                                          | Инструмент            |
+|-------------------------------------------------|-----------------------|
+| Управление кластером и развертывание приложений | Веб-интерфейс Console |
+| Мониторинг состояния системы                    | Grafana               |
+
+## Отказоустойчивость
+
+Кластер поставляется в отказоустойчивой архитектуре, которая обеспечивает:
+
+- высокую доступность плоскости управления (control plane);  
+- автоматическое восстановление узлов при отказах.
+
+### Типы узлов кластера
+
+Кластер состоит из следующих типов виртуальных серверов:
+
+| Тип виртуального сервера        | Количество узлов | Назначение           |
+| ------------------------------- | ---------------- | -------------------- |
+| **Master-узлы (control plane)** | 3                | Обязательные узлы. На них работают управляющие компоненты кластера: API server, etcd, controller manager, scheduler. |
+| **System-узлы**                 | 2                | Служебные узлы. На них размещаются внутренние компоненты платформы Deckhouse, системы мониторинга (Prometheus, Grafana), логирования и другие вспомогательные сервисы, обеспечивающие работу кластера. |
+| **Frontend-узлы**               | 2                | Узлы, предназначенные для обработки входящего трафика. На них работают Ingress-контроллеры и балансировщики нагрузки, которые принимают запросы из внешней сети и распределяют их между приложениями, запущенными на worker-узлах. |
+| **Worker-узлы**                 | от 1 и более     | Узлы, на которых непосредственно выполняются пользовательские приложения в контейнерах. Именно здесь размещаются поды с сервисами и прикладными компонентами. |
+
+::: info Примечание
+По умолчанию кластер работает в высокодоступном режиме. Выход из строя одного или двух master-узлов не приводит к потере управления кластером.
+:::
+
+::: warning Важно
+Для тестовых сред возможна **одноузловая конфигурация control plane**. В этом случае отказ master-узла сделает кластер неуправляемым.
+:::
+
+## Доступ к кластеру
+
+Прямой доступ к серверам кластера (по SSH) не предоставляется.
+
+Управление приложениями и ресурсами кластера возможно через:  
+
+- **kubectl** — командная строка;
+- **веб-интерфейс Console**;
+- **API Kubernetes**.
+
+## Возможности сервиса
+
+**Cloud Deckhouse Kubernetes** предоставляет возможности, позволяющие использовать Kubernetes без самостоятельного администрирования инфраструктуры.
+
+Сервис обеспечивает:
+
+- автоматическое управление кластером (установка, обновление, настройка);  
+- высокую доступность control plane;  
+- единую точку входа в приложения;  
+- автоматическое восстановление при отказах;  
+- веб-доступ к управлению кластером и мониторингу;  
+- совместимость со стандартными инструментами (**kubectl**);  
+- автоматическое масштабирование приложений;  
+- блочные и сетевые хранилища для данных приложений (Persistent Volume).
+
+## Сценарии использования
+
+Сервис подходит для систем, где требуется надежная оркестрация контейнеров и упрощённое управление инфраструктурой.
+
+Примеры использования:
+
+- размещение production-приложений в контейнерах с высокими требованиями к доступности;  
+- микросервисная архитектура с единой точкой управления кластером;  
+- работа stateful-приложений (базы данных, очереди) с сохранением состояния;  
+- быстрое развёртывание Kubernetes-кластера без ручной настройки сети, хранилищ и мониторинга;  
+- администрирование через веб-интерфейс без прямого доступа к серверам.

src/Deckhouse/connection.md

@@ -0,0 +1,238 @@
+# Подключение к сервису Deckhouse
+
+В данном разделе описаны способы подключения к кластеру **Cloud Deckhouse Kubernetes**. Рассматривается работа с кластером через веб-интерфейс **Console**, а также управление через командную строку с использованием утилиты **kubectl** после генерации **kubeconfig**.
+
+## Предварительные требования
+
+После предоставления доступа к **сервису Cloud Deckhouse Kubernetes** пользователь получает возможность управлять кластером через веб-интерфейс **Console**.
+
+**Console** - это встроенный веб-интерфейс платформы Deckhouse, предназначенный для упрощения взаимодействия с Kubernetes-кластером.
+
+Он позволяет выполнять большинство операций, доступных в командной строке через **kubectl**, в визуальном режиме:
+- мониторинг состояния кластера;
+- управление узлами и модулями;
+- настройку безопасности и сети.
+
+## Вход в Console
+
+1. Откройте веб-браузер и перейдите по адресу, предоставленному для доступа к Console.
+
+::: info Примечание
+URL-адрес направляется пользователю на электронную почту при предоставлении доступа.
+:::
+
+2. На странице ввода учетных данных выполняется аутентификация при помощи логина и пароля;
+
+![Авторизация](images/authorization.png)
+
+3. После успешной аутентификации откроется главная страница веб-интерфейса Console.
+
+![Главная страница](images/home-page.png)
+
+## Основные разделы Console
+
+В левой боковой панели веб-интерфейса Console расположены основные разделы для управления кластером:
+
+| Раздел             | Назначение                                                                             |
+| ------------------ | -------------------------------------------------------------------------------------- |
+| **Deckhouse**      | Управление платформой Deckhouse: обзор, обновления, модули, глобальные настройки       |
+| **Проекты**        | Управление проектами, шаблонами проектов и namespace (пространствами имён)             |
+| **Узлы**           | Управление узлами кластера: группы узлов, конфигурации, классы машин, статические узлы |
+| **Конфигурация**   | Настройка Deschedulers и Priority Classes                                              |
+| **Доступ**         | Управление аутентификацией, сессиями пользователей, правами доступа (RBAC)             |
+| **Сеть**           | Настройка Egress-шлюзов, балансировки и управление сертификатами                       |
+| **Хранилище**      | Управление Persistent Volume, классами хранилищ и снимками томов                       |
+| **Безопасность**   | Настройка политик безопасности и операционных политик                                  |
+| **Мониторинг**     | Просмотр данных, дашбордов, активных алертов, настройка уведомлений и экспорт метрик   |
+| **Журналирование** | Управление отправкой и сбором логов                                                    |
+
+## Генерация kubeconfig через Console
+
+Помимо управления через веб-интерфейс, Console позволяет сгенерировать файл **kubeconfig** для доступа к кластеру через **kubectl**.
+
+1. На главной странице Console находится раздел «Инструменты» (Tools);  
+2. Необходимо выбрать пункт «Генератор kubeconfig» (Generate kubeconfig);  
+3. Нажимается кнопка генерации - система сгенерирует необходимые команды;  
+4. Далее, нужно скопировать и выполнить в терминале команды, которые сгенерированы для пользовательской учётной записи.
+
+::: info Примечание
+Сгенерированный **kubeconfig** уже содержит все необходимые параметры для подключения к API Kubernetes.
+:::
+
+## Примеры простейших команд kubectl
+
+После настройки **kubeconfig** управление кластером осуществляется через командную строку с помощью утилиты **kubectl**. Ниже приведены основные команды для начала работы.
+
+### Проверка подключения к кластеру
+
+```
+kubectl cluster-info
+```
+
+**Пример вывода:**
+
+```
+Kubernetes control plane is running at https://127.0.0.1:6445
+
+To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.
+```
+
+### Просмотр узлов кластера
+
+```
+kubectl get nodes
+```
+
+**Пример вывода:**
+
+```
+NAME                                STATUS   ROLES                  AGE   VERSION
+cloud-frontend-0                    Ready    frontend               12d   v1.32.10
+cloud-frontend-1                    Ready    frontend               12d   v1.32.10
+cloud-master-0                      Ready    control-plane,master   12d   v1.32.10
+cloud-master-1                      Ready    control-plane,master   12d   v1.32.10
+cloud-master-2                      Ready    control-plane,master   12d   v1.32.10
+cloud-system-0                      Ready    system                 12d   v1.32.10
+cloud-system-1                      Ready    system                 12d   v1.32.10
+cloud-worker-a374349e-zznfp-nkqr2   Ready    worker                 12d   v1.32.10
+cloud-worker-a374349e-zznfp-rdpdz   Ready    worker                 12d   v1.32.10
+```
+
+### Просмотр пространств имен
+
+```
+kubectl get namespaces
+```
+
+**Пример вывода:**
+
+```
+NAME                         STATUS   AGE
+d8-admission-policy-engine   Active   12d
+d8-cert-manager              Active   12d
+d8-chrony                    Active   12d
+d8-cloud-instance-manager    Active   12d
+d8-cloud-provider-vcd        Active   12d
+d8-cni-cilium                Active   12d
+d8-console                   Active   12d
+d8-dashboard                 Active   12d
+d8-descheduler               Active   12d
+d8-ingress-nginx             Active   12d
+d8-local-path-provisioner    Active   12d
+d8-log-shipper               Active   12d
+d8-metallb                   Active   12d
+d8-monitoring                Active   12d
+d8-multitenancy-manager      Active   12d
+d8-observability             Active   12d
+d8-operator-prometheus       Active   12d
+d8-pod-reloader              Active   12d
+d8-service-accounts          Active   12d
+d8-snapshot-controller       Active   12d
+d8-system                    Active   12d
+d8-upmeter                   Active   12d
+d8-user-authn                Active   12d
+default                      Active   12d
+kube-node-lease              Active   12d
+kube-public                  Active   12d
+kube-system                  Active   12d
+```
+
+### Просмотр подов в конкретном namespace
+
+```
+kubectl get pods -n d8-console
+```
+
+**Пример вывода:**
+
+```
+NAME                                         READY   STATUS    RESTARTS   AGE
+backend-546c7496f8-2nzx2                     1/1     Running   0          3d7h
+backend-546c7496f8-nxqf4                     1/1     Running   0          3d7h
+console-dex-authenticator-6b7d456445-7cg9p   2/2     Running   0          12d
+console-dex-authenticator-6b7d456445-ljjr8   2/2     Running   0          12d
+frontend-79cb59c94d-cf457                    1/1     Running   0          3d7h
+frontend-79cb59c94d-rvlzk                    1/1     Running   0          3d7h
+observability-gw-59c4fb6548-2lcqr            1/1     Running   0          3d7h
+observability-gw-59c4fb6548-9n6nb            1/1     Running   0          3d7h
+```
+
+### Просмотр логов пода
+
+```
+kubectl logs frontend-79cb59c94d-cf457 -n d8-console
+```
+
+### Просмотр сервисов
+
+```
+kubectl get services -n d8-console
+```
+
+**Пример вывода:**
+
+```
+NAME                        TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)             AGE
+backend                     ClusterIP   10.222.4.60      <none>        8999/TCP            12d
+console-dex-authenticator   ClusterIP   10.222.224.82    <none>        443/TCP             12d
+frontend                    ClusterIP   10.222.226.106   <none>        80/TCP              12d
+observability-gw            ClusterIP   None             <none>        3000/TCP,8443/TCP   12d
+```
+
+### Быстрое получение информации о ресурсах
+
+```
+kubectl get all -n d8-console
+```
+
+**Пример вывода:**
+
+```
+NAME                                             READY   STATUS    RESTARTS   AGE
+pod/backend-546c7496f8-2nzx2                     1/1     Running   0          3d7h
+pod/backend-546c7496f8-nxqf4                     1/1     Running   0          3d7h
+pod/console-dex-authenticator-6b7d456445-7cg9p   2/2     Running   0          12d
+pod/console-dex-authenticator-6b7d456445-ljjr8   2/2     Running   0          12d
+pod/frontend-79cb59c94d-cf457                    1/1     Running   0          3d7h
+pod/frontend-79cb59c94d-rvlzk                    1/1     Running   0          3d7h
+pod/observability-gw-59c4fb6548-2lcqr            1/1     Running   0          3d7h
+pod/observability-gw-59c4fb6548-9n6nb            1/1     Running   0          3d7h
+
+NAME                                TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)             AGE
+service/backend                     ClusterIP   10.222.4.60      <none>        8999/TCP            12d
+service/console-dex-authenticator   ClusterIP   10.222.224.82    <none>        443/TCP             12d
+service/frontend                    ClusterIP   10.222.226.106   <none>        80/TCP              12d
+service/observability-gw            ClusterIP   None             <none>        3000/TCP,8443/TCP   12d
+
+NAME                                        READY   UP-TO-DATE   AVAILABLE   AGE
+deployment.apps/backend                     2/2     2            2           12d
+deployment.apps/console-dex-authenticator   2/2     2            2           12d
+deployment.apps/frontend                    2/2     2            2           12d
+deployment.apps/observability-gw            2/2     2            2           12d
+
+NAME                                                   DESIRED   CURRENT   READY   AGE
+replicaset.apps/backend-546c7496f8                     2         2         2       3d7h
+replicaset.apps/backend-69d8c6bd68                     0         0         0       12d
+replicaset.apps/console-dex-authenticator-6b7d456445   2         2         2       12d
+replicaset.apps/console-dex-authenticator-74c97bf4d6   0         0         0       12d
+replicaset.apps/frontend-6b7ffb7bbd                    0         0         0       9d
+replicaset.apps/frontend-79cb59c94d                    2         2         2       3d7h
+replicaset.apps/frontend-79ccdfc56b                    0         0         0       12d
+replicaset.apps/observability-gw-574cdfdd87            0         0         0       12d
+replicaset.apps/observability-gw-59c4fb6548            2         2         2       3d7h
+
+
+```
+### Получение справки
+
+Для получение справки по любой команде используется  флаг **--help**:
+
+```
+kubectl get pods --help
+kubectl describe pod --help
+```
+### Просмотр подробной информации о конкретном ресурсе
+
+```
+kubectl describe pod <имя-пода> -n <namespace>
+```

src/Deckhouse/index.md

@@ -0,0 +1,19 @@
+---
+section_links:
+    - title: Обзор сервиса
+      link: /Deckhouse/about.md
+      description: Обзор сервиса
+    - title: Права и возможности пользователей
+      link: /Deckhouse/user-permissions.md
+      description: Управление доступом и роли пользователей    
+    - title: Описание технических параметров
+      link: /Deckhouse/technical-parameters.md
+      description: Параметры конфигурации сервиса Deckhouse
+    - title: Подключение к сервису Deckhouse
+      link: /Deckhouse/connection.md
+      description: Подключение и работа с сервисом Deckhouse
+---
+
+# Cloud Deckhouse Kubernetes
+
+В данном разделе представлена документация по управлемому сервису **Cloud Deckhouse Kubernetes** платформы Beeline Cloud.

src/Deckhouse/technical-parameters.md

@@ -0,0 +1,120 @@
+# Описание технических параметров
+
+Данный раздел содержит технические параметры **кластера Kubernetes** и порядок их первичной конфигурации.
+
+Настройка параметров выполняется администратором облачного провайдера на этапе развертывания сервиса. Пользователь не может изменять их самостоятельно (исключение — конфигурация worker-узлов).
+
+**Процедура согласования параметров:**
+
+1. Клиент передает менеджеру список требуемых параметров.
+2. Администратор выполняет настройку по согласованным требованиям.
+
+## Дисковое хранилище
+
+Производительность приложений в Kubernetes зависит от скорости чтения и записи данных на диск. Тип хранилища определяет:
+
+- **IOPS** (Input/Output Operations Per Second) — количество операций ввода-вывода в секунду;
+- **время отклика** (латентность).
+
+::: info Примечание
+Чем выше IOPS, тем быстрее работают базы данных и другие диско-интенсивные приложения.
+:::
+
+## Доступные типы хранилищ:
+
+| Тип       | Лимит IOPS         |
+| ---------- | ------------------ |
+| Fast SAS   | до 2 IOPS на 1 ГБ  |
+| SSD        | до 5 IOPS на 1 ГБ  |
+| Fast SSD   | до 10 IOPS на 1 ГБ |
+| Ultra NVMe | до 25 IOPS на 1 ГБ |
+
+::: warning Важно
+После выбора типа диска необходимо указать объем дискового хранилища, который будет выделен под данные приложений (Persistent Volumes). **Минимальный объем - 50 ГБ.**
+:::
+
+## Конфигурация вычислительных ресурсов
+
+Вычислительные мощности кластера включают:
+
+- процессорные ресурсы (vCPU);
+- оперативную память (RAM);
+- количество узлов.
+
+### Узлы в кластере
+
+Количество узлов определяет отказоустойчивость кластера и возможность распределять нагрузку между worker-узлами. 
+
+::: info Примечение
+Чем больше узлов, тем выше надежность и пропускная способность.
+:::
+
+#### 1. Master-узлы (control plane)
+
+Для обеспечения отказоустойчивости кластера **рекомендуется использовать не менее трех master-узлов**.
+
+| Количество узлов | Результат                                                                                     |
+|------------------|-----------------------------------------------------------------------------------------------|
+| 3 и более        | Обеспечивают кворум, безопасное обновление и отказоустойчивость. Большего числа не требуется. |
+| 2                | Недостаточно для кворума при отказе одного узла.                                              |
+| 1                | Отказ узла приводит к полному сбою кластера.                                                  |
+
+#### 2. System-узлы
+
+Предназначены для запуска модулей Deckhouse.
+
+**Рекомендация:** два узла. Это изолирует системные модули от пользовательских приложений.
+
+#### 3. Frontend-узлы
+
+Балансируют входящий трафик, на них работают Ingress-контроллеры.
+
+**Рекомендация:** более одного узла.
+
+**Требования к емкости:**
+
+| Количество узлов | Требование к каждому узлу                         |
+|------------------|---------------------------------------------------|
+| 2                | Должен выдержать 100% нагрузки при отказе второго |
+| 3                | Должен выдержать увеличение нагрузки в 1.5 раза   |
+
+#### 4. Worker-узлы
+
+На них выполняются пользовательские приложения.
+
+- **Рекомендация:** от 1 узла.
+- **Управление:** пользователь может увеличивать максимальное количество узлов самостоятельно.
+
+## Процессор (CPU)
+
+**Процессор** - это вычислительная мощность, выделяемая каждому узлу кластера. Количество vCPU определяет, насколько быстро приложения смогут:
+
+- обрабатывать запросы;  
+- выполнять сложные вычисления;  
+- обслуживать одновременные подключения.
+
+**Диапазон**: от 2 до 24 vCPU на один узел.
+
+## Оперативная память (RAM)
+
+**Оперативная память** - влияет на производительность приложений. Данные в RAM обрабатываются без обращения к диску.
+
+**Диапазон**: от 4 до 768 ГБ RAM на один узел.
+
+## Доступ в интернет
+
+При заказе сервиса выберите пропускную способность канала для доступа к кластеру из интернета.
+
+**Доступные скорости**:
+
+- 50 Мбит/с;  
+- 100 Мбит/с;  
+- 200 Мбит/с;  
+- 300 Мбит/с;  
+- 400 Мбит/с;  
+- 500 Мбит/с;  
+- 1000 Мбит/с (1 Гбит/с).
+
+::: info Примечание
+Для выбранного канала предоставляется **статический белый IP-адрес**.
+:::

src/Deckhouse/user-permissions.md

@@ -0,0 +1,83 @@
+# Права и возможности пользователей
+
+При развертывании сервиса Cloud Deckhouse Kubernetes создается учетная запись с уровнем доступа **SuperAdmin**. Этот уровень предоставляет расширенные права на управление кластером Kubernetes.
+
+**SuperAdmin** получает полный контроль над своими приложениями и ресурсами в пределах выделенного кластера или пространства имен (namespace).
+
+## Ограничения доступа SuperAdmin
+
+SuperAdmin **не имеет доступа** к следующим компонентам:
+
+- инфраструктурный уровень (гипервизоры, физические серверы, сетевое оборудование);
+- управление компонентами платформы Deckhouse на уровне всего кластера;
+- master-узлы, system-узлы и frontend-узлы;
+- изменение конфигурации платформы Deckhouse и её глобальных модулей.
+
+## Доступные действия
+
+### Управление пространствами имен (Namespaces)
+
+SuperAdmin может управлять пространствами имен:
+
+- создавать новые namespace;
+- удалять namespace (все ресурсы внутри удаляются);
+- просматривать список всех namespace;
+- устанавливать метки (labels) и аннотации для namespace.
+
+### Управление рабочими нагрузками
+
+SuperAdmin имеет полный контроль над подами, развёртываниями и другими ресурсами приложений:
+
+- создавать, обновлять и удалять Deployment, StatefulSet, DaemonSet;
+- создавать, обновлять и удалять Pod;
+- просматривать логи подов (`kubectl logs`);
+- подключаться к выполняющемуся контейнеру (`kubectl exec`);
+- масштабировать развертывания (увеличивать или уменьшать количество реплик);
+- обновлять версии образов контейнеров;
+- удалять поды (в том числе принудительно);
+- просматривать события (events) в namespace.
+
+### Управление сетевым доступом (Services & Ingress)
+
+SuperAdmin может настраивать способы доступа к приложениям как внутри кластера, так и из внешней сети:
+
+SuperAdmin может настраивать способы доступа к приложениям внутри кластера и из внешней сети:
+
+- создавать, изменять и удалять Service (типы: ClusterIP, NodePort, LoadBalancer);
+- создавать, изменять и удалять Ingress-правила для маршрутизации входящего трафика;
+- настраивать порты и селекторы для сервисов;
+- просматривать список сервисов и их конечных точек (endpoints).
+
+### Управление хранилищем (Storage)
+
+SuperAdmin может создавать и использовать тома для хранения данных приложений:
+
+- создавать Persistent Volume Claim (PVC);
+- удалять PVC (освобождать дисковое пространство);
+- просматривать список PVC и их статусов;
+- использовать PVC в подах (монтировать тома).
+
+### Управление конфигурацией (ConfigMaps & Secrets)
+
+SuperAdmin может создавать и изменять конфигурационные данные и секреты для приложений:
+
+- создавать, изменять и удалять ConfigMap;
+- создавать, изменять и удалять Secrets (например, для хранения токенов, паролей или ключей);
+- монтировать ConfigMap и Secrets в поды в виде переменных окружения или файлов.
+
+### Мониторинг и наблюдаемость
+
+SuperAdmin имеет доступ к метрикам и логам своих приложений:
+
+- просматривать метрики приложений в Grafana;
+- просматривать логи через `kubectl logs` или интерфейс сбора логов (Loki);
+- просматривать дашборды с информацией о потреблении ресурсов (CPU, RAM, Storage) своими приложениями;
+- просматривать события Kubernetes (events) для диагностики проблем.
+
+### Управление доступом (RBAC)
+
+SuperAdmin может управлять правами других пользователей в рамках своего пространства имен:
+
+- создавать и удалять учетные записи (ServiceAccount);
+- назначать роли (Role, RoleBinding) другим пользователям в пределах своего namespace;
+- ограничивать доступ к отдельным ресурсам.

src/PostgreSQL/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/PostgreSQL/Interconnet.md

@@ -0,0 +1,3 @@
+# Cloud Interconnect
+
+Раздел в разработке.

src/PostgreSQL/PostgreSQL-index.md

@@ -0,0 +1,16 @@
+---
+section_links:
+  - title: Cloud PostgreSQL
+    link: /PostgreSQL/service/service-index.md
+    description: Обзор сервиса PostgreSQL
+  - title: IPSEC
+    link: /PostgreSQL/IPSEC.md
+    description: Параметры конфигурации IPSEC
+  - title: Cloud Interconnect
+    link: 
+    description: Обзор сервиса Interconnect
+---   
+
+# Cloud PostgreSQL
+
+В данном разделе представлена документация по управляемому сервису **Cloud PostgreSQL**, а также сервисами платформы Beeline Cloud, использующими его в своей работе.

src/PostgreSQL/service/1C.md

@@ -0,0 +1,3 @@
+# 1C
+
+Раздел в разработке.

src/PostgreSQL/service/about.md

@@ -0,0 +1,88 @@
+# 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/PostgreSQL/service/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/PostgreSQL/service/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/PostgreSQL/service/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/PostgreSQL/service/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/PostgreSQL/service/service-index.md

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

src/PostgreSQL/service/user-capabilities.md

@@ -0,0 +1,134 @@
+# Возможности пользователя
+
+Данный раздел описывает права, которые предоставляются пользователю 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;``` |
+
+### Требования к паролям
+
+**Длина пароля (рекомендуемая):**
+
+- для учётной записи пользователя - не менее 12 знаков;
+- для учётных записей администраторов, технических и служебных учётных записей - не менее 16 знаков.
+
+**Сложность пароля:** рекомендуется использовать уникальный пароль, содержащий символы как минимум трёх из четырёх указанных ниже групп (при отсутствии технических ограничений):
+
+- буквы латинского алфавита в верхнем регистре (A-Z);
+- буквы латинского алфавита в нижнем регистре (a-z);
+- цифры (0-9);
+- специальные символы и знаки пунктуации (например, `!@#$%^&*(),.?`).
+
+**Периодичность смены:** рекомендуемая периодичность смены пароля - не реже одного раза в год.
+
+## Создание пользователей и ролей
+
+Пользователь `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/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>