fix: highlight appropriate navItem based on active sidebar item (#6310)

* fix: highlight appropriate navItem based on active sidebar item

* fix: try using location.pathname

* fix: remote console.log

* fix: include category generated indices in globalData

* Add test

* fix snap

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

packages/docusaurus-plugin-content-docs/src/__tests__/__fixtures__/simple-site/sidebars.json

@@ -9,6 +9,9 @@
       {
         "type": "category",
         "label": "Slugs",
+        "link": {
+          "type": "generated-index"
+        },
         "items": [
           "rootAbsoluteSlug",
           "rootRelativeSlug",

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/cli.test.ts.snap

@@ -23,6 +23,9 @@ Object {
           "rootTryToEscapeSlug",
         ],
         "label": "Slugs",
+        "link": Object {
+          "type": "generated-index",
+        },
         "type": "category",
       },
       Object {

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap

@@ -46,8 +46,8 @@ Object {
   "lastUpdatedAt": undefined,
   "lastUpdatedBy": undefined,
   "next": Object {
-    "permalink": "/docs/rootAbsoluteSlug",
-    "title": "rootAbsoluteSlug",
+    "permalink": "/docs/category/slugs",
+    "title": "Slugs",
   },
   "permalink": "/docs/foo/bazSlug.html",
   "previous": Object {
@@ -196,7 +196,11 @@ Object {
             },
           ],
           "label": "Slugs",
-          "link": undefined,
+          "link": Object {
+            "permalink": "/docs/category/slugs",
+            "slug": "/category/slugs",
+            "type": "generated-index",
+          },
           "type": "category",
         },
         Object {
@@ -317,6 +321,11 @@ Object {
               "path": "/docs/tryToEscapeSlug",
               "sidebar": undefined,
             },
+            Object {
+              "id": "/category/slugs",
+              "path": "/docs/category/slugs",
+              "sidebar": "docs",
+            },
           ],
           "isLast": true,
           "label": "Next",
@@ -340,6 +349,21 @@ Object {
 
 exports[`simple website content: data 1`] = `
 Object {
+  "category-docs-docs-category-slugs-0fe.json": "{
+  \\"title\\": \\"Slugs\\",
+  \\"slug\\": \\"/category/slugs\\",
+  \\"permalink\\": \\"/docs/category/slugs\\",
+  \\"navigation\\": {
+    \\"previous\\": {
+      \\"title\\": \\"baz pagination_label\\",
+      \\"permalink\\": \\"/docs/foo/bazSlug.html\\"
+    },
+    \\"next\\": {
+      \\"title\\": \\"rootAbsoluteSlug\\",
+      \\"permalink\\": \\"/docs/rootAbsoluteSlug\\"
+    }
+  }
+}",
   "site-docs-doc-with-space-md-e90.json": "{
   \\"unversionedId\\": \\"doc with space\\",
   \\"id\\": \\"doc with space\\",
@@ -413,8 +437,8 @@ Object {
     \\"permalink\\": \\"/docs/foo/bar\\"
   },
   \\"next\\": {
-    \\"title\\": \\"rootAbsoluteSlug\\",
-    \\"permalink\\": \\"/docs/rootAbsoluteSlug\\"
+    \\"title\\": \\"Slugs\\",
+    \\"permalink\\": \\"/docs/category/slugs\\"
   }
 }",
   "site-docs-heading-as-title-md-c6d.json": "{
@@ -800,7 +824,8 @@ Object {
               }
             ],
             \\"collapsible\\": true,
-            \\"collapsed\\": true
+            \\"collapsed\\": true,
+            \\"href\\": \\"/docs/category/slugs\\"
           },
           {
             \\"type\\": \\"link\\",
@@ -1009,6 +1034,11 @@ Object {
               "path": "/docs/tryToEscapeSlug",
               "sidebar": undefined,
             },
+            Object {
+              "id": "/category/slugs",
+              "path": "/docs/category/slugs",
+              "sidebar": "docs",
+            },
           ],
           "isLast": true,
           "label": "Next",
@@ -1090,6 +1120,15 @@ Array [
         },
         "path": "/docs/absoluteSlug",
       },
+      Object {
+        "component": "@theme/DocCategoryGeneratedIndexPage",
+        "exact": true,
+        "modules": Object {
+          "categoryGeneratedIndex": "~docs/category-docs-docs-category-slugs-0fe.json",
+        },
+        "path": "/docs/category/slugs",
+        "sidebar": "docs",
+      },
       Object {
         "component": "@theme/DocItem",
         "exact": true,

packages/docusaurus-plugin-content-docs/src/globalData.ts

@@ -9,7 +9,11 @@ import {mapValues} from 'lodash';
 import {normalizeUrl} from '@docusaurus/utils';
 import type {Sidebars} from './sidebars/types';
 import {createSidebarsUtils} from './sidebars/utils';
-import type {DocMetadata, LoadedVersion} from './types';
+import type {
+  CategoryGeneratedIndexMetadata,
+  DocMetadata,
+  LoadedVersion,
+} from './types';
 import type {
   GlobalVersion,
   GlobalSidebar,
@@ -24,6 +28,16 @@ export function toGlobalDataDoc(doc: DocMetadata): GlobalDoc {
   };
 }
 
+export function toGlobalDataGeneratedIndex(
+  doc: CategoryGeneratedIndexMetadata,
+): GlobalDoc {
+  return {
+    id: doc.slug,
+    path: doc.permalink,
+    sidebar: doc.sidebar,
+  };
+}
+
 export function toGlobalSidebars(
   sidebars: Sidebars,
   version: LoadedVersion,
@@ -56,7 +70,9 @@ export function toGlobalDataVersion(version: LoadedVersion): GlobalVersion {
     isLast: version.isLast,
     path: version.versionPath,
     mainDocId: version.mainDocId,
-    docs: version.docs.map(toGlobalDataDoc),
+    docs: version.docs
+      .map(toGlobalDataDoc)
+      .concat(version.categoryGeneratedIndices.map(toGlobalDataGeneratedIndex)),
     sidebars: toGlobalSidebars(version.sidebars, version),
   };
 }

packages/docusaurus-plugin-content-docs/src/routes.ts

@@ -20,10 +20,12 @@ export async function createCategoryGeneratedIndexRoutes({
   version,
   actions,
   docCategoryGeneratedIndexComponent,
+  aliasedSource,
 }: {
   version: LoadedVersion;
   actions: PluginContentLoadedActions;
   docCategoryGeneratedIndexComponent: string;
+  aliasedSource: (str: string) => string;
 }): Promise<RouteConfig[]> {
   const slugs = createSlugger();
 
@@ -69,7 +71,7 @@ export async function createCategoryGeneratedIndexRoutes({
       component: docCategoryGeneratedIndexComponent,
       exact: true,
       modules: {
-        categoryGeneratedIndex: propData,
+        categoryGeneratedIndex: aliasedSource(propData),
       },
       // Same as doc, this sidebar route attribute permits to associate this subpage to the given sidebar
       ...(sidebar && {sidebar}),
@@ -149,6 +151,7 @@ export async function createVersionRoutes({
           version,
           actions,
           docCategoryGeneratedIndexComponent,
+          aliasedSource,
         }),
       ]);