feat: dynamic markdown routes

Author: canerakdas

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

@@ -20,6 +20,7 @@ import {
 import {
   PAGE_VIEWPORT,
   DYNAMIC_ROUTES,
+  DYNAMIC_MARKDOWN_ROUTES,
 } from '#site/next.dynamic.constants.mjs';
 import { dynamicRouter } from '#site/next.dynamic.mjs';
 import { allLocaleCodes, availableLocaleCodes } from '#site/next.locales.mjs';
@@ -97,10 +98,14 @@ const getPage: FC<DynamicParams> = async props => {
 
   const staticGeneratedLayout = DYNAMIC_ROUTES.get(pathname);
 
-  // If the current pathname is a statically generated route
-  // it means it does not have a Markdown file nor exists under the filesystem
-  // but it is a valid route with an assigned layout that should be rendered
-  if (staticGeneratedLayout !== undefined) {
+  // If the current pathname corresponds to a statically generated route but does
+  // not have a dynamic Markdown file, it means there is no Markdown file on the
+  // filesystem for it. However, it is still a valid route with an assigned layout
+  // that should be rendered.
+  if (
+    staticGeneratedLayout !== undefined &&
+    !DYNAMIC_MARKDOWN_ROUTES.has(staticGeneratedLayout)
+  ) {
     // Metadata and shared Context to be available through the lifecycle of the page
     const sharedContext = { pathname: `/${pathname}` };
 

apps/site/components/Downloads/DownloadReleasesTable/index.tsx

@@ -35,7 +35,7 @@ const DownloadReleasesTable: FC = () => {
         {releaseData.map(release => (
           <tr key={release.major}>
             <td data-label="Version">
-              <Link href={`/download/${release.versionWithPrefix}`}>
+              <Link href={`/download/archive/${release.versionWithPrefix}`}>
                 v{release.major}
               </Link>
             </td>

apps/site/components/Downloads/MinorReleasesTable/index.tsx

@@ -38,7 +38,10 @@ const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
           {releases.map(release => (
             <tr key={release.version}>
               <td>
-                <Link kind="neutral" href={`/download/v${release.version}`}>
+                <Link
+                  kind="neutral"
+                  href={`/download/archive/v${release.version}`}
+                >
                   v{release.version}
                 </Link>
               </td>

apps/site/components/withMarkdownContent.tsx

@@ -1,19 +1,16 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import WithFooter from '#site/components/withFooter';
-import WithMarkdownContent from '#site/components/withMarkdownContent';
 import WithNavBar from '#site/components/withNavBar';
 
 import styles from './layouts.module.css';
 
-const DownloadArchiveLayout: FC = () => (
+const DownloadArchiveLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
     <div className={styles.downloadLayout}>
-      <main>
-        <WithMarkdownContent file={['download', 'archive']} />
-      </main>
+      <main>{children}</main>
     </div>
 
     <WithFooter />

apps/site/layouts/DownloadArchive.tsx

@@ -0,0 +1,47 @@
+'use strict';
+
+import nodevu from '@nodevu/core';
+
+/**
+ * This method is used to generate all Node.js versions
+ * for self-consumption during RSC and Static Builds
+ *
+ * @returns {Promise<Array<string>>}
+ */
+const generateAllVersionsData = async () => {
+  const nodevuOutput = await nodevu({ fetch });
+
+  const majors = Object.entries(nodevuOutput).filter(
+    ([version, { support }]) => {
+      // Filter out those without documented support
+      // Basically those not in schedule.json
+      if (!support) {
+        return false;
+      }
+
+      // nodevu returns duplicated v0.x versions (v0.12, v0.10, ...).
+      // This behavior seems intentional as the case is hardcoded in nodevu,
+      // see https://github.com/cutenode/nodevu/blob/0c8538c70195fb7181e0a4d1eeb6a28e8ed95698/core/index.js#L24.
+      // This line ignores those duplicated versions and takes the latest
+      // v0.x version (v0.12.18). It is also consistent with the legacy
+      // nodejs.org implementation.
+      if (version.startsWith('v0.') && version !== 'v0.12') {
+        return false;
+      }
+
+      return true;
+    }
+  );
+
+  const allVersions = [];
+
+  majors.forEach(([, major]) => {
+    Object.entries(major.releases).forEach(([, release]) => {
+      allVersions.push(`v${release.semver.raw}`);
+    });
+  });
+
+  return allVersions;
+};
+
+export default generateAllVersionsData;

apps/site/next-data/generators/releaseVersions.mjs

@@ -0,0 +1,9 @@
+import { cache } from 'react';
+
+import generateAllVersionsData from '#site/next-data/generators/releaseVersions.mjs';
+
+const releaseVersions = await generateAllVersionsData();
+
+const provideReleaseVersions = cache(() => releaseVersions);
+
+export default provideReleaseVersions;

apps/site/next-data/providers/releaseVersions.ts

@@ -1,9 +1,9 @@
 'use strict';
 
-import provideReleaseData from '#site/next-data/providers/releaseData';
 import { blogData } from '#site/next.json.mjs';
 
 import { provideBlogPosts } from './next-data/providers/blogData';
+import provideReleaseVersions from './next-data/providers/releaseVersions';
 import { BASE_PATH, BASE_URL } from './next.constants.mjs';
 import { siteConfig } from './next.json.mjs';
 import { defaultLocale } from './next.locales.mjs';
@@ -20,8 +20,6 @@ export const IGNORED_ROUTES = [
     locale !== defaultLocale.code && /^blog/.test(pathname),
   // This is used to ignore all pathnames that are empty
   ({ locale, pathname }) => locale.length && !pathname.length,
-  // This is used to ignore download routes for Node.js versions and downloads archive page
-  ({ pathname }) => /^download\/(v\d+(\.\d+)*|archive)$/.test(pathname),
 ];
 
 /**
@@ -33,13 +31,11 @@ export const IGNORED_ROUTES = [
  */
 export const DYNAMIC_ROUTES = new Map([
   // Creates dynamic routes for downloads archive pages for each version
-  // (e.g., /download/v18.20.8, /download/v20.19.2)
-  ...provideReleaseData()
-    .flatMap(({ minorVersions, versionWithPrefix }) => [
-      `download/${versionWithPrefix}`,
-      ...minorVersions.map(minor => `download/${minor.versionWithPrefix}`),
-    ])
-    .map(version => [version, 'download-archive']),
+  // (e.g., /download/archive/v18.20.8, /download/archive/v20.19.2)
+  ...provideReleaseVersions().map(version => [
+    `download/archive/${version}`,
+    'download-archive',
+  ]),
   // Provides Routes for all Blog Categories
   ...blogData.categories.map(c => [`blog/${c}`, 'blog-category']),
   // Provides Routes for all Blog Categories w/ Pagination
@@ -55,6 +51,18 @@ export const DYNAMIC_ROUTES = new Map([
     .flat(),
 ]);
 
+/**
+ * A Map that stores file paths for Markdown files to be dynamically generated
+ * in a dynamic route, keyed by their corresponding layout names.
+ *
+ * @type {Map<import('./types').Layouts, Array<string>>} A Map of Layout Name and paths
+ */
+export const DYNAMIC_MARKDOWN_ROUTES = new Map([
+  // Pages that use the download-archive layout map to the /{locale}/download/archive/index.mdx
+  // markdown file.
+  ['download-archive', ['download', 'archive']],
+]);
+
 /**
  * This is the default Next.js Page Metadata for all pages
  *

apps/site/next.dynamic.constants.mjs

@@ -16,6 +16,7 @@ import {
 } from './next.constants.mjs';
 import {
   DYNAMIC_ROUTES,
+  DYNAMIC_MARKDOWN_ROUTES,
   IGNORED_ROUTES,
   PAGE_METADATA,
 } from './next.dynamic.constants.mjs';
@@ -106,6 +107,15 @@ const getDynamicRouter = async () => {
    * @returns {Promise<{ source: string; filename: string }>}
    */
   const _getMarkdownFile = async (locale = '', pathname = '') => {
+    const layout = DYNAMIC_ROUTES.get(pathname);
+
+    if (DYNAMIC_MARKDOWN_ROUTES.has(layout)) {
+      // If the current pathname is a dynamic route that does not have a Markdown
+      // file we simply return the pathname of the dynamic route so that the page
+      //  can be rendered with the correct layout
+      pathname = getPathname(DYNAMIC_MARKDOWN_ROUTES.get(layout));
+    }
+
     const normalizedPathname = normalize(pathname).replace('.', '');
 
     // This verifies if the given pathname actually exists on our Map

apps/site/next.dynamic.mjs

@@ -40,7 +40,7 @@ layout: download-archive
       </ul>
 
       <h3>Other releases</h3>
-      <WithReleaseSelect placeholder="Select a version" defaultValue={`/download/${version}`} className="w-64"/>
+      <WithReleaseSelect placeholder="Select a version" defaultValue={`/download/archive/${version}`} className="w-64"/>
 
       <h2>Binary Downloads</h2>
       <DownloadsTable source={binaries} />