feat(mdx): move to dedicated package, switch to @next/mdx

Author: avivkeller

.github/dependabot.yml

@@ -52,8 +52,6 @@ updates:
           - shiki
           - sval
           - unist-util-*
-          - vfile
-          - vfile-*
           - reading-time
       orama:
         patterns:

.github/workflows/publish-packages.yml

@@ -79,6 +79,12 @@ jobs:
               PKG_NAME=$(basename "$pkg")
               PKG_JSON="$pkg/package.json"
 
+              IS_PRIVATE=$(jq -r '.private // false' "$PKG_JSON")
+              if [ "$IS_PRIVATE" = "true" ]; then
+                echo "⏭️ Skipping private package: $PKG_NAME"
+                continue
+              fi
+
               # Determine if the package has changed (or include all on manual trigger)
               if [ "$EVENT_NAME" == "workflow_dispatch" ] || ! git diff --quiet $COMMIT_SHA~1 $COMMIT_SHA -- "$pkg/"; then
                 OLD_VERSION=$(git show $COMMIT_SHA~1:$PKG_JSON | jq -r '.version')
@@ -113,6 +119,12 @@ jobs:
       - name: Publish
         working-directory: packages/${{ matrix.package }}
         run: |
+          # Fail-safe
+          if jq -e '.private == true' package.json > /dev/null; then
+            echo "❌ Refusing to publish private package"
+            exit 0
+          fi
+
           # Check if a custom publish script exists in package.json
           if jq -e '.scripts.release' package.json > /dev/null; then
             pnpm run release

apps/site/app/[locale]/[...path]/page.tsx

@@ -1,97 +1,2 @@
-/**
- * This file extends on the `page.tsx` file, which is the default file that is used to render
- * the entry points for each locale and then also reused within the [...path] route to render the
- * and contains all logic for rendering our dynamic and static routes within the Node.js Website.
- *
- * Note: that each `page.tsx` should have its own `generateStaticParams` to prevent clash of
- * dynamic params, which will lead on static export errors and other sort of issues.
- */
-
-import { availableLocaleCodes, defaultLocale } from '@node-core/website-i18n';
-import { notFound } from 'next/navigation';
-
-import { ENABLE_STATIC_EXPORT } from '#site/next.constants.mjs';
-import { ENABLE_STATIC_EXPORT_LOCALE } from '#site/next.constants.mjs';
-import { dynamicRouter } from '#site/next.dynamic.mjs';
-import * as basePage from '#site/next.dynamic.page.mjs';
-
-import type { DynamicParams } from '#site/types';
-import type { FC } from 'react';
-
-type PageParams = DynamicParams<{ path: Array<string> }>;
-
-// This is the default Viewport Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
-export const generateViewport = basePage.generateViewport;
-
-// This generates each page's HTML Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
-export const generateMetadata = basePage.generateMetadata;
-
-// 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 [];
-  }
-
-  const routes = await dynamicRouter.getAllRoutes();
-
-  // Helper function to fetch and map routes for a specific locale
-  const getRoutesForLocale = async (l: string) =>
-    routes.map(pathname => dynamicRouter.mapPathToRoute(l, pathname));
-
-  // Determine which locales to include in the static export
-  const locales = ENABLE_STATIC_EXPORT_LOCALE
-    ? availableLocaleCodes
-    : [defaultLocale.code];
-
-  // Generates all possible routes for all available locales
-  const routesWithLocales = await Promise.all(locales.map(getRoutesForLocale));
-
-  return routesWithLocales.flat().sort();
-};
-
-// 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 { path, locale: routeLocale } = await props.params;
-
-  // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(path, routeLocale);
-
-  // Gets the Markdown content and context
-  const [content, context] = await basePage.getMarkdownContext({
-    locale,
-    pathname,
-  });
-
-  // If we have a filename and layout then we have a page
-  if (context.filename && context.frontmatter.layout) {
-    return basePage.renderPage({
-      content,
-      layout: context.frontmatter.layout,
-      context,
-    });
-  }
-
-  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;
+export * from '../page';
+export { default } from '../page';

apps/site/app/[locale]/blog/[...path]/page.tsx

@@ -1,24 +1,18 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+// TODO(@AVIVKELLER): THIS FILE
 import { defaultLocale } from '@node-core/website-i18n';
 import { notFound, redirect } from 'next/navigation';
 
 import provideReleaseData from '#site/next-data/providers/releaseData';
 import provideReleaseVersions from '#site/next-data/providers/releaseVersions';
 import { ENABLE_STATIC_EXPORT } from '#site/next.constants.mjs';
-import * as basePage from '#site/next.dynamic.page.mjs';
 
 import type { DynamicParams } from '#site/types';
 import type { FC } from 'react';
 
 type PageParams = DynamicParams<{ version: string }>;
 
-// This is the default Viewport Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
-export const generateViewport = basePage.generateViewport;
-
-// This generates each page's HTML Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
-export const generateMetadata = basePage.generateMetadata;
-
 // 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
@@ -91,3 +85,4 @@ export const dynamic = 'force-static';
 export const revalidate = 300;
 
 export default getPage;
+export * from '#site/router/page';

