fix(plugin-auto-nav-sidebar): auto generated sidebar should consider …

…`route.extensions` when `_meta.json` don't exists (#1369)
web-infra-dev · Aug 30, 2024 · 19698a1 · 19698a1
1 parent 650b810
commit 19698a1
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/data.json b/e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/data.json
diff --git a/e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/rspress-config/1.png b/e2e/fixtures/auto-nav-sidebar-no-meta/doc/api/rspress-config/1.png
diff --git a/packages/plugin-auto-nav-sidebar/src/index.ts b/packages/plugin-auto-nav-sidebar/src/index.ts
@@ -157,6 +157,7 @@ function processLocales(
   root: string,
   defaultLang: string,
   defaultVersion: string,
+  extensions: string[],
 ) {
   return Promise.all(
     langs.map(async lang => {
@@ -168,21 +169,29 @@ function processLocales(
                   lang === defaultLang ? '' : `/${lang}`
                 }`,
               );
-              return walk(path.join(root, version, lang), routePrefix, root);
+              return walk(
+                path.join(root, version, lang),
+                routePrefix,
+                root,
+                extensions,
+              );
             }),
           )
         : [
             await walk(
               path.join(root, lang),
               addTrailingSlash(lang === defaultLang ? '' : `/${lang}`),
               root,
+              extensions,
             ),
           ];
       return combineWalkResult(walks, versions);
     }),
   );
 }
 
+const defaultExtensions = ['.mdx', '.md', '.tsx', '.jsx', '.ts', '.js'];
+
 export function pluginAutoNavSidebar(): RspressPlugin {
   return {
     name: 'auto-nav-sidebar',
@@ -196,13 +205,15 @@ export function pluginAutoNavSidebar(): RspressPlugin {
       const versions = config.multiVersion?.versions || [];
       const defaultLang = config.lang || '';
       const { default: defaultVersion = '' } = config.multiVersion || {};
+      const { extensions = defaultExtensions } = config?.route || {};
       if (hasLocales) {
         const metaInfo = await processLocales(
           langs,
           versions,
           config.root!,
           defaultLang,
           defaultVersion,
+          extensions,
         );
         config.themeConfig.locales = config.themeConfig.locales.map(
           (item, index) => ({
@@ -230,10 +241,11 @@ export function pluginAutoNavSidebar(): RspressPlugin {
                   path.join(config.root!, version),
                   routePrefix,
                   config.root!,
+                  extensions,
                 );
               }),
             )
-          : [await walk(config.root!, '/', config.root!)];
+          : [await walk(config.root!, '/', config.root!, extensions)];
 
         const combined = combineWalkResult(walks, versions);
 

diff --git a/packages/plugin-auto-nav-sidebar/src/utils.ts b/packages/plugin-auto-nav-sidebar/src/utils.ts
@@ -4,8 +4,7 @@ import type { NavItem, Sidebar } from '@rspress/shared';
 import { logger } from '@rspress/shared/logger';
 import { loadFrontMatter } from '@rspress/shared/node-utils';
 
-export async function detectFilePath(rawPath: string) {
-  const extensions = ['.mdx', '.md', '.tsx', '.jsx', '.ts', '.js'];
+export async function detectFilePath(rawPath: string, extensions: string[]) {
   // The params doesn't have extension name, so we need to try to find the file with the extension name.
   let realPath: string | undefined = rawPath;
   const fileExtname = path.extname(rawPath);
@@ -29,13 +28,14 @@ export async function detectFilePath(rawPath: string) {
 export async function extractInfoFromFrontmatter(
   filePath: string,
   rootDir: string,
+  extensions: string[],
 ): Promise<{
   realPath: string | undefined;
   title: string;
   overviewHeaders: string | undefined;
   context: string | undefined;
 }> {
-  const realPath = await detectFilePath(filePath);
+  const realPath = await detectFilePath(filePath, extensions);
   if (!realPath) {
     logger.warn(
       `Can't find the file: ${filePath}, please check it in "${path.join(

diff --git a/packages/plugin-auto-nav-sidebar/src/walk.ts b/packages/plugin-auto-nav-sidebar/src/walk.ts
@@ -20,6 +20,7 @@ export async function scanSideMeta(
   rootDir: string,
   docsDir: string,
   routePrefix: string,
+  extensions: string[],
 ) {
   if (!(await fs.exists(workDir))) {
     logger.error(
@@ -43,7 +44,7 @@ export async function scanSideMeta(
     // If there exists a file with the same name of the directory folder
     // we don't need to generate SideMeta for this single file
     subItems = subItems.filter(item => {
-      const hasExtension = ['.md', '.mdx'].some(ext => item.endsWith(ext));
+      const hasExtension = extensions.some(ext => item.endsWith(ext));
       const hasSameBaseName = subItems.some(elem => {
         const baseName = elem.replace(/\.[^/.]+$/, '');
         return baseName === item.replace(/\.[^/.]+$/, '') && elem !== item;
@@ -69,6 +70,7 @@ export async function scanSideMeta(
               const { title } = await extractInfoFromFrontmatter(
                 filePath,
                 rootDir,
+                extensions,
               );
               label = title;
             };
@@ -85,7 +87,7 @@ export async function scanSideMeta(
               label,
             };
           }
-          return item;
+          return extensions.some(ext => item.endsWith(ext)) ? item : null;
         }),
       )
     ).filter(Boolean) as SideMeta;
@@ -103,6 +105,7 @@ export async function scanSideMeta(
           await extractInfoFromFrontmatter(
             path.resolve(workDir, metaItem),
             rootDir,
+            extensions,
           );
         const pureLink = `${relativePath}/${metaItem.replace(/\.mdx?$/, '')}`;
         return {
@@ -132,6 +135,7 @@ export async function scanSideMeta(
         const info = await extractInfoFromFrontmatter(
           path.resolve(workDir, name),
           rootDir,
+          extensions,
         );
         const title = label || info.title;
         const realPath = info.realPath;
@@ -154,8 +158,9 @@ export async function scanSideMeta(
           rootDir,
           docsDir,
           routePrefix,
+          extensions,
         );
-        const realPath = await detectFilePath(subDir);
+        const realPath = await detectFilePath(subDir, extensions);
         return {
           text: label,
           collapsible,
@@ -193,6 +198,7 @@ export async function walk(
   workDir: string,
   routePrefix = '/',
   docsDir: string,
+  extensions: string[],
 ) {
   // find the `_meta.json` file
   const rootMetaFile = path.resolve(workDir, '_meta.json');
@@ -230,6 +236,7 @@ export async function walk(
       workDir,
       docsDir,
       routePrefix,
+      extensions,
     );
   }
   return {