fix: sidebar always matches "/"

packages/theme-default/src/components/Search/SearchPanel.tsx

@@ -7,8 +7,8 @@ import { debounce } from 'lodash-es';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import * as userSearchHooks from 'virtual-search-hooks';
+import { getSidebarDataGroup } from '../../logic/getSidebarDataGroup';
 import { useLocaleSiteData } from '../../logic/useLocaleSiteData';
-import { getSidebarData } from '../../logic/useSidebarData';
 import { SvgWrapper } from '../SvgWrapper';
 import { Tab, Tabs } from '../Tabs';
 import { NoSearchResult } from './NoSearchResult';
@@ -123,7 +123,7 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
 
   // We need to extract the group name by the link so that we can divide the search result into different groups.
   const extractGroupName = (link: string) =>
-    getSidebarData(sidebar, link).group;
+    getSidebarDataGroup(sidebar, link).group;
 
   async function initPageSearcher() {
     if (search === false) {

packages/theme-default/src/logic/getSidebarDataGroup.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getSidebarDataGroup } from './getSidebarDataGroup';
+
+vi.mock('@rspress/runtime', () => {
+  return {
+    isEqualPath: () => true,
+    withBase: (arg0: string) => arg0,
+  };
+});
+
+describe('getSidebarDataGroup', () => {
+  it('when using "/"', async () => {
+    expect(
+      getSidebarDataGroup(
+        {
+          '/': [],
+          '/guide': [
+            {
+              text: 'Getting Started',
+              link: '/guide/getting-started',
+            },
+          ],
+        },
+        '/guide/getting-started',
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "group": "Getting Started",
+        "items": [
+          {
+            "link": "/guide/getting-started",
+            "text": "Getting Started",
+          },
+        ],
+      }
+    `);
+  });
+});

packages/theme-default/src/logic/getSidebarDataGroup.ts

@@ -0,0 +1,110 @@
+import { isEqualPath, withBase } from '@rspress/runtime';
+import {
+  type NormalizedSidebar,
+  type NormalizedSidebarGroup,
+  type SidebarDivider,
+  type SidebarItem,
+  addTrailingSlash,
+} from '@rspress/shared';
+import type { SidebarData } from '../components';
+
+export interface SidebarDataGroup {
+  // The group name for the sidebar
+  group: string;
+  items: SidebarData;
+}
+
+/**
+ * @param pattern /zh/guide
+ * @param currentPathname /base/zh/guide/getting-started
+ */
+export const matchPath = (
+  pattern: string,
+  currentPathname: string,
+): boolean => {
+  const prefix = withBase(pattern);
+  if (prefix === currentPathname) {
+    return true;
+  }
+  const prefixWithTrailingSlash = addTrailingSlash(prefix);
+  return currentPathname.startsWith(prefixWithTrailingSlash);
+};
+
+const match = (
+  item: NormalizedSidebarGroup | SidebarItem | SidebarDivider,
+  currentPathname: string,
+): NormalizedSidebarGroup | SidebarItem | undefined => {
+  const isLink = 'link' in item && item.link !== '';
+  const isDir = 'items' in item;
+
+  // 0. divider or section headers others return false
+
+  // 1. file link
+  if (!isDir && isLink) {
+    // 1.1 /api/config /api/config.html
+    if (isEqualPath(withBase(item.link), currentPathname)) {
+      return item;
+    }
+    // 1.2 /api/config/index /api/config/index.html
+    if (
+      currentPathname.includes('index') &&
+      isEqualPath(`${item.link}/index`, currentPathname)
+    ) {
+      return item;
+    }
+  }
+
+  // 2. dir
+  if (isDir) {
+    // 2.1 dir link (index convention)
+    if (
+      isLink &&
+      (isEqualPath(withBase(item.link), currentPathname) ||
+        isEqualPath(withBase(`${item.link}/index`), currentPathname))
+    ) {
+      return item;
+    }
+    // 2.2 dir recursive
+    for (const childItem of item.items) {
+      const matched = match(childItem, currentPathname);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+
+  return undefined;
+};
+
+export const getSidebarDataGroup = (
+  sidebar: NormalizedSidebar,
+  currentPathname: string,
+): SidebarDataGroup => {
+  /**
+   * why sort?
+   * {
+   *  '/': [],
+   *  '/guide': [
+   *    {
+   *      text: 'Getting Started',
+   *      link: '/guide/getting-started',
+   *    }
+   *   ],
+   * }
+   */
+  const navRoutes = Object.keys(sidebar).sort((a, b) => b.length - a.length);
+  for (const name of navRoutes) {
+    if (matchPath(name, currentPathname)) {
+      const sidebarGroup = sidebar[name];
+      const group = sidebarGroup.find(item => match(item, currentPathname));
+      return {
+        group: group && 'text' in group ? group.text : '',
+        items: sidebarGroup,
+      };
+    }
+  }
+  return {
+    group: 'Documentation',
+    items: [],
+  };
+};

packages/theme-default/src/logic/useFullTextSearch.ts

@@ -2,8 +2,8 @@ import { usePageData } from '@rspress/runtime';
 import { useEffect, useRef, useState } from 'react';
 import type { MatchResult } from '..';
 import { PageSearcher } from '../components/Search/logic/search';
+import { getSidebarDataGroup } from './getSidebarDataGroup';
 import { useLocaleSiteData } from './useLocaleSiteData';
-import { getSidebarData } from './useSidebarData';
 
 export function useFullTextSearch(): {
   initialized: boolean;
@@ -13,7 +13,7 @@ export function useFullTextSearch(): {
   const [initialized, setInitialized] = useState(false);
   const { sidebar } = useLocaleSiteData();
   const extractGroupName = (link: string) =>
-    getSidebarData(sidebar, link).group;
+    getSidebarDataGroup(sidebar, link).group;
   const searchRef = useRef<PageSearcher | null>(null);
 
   useEffect(() => {

packages/theme-default/src/logic/useSidebarData.ts

@@ -1,108 +1,18 @@
-import { isEqualPath, useLocation, withBase } from '@rspress/runtime';
-import {
-  type NormalizedSidebar,
-  type NormalizedSidebarGroup,
-  type SidebarDivider,
-  type SidebarItem,
-  addTrailingSlash,
-} from '@rspress/shared';
+import { useLocation } from '@rspress/runtime';
 import { useMemo } from 'react';
+import {
+  type SidebarDataGroup,
+  getSidebarDataGroup,
+} from './getSidebarDataGroup';
 import { useLocaleSiteData } from './useLocaleSiteData';
 
-interface SidebarData {
-  // The group name for the sidebar
-  group: string;
-  items: (NormalizedSidebarGroup | SidebarItem | SidebarDivider)[];
-}
-
-/**
- * @param pattern /zh/guide
- * @param currentPathname /base/zh/guide/getting-started
- */
-export const matchPath = (
-  pattern: string,
-  currentPathname: string,
-): boolean => {
-  const prefix = withBase(pattern);
-  if (prefix === currentPathname) {
-    return true;
-  }
-  const prefixWithTrailingSlash = addTrailingSlash(prefix);
-  return currentPathname.startsWith(prefixWithTrailingSlash);
-};
-
-const match = (
-  item: NormalizedSidebarGroup | SidebarItem | SidebarDivider,
-  currentPathname: string,
-): NormalizedSidebarGroup | SidebarItem | undefined => {
-  const isLink = 'link' in item && item.link !== '';
-  const isDir = 'items' in item;
-
-  // 0. divider or section headers others return false
-
-  // 1. file link
-  if (!isDir && isLink) {
-    // 1.1 /api/config /api/config.html
-    if (isEqualPath(withBase(item.link), currentPathname)) {
-      return item;
-    }
-    // 1.2 /api/config/index /api/config/index.html
-    if (
-      currentPathname.includes('index') &&
-      isEqualPath(`${item.link}/index`, currentPathname)
-    ) {
-      return item;
-    }
-  }
-
-  // 2. dir
-  if (isDir) {
-    // 2.1 dir link (index convention)
-    if (
-      isLink &&
-      (isEqualPath(withBase(item.link), currentPathname) ||
-        isEqualPath(withBase(`${item.link}/index`), currentPathname))
-    ) {
-      return item;
-    }
-    // 2.2 dir recursive
-    for (const childItem of item.items) {
-      const matched = match(childItem, currentPathname);
-      if (matched) {
-        return matched;
-      }
-    }
-  }
-
-  return undefined;
-};
-
-export const getSidebarData = (
-  sidebar: NormalizedSidebar,
-  currentPathname: string,
-): SidebarData => {
-  for (const name of Object.keys(sidebar)) {
-    if (matchPath(name, currentPathname)) {
-      const sidebarGroup = sidebar[name];
-      const group = sidebarGroup.find(item => match(item, currentPathname));
-      return {
-        group: group && 'text' in group ? group.text : '',
-        items: sidebarGroup,
-      };
-    }
-  }
-  return {
-    group: 'Documentation',
-    items: [],
-  };
-};
-export function useSidebarData(): SidebarData {
+export function useSidebarData(): SidebarDataGroup {
   const { sidebar } = useLocaleSiteData();
   const { pathname: rawPathname } = useLocation();
   const pathname = decodeURIComponent(rawPathname);
 
   const sidebarData = useMemo(() => {
-    return getSidebarData(sidebar, pathname);
+    return getSidebarDataGroup(sidebar, pathname);
   }, [sidebar, pathname]);
 
   return sidebarData;