feat: aside

packages/docs/.vitepress/config.ts

@@ -76,6 +76,13 @@ export default defineConfig({
                 maxWidth: {
                   '8xl': '90rem',
                 },
+                typography: theme => ({
+                  DEFAULT: {
+                    css: {
+                      maxWidth: 'none',
+                    },
+                  },
+                }),
               },
             },
             plugins: [
@@ -90,6 +97,9 @@ export default defineConfig({
       },
     },
   },
+  markdown: {
+    headers: true,
+  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [

packages/docs/.vitepress/theme/Layout.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { useRoute, useData } from 'vitepress'
+import { useRoute, useData, type DefaultTheme } from 'vitepress'
 import VPNavBar from './components/VPNavBar.vue'
 import VPSidebar from './components/VPSidebar.vue'
-import { ScrollArea } from 'tailv'
-const { frontmatter, theme } = useData()
+import VPDocAside from './components/VPDocAside.vue'
+import { ScrollArea, Anchor } from 'tailv'
+const { frontmatter, page, theme } = useData<DefaultTheme.Config>()
 </script>
 
 <template>
   <div v-if="frontmatter.layout !== false" :class="frontmatter.pageClass">
     <VPNavBar class=""></VPNavBar>
-    <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
+    <div class="mx-auto max-w-8xl px-4 sm:px-6 md:px-8">
       <div class="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.5rem] z-20 hidden w-[19rem] lg:block">
-        <ScrollArea class="h-full">
+        <ScrollArea class="h-full border-r">
           <div class="pb-10 pl-8 pr-6">
             <nav class="relative lg:text-sm lg:leading-6">
               <VPSidebar class="" />
@@ -20,8 +21,15 @@ const { frontmatter, theme } = useData()
         </ScrollArea>
       </div>
       <div class="lg:pl-[19.5rem]">
-        <main class="relative z-20 mx-auto max-w-3xl pt-10 xl:max-w-none">
-          <Content />
+        <main class="mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:max-w-none xl:pr-16">
+          <header></header>
+          <Content class="prose dark:prose-invert" />
+          <footer></footer>
+          <div class="fixed bottom-0 right-[max(0px,calc(50%-45rem))] top-[3.8125rem] z-20 hidden w-[19.5rem] xl:block">
+            <ScrollArea class="h-full">
+              <VPDocAside class="py-10" />
+            </ScrollArea>
+          </div>
         </main>
       </div>
     </div>

packages/docs/.vitepress/theme/components/VPDocAside.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ScrollArea, Anchor, IAnchorItem } from 'tailv'
+import { useData, type Header } from 'vitepress'
+import { type DefaultTheme } from 'vitepress/theme'
+
+defineOptions({ name: 'VPDocAside' })
+
+const { theme, page } = useData<DefaultTheme.Config>()
+
+const title = computed(() => {
+  return (
+    (typeof theme.value.outline === 'object' && !Array.isArray(theme.value.outline) && theme.value.outline.label) ||
+    theme.value.outlineTitle ||
+    'On this page'
+  )
+})
+
+function headers2AnchorItems(headers: Header[]): IAnchorItem[] {
+  return headers.map(header => ({
+    key: header.slug,
+    label: header.title,
+    href: header.link,
+    children: header.children ? headers2AnchorItems(header.children) : undefined,
+  }))
+}
+
+const items = computed(() => headers2AnchorItems(page.value.headers))
+
+console.log(page)
+</script>
+<template>
+  <div class="px-8">
+    <h5 class="mb-4 text-sm font-semibold leading-6 text-slate-900 dark:text-slate-100">
+      {{ title }}
+    </h5>
+    <Anchor class="text-sm leading-6 text-slate-700" :items="items"></Anchor>
+  </div>
+</template>

packages/docs/.vitepress/theme/components/VPNavBar.vue

@@ -21,7 +21,7 @@ const { theme } = useData()
     v-if="hasNavbar"
     class="supports-backdrop-blur:bg-white/60 sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
   >
-    <div class="max-w-8xl mx-auto">
+    <div class="mx-auto max-w-8xl">
       <div class="mx-4 border-b border-slate-900/10 py-4 dark:border-slate-300/10 lg:mx-0 lg:border-0 lg:px-8">
         <div class="relative flex items-center">
           <a class="mr-3 flex-none overflow-hidden font-semibold md:w-auto" href="/">
@@ -54,10 +54,10 @@ const { theme } = useData()
                     stroke-linejoin="round"
                     class="h-6 w-6"
                   >
-                    <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="fill-sky-400/20 stroke-sky-500"></path>
+                    <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="fill-primary-400/20 stroke-primary-500"></path>
                     <path
                       d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
-                      class="stroke-sky-500"
+                      class="stroke-primary-500"
                     ></path>
                   </svg>
                 </span>
@@ -67,17 +67,17 @@ const { theme } = useData()
                       fill-rule="evenodd"
                       clip-rule="evenodd"
                       d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
-                      class="fill-sky-400/20"
+                      class="fill-primary-400/20"
                     ></path>
                     <path
                       d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
-                      class="fill-sky-500"
+                      class="fill-primary-500"
                     ></path>
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
                       d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
-                      class="fill-sky-500"
+                      class="fill-primary-500"
                     ></path>
                   </svg>
                 </span>

packages/docs/components/button.md

@@ -14,6 +14,14 @@ import { Button,SpaceCompact,Tooltip } from 'tailv'
   <Button color="danger">Danger</Button>
 </div>
 
+### test
+
+test
+
+### sss
+
+ssdds
+
 ## secondary Variant
 
 <div class="flex flex-wrap gap-2"> 

packages/vue/src/Anchor/Anchor.vue

@@ -27,7 +27,7 @@ const props = defineProps({
       >
         {{ item.label || item.key }}
       </span>
-      <Anchor v-if="item.children" :items="item.children" :deep="deep + 1" />
+      <Anchor v-if="item.children" class="mt-2" :items="item.children" :deep="deep + 1" />
     </div>
   </div>
 </template>