Merge remote-tracking branch 'upstream/main' into sidebar-component-family

Author: Manikanta Mavireddy

.github/workflows/build.yml

@@ -60,7 +60,7 @@ jobs:
         run: echo C:\Program Files\Git\usr\bin>>"%GITHUB_PATH%"
 
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           # Since we checkout the HEAD of the current Branch, if the Pull Request comes from a Fork
           # we want to clone the fork's repository instead of the base repository
@@ -94,7 +94,7 @@ jobs:
             cache-build-
 
       - name: Set up Node.js
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'

.github/workflows/dependency-review.yml

@@ -21,12 +21,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@8ca2b8b2ece13480cda6dacd3511b49857a23c09 # v2.5.1
+        uses: step-security/harden-runner@1b05615854632b887b69ae1be8cbefe72d3ae423 # v2.6.0
         with:
           egress-policy: audit
 
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Review Dependencies
         uses: actions/dependency-review-action@6c5ccdad469c9f8a2996bfecaec55a631a347034 # v3.1.0

.github/workflows/lighthouse.yml

@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           # Since we checkout the HEAD of the current Branch, if the Pull Request comes from a Fork
           # we want to clone the fork's repository instead of the base repository
@@ -51,7 +51,7 @@ jobs:
 
       - name: Add Comment to PR
         # Signal that a lighthouse run is about to start
-        uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2
+        uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308 # v2.4.3
         with:
           message: |
             Running Lighthouse audit...
@@ -65,14 +65,6 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           max_timeout: 90
 
-      - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
-        with:
-          # By default Git Checkout on `pull-request-target` will checkout
-          # the `default` branch of the Pull Request. We want to checkout
-          # the actual branch of the Pull Request.
-          ref: ${{ github.event.pull_request.head.ref }}
-
       - name: Audit Preview URL with Lighthouse
         # Conduct the lighthouse audit
         id: lighthouse_audit
@@ -109,7 +101,7 @@ jobs:
 
       - name: Add Comment to PR
         # Replace the previous message with our formatted lighthouse results
-        uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2
+        uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308 # v2.4.3
         with:
           # Reference the previously created comment
           comment_tag: 'lighthouse_audit'

.github/workflows/lint-and-tests.yml

@@ -61,7 +61,7 @@ jobs:
 
     steps:
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           # Since we checkout the HEAD of the current Branch, if the Pull Request comes from a Fork
           # we want to clone the fork's repository instead of the base repository
@@ -95,7 +95,7 @@ jobs:
             cache-lint-
 
       - name: Set up Node.js
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -171,7 +171,7 @@ jobs:
 
     steps:
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           # Since we checkout the HEAD of the current Branch, if the Pull Request comes from a Fork
           # we want to clone the fork's repository instead of the base repository
@@ -188,7 +188,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up Node.js
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'

.github/workflows/scorecard.yml

@@ -32,12 +32,12 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@8ca2b8b2ece13480cda6dacd3511b49857a23c09 # v2.5.1
+        uses: step-security/harden-runner@1b05615854632b887b69ae1be8cbefe72d3ae423 # v2.6.0
         with:
           egress-policy: audit
 
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           persist-credentials: false
 

.github/workflows/translations-pr.yml

@@ -33,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f
+      - uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308
         with:
           message: |
             > [!NOTE]\
@@ -56,7 +56,7 @@ jobs:
 
     steps:
       - name: Git Checkout
-        uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           # By default Git Checkout on `pull-request-target` will checkout
           # the `default` branch of the Pull Request. We want to checkout
@@ -80,7 +80,7 @@ jobs:
             cache-lint-
 
       - name: Set up Node.js
-        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -102,7 +102,7 @@ jobs:
         run: npx prettier "{pages,i18n}/**/*.{json,md,mdx}" --check --write --cache --cache-strategy=metadata --cache-location=.prettiercache
 
       - name: Push Changes back to Pull Request
-        uses: stefanzweifel/git-auto-commit-action@3ea6ae190baf489ba007f7c92608f33ce20ef04a
+        uses: stefanzweifel/git-auto-commit-action@8756aa072ef5b4a080af5dc8fef36c5d586e521d
         with:
           commit_options: '--no-verify --signoff'
           commit_message: 'chore: automated format of translated files'

global.d.ts

