feat: add multi sidebar support (#38) (#49)

* feat: add multi sidebar support

* refactor: rename `resolvePath` to more readable one

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

@@ -1,7 +1,7 @@
 import { useSiteData, usePageData, useRoute } from 'vitepress'
 import { computed, h, FunctionalComponent, VNode } from 'vue'
 import { Header } from '../../../../types/shared'
-import { isActive } from '../utils'
+import { isActive, getPathDirName } from '../utils'
 import { DefaultTheme } from '../config'
 import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
 
@@ -62,7 +62,12 @@ export default {
  } else if (themeSidebar === false) {
  return []
  } else if (typeof themeSidebar === 'object') {
- return resolveMultiSidebar(themeSidebar, route.path, sidebarDepth)
+ return resolveMultiSidebar(
+ themeSidebar,
+ route.path,
+ headers,
+ sidebarDepth
+ )
  }
  }
  })
@@ -86,6 +91,10 @@ interface ResolvedSidebarItem {
 function resolveAutoSidebar(headers: Header[], depth: number): ResolvedSidebar {
  const ret: ResolvedSidebar = []
 
+ if (headers === undefined) {
+ return []
+ }
+
  let lastH2: ResolvedSidebarItem | undefined = undefined
  headers.forEach(({ level, title, slug }) => {
  if (level - 1 > depth) {
@@ -117,8 +126,19 @@ function resolveArraySidebar(
 function resolveMultiSidebar(
  config: DefaultTheme.MultiSideBarConfig,
  path: string,
+ headers: Header[],
  depth: number
 ): ResolvedSidebar {
+ const item = config[getPathDirName(path)]
+
+ if (Array.isArray(item)) {
+ return resolveArraySidebar(item, depth)
+ }
+
+ if (item === 'auto') {
+ return resolveAutoSidebar(headers, depth)
+ }
+
  return []
 }
 

src/client/theme-default/utils.ts

@@ -26,3 +26,22 @@ export function isActive(route: Route, path?: string): boolean {
 export function normalize(path: string): string {
  return decodeURI(path).replace(hashRE, '').replace(extRE, '')
 }
+
+/**
+ * get the path without filename (the last segment). for example, if the given
+ * path is `/guide/getting-started.html`, this method will return `/guide/`.
+ * Always with a trailing slash.
+ */
+export function getPathDirName(path: string): string {
+ const segments = path.split('/')
+
+ if (segments[segments.length - 1]) {
+ segments.pop()
+ }
+
+ return ensureEndingSlash(segments.join('/'))
+}
+
+export function ensureEndingSlash(path: string): string {
+ return /(\.html|\/)$/.test(path) ? path : `${path}/`
+}