Новая структура и оформлениеr

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,16 @@ const pageName = computed(() =>
         <div class="content-container">
           <slot name="doc-before" />
           <main class="main">
-            <Content
-              class="vp-doc"
-              :class="[
+            <Content class="vp-doc" :class="[
                 pageName,
                 theme.externalLinkIcon && 'external-link-icon-enabled'
-              ]"
-            />
+]" />
+            <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>

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>