fix: learn page breadcrumbs where label !== path slug (nodejs#6729)

* fix learn page breadcrumbs where label !== path slug Consider the article "event-loop-timers-and-nexttick" where the label is "The Nodejs Event loop". Breadcrumbs cannot be found in the navigation tree. Ofcourse we can always change the article name to match the label but what about the article "discover-javascript-timers"? Why, there is no problem here! Except there is. The "s" in JavaScript is capitalized. (Shocking, I know. I learned this today). "JavaScript" cannot be written as "java-script" in dash-case. Is it javascript or a script written in Java? Previously docs should have the same article name and label for the breadcrumbs to work. Now it is not necessary. Unless a deeply nested document structure is adopted, in which case we have to DFS the navigation tree. Signed-off-by: abizek <[email protected]> * test: dashToCamelCase string util Signed-off-by: abizek <[email protected]> * fix: Update nav and i18n keys to match article name Signed-off-by: abizek <[email protected]> --------- Signed-off-by: abizek <[email protected]>
canerakdas · May 25, 2024 · acfe436 · acfe436
1 parent 5d23642
commit acfe436
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/components/withBreadcrumbs.tsx b/components/withBreadcrumbs.tsx
@@ -34,11 +34,13 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
     return pathList.reduce((breadcrumbs, path, index) => {
       const nodeWithCurrentPath = currentNode.find(
         ([nodePath, entry]) =>
-          nodePath === path &&
+          // Checking link in cases where nodePath cannot = path. Like 'discoverJavaScriptTimers'
+          (nodePath === path || entry.link === pathname) &&
           // Skip checking child path if it is the last path since there is no more child item inside
           (index === pathList.length - 1 ||
             entry.items.some(
-              ([childPath]) => childPath === pathList[index + 1]
+              ([childPath, entry]) =>
+                childPath === pathList[index + 1] || entry.link === pathname
             ))
       );
 

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -49,8 +49,8 @@
             "asynchronousFlowControl": "Asynchronous flow control",
             "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
             "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "theNodejsEventLoop": "The Node.js Event Loop",
+            "discoverJavascriptTimers": "Discover JavaScript Timers",
+            "eventLoopTimersAndNexttick": "The Node.js Event Loop",
             "theNodejsEventEmitter": "The Node.js Event Emitter",
             "understandingProcessnexttick": "Understanding process.nextTick()",
             "understandingSetimmediate": "Understanding setImmediate()",
@@ -66,7 +66,7 @@
             "readingFilesWithNodejs": "Reading files with Node.js",
             "writingFilesWithNodejs": "Writing files with Node.js",
             "workingWithFoldersInNodejs": "Working with folders in Node.js",
-            "howToWorkWithFileSystems": "How to work with Different Filesystems"
+            "workingWithDifferentFilesystems": "How to work with Different Filesystems"
           }
         },
         "commandLine": {

diff --git a/navigation.json b/navigation.json
@@ -201,13 +201,13 @@
               "link": "/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks",
               "label": "components.navigation.learn.asynchronousWork.links.javascriptAsynchronousProgrammingAndCallbacks"
             },
-            "discoverJavaScriptTimers": {
+            "discoverJavascriptTimers": {
               "link": "/learn/asynchronous-work/discover-javascript-timers",
-              "label": "components.navigation.learn.asynchronousWork.links.discoverJavaScriptTimers"
+              "label": "components.navigation.learn.asynchronousWork.links.discoverJavascriptTimers"
             },
-            "theNodejsEventLoop": {
+            "eventLoopTimersAndNexttick": {
               "link": "/learn/asynchronous-work/event-loop-timers-and-nexttick",
-              "label": "components.navigation.learn.asynchronousWork.links.theNodejsEventLoop"
+              "label": "components.navigation.learn.asynchronousWork.links.eventLoopTimersAndNexttick"
             },
             "theNodejsEventEmitter": {
               "link": "/learn/asynchronous-work/the-nodejs-event-emitter",
@@ -254,9 +254,9 @@
               "link": "/learn/manipulating-files/working-with-folders-in-nodejs",
               "label": "components.navigation.learn.manipulatingFiles.links.workingWithFoldersInNodejs"
             },
-            "howToWorkWithFileSystems": {
+            "workingWithDifferentFilesystems": {
               "link": "/learn/manipulating-files/working-with-different-filesystems",
-              "label": "components.navigation.learn.manipulatingFiles.links.howToWorkWithFileSystems"
+              "label": "components.navigation.learn.manipulatingFiles.links.workingWithDifferentFilesystems"
             }
           }
         },

diff --git a/util/__tests__/stringUtils.test.mjs b/util/__tests__/stringUtils.test.mjs
@@ -1,6 +1,7 @@
 import {
   getAcronymFromString,
   parseRichTextIntoPlainText,
+  dashToCamelCase,
 } from '@/util/stringUtils';
 
 describe('String utils', () => {
@@ -59,4 +60,16 @@ describe('String utils', () => {
     const result = parseRichTextIntoPlainText(richText);
     expect(result).toBe('Line 1\nLine 2\nLine 3');
   });
+
+  it('dashToCamelCase returns correct camelCase', () => {
+    expect(dashToCamelCase('foo-bar-baz')).toBe('fooBarBaz');
+  });
+
+  it('dashToCamelCase returns correct camelCase with capital first letter', () => {
+    expect(dashToCamelCase('Foo-bar')).toBe('fooBar');
+  });
+
+  it('dashToCamelCase returns correct camelCase with numbers', () => {
+    expect(dashToCamelCase('foo-123-bar')).toBe('foo123Bar');
+  });
 });
diff --git a/util/stringUtils.ts b/util/stringUtils.ts
@@ -25,4 +25,6 @@ export const parseRichTextIntoPlainText = (richText: string) =>
 export const dashToCamelCase = (str: string) =>
   str
     .replace(/-([a-z])/g, (match, chr) => chr.toUpperCase())
+    // remove leftover - which don't match the above regex. Like 'es-2015'
+    .replace(/-/g, '')
     .replace(/^[A-Z]/, chr => chr.toLowerCase());