feat(theme): sort multiple sidebars (#1552)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

__tests__/client/theme-default/support/sidebar.spec.ts

@@ -0,0 +1,97 @@
+import { describe, test, expect } from 'vitest'
+import { getSidebar } from 'client/theme-default/support/sidebar'
+
+describe('client/theme-default/support/sidebar', () => {
+  const root = [
+    {
+      text: 'A',
+      collapsible: true,
+      items: [
+        {
+          text: 'A',
+          link: ''
+        }
+      ]
+    },
+    {
+      text: 'B',
+      items: [
+        {
+          text: 'B',
+          link: ''
+        }
+      ]
+    }
+  ]
+  const another = [
+    {
+      text: 'C',
+      items: [
+        {
+          text: 'C',
+          link: ''
+        }
+      ]
+    }
+  ]
+  describe('normal sidebar sort', () => {
+    const normalSidebar = {
+      '/': root,
+      '/multi-sidebar/': another
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(normalSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(normalSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(normalSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+  describe('reversed sidebar sort', () => {
+    const reversedSidebar = {
+      '/multi-sidebar/': another,
+      '/': root
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(reversedSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(reversedSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(reversedSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+  describe('nested sidebar sort', () => {
+    const nested = [
+      {
+        text: 'D',
+        items: [
+          {
+            text: 'D',
+            link: ''
+          }
+        ]
+      }
+    ]
+    const nestedSidebar = {
+      '/': root,
+      '/multi-sidebar/': another,
+      '/multi-sidebar/nested/': nested
+    }
+    test('gets / sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/')).toBe(root)
+    })
+    test('gets /multi-sidebar/ sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/multi-sidebar/')).toBe(another)
+    })
+    test('gets /multi-sidebar/nested/ sidebar', () => {
+      expect(getSidebar(nestedSidebar, '/multi-sidebar/nested/')).toBe(nested)
+    })
+    test('gets / sidebar again', () => {
+      expect(getSidebar(nestedSidebar, '/some-entry.html')).toBe(root)
+    })
+  })
+})

examples/configured/.vitepress/config.js

@@ -24,6 +24,30 @@ export default defineConfig({
               link: '/static-data/data'
             }
           ]
+        },
+        {
+          text: 'Multi Sidebar Test',
+          items: [
+            {
+              text: 'Test Page',
+              link: '/multi-sidebar/'
+            }
+          ]
+        }
+      ],
+      '/multi-sidebar/': [
+        {
+          text: 'Multi Sidebar',
+          items: [
+            {
+              text: 'Test Page',
+              link: '/multi-sidebar/'
+            },
+            {
+              text: 'Back',
+              link: '/'
+            }
+          ]
         }
       ]
     }

examples/configured/__test__/multisidebar.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from 'vitest'
+import { page, vitePressTestUrl, waitForLayout } from '~utils'
+
+describe('test multi sidebar sort root', () => {
+  beforeAll(async () => {
+    await page.goto(
+      vitePressTestUrl + '/frontmatter/multiple-levels-outline.html'
+    )
+    await waitForLayout()
+  })
+
+  test('using / sidebar', async () => {
+    const sidebarLocator = await page.locator(
+      '.VPSidebarGroup .title .title-text'
+    )
+
+    const sidebarContent = await sidebarLocator.allTextContents()
+    expect(sidebarContent).toEqual([
+      'Frontmatter',
+      'Static Data',
+      'Multi Sidebar Test'
+    ])
+  })
+})
+
+describe('test multi sidebar sort other', () => {
+  beforeAll(async () => {
+    await page.goto(vitePressTestUrl + '/multi-sidebar/index.html')
+    await waitForLayout()
+  })
+
+  test('using /multi-sidebar/ sidebar', async () => {
+    const sidebarLocator = await page.locator(
+      '.VPSidebarGroup .title .title-text'
+    )
+
+    const sidebarContent = await sidebarLocator.allTextContents()
+    expect(sidebarContent).toEqual(['Multi Sidebar'])
+  })
+})

examples/configured/index.md

@@ -1,3 +1,3 @@
 # Full Configured VitePress Example
 
-WIP
+WIP

examples/configured/multi-sidebar/index.md

@@ -0,0 +1,5 @@
+---
+title: Multi Sidebar Test
+---
+
+# Multi Sidebar Test

src/client/theme-default/support/sidebar.ts

@@ -15,16 +15,22 @@ export function getSidebar(
     return sidebar
   }
 
+  if (sidebar == null) {
+    return []
+  }
+
   path = ensureStartingSlash(path)
 
-  for (const dir in sidebar) {
-    // make sure the multi sidebar key starts with slash too
-    if (path.startsWith(ensureStartingSlash(dir))) {
-      return sidebar[dir]
-    }
-  }
+  const dir = Object.keys(sidebar)
+    .sort((a, b) => {
+      return b.split('/').length - a.split('/').length
+    })
+    .find((dir) => {
+      // make sure the multi sidebar key starts with slash too
+      return path.startsWith(ensureStartingSlash(dir))
+    })
 
-  return []
+  return dir ? sidebar[dir] : []
 }
 
 export function getFlatSideBarLinks(sidebar: DefaultTheme.SidebarGroup[]) {