feat(mdx): move mdx into sub-package

Author: avivkeller

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

@@ -149,10 +149,10 @@ jobs:
         if: ${{ !cancelled() && github.event_name != 'merge_group' }}
         uses: codecov/codecov-action@ad3126e916f78f00edff4ed0317cf185271ccc2d # v5.4.2
         with:
-          files: ./apps/site/lcov.info,./packages/ui-components/lcov.info
+          files: ./apps/site/lcov.info,./packages/*/lcov.info
 
       - name: Upload test results to Codecov
         if: ${{ !cancelled() && github.event_name != 'merge_group' }}
         uses: codecov/test-results-action@f2dba722c67b86c6caa034178c6e4d35335f6706 # v1.1.0
         with:
-          files: ./apps/site/junit.xml,./packages/ui-components/junit.xml
+          files: ./apps/site/junit.xml,./packages/*/junit.xml

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import createSval from '@node-core/mdx/evaluator';
+import { highlightToHtml } from '@node-core/mdx/highlighter';
 import AlertBox from '@node-core/ui-components/Common/AlertBox';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import { useTranslations } from 'next-intl';
@@ -9,14 +11,12 @@ import { useContext, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
-import { createSval } from '#site/next.jsx.compiler.mjs';
 import {
   ReleaseContext,
   ReleasesContext,
 } from '#site/providers/releaseProvider';
 import type { ReleaseContextType } from '#site/types/release';
 import { INSTALL_METHODS } from '#site/util/downloadUtils';
-import { highlightToHtml } from '#site/util/getHighlighter';
 
 // Creates a minimal JavaScript interpreter for parsing the JavaScript code from the snippets
 // Note: that the code runs inside a sandboxed environment and cannot interact with any code outside of the sandbox

apps/site/components/MDX/CodeBox/index.tsx

@@ -1,7 +1,7 @@
+import { getLanguageDisplayName } from '@node-core/mdx/utils';
 import type { FC, PropsWithChildren } from 'react';
 
 import CodeBox from '#site/components/Common/CodeBox';
-import { getLanguageDisplayName } from '#site/util/getLanguageDisplayName';
 
 type CodeBoxProps = { className?: string; showCopyButton?: string };
 

apps/site/next.dynamic.mjs

@@ -3,6 +3,7 @@
 import { readFile } from 'node:fs/promises';
 import { join, normalize, sep } from 'node:path';
 
+import compile from '@node-core/mdx/compiler';
 import matter from 'gray-matter';
 import { cache } from 'react';
 import { VFile } from 'vfile';
@@ -22,7 +23,6 @@ import {
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { siteConfig } from './next.json.mjs';
 import { availableLocaleCodes, defaultLocale } from './next.locales.mjs';
-import { compile } from './next.mdx.compiler.mjs';
 import { MDX_COMPONENTS } from './next.mdx.components.mjs';
 
 // This is the combination of the Application Base URL and Base PATH

apps/site/next.jsx.compiler.mjs

@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@heroicons/react": "~2.2.0",
-    "@mdx-js/mdx": "^3.1.0",
     "@node-core/ui-components": "workspace:*",
+    "@node-core/mdx": "workspace:*",
     "@node-core/website-i18n": "workspace:*",
     "@nodevu/core": "0.3.0",
     "@opentelemetry/api-logs": "~0.200.0",
@@ -42,8 +42,6 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.4",
-    "@shikijs/core": "^3.2.2",
-    "@shikijs/engine-javascript": "^3.2.2",
     "@tailwindcss/postcss": "~4.1.5",
     "@types/node": "22.15.3",
     "@types/react": "^19.1.0",
@@ -54,10 +52,8 @@
     "classnames": "~2.5.1",
     "cross-env": "7.0.3",
     "feed": "~4.2.2",
-    "github-slugger": "~2.0.0",
     "glob": "~11.0.1",
     "gray-matter": "~4.0.3",
-    "hast-util-to-string": "~3.0.1",
     "next": "15.3.1",
     "next-intl": "~4.1.0",
     "next-themes": "~0.4.6",
@@ -67,17 +63,9 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "reading-time": "~1.5.0",
-    "rehype-autolink-headings": "~7.1.0",
-    "rehype-slug": "~6.0.0",
-    "remark-gfm": "~4.0.1",
-    "remark-reading-time": "~2.0.1",
     "semver": "~7.7.1",
-    "shiki": "~3.3.0",
-    "sval": "^0.6.3",
     "tailwindcss": "~4.0.17",
-    "unist-util-visit": "~5.0.0",
-    "vfile": "~6.0.3",
-    "vfile-matter": "~5.0.1"
+    "vfile": "~6.0.3"
   },
   "devDependencies": {
     "@eslint/compat": "~1.2.8",
@@ -92,6 +80,7 @@
     "eslint-plugin-mdx": "~3.4.0",
     "eslint-plugin-react": "~7.37.4",
     "eslint-plugin-react-hooks": "5.2.0",
+    "github-slugger": "~2.0.0",
     "global-jsdom": "^26.0.0",
     "handlebars": "4.7.8",
     "jsdom": "^26.0.0",

apps/site/next.mdx.shiki.mjs

@@ -46,7 +46,7 @@ Pemberitahuan keamanan akan didistribusikan melalui metode berikut.
 
 ## Komentar tentang kebijakan ini
 
-Jika Anda memiliki saran tentang bagaimana proses ini dapat ditingkatkan, silakan kirimkan [permintaan penarikan](https://github.com/nodejs/nodejs.org) atau [ajukan masalah (https://github.com/nodejs/security -wg/issues/new) untuk didiskusikan.
+Jika Anda memiliki saran tentang bagaimana proses ini dapat ditingkatkan, silakan kirimkan [permintaan penarikan](https://github.com/nodejs/nodejs.org) atau [ajukan masalah](https://github.com/nodejs/security-wg/issues/new) untuk didiskusikan.
 
 ## Praktik Terbaik OpenSSF
 

apps/site/package.json

@@ -1,16 +1,8 @@
 import assert from 'node:assert/strict';
-import { describe, it, mock } from 'node:test';
+import { describe, it } from 'node:test';
 
-mock.module('github-slugger', {
-  defaultExport: class {},
-});
-
-const {
-  getGitHubAvatarUrl,
-  createGitHubSlugger,
-  getGitHubBlobUrl,
-  getGitHubApiDocsUrl,
-} = await import('#site/util/gitHubUtils');
+const { getGitHubAvatarUrl, getGitHubBlobUrl, getGitHubApiDocsUrl } =
+  await import('#site/util/gitHubUtils');
 
 describe('gitHubUtils', () => {
   it('getGitHubAvatarUrl returns the correct URL', () => {
@@ -20,10 +12,6 @@ describe('gitHubUtils', () => {
     );
   });
 
-  it('createGitHubSlugger returns a slugger', () => {
-    assert.notEqual(createGitHubSlugger(), undefined);
-  });
-
   it('getGitHubBlobUrl returns the correct URL', () => {
     const result = getGitHubBlobUrl('learn/getting-started/introduction.md');
     const expected =