Merge branch 'main' into migrate-abi-stability

Signed-off-by: Neeraj Saini <[email protected]>

COLLABORATOR_GUIDE.md

@@ -80,7 +80,7 @@ The Website also uses several other Open Source libraries (not limited to) liste
 - [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
 - [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
 - [Radix UI][] is a collection of customizable UI components
-- [Shikiji][] is a Syntax Highlighter used for our Codeboxes
+- [Shiki][] is a Syntax Highlighter used for our Codeboxes
   - The syntax highlighting is done within the processing of the Markdown files with the MDX compiler as a Rehype plugin.
 - [MDX][] and Markdown are used for structuring the Content of the Website
 - [`next-intl`][] is the i18n Library adopted within the Website
@@ -453,11 +453,9 @@ MDX is becoming the standard for parsing human-content on React/Next.js-based Ap
 - `rehype-autolink-headings`: Allows us to add Anchor Links to Markdown Headings
 - `rehype-slug`: Allows us to add IDs to Markdown Headings
 
-#### Syntax Highlighting (Shikiji) and Vercel
+#### Syntax Highlighting (Shiki) and Vercel
 
-We use [Shikiji][] which is a refactor of the famous [Shiki](https://github.com/shikijs/shiki) syntax highlighter in ESM. We use it to support our native ESM-nature, and since Shiki is incompatible on serverless environments and Edge functions due of the need of Node's `fs`. Shikiji is definitely a nice port/rewrite of Shiki which supports our needs.
-
-Shikiji is integrated on our workflow as a Reype Plugin, see the `next.mdx.shiki.mjs` file. We also use the `nord` theme for Shikiji and a subset of the supported languages as defined on the `shiki.config.mjs` file.
+Shiki is integrated on our workflow as a Rehype Plugin, see the `next.mdx.shiki.mjs` file. We also use the `nord` theme for Shiki and a subset of the supported languages as defined on the `shiki.config.mjs` file.
 
 ### Vercel
 
@@ -498,6 +496,6 @@ If you're unfamiliar or curious about something, we recommend opening a Discussi
 [MDX]: https://mdxjs.com/
 [PostCSS]: https://postcss.org/
 [React]: https://react.dev/
-[Shikiji]: https://github.com/antfu/shikiji
+[Shiki]: https://github.com/shikijs/shiki
 [Tailwind]: https://tailwindcss.com/
 [Radix UI]: https://www.radix-ui.com/

components/Common/CodeBox/index.module.css

@@ -42,6 +42,7 @@
             mr-4
             w-4.5
             text-right
+            font-ibm-plex-mono
             text-neutral-600
             [content:counter(line)]
             [counter-increment:line];

components/Common/CodeBox/index.tsx

@@ -31,27 +31,33 @@ const transformCode = (code: ReactNode): ReactNode => {
     return code;
   }
 
+  // Note that since we use `.split` we will have an extra entry
+  // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
   return (
-    <code>
-      {lines.flatMap((line, lineIndex) => {
-        const columns = line.split(' ');
-
-        return [
-          <span key={lineIndex} className="line">
-            {columns.map((column, columnIndex) => (
-              <Fragment key={columnIndex}>
-                <span>{column}</span>
-                {columnIndex < columns.length - 1 && <span> </span>}
-              </Fragment>
-            ))}
-          </span>,
-          // Add a break line so the text content is formatted correctly
-          // when copying to clipboard
-          '\n',
-        ];
-      })}
+    <code style={{ fontFamily: 'monospace' }}>
+      {lines
+        .flatMap((line, lineIndex) => {
+          const columns = line.split(' ');
+
+          return [
+            <span key={lineIndex} className="line">
+              {columns.map((column, columnIndex) => (
+                <Fragment key={columnIndex}>
+                  <span>{column}</span>
+                  {columnIndex < columns.length - 1 && <span> </span>}
+                </Fragment>
+              ))}
+            </span>,
+            // Add a break line so the text content is formatted correctly
+            // when copying to clipboard
+            '\n',
+          ];
+        })
+        // Here we remove that empty line from before and
+        // the last flatMap entry which is an `\n`
+        .slice(0, -2)}
     </code>
   );
 };

i18n/locales/en.json

@@ -88,6 +88,10 @@
         "diagnostics": {
           "links": {
             "diagnostics": "Diagnostics",
+            "userJourney": "User Journey",
+            "memory": "Memory",
+            "liveDebugging": "Live Debugging",
+            "poorPerformance": "Poor Performance",
             "flameGraphs": "Flame Graphs"
           }
         }

navigation.json

@@ -238,6 +238,22 @@
         "diagnostics": {
           "label": "components.navigation.learn.diagnostics.links.diagnostics",
           "items": {
+            "userJourney": {
+              "link": "/learn/diagnostics/user-journey",
+              "label": "components.navigation.learn.diagnostics.links.userJourney"
+            },
+            "memory": {
+              "link": "/learn/diagnostics/memory",
+              "label": "components.navigation.learn.diagnostics.links.memory"
+            },
+            "liveDebugging": {
+              "link": "/learn/diagnostics/live-debugging",
+              "label": "components.navigation.learn.diagnostics.links.liveDebugging"
+            },
+            "poorPerformance": {
+              "link": "/learn/diagnostics/poor-performance",
+              "label": "components.navigation.learn.diagnostics.links.poorPerformance"
+            },
             "flameGraphs": {
               "link": "/learn/diagnostics/flame-graphs",
               "label": "components.navigation.learn.diagnostics.links.flameGraphs"

next.mdx.shiki.mjs

@@ -116,11 +116,11 @@ export default function rehypeShikiji() {
 
         // This removes all the original Code Elements and adds a new CodeTab Element
         // at the original start of the first Code Element
-        parent.children.splice(index, currentIndex, codeTabElement);
+        parent.children.splice(index, currentIndex - index, codeTabElement);
 
         // Prevent visiting the code block children and for the next N Elements
         // since all of them belong to this CodeTabs Element
-        return [SKIP, currentIndex];
+        return [SKIP];
       }
     });