@@ -36,7 +36,7 @@ const nextConfig = {
   eslint: { dirs: ['.'], ignoreDuringBuilds: true },
   // Next.js WebPack Bundler does not know how to handle `.mjs` files on `node_modules`
   // This is not an issue when using TurboPack as it uses SWC and it is ESM-only
-  // Once we migrate to Next.js 14 we might be able to remove this
+  // Once Next.js uses Turbopack for their build process we can remove this
   webpack: function (config) {
     config.module.rules.push({
       test: /\.m?js$/,
@@ -58,6 +58,8 @@ const nextConfig = {
       '@radix-ui/react-toast',
       'tailwindcss',
     ],
+    // Removes the warning regarding the WebPack Build Worker
+    webpackBuildWorker: false,
   },
 };
 

next.config.mjs

@@ -82,15 +82,6 @@ export const MD_EXTENSION_REGEX = /((\/)?(index))?\.mdx?$/i;
  */
 export const DEFAULT_LOCALE_CODE = defaultLocale.code;
 
-/**
- * This indicates the path to the Legacy JavaScript File that is used
- * on the legacy Website.
- *
- * @deprecated The Legacy Website is due to be removed soon and this file
- * and its usages should be removed
- */
-export const LEGACY_JAVASCRIPT_FILE = `${BASE_PATH}/static/js/legacyMain.js`;
-
 /**
  * This is a list of all static routes or pages from the Website that we do not
  * want to allow to be statically built on our Static Export Build.

next.constants.mjs

@@ -3,13 +3,12 @@
 import { readFileSync } from 'node:fs';
 import { join, normalize, sep } from 'node:path';
 
-import { serialize } from 'next-mdx-remote/serialize';
 import { VFile } from 'vfile';
 
 import { DEFAULT_LOCALE_CODE, MD_EXTENSION_REGEX } from './next.constants.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { availableLocales } from './next.locales.mjs';
-import { nextRehypePlugins, nextRemarkPlugins } from './next.mdx.mjs';
+import { compileMDX } from './next.mdx.compiler.mjs';
 
 // allows us to run a glob to get markdown files based on a language folder
 const getPathsByLanguage = async (locale = DEFAULT_LOCALE_CODE, ignored = []) =>
@@ -148,31 +147,15 @@ export const generateStaticProps = async (source = '', filename = '') => {
     // Gets the file extension of the file, to determine which parser and plugins to use
     const fileExtension = filename.endsWith('.mdx') ? 'mdx' : 'md';
 
-    // This act as a MDX "compiler" but, lightweight. It parses the Markdown
-    // string source into a React Component tree, and then it serializes it
-    // it also supports Remark plugins, and MDX components
-    // Note.: We use the filename extension to define the mode of execution
-    const { compiledSource } = await serialize(sourceAsVirtualFile, {
-      parseFrontmatter: true,
-      mdxOptions: {
-        rehypePlugins: nextRehypePlugins(fileExtension),
-        remarkPlugins: nextRemarkPlugins(fileExtension),
-        format: fileExtension,
-      },
-    });
-
-    // After the MDX gets processed with the remarkPlugins, some extra `data` that might come along
-    // the `frontmatter` comes from `serialize` built-in support to `remark-frontmatter`
-    const { headings, matter: rawFrontmatter } = sourceAsVirtualFile.data;
-
-    // This serialises the Frontmatter into a JSON object that is compatible with the
-    // `getStaticProps` supported data type for props. (No prop value can be an object or not a primitive)
-    const frontmatter = JSON.parse(JSON.stringify(rawFrontmatter));
-
-    // this defines the basic props that should be passed back to the `DynamicPage` component
-    // We only want the `compiledSource` as we use `MDXProvider` for custom components along the journey
-    // And then we want the frontmatter and heading information from the VFile `data`
-    staticProps.props = { content: compiledSource, headings, frontmatter };
+    // This compiles our MDX source (VFile) into a final MDX-parsed VFile
+    // that then is passed as a string to the MDXProvider which will run the MDX Code
+    const { content, headings, frontmatter } = await compileMDX(
+      sourceAsVirtualFile,
+      fileExtension
+    );
+
+    // Passes the compiled MDX Source to the MDX Provider and some extra data
+    staticProps.props = { content: String(content), headings, frontmatter };
     staticProps.notFound = false;
   }
 

next.dynamic.mjs

@@ -0,0 +1,52 @@
+'use strict';
+
+import { compile, runSync } from '@mdx-js/mdx';
+import * as jsxRuntime from 'react/jsx-runtime';
+import { matter } from 'vfile-matter';
+
+import { NEXT_REHYPE_PLUGINS, NEXT_REMARK_PLUGINS } from './next.mdx.mjs';
+
+/**
+ * This is our custom simple MDX Compiler that is used to compile Markdown and MDX
+ * this returns a serializable VFile as a string that then gets passed to our MDX Provider
+ *
+ * @param {import('vfile').VFile} source
+ * @param {'md' | 'mdx'} fileExtension
+ * @returns {Promise<{ content: import('vfile').VFile; headings: import('@vcarl/remark-headings').Heading[]; frontmatter: Record<string, any>}>}
+ */
+export async function compileMDX(source, fileExtension) {
+  // Parses the Frontmatter to the VFile and removes from the original source
+  // cleaning the frontmatter to the source that is going to be parsed by the MDX Compiler
+  matter(source, { strip: true });
+
+  // This is a minimal MDX Compiler that is lightweight and only parses the MDX
+  const compiledSource = await compile(source, {
+    rehypePlugins: NEXT_REHYPE_PLUGINS,
+    remarkPlugins: NEXT_REMARK_PLUGINS,
+    format: fileExtension,
+    // This instructs the MDX compiler to generate a minimal JSX-body
+    // to be consumed within MDX's `run` method, instead of a standalone React Application
+    outputFormat: 'function-body',
+    // Ensure compatibility with Server Components
+    providerImportSource: undefined,
+  });
+
+  // Retrieve some parsed data from the VFile metadata
+  // such as frontmatter and Markdown headings
+  const { headings, matter: frontmatter } = source.data;
+
+  return { content: compiledSource, headings, frontmatter };
+}
+
+/**
+ * This evaluates our MDX VFile into actual JSX eval'd code
+ * which is actually used by the MDX Provider
+ *
+ * @param {string} source
+ * @returns {import('mdx/types').MDXContent}
+ */
+export function runMDX(source) {
+  const { default: content } = runSync(source, jsxRuntime);
+
+  return content;
+}