Доработка карточек документации#VEGA-4499

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/CustomHomeFeature.vue

@@ -1,17 +1,24 @@
 <script setup lang="ts">
-import { withBase } from 'vitepress';
 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 } = defineProps<{
+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,
@@ -34,13 +41,19 @@ const handleClick = (event: Event) => {
 <template>
   <Component :is="!disabled && link ? VPLink : 'article'" v-bind="{ ...(!disabled && link && { href: link }) }"
     :class="classes" @click="handleClick">
-    <figure :class="$style.CustomFeatureImage">
-      <img :src="withBase(`img/features/${icon}.svg`)" :alt="title">
-    </figure>
+    <CustomAvatar :class="$style.CustomFeatureIcon" :icon="icon as Icons" />
+  
     <div :class="$style.CustomFeatureContent">
-      <h2 :class="$style.CustomFeatureTitle">
+      <a :class="$style.CustomFeatureTitle" :href="link">
         {{ title }}
-      </h2>
+      </a>
+      <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 }) }">
+            <p :class="$style.CustomFeatureSubtitle">{{ item.title }}</p>
+          </Component>
+        </div>
+      </div>
     </div>
   </Component>
 </template>
@@ -55,31 +68,33 @@ const handleClick = (event: Event) => {
   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;
   }
 
-  &Image {
-    background-color: themes.$color-background-secondary;
-    border-top-left-radius: sizes.$size-border-radius-x6;
-    border-top-right-radius: sizes.$size-border-radius-x6;
-
-    img {
-      margin: 0 auto;
-      width: 200px;
-      height: 200px;
+  &Icon {
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
     }
   }
 
   &Content {
-    padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+    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;
     }
@@ -88,5 +103,26 @@ const handleClick = (event: Event) => {
       color: themes.$color-text-active;
     }
   }
+
+  &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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import { useData } from 'vitepress'
 import CustomHomeFeature from './CustomHomeFeature.vue'
 
 const { frontmatter } = useData()
@@ -8,7 +8,7 @@ const { frontmatter } = useData()
 <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" />
+      :icon="feature.icon" :link="feature.link" :scrollTo="feature.scroll_to" :disabled="feature.disabled" :items="feature.items" />
   </div>
 </template>
 

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

@@ -7,10 +7,10 @@
         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">
+          <div :class="[$style.CustomHomeServiceCardLinkTitleIcon, { [$style.CustomHomeServiceCardLinkTitleIconActive] : article.link && article.icon === 'magic' }]">
             <CustomIcon :icon="(article.icon || 'cloud') as Icons" />
           </div>
-          <div :class="$style.CustomHomeServiceCardLinkTitleText">
+          <div :class="[$style.CustomHomeServiceCardLinkTitleText, { [$style.CustomHomeServiceCardLinkTitleTextActive]: article.link }]">
             {{ article.title }}
           </div>
         </div>
@@ -66,9 +66,10 @@ defineProps<{
   &Link {
     $iconRightSpacing: 8px;
     $iconSize: 20px;
+    $el: &;
 
-    color: themes.$color-text-active;
-
+    color: themes.$color-text-active !important;
+  
     &Disabled {
       color: themes.$color-text-disabled !important;
     }
@@ -82,10 +83,18 @@ defineProps<{
         width: $iconSize;
         height: $iconSize;
         margin-right: $iconRightSpacing;
+
+        &Active {
+          color: themes.$color-text-link;
+        }
       }
 
       &Text {
         @include mixin.subtitle2;
+
+        &Active:hover {
+          color: themes.$color-text-link;
+        }
       }
 
     }

src/index.md

@@ -29,24 +29,44 @@ features_old:
     link: /admin/index
  
 features:
-  - title: Документация по сервисам
-    scroll_to: "#home-services-section-title"
-    icon: services
-  - title: Обзор платформы
-    icon: overview
-    link: /platform/index
   - title: Начало работы
-    icon: start
+    icon: coffee
     link: /start/index
+  - title: Обзор платформы
+    icon: tv_modern
+    link: /platform/index
+  - title: Сервисы
+    scroll_to: "#home-services-section-title"
+    icon: cloud
+
+  - title: Администрирование
+    link: ''
+    icon: profile_circled
+    items: [
+      { title: Пользователи, link: /platform/index },
+      { title: Роли },
+      { title: Проекты }
+    ]
+  - title: Автоматизация
+    scroll_to: ""
+    icon: code
+    items: [
+      { title: Terraform },
+      { title: API }
+    ]
+  - title: Мониторинг
+    scroll_to: ""
+    icon: graph_up
+
   - title: Биллинг
-    icon: billing
+    icon: wallet
     link: /billing/index
     disabled: true
   - title: Безопасность и стандарты
     icon: security
     link: ''
-  - title: Техподдержка
-    icon: support
+  - title: Тех поддержка
+    icon: headset_help
     link: /platform/support/support-overview
 
 services:
@@ -139,23 +159,23 @@ services:
   - title: Виртуальное рабочее место
     articles:
       - title: Виртуальные рабочие столы (VDI)
-        description: Пояснительный текст про сервис, буквально одно-два предложения
+        description: Пояснительный текст про сервис
         icon: magic
       - title: Платформа офисного пространства
-        description: Пояснительный текст про сервис, буквально одно-два предложения
+        description: Пояснительный текст про сервис - два предложения
         icon: magic
   - title: Дизайн
     articles:
       - title: Дизайн-платформа Yellowbe
-        description: Пояснительный текст про сервис, буквально одно-два предложения
+        description: Пояснительный текст про сервис
         icon: palette
   - title: AI инструменты
     articles:
       - title: AI песочница
-        description: Пояснительный текст про сервис, буквально одно-два предложения
+        description: Пояснительный текст про сервис
         icon: robot
       - title: Мультимодельная AI фабрика
-        description: Пояснительный текст про сервис, буквально одно-два предложения
+        description: Пояснительный текст про сервис - два предложения
         icon: robot
 ---