docs(core): fix static paths for nx.dev to include generic paths (#5956)

nx-dev/data-access-documents/src/lib/documents.api.spec.ts

@@ -37,7 +37,7 @@ describe('DocumentsApi', () => {
     });
   });
 
-  describe('getDocumentsPath', () => {
+  describe('getDocumentsRoot', () => {
     it('should support latest', () => {
       expect(api.getDocumentsRoot('latest')).toMatch(
         /nx-dev\/nx-dev\/public\/documentation\/latest/
@@ -59,4 +59,30 @@ describe('DocumentsApi', () => {
       ]);
     });
   });
+
+  describe('getStaticDocumentPaths', () => {
+    it.each`
+      version       | flavor
+      ${'latest'}   | ${'react'}
+      ${'latest'}   | ${'angular'}
+      ${'latest'}   | ${'node'}
+      ${'previous'} | ${'react'}
+      ${'previous'} | ${'angular'}
+      ${'previous'} | ${'node'}
+    `('should return paths for all flavors', ({ version, flavor }) => {
+      const paths = api.getStaticDocumentPaths(version);
+      const urls = paths.map((p) => p.params.segments.join('/'));
+
+      expect(urls).toContainEqual(
+        expect.stringMatching(`${version}/${flavor}/getting-started`)
+      );
+    });
+
+    it('should return generic paths for the latest version', () => {
+      const paths = api.getStaticDocumentPaths('latest');
+      const urls = paths.map((p) => p.params.segments.join('/'));
+
+      expect(urls).toContainEqual(expect.stringMatching(/^getting-started\//));
+    });
+  });
 });

nx-dev/data-access-documents/src/lib/documents.api.ts

@@ -12,9 +12,13 @@ import {
   VersionMetadata,
 } from './documents.models';
 
-export const flavorList: { label: string; value: string }[] = [
+export const flavorList: {
+  label: string;
+  value: string;
+  default?: boolean;
+}[] = [
   { label: 'Angular', value: 'angular' },
-  { label: 'React', value: 'react' },
+  { label: 'React', value: 'react', default: true },
   { label: 'Node', value: 'node' },
 ];
 
@@ -24,6 +28,10 @@ export class DocumentsApi {
     private readonly documentsMap: Map<string, DocumentMetadata[]>
   ) {}
 
+  getDefaultVersion(): VersionMetadata {
+    return this.versions.find((v) => v.default);
+  }
+
   getVersions(): VersionMetadata[] {
     return this.versions;
   }
@@ -64,6 +72,7 @@ export class DocumentsApi {
 
   getStaticDocumentPaths(version: string) {
     const paths = [];
+    const defaultVersion = this.getDefaultVersion();
 
     function recur(curr, acc) {
       if (curr.itemList) {
@@ -76,6 +85,15 @@ export class DocumentsApi {
             segments: [version, ...acc, curr.id],
           },
         });
+
+        // For generic paths such as `/getting-started/intro`, use the default version and react flavor.
+        if (version === defaultVersion.id && acc[0] === 'react') {
+          paths.push({
+            params: {
+              segments: [...acc.slice(1), curr.id],
+            },
+          });
+        }
       }
     }
 

nx-dev/nx-dev/pages/[...segments].tsx

@@ -17,10 +17,7 @@ import { useStorage } from '../lib/use-storage';
 
 const versionList = documentsApi.getVersions();
 const defaultVersion = versionList.find((v) => v.default);
-const defaultFlavor = {
+const defaultFlavor = flavorList.find((f) => f.default);
-  label: 'React',
-  value: 'react',
-};
 
 interface DocumentationPageProps {
   version: VersionMetadata;
@@ -267,27 +264,9 @@ export async function getStaticProps({
 }
 
 export async function getStaticPaths() {
-  const allPaths = versionList.flatMap((v) => {
+  const allPaths = versionList.flatMap((v) =>
-    const paths = documentsApi.getStaticDocumentPaths(v.id);
+    documentsApi.getStaticDocumentPaths(v.id)
-
+  );
-    // Use `/latest/react` as the default path if version and flavor not provided.
-    // Make sure to set `isFallback: true` on the static props of these paths so
-    if (v.id === defaultVersion.id) {
-      paths.concat(
-        paths
-          .filter((path) => path.params.segments[1] === defaultFlavor.value)
-          .map((path) => ({
-            ...path,
-            params: {
-              ...path.params,
-              segments: path.params.segments.slice(2),
-            },
-          }))
-      );
-    }
-
-    return paths;
-  });
 
   return {
     paths: allPaths,