apps/site/app/[locale]/download/archive/[version]/page.tsx

@@ -1,31 +1,33 @@
-import { defaultLocale, availableLocaleCodes } from '@node-core/website-i18n';
-import { notFound } from 'next/navigation';
-
-import { ENABLE_STATIC_EXPORT } from '#site/next.constants.mjs';
-import { ENABLE_STATIC_EXPORT_LOCALE } from '#site/next.constants.mjs';
-import * as basePage from '#site/next.dynamic.page.mjs';
+/**
+ * This file extends on the `page.tsx` file, which is the default file that is used to render
+ * the entry points for each locale and then also reused within the [...path] route to render the
+ * and contains all logic for rendering our dynamic and static routes within the Node.js Website.
+ *
+ * Note: that each `page.tsx` should have its own `generateStaticParams` to prevent clash of
+ * dynamic params, which will lead on static export errors and other sort of issues.
+ */
 
-import type { DynamicParams } from '#site/types';
-import type { FC } from 'react';
+import { sep } from 'node:path';
 
-type PageParams = DynamicParams<{ path: Array<string> }>;
+import { availableLocaleCodes, defaultLocale } from '@node-core/website-i18n';
+import { notFound } from 'next/navigation';
 
-// This is the default Viewport Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
-export const generateViewport = basePage.generateViewport;
+import {
+  ENABLE_STATIC_EXPORT,
+  ENABLE_STATIC_EXPORT_LOCALE,
+} from '#site/next.constants.mjs';
+import { allRoutes, getMarkdownFile } from '#site/router';
+import { renderPage } from '#site/router/render';
+import { joinNested } from '#site/util/array';
 
-// This generates each page's HTML Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
-export const generateMetadata = basePage.generateMetadata;
+import type { PageParams } from '#site/router/page';
+import type { FC } from 'react';
 
-/**
- * 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
- */
+// 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) {
@@ -37,40 +39,24 @@ export const generateStaticParams = async () => {
     ? availableLocaleCodes
     : [defaultLocale.code];
 
-  const routes = await Promise.all(
-    // Gets all mapped routes to the Next.js Routing Engine by Locale
-    locales.map(locale => ({ locale }))
+  return locales.map((locale: string) =>
+    allRoutes.map(path => ({
+      locale,
+      path: path.split(sep),
+    }))
   );
-
-  return routes.flat().sort();
 };
 
 // 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 { path, locale: routeLocale } = await props.params;
+  const { path = [], locale } = await props.params;
 
-  // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(path, routeLocale);
-
-  // Gets the Markdown content and context
-  const [content, context] = await basePage.getMarkdownContext({
-    locale,
-    pathname,
-  });
-
-  // If we have a filename and layout then we have a page
-  if (context.filename && context.frontmatter.layout) {
-    return basePage.renderPage({
-      content,
-      layout: context.frontmatter.layout,
-      context,
-    });
-  }
+  const markdown = await getMarkdownFile(locale, joinNested(path));
 
-  return notFound();
+  return markdown ? renderPage(markdown) : notFound();
 };
 
 // Enforces that this route is used as static rendering
@@ -84,3 +70,4 @@ export const dynamic = 'force-static';
 export const revalidate = 300;
 
 export default getPage;
+export * from '#site/router/page';

apps/site/app/[locale]/page.tsx

@@ -3,11 +3,12 @@ import { availableLocaleCodes, defaultLocale } from '@node-core/website-i18n';
 import { BASE_PATH } from '#site/next.constants.mjs';
 import { BASE_URL } from '#site/next.constants.mjs';
 import { EXTERNAL_LINKS_SITEMAP } from '#site/next.constants.mjs';
-import { BLOG_DYNAMIC_ROUTES } from '#site/next.dynamic.constants.mjs';
-import { dynamicRouter } from '#site/next.dynamic.mjs';
+import { BLOG_DYNAMIC_ROUTES } from '#site/router/constants';
 
 import type { MetadataRoute } from 'next';
 
+import { allRoutes } from '../router';
+
 // This is the combination of the Application Base URL and Base PATH
 const baseUrlAndPath = `${BASE_URL}${BASE_PATH}`;
 
@@ -21,9 +22,6 @@ const getAlternatePath = (r: string, locales: Array<string>) =>
 
 // This allows us to generate a `sitemap.xml` file dynamically based on the needs of the Node.js Website
 const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
-  // Gets a list of all statically available routes
-  const routes = await dynamicRouter.getAllRoutes();
-
   const currentDate = new Date().toISOString();
 
   const getSitemapEntry = (r: string, locales: Array<string> = []) => ({
@@ -33,7 +31,7 @@ const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
     alternates: { languages: getAlternatePath(r, locales) },
   });
 
-  const staticPaths = routes.map(r => getSitemapEntry(r, nonDefaultLocales));
+  const staticPaths = allRoutes.map(r => getSitemapEntry(r, nonDefaultLocales));
   const blogPaths = BLOG_DYNAMIC_ROUTES.map(r => getSitemapEntry(`blog/${r}`));
   const externalPaths = EXTERNAL_LINKS_SITEMAP.map(r => getSitemapEntry(r));