feat(mdx): move mdx into sub-package

Author: avivkeller

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { createSval } from '@node-core/mdx/evaluate';
+import { highlightToHtml } from '@node-core/mdx/highlight';
 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';
 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/package.json

@@ -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/pages/id/about/security-reporting.mdx

@@ -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 =

apps/site/util/__tests__/getLanguageDisplayName.test.mjs

@@ -1,14 +1,6 @@
-import GitHubSlugger from 'github-slugger';
-
 export const getGitHubAvatarUrl = (username: string): string =>
   `https://avatars.githubusercontent.com/${username}`;
 
-export const createGitHubSlugger = () => {
-  const githubSlugger = new GitHubSlugger();
-
-  return (text: string) => githubSlugger.slug(text);
-};
-
 export const getGitHubBlobUrl = (filename: string) =>
   `https://github.com/nodejs/nodejs.org/blob/main/apps/site/pages/en/${filename}`;
 

apps/site/util/__tests__/gitHubUtils.test.mjs

@@ -0,0 +1,16 @@
+import importX from 'eslint-plugin-import-x';
+import tseslint from 'typescript-eslint';
+
+import baseConfig from '../../eslint.config.js';
+
+export default [
+  ...baseConfig,
+  ...tseslint.configs.recommended,
+  importX.flatConfigs.typescript,
+  {
+    rules: {
+      '@typescript-eslint/array-type': ['error', { default: 'generic' }],
+      '@typescript-eslint/consistent-type-imports': 'error',
+    },
+  },
+];