feat(mdx): use @next/mdx

Author: avivkeller

.github/CODEOWNERS

@@ -38,23 +38,17 @@ docs @nodejs/nodejs-website @nodejs/web-infra
 SECURITY.md @nodejs/security-wg
 
 # Node.js Release Blog Posts
-apps/site/pages/en/blog/release @nodejs/releasers
-apps/site/pages/en/blog/announcements @nodejs/releasers
+apps/site/app/en/blog/release @nodejs/releasers
+apps/site/app/en/blog/announcements @nodejs/releasers
 
 # The following users DO NOT have write access, and their review is requested
 # via a GitHub action.
-apps/site/pages/en/learn/diagnostics @nodejs/diagnostics
-
-apps/site/pages/en/learn/getting-started/security-best-practices.md @nodejs/security-wg
-
-apps/site/pages/en/learn/manipulating-files @nodejs/fs
-
-apps/site/pages/en/learn/test-runner @nodejs/test_runner
-
-apps/site/pages/en/learn/typescript @nodejs/typescript
-
-apps/site/pages/en/about/partners.mdx @nodejs/marketing
-apps/site/pages/en/about/branding.mdx @nodejs/marketing
-
-apps/site/pages/en/learn/getting-started/userland-migrations.md @nodejs/userland-migrations
-apps/site/pages/en/blog/migrations @nodejs/userland-migrations
+apps/site/app/en/learn/diagnostics @nodejs/diagnostics
+apps/site/app/en/learn/getting-started/security-best-practices/page.md @nodejs/security-wg
+apps/site/app/en/learn/manipulating-files @nodejs/fs
+apps/site/app/en/learn/test-runner @nodejs/test_runner
+apps/site/app/en/learn/typescript @nodejs/typescript
+apps/site/app/en/about/partners/page.mdx @nodejs/marketing
+apps/site/app/en/about/branding/page.mdx @nodejs/marketing
+apps/site/app/en/learn/getting-started/userland-migrations/page.md @nodejs/userland-migrations
+apps/site/app/en/blog/migrations @nodejs/userland-migrations

.github/dependabot.yml

@@ -47,13 +47,12 @@ updates:
           - '@shikijs/*'
           - '@mdx-js/*'
           - hast-util-*
+          - estree-util-*
           - rehype-*
           - remark-*
           - shiki
           - sval
           - unist-util-*
-          - vfile
-          - vfile-*
           - reading-time
           - twoslash
       orama:

.github/workflows/translations-pr-lint.yml

@@ -9,10 +9,10 @@ on:
     branches:
       - main
     paths:
-      - 'apps/site/pages/**/*.md'
-      - 'apps/site/pages/**/*.mdx'
-      - '!apps/site/pages/en/**/*.md'
-      - '!apps/site/pages/en/**/*.mdx'
+      - 'apps/site/app/**/*.md'
+      - 'apps/site/app/**/*.mdx'
+      - "!apps/site/app/\\[en\\]/**/*.md"
+      - "!apps/site/app/\\[en\\]/**/*.mdx"
       - 'packages/i18n/src/locales/*.json'
       - '!packages/i18n/src/locales/en.json'
       - 'apps/site/snippets/**/*.bash'

apps/site/app/[en]/blog/[category]/page.tsx

@@ -0,0 +1,51 @@
+import { notFound } from 'next/navigation';
+
+import { ENABLE_STATIC_EXPORT } from '#site/next.constants.mjs';
+import { blogData } from '#site/next.json.mjs';
+
+import type { DynamicParams } from '#site/types/page';
+import type { FC } from 'react';
+
+import BasicCategory from '../page.md';
+
+// Generates all possible static paths based on the locales and environment configuration
+// - Returns an empty array if static export is disabled (`ENABLE_STATIC_EXPORT` is false)
+// - If `ENABLE_STATIC_EXPORT_LOCALE` is true, generates paths for all available locales
+// - Otherwise, generates paths only for the default locale
+// @see https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+export const generateStaticParams = async () => {
+  // Return an empty array if static export is disabled
+  if (!ENABLE_STATIC_EXPORT) {
+    return [];
+  }
+
+  return blogData.categories.map(category => ({ en: 'en', category }));
+};
+
+type PageParams = DynamicParams<{ category: string }>;
+
+// This method parses the current pathname and does any sort of modifications needed on the route
+// then it proceeds to retrieve the Markdown file and parse the MDX Content into a React Component
+// finally it returns (if the locale and route are valid) the React Component with the relevant context
+// and attached context providers for rendering the current page
+const getPage: FC<PageParams> = async props => {
+  const { category } = await props.params;
+
+  if (category in blogData.categories || category === 'all') {
+    return <BasicCategory {...props} />;
+  }
+
+  return notFound();
+};
+
+// Enforces that this route is used as static rendering
+// Except whenever on the Development mode as we want instant-refresh when making changes
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+export const dynamic = 'force-static';
+
+// Ensures that this endpoint is invalidated and re-executed every X minutes
+// so that when new deployments happen, the data is refreshed
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
+export const revalidate = 300;
+
+export default getPage;