fix: fix frontmatter sidebarDepth for headers

docs/guide/deploy.md

@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Deploying
 
 The following guides are based on some shared assumptions:

docs/guide/differences-from-vuepress.md

@@ -1,3 +1,6 @@
+---
+sidebarDepth: 2
+---
 # Differences from VuePress
 
 VitePress and VuePress have different [design goals](../index.md). Both projects share similar config naming conventions. VitePress aims to have the bare minimum features needed for authoring docs. Other features are pushed to Themes. On the other hand, VuePress has more features out-of-the-box or enabled by its ecosystem of plugins.

docs/guide/markdown.md

@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Markdown Extensions
 
 ## Header Anchors

docs/guide/using-vue.md

@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Using Vue in Markdown
 
 In VitePress, each markdown file is compiled into HTML and then processed as a Vue Single-File Component. This means you can use any Vue features inside the markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a `<script>` tag.

docs/index.md

@@ -1,5 +1,5 @@
 ---
-sidebarDepth: 1
+sidebarDepth: 2
 ---
 
 # What is VitePress?

src/client/theme-default/components/SideBarLink.ts

@@ -10,16 +10,22 @@ interface HeaderWithChildren extends Header {
 
 export const SideBarLink: FunctionalComponent<{
   item: DefaultTheme.SideBarItem
+  depth?: number
 }> = (props) => {
   const route = useRoute()
-  const { site } = useData()
+  const { site, frontmatter } = useData()
+  const depth = props.depth || 1
+  const maxDepth = frontmatter.value.sidebarDepth || Infinity
 
   const headers = route.data.headers
   const text = props.item.text
   const link = resolveLink(site.value.base, props.item.link)
   const children = (props.item as DefaultTheme.SideBarGroup).children
   const active = isActive(route, props.item.link)
-  const childItems = createChildren(active, children, headers)
+  const childItems =
+    depth < maxDepth
+      ? createChildren(active, children, headers, depth + 1)
+      : null
 
   return h('li', { class: 'sidebar-link' }, [
     h(
@@ -50,20 +56,21 @@ function resolveLink(base: string, path?: string): string | undefined {
 function createChildren(
   active: boolean,
   children?: DefaultTheme.SideBarItem[],
-  headers?: Header[]
+  headers?: Header[],
+  depth = 1
 ): VNode | null {
   if (children && children.length > 0) {
     return h(
       'ul',
       { class: 'sidebar-links' },
       children.map((c) => {
-        return h(SideBarLink, { item: c })
+        return h(SideBarLink, { item: c, depth })
       })
     )
   }
 
   return active && headers
-    ? createChildren(false, resolveHeaders(headers))
+    ? createChildren(false, resolveHeaders(headers), undefined, depth)
     : null
 }