diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index b8e021a..620b085 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -12,6 +12,5 @@ variables: IMAGE_NAME: docs-portal include: - - ci/develop.yml - - "ci/rules.yml" + - ci/*.yml - "ci/deploy/*.inc.yml" diff --git a/ci/develop.yml b/ci/build-image.yml similarity index 63% rename from ci/develop.yml rename to ci/build-image.yml index 9a4a9c9..c1b89dd 100644 --- a/ci/develop.yml +++ b/ci/build-image.yml @@ -1,34 +1,4 @@ -develop:npm: - image: harbor.vimpelcom.ru/dockerhub/library/node:lts - stage: build - cache: - - key: - files: - - package.json - paths: - - node_modules/ - rules: - - !reference [.build-npm-rules, rules] - variables: - PRODUCT: "$PRODUCT_PROD" - script: - - export PRODUCT_VERSION=$(node -p "require('./package.json').version") - - echo PRODUCT_VERSION="$PRODUCT_VERSION" >> .env - - echo PRODUCT="$PRODUCT_PROD" >> .env - - npm install - - npm run build - - export VITE_NEW_VERSION="true" - - echo "$DMZ_DIST_DIR" - - ./node_modules/.bin/vitepress build src --outDir "$DMZ_DIST_DIR" - artifacts: - paths: - - "$DIST_DIR" - - "$DMZ_DIST_DIR" - reports: - dotenv: .env - expire_in: 1h - -build-image-npm: +build-image: image: harbor.vimpelcom.ru/dockerhub/library/docker:20.10.11-dind stage: package rules: @@ -46,7 +16,7 @@ build-image-npm: - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:$PRODUCT_VERSION - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:latest needs: - - job: develop:npm + - job: build:npm artifacts: true optional: true artifacts: diff --git a/ci/build-npm.yml b/ci/build-npm.yml new file mode 100644 index 0000000..b53dc8d --- /dev/null +++ b/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 diff --git a/ci/deploy/deploy-cloud.inc.yml b/ci/deploy/deploy-cloud.inc.yml index 1846839..5a6abd7 100644 --- a/ci/deploy/deploy-cloud.inc.yml +++ b/ci/deploy/deploy-cloud.inc.yml @@ -1,11 +1,39 @@ -deploy-cloud: +deploy-test-stand: stage: deploy + image: harbor.vimpelcom.ru/dockerhub/library/alpine + variables: + stand: cloud-stand.vega-dev.cloud.vimpelcom.ru rules: - - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS - when: never - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event" when: never - - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "feature/ci") + - if: $CI_PIPELINE_SOURCE == "push" when: manual - extends: - - .deploy-template + before_script: + - | + sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \ + apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \ + rm -rf /var/cache/apk/* + - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y) + - eval $(ssh-agent -s) + - mkdir -p ~/.ssh + - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa + - chmod 700 ~/.ssh + - chmod 600 ~/.ssh/id_rsa + - > + echo "stand: ${stand}" + ssh-keyscan "${stand}" >> ~/.ssh/known_hosts + - chmod 644 ~/.ssh/known_hosts + script: + - > + echo -e "Connect to ${stand}..." && + scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" && + ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY && + export PRODUCT=$PRODUCT && + export PRODUCT_VERSION=$PRODUCT_VERSION && + export IMAGE_NAME=$IMAGE_NAME && + chmod 700 ~/deploy.sh && + ~/deploy.sh ${IMAGE_NAME} && + rm -f ~/deploy.sh" + needs: + - job: build-image + optional: true diff --git a/ci/deploy/deploy-template.inc.yml b/ci/deploy/deploy-template.inc.yml index 44591a9..663d5cc 100644 --- a/ci/deploy/deploy-template.inc.yml +++ b/ci/deploy/deploy-template.inc.yml @@ -69,5 +69,5 @@ rm -f ~/deploy.sh" done needs: - - job: build-image-npm + - job: build-image optional: true diff --git a/ci/rules.yml b/ci/rules.yml index 9849945..3e2516e 100644 --- a/ci/rules.yml +++ b/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" diff --git a/scripts/build-cloud-stand.ps1 b/scripts/build-cloud-stand.ps1 new file mode 100644 index 0000000..e76b264 --- /dev/null +++ b/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 diff --git a/src/.vitepress/override-components.ts b/src/.vitepress/override-components.ts index 28e17ae..951b56a 100644 --- a/src/.vitepress/override-components.ts +++ b/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( diff --git a/src/.vitepress/theme/components/CustomAvatar.vue b/src/.vitepress/theme/components/CustomAvatar.vue new file mode 100644 index 0000000..04d5868 --- /dev/null +++ b/src/.vitepress/theme/components/CustomAvatar.vue @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomContent.vue b/src/.vitepress/theme/components/CustomContent.vue index c5bc762..79081ad 100644 --- a/src/.vitepress/theme/components/CustomContent.vue +++ b/src/.vitepress/theme/components/CustomContent.vue @@ -11,49 +11,82 @@ const { hasSidebar } = useSidebar() diff --git a/src/.vitepress/theme/components/CustomDoc.vue b/src/.vitepress/theme/components/CustomDoc.vue index 2adc196..06e1e83 100644 --- a/src/.vitepress/theme/components/CustomDoc.vue +++ b/src/.vitepress/theme/components/CustomDoc.vue @@ -73,58 +73,70 @@ const pageName = computed(() => - diff --git a/src/.vitepress/theme/components/CustomHero.vue b/src/.vitepress/theme/components/CustomHero.vue index d27982b..1a94a8b 100644 --- a/src/.vitepress/theme/components/CustomHero.vue +++ b/src/.vitepress/theme/components/CustomHero.vue @@ -1,8 +1,10 @@ \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomHomeFeature.vue b/src/.vitepress/theme/components/CustomHomeFeature.vue new file mode 100644 index 0000000..14b9c38 --- /dev/null +++ b/src/.vitepress/theme/components/CustomHomeFeature.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/.vitepress/theme/components/CustomHomeFeatures.vue b/src/.vitepress/theme/components/CustomHomeFeatures.vue new file mode 100644 index 0000000..4e27f7a --- /dev/null +++ b/src/.vitepress/theme/components/CustomHomeFeatures.vue @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomHomeHero.vue b/src/.vitepress/theme/components/CustomHomeHero.vue new file mode 100644 index 0000000..37c7c8f --- /dev/null +++ b/src/.vitepress/theme/components/CustomHomeHero.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomHomeServiceCard.vue b/src/.vitepress/theme/components/CustomHomeServiceCard.vue new file mode 100644 index 0000000..96c4dd9 --- /dev/null +++ b/src/.vitepress/theme/components/CustomHomeServiceCard.vue @@ -0,0 +1,109 @@ + + + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomHomeServices.vue b/src/.vitepress/theme/components/CustomHomeServices.vue new file mode 100644 index 0000000..f14b8f5 --- /dev/null +++ b/src/.vitepress/theme/components/CustomHomeServices.vue @@ -0,0 +1,41 @@ + + + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomIcon.vue b/src/.vitepress/theme/components/CustomIcon.vue new file mode 100644 index 0000000..bdb507f --- /dev/null +++ b/src/.vitepress/theme/components/CustomIcon.vue @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file diff --git a/src/.vitepress/theme/components/CustomLocalSearchBox.vue b/src/.vitepress/theme/components/CustomLocalSearchBox.vue index cf4d7df..56f229a 100644 --- a/src/.vitepress/theme/components/CustomLocalSearchBox.vue +++ b/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 { diff --git a/src/.vitepress/theme/components/CustomNavBar.vue b/src/.vitepress/theme/components/CustomNavBar.vue index 7b968e3..98a96be 100644 --- a/src/.vitepress/theme/components/CustomNavBar.vue +++ b/src/.vitepress/theme/components/CustomNavBar.vue @@ -45,8 +45,12 @@ watchPostEffect(() => {
- - + +
diff --git a/src/.vitepress/theme/components/HomeHeroSearchButton.vue b/src/.vitepress/theme/components/HomeHeroSearchButton.vue new file mode 100644 index 0000000..e2bca18 --- /dev/null +++ b/src/.vitepress/theme/components/HomeHeroSearchButton.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/.vitepress/theme/constants.ts b/src/.vitepress/theme/constants.ts new file mode 100644 index 0000000..632b3cd --- /dev/null +++ b/src/.vitepress/theme/constants.ts @@ -0,0 +1 @@ +export const NAVBAR_HEIGHT = 64 \ No newline at end of file diff --git a/src/.vitepress/theme/scss/fonts.scss b/src/.vitepress/theme/scss/fonts.scss index 24681b8..0d12d65 100644 --- a/src/.vitepress/theme/scss/fonts.scss +++ b/src/.vitepress/theme/scss/fonts.scss @@ -1,3 +1,8 @@ +@use "@beeline/design-tokens/scss/iconfont/iconfont" with ( + $font-path-iconfont: '/fonts/iconfont' +); +@use "@beeline/design-tokens/scss/iconfont/icons"; + $font-path-beeline-sans: '/fonts/beeline-sans' !default; @mixin beeline-sans-font($type, $weight, $style: normal) { diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Black.ttf b/src/assets/fonts/beeline-sans/BeelineSans-Black.ttf new file mode 100644 index 0000000..a8e3862 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Black.ttf differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Black.woff b/src/assets/fonts/beeline-sans/BeelineSans-Black.woff new file mode 100644 index 0000000..7288f60 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Black.woff differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Black.woff2 b/src/assets/fonts/beeline-sans/BeelineSans-Black.woff2 new file mode 100644 index 0000000..7ac678c Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Black.woff2 differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Bold.ttf b/src/assets/fonts/beeline-sans/BeelineSans-Bold.ttf new file mode 100644 index 0000000..5c07a55 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Bold.ttf differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff b/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff new file mode 100644 index 0000000..6eeb00b Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff2 b/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff2 new file mode 100644 index 0000000..9e420ce Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Bold.woff2 differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Medium.ttf b/src/assets/fonts/beeline-sans/BeelineSans-Medium.ttf new file mode 100644 index 0000000..25f2634 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Medium.ttf differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff b/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff new file mode 100644 index 0000000..6599fdd Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff2 b/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff2 new file mode 100644 index 0000000..ee19a0a Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Medium.woff2 differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Regular.ttf b/src/assets/fonts/beeline-sans/BeelineSans-Regular.ttf new file mode 100644 index 0000000..a4340f1 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Regular.ttf differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff b/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff new file mode 100644 index 0000000..747ad27 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff differ diff --git a/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff2 b/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff2 new file mode 100644 index 0000000..db4d6c6 Binary files /dev/null and b/src/assets/fonts/beeline-sans/BeelineSans-Regular.woff2 differ diff --git a/src/assets/fonts/iconfont/BeelineIcons.ttf b/src/assets/fonts/iconfont/BeelineIcons.ttf new file mode 100644 index 0000000..1dc0050 Binary files /dev/null and b/src/assets/fonts/iconfont/BeelineIcons.ttf differ diff --git a/src/assets/fonts/iconfont/BeelineIcons.woff b/src/assets/fonts/iconfont/BeelineIcons.woff new file mode 100644 index 0000000..945ef7a Binary files /dev/null and b/src/assets/fonts/iconfont/BeelineIcons.woff differ diff --git a/src/assets/fonts/iconfont/BeelineIcons.woff2 b/src/assets/fonts/iconfont/BeelineIcons.woff2 new file mode 100644 index 0000000..9a43878 Binary files /dev/null and b/src/assets/fonts/iconfont/BeelineIcons.woff2 differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Bold.ttf b/src/assets/fonts/roboto-mono/RobotoMono-Bold.ttf new file mode 100644 index 0000000..900fce6 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Bold.ttf differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff b/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff new file mode 100644 index 0000000..653fd12 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff2 b/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff2 new file mode 100644 index 0000000..6de7588 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Bold.woff2 differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Light.ttf b/src/assets/fonts/roboto-mono/RobotoMono-Light.ttf new file mode 100644 index 0000000..276af4c Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Light.ttf differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Light.woff b/src/assets/fonts/roboto-mono/RobotoMono-Light.woff new file mode 100644 index 0000000..4872bff Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Light.woff differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Light.woff2 b/src/assets/fonts/roboto-mono/RobotoMono-Light.woff2 new file mode 100644 index 0000000..3b9fc53 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Light.woff2 differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Medium.ttf b/src/assets/fonts/roboto-mono/RobotoMono-Medium.ttf new file mode 100644 index 0000000..8461be7 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Medium.ttf differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff b/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff new file mode 100644 index 0000000..fb4a342 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff2 b/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff2 new file mode 100644 index 0000000..ebc6552 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Medium.woff2 differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Regular.ttf b/src/assets/fonts/roboto-mono/RobotoMono-Regular.ttf new file mode 100644 index 0000000..7c4ce36 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Regular.ttf differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff b/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff new file mode 100644 index 0000000..4ce4448 Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff differ diff --git a/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff2 b/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff2 new file mode 100644 index 0000000..e033cfa Binary files /dev/null and b/src/assets/fonts/roboto-mono/RobotoMono-Regular.woff2 differ diff --git a/src/assets/icons/altlinux.svg b/src/assets/icons/altlinux.svg new file mode 100644 index 0000000..57807a4 --- /dev/null +++ b/src/assets/icons/altlinux.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/astra.svg b/src/assets/icons/astra.svg new file mode 100644 index 0000000..7ddd4de --- /dev/null +++ b/src/assets/icons/astra.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/beta.svg b/src/assets/icons/beta.svg new file mode 100644 index 0000000..d25c21d --- /dev/null +++ b/src/assets/icons/beta.svg @@ -0,0 +1,8 @@ + + + Created with Pixso. + + + + + diff --git a/src/assets/icons/centos.svg b/src/assets/icons/centos.svg new file mode 100644 index 0000000..87dabf7 --- /dev/null +++ b/src/assets/icons/centos.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 0000000..05d341a --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,7 @@ + + + Created with Pixso. + + + + diff --git a/src/assets/icons/debian.svg b/src/assets/icons/debian.svg new file mode 100644 index 0000000..15c3108 --- /dev/null +++ b/src/assets/icons/debian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/docker.svg b/src/assets/icons/docker.svg new file mode 100644 index 0000000..a2becd6 --- /dev/null +++ b/src/assets/icons/docker.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/fedora.svg b/src/assets/icons/fedora.svg new file mode 100644 index 0000000..1a14d06 --- /dev/null +++ b/src/assets/icons/fedora.svg @@ -0,0 +1,35 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/file.png b/src/assets/icons/file.png new file mode 100644 index 0000000..f1b2062 Binary files /dev/null and b/src/assets/icons/file.png differ diff --git a/src/assets/icons/freebsd.svg b/src/assets/icons/freebsd.svg new file mode 100644 index 0000000..ac31134 --- /dev/null +++ b/src/assets/icons/freebsd.svg @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/oel.svg b/src/assets/icons/oel.svg new file mode 100644 index 0000000..a673f35 --- /dev/null +++ b/src/assets/icons/oel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/oracle-linux.svg b/src/assets/icons/oracle-linux.svg new file mode 100644 index 0000000..678fb19 --- /dev/null +++ b/src/assets/icons/oracle-linux.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg new file mode 100644 index 0000000..69b3f95 --- /dev/null +++ b/src/assets/icons/pdf.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/postgresql.svg b/src/assets/icons/postgresql.svg new file mode 100644 index 0000000..fd40f7f --- /dev/null +++ b/src/assets/icons/postgresql.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/redhat.svg b/src/assets/icons/redhat.svg new file mode 100644 index 0000000..86e77c3 --- /dev/null +++ b/src/assets/icons/redhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/rocky.svg b/src/assets/icons/rocky.svg new file mode 100644 index 0000000..1dc2226 --- /dev/null +++ b/src/assets/icons/rocky.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/suselinux.svg b/src/assets/icons/suselinux.svg new file mode 100644 index 0000000..773858c --- /dev/null +++ b/src/assets/icons/suselinux.svg @@ -0,0 +1,57 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/ubuntu.svg b/src/assets/icons/ubuntu.svg new file mode 100644 index 0000000..2421925 --- /dev/null +++ b/src/assets/icons/ubuntu.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/vyos.svg b/src/assets/icons/vyos.svg new file mode 100644 index 0000000..6688399 --- /dev/null +++ b/src/assets/icons/vyos.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/windows.svg b/src/assets/icons/windows.svg new file mode 100644 index 0000000..9a13825 --- /dev/null +++ b/src/assets/icons/windows.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/_cloud.png b/src/assets/images/_cloud.png new file mode 100644 index 0000000..4762142 Binary files /dev/null and b/src/assets/images/_cloud.png differ diff --git a/src/assets/images/cloud.png b/src/assets/images/cloud.png new file mode 100644 index 0000000..98ca25d Binary files /dev/null and b/src/assets/images/cloud.png differ diff --git a/src/assets/images/debian.svg b/src/assets/images/debian.svg new file mode 100644 index 0000000..15c3108 --- /dev/null +++ b/src/assets/images/debian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/empty-box-gray.png b/src/assets/images/empty-box-gray.png new file mode 100644 index 0000000..26e2173 Binary files /dev/null and b/src/assets/images/empty-box-gray.png differ diff --git a/src/assets/images/empty-box.svg b/src/assets/images/empty-box.svg new file mode 100644 index 0000000..df1ffef --- /dev/null +++ b/src/assets/images/empty-box.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/assets/images/empty-list.svg b/src/assets/images/empty-list.svg new file mode 100644 index 0000000..1bc340a --- /dev/null +++ b/src/assets/images/empty-list.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/errors/error_403.png b/src/assets/images/errors/error_403.png new file mode 100644 index 0000000..3c8f5e3 Binary files /dev/null and b/src/assets/images/errors/error_403.png differ diff --git a/src/assets/images/errors/error_404.png b/src/assets/images/errors/error_404.png new file mode 100644 index 0000000..7c9e01f Binary files /dev/null and b/src/assets/images/errors/error_404.png differ diff --git a/src/assets/images/errors/error_500.png b/src/assets/images/errors/error_500.png new file mode 100644 index 0000000..f0637d0 Binary files /dev/null and b/src/assets/images/errors/error_500.png differ diff --git a/src/assets/images/guard.png b/src/assets/images/guard.png new file mode 100644 index 0000000..f72d062 Binary files /dev/null and b/src/assets/images/guard.png differ diff --git a/src/assets/images/hyper-v.svg b/src/assets/images/hyper-v.svg new file mode 100644 index 0000000..765d6ce --- /dev/null +++ b/src/assets/images/hyper-v.svg @@ -0,0 +1,46 @@ + + + +Hyper-v diff --git a/src/assets/images/matrix.svg b/src/assets/images/matrix.svg new file mode 100644 index 0000000..4e5bfb4 --- /dev/null +++ b/src/assets/images/matrix.svg @@ -0,0 +1,9 @@ + + + Matrix (protocol) logo + + + + + + diff --git a/src/assets/images/oel.svg b/src/assets/images/oel.svg new file mode 100644 index 0000000..a673f35 --- /dev/null +++ b/src/assets/images/oel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/ol.png b/src/assets/images/ol.png new file mode 100644 index 0000000..c412f97 Binary files /dev/null and b/src/assets/images/ol.png differ diff --git a/src/assets/images/openstack.svg b/src/assets/images/openstack.svg new file mode 100644 index 0000000..ea30c2d --- /dev/null +++ b/src/assets/images/openstack.svg @@ -0,0 +1,43 @@ + + + + diff --git a/src/assets/images/oracle-linuxl.png b/src/assets/images/oracle-linuxl.png new file mode 100644 index 0000000..c412f97 Binary files /dev/null and b/src/assets/images/oracle-linuxl.png differ diff --git a/src/assets/images/redhat.svg b/src/assets/images/redhat.svg new file mode 100644 index 0000000..86e77c3 --- /dev/null +++ b/src/assets/images/redhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/search.svg b/src/assets/images/search.svg new file mode 100644 index 0000000..eec99ed --- /dev/null +++ b/src/assets/images/search.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/assets/images/success-check.png b/src/assets/images/success-check.png new file mode 100644 index 0000000..240ce96 Binary files /dev/null and b/src/assets/images/success-check.png differ diff --git a/src/assets/images/vmware.svg b/src/assets/images/vmware.svg new file mode 100644 index 0000000..b1688d0 --- /dev/null +++ b/src/assets/images/vmware.svg @@ -0,0 +1,54 @@ + + + + diff --git a/src/assets/scss/app/_base.scss b/src/assets/scss/app/_base.scss new file mode 100644 index 0000000..57955de --- /dev/null +++ b/src/assets/scss/app/_base.scss @@ -0,0 +1,38 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +:root { + --app-navbar-height: #{$app-navbar-height}; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; +} + +html { + overflow-y: auto; +} + +#app { + height: 100vh; +} + +html.dark-theme { + background-color: $color-background-base; + color: $color-text-active; +} + +a:visited { + color: $color-text-active !important; +} + +a:hover { + text-decoration: none !important; +} diff --git a/src/assets/scss/app/_index.scss b/src/assets/scss/app/_index.scss new file mode 100644 index 0000000..7c0f72f --- /dev/null +++ b/src/assets/scss/app/_index.scss @@ -0,0 +1,5 @@ +@import 'variables'; +@import 'base'; +@import 'form'; +@import 'helpers'; +@import 'components'; diff --git a/src/assets/scss/app/_variables.scss b/src/assets/scss/app/_variables.scss new file mode 100644 index 0000000..ad18632 --- /dev/null +++ b/src/assets/scss/app/_variables.scss @@ -0,0 +1,3 @@ +// Navbar +$app-navbar-height: 3.5rem; +$app-header-height: 64px; diff --git a/src/assets/scss/app/components/_fab.scss b/src/assets/scss/app/components/_fab.scss new file mode 100644 index 0000000..c0ffcc1 --- /dev/null +++ b/src/assets/scss/app/components/_fab.scss @@ -0,0 +1,122 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; +@use '@beeline/design-tokens/scss/tokens/components/fab' as *; +@use '@beeline/design-tokens/scss/tokens/components/button' as *; +@use '@beeline/design-tokens/scss/tokens/globals' as *; +@use '@beeline/design-tokens/scss/mixin'; + +@mixin fab_button { + background-color: $button-overlay-background-color; + padding-left: $button-only-text-small-padding-horizontal; + padding-right: $button-only-text-small-padding-horizontal; + letter-spacing: $button-small-text-font-letter-spacing; + line-height: $button-small-text-font-line-height; + font-size: $button-small-text-font-size; + height: $button-small-height; + color: $button-overlay-text-color; + box-shadow: none; + border: 1px solid $button-outline-border-color; + border-radius: $button-border-radius; + + &:hover { + cursor: pointer; + background-color: $button-overlay-background-color-hover; + } +} + +.app-fab { + height: $fab-standard-height; + width: $fab-standard-width; + position: fixed; + z-index: 50; + display: inline-flex; + align-items: center; + border: 0; + padding: $fab-standard-padding; + letter-spacing: $fab-text-font-letter-spacing; + line-height: $fab-text-font-line-height; + font-size: $fab-text-font-size; + font-weight: $fab-text-font-weight; + box-shadow: $fab-shadow; + background-color: $color-background-inverse; + color: $color-text-active-inverse; + cursor: pointer; + + &__icon { + width: 24px; + height: 24px; + } + + &:hover { + // background-color: $fab-hover-background-color; + } + + &--focused { + border-color: $fab-focused-border-color; + border-width: $fab-focused-border-width; + } + + &--mini { + height: $fab-mini-height; + width: $fab-mini-width; + border-radius: $fab-mini-border-radius; + padding: $fab-mini-padding; + } + + &--extended { + height: $fab-extended-height; + border-radius: $fab-extended-border-radius; + padding-right: $fab-extended-padding-right; + padding-left: $fab-extended-padding-left; + + & &__icon { + margin-right: $fab-extended-icon-spacing; + } + } + + .app-fab--extended.app-fab--mini { + height: $fab-mini-height; + } + + &--disabled { + opacity: $fab-disabled-opacity; + } +} + +.app-fab-dialog { + position: fixed; + bottom: 44px; + right: 0; + // background-color: $color-background-medium; + background-color: transparent; + // border-radius: 12px; + padding: 1rem; + // border: 1px solid $color-border; + // min-width: 300px; + // box-shadow: $elevation-medium; + + .icon-contained { + display: inline-flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background-color: $color-status-neutral-background; + color: $color-status-neutral; + border-radius: 12px; + } + + #feedback_button { + @include fab_button(); + } + + #bug_button { + @include fab_button(); + line-height: 38px; + } + + a#bug_button, + a#bug_button:visited, + a#bug_button:active { + color: $button-overlay-text-color !important; + } +} diff --git a/src/assets/scss/app/components/_index.scss b/src/assets/scss/app/components/_index.scss new file mode 100644 index 0000000..5378e7b --- /dev/null +++ b/src/assets/scss/app/components/_index.scss @@ -0,0 +1 @@ +@import 'fab'; diff --git a/src/assets/scss/app/form/_index.scss b/src/assets/scss/app/form/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/app/form/_states.scss b/src/assets/scss/app/form/_states.scss new file mode 100644 index 0000000..de55a33 --- /dev/null +++ b/src/assets/scss/app/form/_states.scss @@ -0,0 +1 @@ +@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield; diff --git a/src/assets/scss/app/form/_textarea.scss b/src/assets/scss/app/form/_textarea.scss new file mode 100644 index 0000000..8057d3a --- /dev/null +++ b/src/assets/scss/app/form/_textarea.scss @@ -0,0 +1,104 @@ +@use '@beeline/design-tokens/scss/tokens/components/textarea' as *; +@use '@beeline/design-tokens/scss/tokens/components/formfield'; +@use '@beeline/design-tokens/scss/tokens/themes'; + +.textarea-field { + $px: 16px; + + display: block; + width: 100%; + position: relative; + padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom; + height: $textarea-without-label-medium-height; + background: formfield.$formfield-background-color; + border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color; + border-radius: formfield.$formfield-border-radius; + + & &__label { + position: absolute; + top: $textarea-with-label-text-margin-top; + left: $px; + transition: font-size 300ms ease-out; + color: formfield.$formfield-label-color; + } + + & textarea { + height: $textarea-medium-text-height; + width: 100%; + outline: none; + border: none; + box-shadow: none; + resize: none; + background-color: transparent; + color: themes.$color-text-active; + } + + & &__resizer { + position: absolute; + bottom: $textarea-resizer-margin-bottom; + right: $textarea-resizer-margin-right; + rotate: -45deg; + width: 1em; + height: 1em; + + &:hover { + cursor: nwse-resize; + } + + &::before { + content: ''; + display: flex; + background-color: darkslategrey; + width: 10px; + height: 1px; + } + + &::after { + content: ''; + display: flex; + position: relative; + right: -3px; + bottom: -2px; + background-color: darkslategrey; + width: 4px; + height: 1px; + } + } + + &.textarea-field--with-label { + height: $textarea-with-label-medium-height; + padding-top: $textarea-with-label-text-margin-top; + + &.textarea-field--floated .textarea-field__label { + top: $textarea-medium-label-floated-margin-top; + line-height: $textarea-small-label-floated-font-line-height; + font-size: $textarea-small-label-floated-font-size; + } + + &.textarea-field--small { + height: $textarea-with-label-small-height; + padding-top: $textarea-small-label-margin-top; + top: $textarea-small-label-floated-margin-top; + + & .textarea-field__label { + font-size: $textarea-small-label-font-size; + font-weight: $textarea-small-label-font-weight; + letter-spacing: $textarea-small-label-font-letter-spacing; + } + } + } + + &.textarea-field--focused { + border-color: formfield.$formfield-border-color-focus; + background-color: transparent; + } + + &.textarea-field--small { + padding-top: $textarea-without-label-small-text-margin-top; + height: $textarea-without-label-small-height; + + & textarea { + height: $textarea-small-text-height; + } + } +} diff --git a/src/assets/scss/app/form/_textfield.scss b/src/assets/scss/app/form/_textfield.scss new file mode 100644 index 0000000..aff723a --- /dev/null +++ b/src/assets/scss/app/form/_textfield.scss @@ -0,0 +1,70 @@ +@use '@beeline/design-tokens/scss/tokens/components/textfield' as *; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes' as theme; + +.textfield { + display: block; + position: relative; + width: 100%; + height: globals.$size-control-height-medium; + border: globals.$size-border-width-regular solid transparent; + padding-top: $textfield-without-label-medium-text-margin-vertical; + padding-bottom: $textfield-without-label-medium-text-margin-vertical; + background-color: theme.$color-control-background; + border-radius: 12px; // globals.$size-border-radius-x6; + + &:hover { + background-color: theme.$color-control-background-hover; + } + + // input + input { + outline: none; + box-shadow: none; + } + + // label + &--with-label { + // padding-top: $textfield-with-label-medium-text-margin-top; + // padding-bottom: $textfield-with-label-medium-text-margin-bottom; + } + + &__label { + // padding-top: $textfield-medium-label-margin-top; + + &.textfield__label--floated { + // padding-top: $textfield-medium-label-margin-top-floated; + } + } + + // small + &--small { + height: globals.$size-control-height-small; + } + + // large + &--large { + height: globals.$size-control-height-large; + padding-top: $textfield-without-label-large-text-margin-vertical; + padding-bottom: $textfield-without-label-large-text-margin-vertical; + + &.textfield--with-label { + padding-top: $textfield-with-label-large-text-margin-top; + padding-bottom: $textfield-with-label-large-text-margin-bottom; + } + + .textfield__label { + padding-top: $textfield-large-label-margin-top; + + &.textfield__label--floated { + padding-top: $textfield-large-label-margin-top-floated; + } + } + } + + // states + &--focused { + border-color: theme.$color-border-focus; + background-color: theme.$color-background-base; + } +} diff --git a/src/assets/scss/app/helpers/_color.scss b/src/assets/scss/app/helpers/_color.scss new file mode 100644 index 0000000..f2a1ae3 --- /dev/null +++ b/src/assets/scss/app/helpers/_color.scss @@ -0,0 +1,5 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +.app-bg-status-error { + background-color: $color-status-error-background; +} diff --git a/src/assets/scss/app/helpers/_common.scss b/src/assets/scss/app/helpers/_common.scss new file mode 100644 index 0000000..0b1bf9c --- /dev/null +++ b/src/assets/scss/app/helpers/_common.scss @@ -0,0 +1,3 @@ +.app-cursor-pointer { + cursor: pointer; +} diff --git a/src/assets/scss/app/helpers/_index.scss b/src/assets/scss/app/helpers/_index.scss new file mode 100644 index 0000000..befdba2 --- /dev/null +++ b/src/assets/scss/app/helpers/_index.scss @@ -0,0 +1,4 @@ +@import 'text'; +@import 'color'; +@import 'media'; +@import 'common'; diff --git a/src/assets/scss/app/helpers/_media.scss b/src/assets/scss/app/helpers/_media.scss new file mode 100644 index 0000000..844f942 --- /dev/null +++ b/src/assets/scss/app/helpers/_media.scss @@ -0,0 +1,39 @@ +// @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"; + } +} diff --git a/src/assets/scss/app/helpers/_text.scss b/src/assets/scss/app/helpers/_text.scss new file mode 100644 index 0000000..87643d8 --- /dev/null +++ b/src/assets/scss/app/helpers/_text.scss @@ -0,0 +1,80 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as theme; +@use 'src/assets/scss/app/mixins' as mixins; + +@mixin truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@mixin truncate-lines($lines: 2) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + overflow: hidden; + text-overflow: ellipsis; +} + +.app-text-active { + color: theme.$color-text-active; +} + +.app-text-inactive { + color: theme.$color-text-inactive; +} + +// styles for hyperlinks +.app-link { + color: theme.$color-text-active; + + &:hover { + color: theme.$color-text-active; + } +} + +.app-text-caption { + @include mixins.text-caption; +} + +.app-text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +// Sizes +.app-text-size-subtitle-3 { + font-size: 15px; + line-height: 20px; + font-weight: 500; + letter-spacing: 0.2px; +} + +.app-text-size-body-3 { + font-size: 15px; + line-height: 18px; + letter-spacing: 0.2px; + font-weight: 400; +} + +// Colors +.app-text-color-caption { + color: theme.$color-text-inactive; +} +.app-text-warning { + color: theme.$color-status-warning; +} +.app-text-info { + color: theme.$color-status-info; +} +.app-text-error { + color: theme.$color-status-error; +} +.app-text-success { + color: theme.$color-status-success; +} + +// Breaks +.app-break-keep-all { + word-break: keep-all; +} diff --git a/src/assets/scss/app/loading/_index.scss b/src/assets/scss/app/loading/_index.scss new file mode 100644 index 0000000..9db6afc --- /dev/null +++ b/src/assets/scss/app/loading/_index.scss @@ -0,0 +1 @@ +@import 'spinner'; diff --git a/src/assets/scss/app/loading/_spinner.scss b/src/assets/scss/app/loading/_spinner.scss new file mode 100644 index 0000000..b4ad289 --- /dev/null +++ b/src/assets/scss/app/loading/_spinner.scss @@ -0,0 +1,6 @@ +@use 'src/assets/scss/app/variables' as v; + +.app-loading-screen { + display: block; + height: calc(100vh - v.$app-header-height); +} diff --git a/src/assets/scss/app/mixins/_index.scss b/src/assets/scss/app/mixins/_index.scss new file mode 100644 index 0000000..b4cc8bf --- /dev/null +++ b/src/assets/scss/app/mixins/_index.scss @@ -0,0 +1 @@ +@forward 'text'; diff --git a/src/assets/scss/app/mixins/_text.scss b/src/assets/scss/app/mixins/_text.scss new file mode 100644 index 0000000..f82e07e --- /dev/null +++ b/src/assets/scss/app/mixins/_text.scss @@ -0,0 +1,29 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as theme; + +%text_caption { + font-size: 13px; + line-height: 16px; +} + +@mixin text_caption { + @extend %text_caption; + color: theme.$color-text-inactive; +} + +@mixin text_caption_error { + @extend %text_caption; + color: theme.$color-status-error; +} + +@mixin text_body_2 { + font-style: normal; + font-weight: 400; + font-size: 17px; + line-height: 22px; +} + +@mixin truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/assets/scss/beeline/_base.scss b/src/assets/scss/beeline/_base.scss new file mode 100644 index 0000000..32d1a37 --- /dev/null +++ b/src/assets/scss/beeline/_base.scss @@ -0,0 +1,10 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +:root { + @include themes.theme(); +} + +.dark-theme { + @include themes.theme(dark.$theme); +} diff --git a/src/assets/scss/beeline/_fonts.scss b/src/assets/scss/beeline/_fonts.scss new file mode 100644 index 0000000..80ae84a --- /dev/null +++ b/src/assets/scss/beeline/_fonts.scss @@ -0,0 +1,3 @@ +@use '@beeline/design-tokens/scss/font-face' with ( + $font-path-beeline-sans: '../fonts/beeline-sans' +); diff --git a/src/assets/scss/beeline/_icons.scss b/src/assets/scss/beeline/_icons.scss new file mode 100644 index 0000000..c7e2ed7 --- /dev/null +++ b/src/assets/scss/beeline/_icons.scss @@ -0,0 +1,40 @@ +// @use "@beeline/design-tokens/scss/iconfont/iconfont" with ( +// $font-path-iconfont: '../fonts/iconfont' +// ); +@use '@beeline/design-tokens/scss/iconfont/icons'; + +@font-face { + font-display: block; + font-family: 'BeelineIcons'; + font-style: normal; + font-weight: 400; + src: + url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'), + url('../fonts/iconfont/BeelineIcons.woff') format('woff'), + url('../fonts/iconfont/BeelineIcons.ttf') format('ttf'); +} + +.beeline-icons { + font-family: 'BeelineIcons', sans-serif; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} diff --git a/src/assets/scss/beeline/_index.scss b/src/assets/scss/beeline/_index.scss new file mode 100644 index 0000000..284afd7 --- /dev/null +++ b/src/assets/scss/beeline/_index.scss @@ -0,0 +1,4 @@ +@import 'fonts'; +@import 'icons'; +@import 'base'; +@import 'scrollbar'; diff --git a/src/assets/scss/beeline/_scrollbar.scss b/src/assets/scss/beeline/_scrollbar.scss new file mode 100644 index 0000000..ddd4d61 --- /dev/null +++ b/src/assets/scss/beeline/_scrollbar.scss @@ -0,0 +1,29 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; + +html { + scrollbar-color: themes.$color-text-inactive transparent; +} + +* { + scrollbar-width: thin; +} + +body::-webkit-scrollbar { + display: none; +} + +::-webkit-scrollbar { + width: 15px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: themes.$color-text-inactive; + border: 4px solid transparent; + background-clip: content-box; + border-radius: 100px; + min-height: 28px; +} diff --git a/src/assets/scss/bulma/_index.scss b/src/assets/scss/bulma/_index.scss new file mode 100644 index 0000000..6234e22 --- /dev/null +++ b/src/assets/scss/bulma/_index.scss @@ -0,0 +1,51 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/components/button'; + +// Colors +$primary: globals.$color-background-brand; +$background: map.get(light.$theme, 'color-background-base'); +$info: map.get(light.$theme, 'color-status-info'); +$success: map.get(light.$theme, 'color-status-success'); +$warning: map.get(light.$theme, 'color-status-warning'); +$danger: map.get(light.$theme, 'color-status-error'); + +// Typography +$family-primary: globals.$font-family-text; +$title-color: map.get(light.$theme, 'color-text-active'); +$subtitle-color: map.get(light.$theme, 'color-text-inactive'); + +// Radius +$radius: globals.$size-border-radius-x6; + +// Buttons +$button-padding-vertical: globals.$size-spacing-x4; +$button-padding-horizontal: globals.$size-spacing-x5; +$button-background-color: button.$button-plain-background-color; +$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused'); +$button-disabled-opacity: button.$button-opacity-disabled; + +// Box +$box-radius: $radius; +$box-shadow: globals.$elevation-low; +$box-padding: globals.$size-spacing-x6; +$box-link-hover-shadow: globals.$elevation-medium; +$box-link-active-shadow: globals.$elevation-medium; + +// Form +$input-color: map.get(light.$theme, 'color-text-active'); +$input-background-color: map.get(light.$theme, 'color-control-background'); +$label-color: map.get(light.$theme, 'color-text-inactive'); +$label-weight: globals.$font-weight-caption; + +// Table +$table-color: map.get(light.$theme, 'color-text-active'); +$table-background-color: map.get(light.$theme, 'color-background-base'); +$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background'); +$table-cell-padding: 16px 16px; +$table-cell-heading-color: map.get(light.$theme, 'color-text-active'); +$table-head-cell-border-width: 1px; + +@import 'bulma/bulma'; +@import 'overrides'; diff --git a/src/assets/scss/bulma/overrides/_box.scss b/src/assets/scss/bulma/overrides/_box.scss new file mode 100644 index 0000000..b5513e5 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_box.scss @@ -0,0 +1,12 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.box { + .dark-theme & { + background-color: map.get(dark.$theme, 'color-background-low'); + + &:hover { + background-color: map.get(dark.$theme, 'color-background-medium'); + } + } +} diff --git a/src/assets/scss/bulma/overrides/_button.scss b/src/assets/scss/bulma/overrides/_button.scss new file mode 100644 index 0000000..315c414 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_button.scss @@ -0,0 +1,11 @@ +@use '@beeline/design-tokens/scss/tokens/components/button' as button; +@use '@beeline/design-tokens/scss/tokens/themes'; + +.button { + font-weight: button.$button-medium-text-font-weight; + color: themes.$color-text-active; + + &:hover { + color: themes.$color-text-active; + } +} diff --git a/src/assets/scss/bulma/overrides/_dropdown.scss b/src/assets/scss/bulma/overrides/_dropdown.scss new file mode 100644 index 0000000..b0bcd71 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_dropdown.scss @@ -0,0 +1,16 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; + +.dropdown { + &-content { + background-color: themes.$color-background-medium; + } + + .dropdown-item { + color: themes.$color-text-active; + + &:hover { + background-color: themes.$color-background-base-hover; + color: themes.$color-text-active; + } + } +} diff --git a/src/assets/scss/bulma/overrides/_index.scss b/src/assets/scss/bulma/overrides/_index.scss new file mode 100644 index 0000000..e984265 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_index.scss @@ -0,0 +1,7 @@ +@import 'button'; +@import 'title'; +@import 'box'; +@import 'form'; +@import 'table'; +@import 'dropdown'; +@import 'text'; diff --git a/src/assets/scss/bulma/overrides/_table.scss b/src/assets/scss/bulma/overrides/_table.scss new file mode 100644 index 0000000..6c9eca2 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_table.scss @@ -0,0 +1,42 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; +@use '@beeline/design-tokens/scss/tokens/components/button'; + +.table { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + background-color: map.get(dark.$theme, 'color-background-base'); + + td, + th { + border: 1px solid map.get(dark.$theme, 'color-control-background'); + } + + th { + color: map.get(dark.$theme, 'color-text-active'); + } + } + + td, + th { + border-width: 1px; + border-style: solid; + } + + th { + font-weight: globals.$font-weight-medium; + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: 1px; + } + } + } + } +} diff --git a/src/assets/scss/bulma/overrides/_text.scss b/src/assets/scss/bulma/overrides/_text.scss new file mode 100644 index 0000000..14eef2f --- /dev/null +++ b/src/assets/scss/bulma/overrides/_text.scss @@ -0,0 +1,15 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +code { + background-color: $color-background-base; +} + +pre { + color: $color-text-active; + background-color: $color-background-base; +} + +.help { + font-size: 13px; + line-height: 16px; +} diff --git a/src/assets/scss/bulma/overrides/_title.scss b/src/assets/scss/bulma/overrides/_title.scss new file mode 100644 index 0000000..94c1928 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_title.scss @@ -0,0 +1,38 @@ +@use '@beeline/design-tokens/scss/mixin' as bee; + +.title { + @include bee.h3(); + + &.is-1 { + @include bee.h1(); + } + &.is-2 { + @include bee.h2(); + } + &.is-3 { + @include bee.h3(); + } + &.is-4 { + @include bee.h4(); + } + &.is-5 { + @include bee.h5(); + } + &.is-6 { + @include bee.h6(); + } +} + +.subtitle { + @include bee.subtitle2(); + + &.is-1 { + @include bee.subtitle1(); + } + &.is-2 { + @include bee.subtitle2(); + } + &.is-3 { + @include bee.subtitle3(); + } +} diff --git a/src/assets/scss/bulma/overrides/form/_index.scss b/src/assets/scss/bulma/overrides/form/_index.scss new file mode 100644 index 0000000..b0d4b14 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_index.scss @@ -0,0 +1,4 @@ +@import 'shared'; +@import 'select'; +@import 'input-textarea'; +@import 'title'; diff --git a/src/assets/scss/bulma/overrides/form/_input-textarea.scss b/src/assets/scss/bulma/overrides/form/_input-textarea.scss new file mode 100644 index 0000000..c4a4faa --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_input-textarea.scss @@ -0,0 +1,46 @@ +@use 'sass:map'; +// @use "@beeline/design-tokens/scss/tokens/globals"; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +%input-textarea { + box-shadow: none; + border: 1px solid transparent; + color: map.get(light.$theme, 'color-text-active'); + background: map.get(light.$theme, 'color-control-background'); + + &:hover { + border-color: map.get(light.$theme, 'color-border-focus'); + } + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + background: map.get(dark.$theme, 'color-control-background'); + + &:hover { + border-color: map.get(dark.$theme, 'color-border-focus'); + } + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: none !important; + border-color: map.get(light.$theme, 'color-border-focus'); + background: map.get(light.$theme, 'color-background-base'); + + .dark-theme & { + background: map.get(dark.$theme, 'color-background-base'); + border-color: map.get(dark.$theme, 'color-border-focus'); + } + } +} + +.input { + @extend %input-textarea; +} + +.textarea { + @extend %input-textarea; +} diff --git a/src/assets/scss/bulma/overrides/form/_select.scss b/src/assets/scss/bulma/overrides/form/_select.scss new file mode 100644 index 0000000..9dbeb19 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_select.scss @@ -0,0 +1,48 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; + +.select { + select { + border: 1px solid transparent; + + &:focus, + &:active { + border: 1px solid map.get(light.$theme, 'color-border-focus'); + background-color: map.get(light.$theme, 'color-background-base'); + box-shadow: none; + } + } + + &:not(.is-multiple):not(.is-loading)::after { + content: none; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + select { + border: 1px solid map.get(light.$theme, 'color-border-focus'); + background-color: map.get(light.$theme, 'color-background-base'); + box-shadow: none; + } + + .dark-theme & { + select { + border: 1px solid map.get(dark.$theme, 'color-border-focus'); + background-color: map.get(dark.$theme, 'color-background-base'); + box-shadow: none; + } + } + } + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + + & select { + color: map.get(dark.$theme, 'color-text-active'); + background-color: map.get(dark.$theme, 'color-control-background'); + } + } +} diff --git a/src/assets/scss/bulma/overrides/form/_shared.scss b/src/assets/scss/bulma/overrides/form/_shared.scss new file mode 100644 index 0000000..344f81e --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_shared.scss @@ -0,0 +1,11 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.label { + line-height: globals.$font-line-height-caption; + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-inactive'); + } +} diff --git a/src/assets/scss/bulma/overrides/form/_title.scss b/src/assets/scss/bulma/overrides/form/_title.scss new file mode 100644 index 0000000..a5b4171 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_title.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.title { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + } +} + +.subtitle { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-inactive'); + } +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss new file mode 100644 index 0000000..fea3547 --- /dev/null +++ b/src/assets/scss/style.scss @@ -0,0 +1,8 @@ +@use 'beeline'; +@use 'bulma'; +@use 'app'; + +.proto { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + color: #f55; +} diff --git a/src/index.md b/src/index.md index 8ef5b1f..f40a606 100644 --- a/src/index.md +++ b/src/index.md @@ -4,28 +4,156 @@ layout: home hero: name: "Документация" - #text: "Документация публичного облака" + search: true + #text: "" # tagline: My great project tagline features: - title: Начало работы - details: Начало работы в Beeline Cloud, бесплатное тестирование и переход на платную версию. + icon: coffee link: /start/index - - title: О платформе - details: Информация об облачной платформе, технической поддержке, правовые документы. + - title: Обзор платформы + icon: tv_modern link: /platform/index - # - title: Биллинг - # details: Счета на оплату, финансовый мониторинг, аналитика потребления ресурсов. - # link: /billing/index - - title: Виртуальные дата-центры на VMware - details: Аренда виртуального дата-центра на базе VMware. - link: /vdc/index - - title: Виртуальные машины - details: Масштабируемые вычислительные мощности для создания и управления виртуальными машинами. - link: /compute/index - - title: Аккаунт Beeline Cloud - details: Аккаунт пользователя Beeline Cloud. - link: /admin/index - + - title: Сервисы + scroll_to: "#home-services-section-title" + icon: cloud + - title: Администрирование + link: '' + icon: profile_circled + items: [ + { title: Пользователи }, + { title: Роли }, + { title: Проекты } + ] + - title: Автоматизация + scroll_to: "" + icon: code + items: [ + { title: Terraform }, + { title: API } + ] + - title: Мониторинг + scroll_to: "" + icon: graph_up + - title: Биллинг + icon: wallet + link: /billing/index + disabled: true + - title: Безопасность и стандарты + icon: security + link: '' + - title: Тех поддержка + icon: headset_help + link: /platform/support/support-overview + +services: + - title: Инфраструктура + articles: + - title: Виртуальные машины + description: Масштабируемые вычислительные мощности для создания и управления виртуальными машинами + icon: cloud + link: /compute/index + - title: Виртуальные дата-центры на VMware + description: Аренда виртуального дата-центра на базе VMware + icon: cloud + link: /vdc/index + - title: Объектное хранилище S3 + description: В работе + icon: cloud + - title: Готовое облако 1С + description: В работе + icon: cloud + - title: Частное облако + description: В работе + icon: cloud + - title: Миграция виртуальных машин + description: В работе + icon: cloud + - title: Kubernetes + description: В работе + icon: cloud + - title: Сеть + articles: + - title: Сетевой балансировщик + description: В работе + icon: network + - title: Выделенные сетевые соединения + description: В работе + icon: network + - title: CDN. Доставка контента + description: В работе + icon: network + - title: SD-WAN. Распределенные сети + description: В работе + icon: network + - title: Резервное копирование и восстановление + articles: + - title: Резервное копирование + description: В работе + icon: refresh + - title: Аварийное восстановление данных + description: В работе + icon: refresh + - title: Базы данных + articles: + - title: ClickHouse + description: В работе + icon: database + - title: MongoDB + description: В работе + icon: database + - title: Аналитика + articles: + - title: Визуализация и анализ данных + description: В работе + icon: graph_up + - title: Безопасность + articles: + - title: Межсетевой экран (NGFW) + description: В работе + icon: security + - title: Защита веб-приложений (WAF) + description: В работе + icon: security + - title: Защита серверов и рабочих мест + description: В работе + icon: security + - title: Защита устройств пользователей + description: В работе + icon: security + - title: Сканер уязвимостей + description: В работе + icon: security + - title: Курсы кибербезопасности + description: В работе + icon: security + - title: Многофакторная аутентификация + description: В работе + icon: security + - title: Фильтрация почтового трафика + description: В работе + icon: security + - title: Виртуальное рабочее место + articles: + - title: Виртуальные рабочие столы (VDI) + description: В работе + icon: magic + - title: Платформа офисного пространства + description: В работе + icon: magic + - title: Дизайн + articles: + - title: Дизайн-платформа Yellowbe + description: В работе + icon: palette + - title: AI инструменты + articles: + - title: AI песочница + description: В работе + icon: robot + - title: Мультимодельная AI фабрика + description: В работе + icon: robot --- diff --git a/src/public/fonts/iconfont/BeelineIcons.ttf b/src/public/fonts/iconfont/BeelineIcons.ttf index ec2c241..f3ed8ee 100644 Binary files a/src/public/fonts/iconfont/BeelineIcons.ttf and b/src/public/fonts/iconfont/BeelineIcons.ttf differ diff --git a/src/public/fonts/iconfont/BeelineIcons.woff b/src/public/fonts/iconfont/BeelineIcons.woff index 8fabcf7..c5a63c1 100644 Binary files a/src/public/fonts/iconfont/BeelineIcons.woff and b/src/public/fonts/iconfont/BeelineIcons.woff differ diff --git a/src/public/fonts/iconfont/BeelineIcons.woff2 b/src/public/fonts/iconfont/BeelineIcons.woff2 index 7df4f7f..6d94423 100644 Binary files a/src/public/fonts/iconfont/BeelineIcons.woff2 and b/src/public/fonts/iconfont/BeelineIcons.woff2 differ diff --git a/src/public/icons/search.svg b/src/public/icons/search.svg new file mode 100644 index 0000000..488b351 --- /dev/null +++ b/src/public/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/public/img/features/billing.svg b/src/public/img/features/billing.svg new file mode 100644 index 0000000..f33390d --- /dev/null +++ b/src/public/img/features/billing.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/public/img/features/overview.svg b/src/public/img/features/overview.svg new file mode 100644 index 0000000..46f1258 --- /dev/null +++ b/src/public/img/features/overview.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/public/img/features/security.svg b/src/public/img/features/security.svg new file mode 100644 index 0000000..e35178a --- /dev/null +++ b/src/public/img/features/security.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/public/img/features/services.svg b/src/public/img/features/services.svg new file mode 100644 index 0000000..3657d40 --- /dev/null +++ b/src/public/img/features/services.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/public/img/features/start.svg b/src/public/img/features/start.svg new file mode 100644 index 0000000..6574223 --- /dev/null +++ b/src/public/img/features/start.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/public/img/features/support.svg b/src/public/img/features/support.svg new file mode 100644 index 0000000..f456561 --- /dev/null +++ b/src/public/img/features/support.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + +