feat: Introduce Downloads Archive page

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

@@ -21,7 +21,11 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
   const { os, bitness, architecture } = useClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
-  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, platform);
+  const downloadLink = getNodeDownloadUrl({
+    version: versionWithPrefix,
+    os: os,
+    platform: platform,
+  });
 
   return (
     <>

apps/site/components/Downloads/DownloadLink.tsx

@@ -20,12 +20,12 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
 
   const platform = getUserPlatform(architecture, bitness);
 
-  const downloadLink = getNodeDownloadUrl(
-    versionWithPrefix,
-    os,
-    platform,
-    kind
-  );
+  const downloadLink = getNodeDownloadUrl({
+    version: versionWithPrefix,
+    os: os,
+    platform: platform,
+    kind: kind,
+  });
 
   return <LinkWithArrow href={downloadLink}>{children}</LinkWithArrow>;
 };

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '#site/components/Link';
+import { OperatingSystemLabel } from '#site/util/downloadUtils';
+import type { NodeDownloadArtifact } from '#site/util/downloadUtils/simple';
+
+type DownloadsTableProps = {
+  source: Array<NodeDownloadArtifact>;
+};
+
+const DownloadsTable: FC<DownloadsTableProps> = ({ source }) => {
+  const t = useTranslations();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>{t('components.downloadsTable.fileName')}</th>
+          <th className="md:w-24">
+            {t('components.downloadsTable.operatingSystem')}
+          </th>
+          <th className="md:w-24">
+            {t('components.downloadsTable.architecture')}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {source.map(release => (
+          <tr key={`${release.file}-${release.architecture}`}>
+            <td data-label={t('components.downloadsTable.fileName')}>
+              <Link href={release.url}>{release.file}</Link>
+            </td>
+            <td data-label={t('components.downloadsTable.operatingSystem')}>
+              {OperatingSystemLabel[release.os]}
+            </td>
+            <td data-label={t('components.downloadsTable.architecture')}>
+              {release.architecture}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DownloadsTable;

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

@@ -22,11 +22,21 @@ const PrebuiltDownloadButtons: FC = () => {
   const { release, os, platform } = useContext(ReleaseContext);
 
   const installerUrl = platform
-    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'installer')
+    ? getNodeDownloadUrl({
+        version: release.versionWithPrefix,
+        os: os,
+        platform: platform,
+        kind: 'installer',
+      })
     : '';
 
   const binaryUrl = platform
-    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'binary')
+    ? getNodeDownloadUrl({
+        version: release.versionWithPrefix,
+        os: os,
+        platform: platform,
+        kind: 'binary',
+      })
     : '';
 
   return (

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

@@ -106,7 +106,7 @@ const ReleaseCodeBox: FC = () => {
         >
           {t.rich('layouts.download.codeBox.noScriptDetected', {
             link: text => (
-              <Link href="/about/previous-releases#looking-for-latest-release-of-a-version-branch">
+              <Link href="/download/simplified">
                 <b>{text}</b>
               </Link>
             ),

apps/site/components/MDX/Details/index.module.css

@@ -0,0 +1,41 @@
+@reference "../../../styles/index.css";
+
+.root {
+  @apply border-b
+    border-neutral-200
+    px-0
+    pb-4
+    text-neutral-900
+    dark:border-neutral-800
+    dark:text-white;
+
+  summary {
+    @apply cursor-default
+      select-none
+      list-none
+      after:float-right
+      after:pr-4
+      after:text-2xl
+      after:text-neutral-400
+      after:content-['›']
+      dark:after:text-neutral-600;
+
+    h3 {
+      @apply inline;
+    }
+  }
+
+  &[open] summary {
+    @apply pb-4
+      after:rotate-90
+      after:transform
+      after:pt-4;
+  }
+
+  .detail {
+    @apply flex
+      select-none
+      flex-col
+      gap-4;
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type DetailsProps = {
+  summary: React.ReactNode;
+};
+
+const Details: FC<PropsWithChildren<DetailsProps>> = ({
+  children,
+  summary,
+}) => (
+  <details className={styles.root}>
+    <summary>
+      <h3>{summary}</h3>
+    </summary>
+    <div className={styles.detail}>{children}</div>
+  </details>
+);
+
+export default Details;

apps/site/components/withLayout.tsx

@@ -5,6 +5,7 @@ import ArticlePageLayout from '#site/layouts/ArticlePage';
 import BlogLayout from '#site/layouts/Blog';
 import DefaultLayout from '#site/layouts/Default';
 import DownloadLayout from '#site/layouts/Download';
+import DownloadSimpleLayout from '#site/layouts/DownloadSimple';
 import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
 import LearnLayout from '#site/layouts/Learn';
 import PostLayout from '#site/layouts/Post';
@@ -18,6 +19,7 @@ const layouts = {
   'blog-post': PostLayout,
   'blog-category': BlogLayout,
   download: DownloadLayout,
+  'download-simple': DownloadSimpleLayout,
   article: ArticlePageLayout,
 } satisfies Record<Layouts, FC>;
 

apps/site/components/withMarkdownContent.tsx

@@ -0,0 +1,35 @@
+import { getLocale } from 'next-intl/server';
+import type { FC } from 'react';
+
+import { dynamicRouter } from '#site/next.dynamic';
+
+const getMarkdownContent = async (locale: string, file: Array<string>) => {
+  const filePathname = dynamicRouter.getPathname(file);
+
+  // Retrieves the Markdown file source content based on the file path and locale
+  // Uses dynamic routing to locate and load the appropriate markdown file
+  // for the given locale and file path segments
+  const { source, filename } = await dynamicRouter.getMarkdownFile(
+    locale,
+    filePathname
+  );
+
+  // Parses the Markdown/MDX source content and transforms it into a React component
+  // Handles both standard Markdown and MDX files
+  const { content } = await dynamicRouter.getMDXContent(source, filename);
+
+  return content;
+};
+
+type WithMarkdownContentProps = {
+  file: Array<string>;
+};
+
+const WithMarkdownContent: FC<WithMarkdownContentProps> = async ({ file }) => {
+  const locale = await getLocale();
+  const content = await getMarkdownContent(locale, file);
+
+  return content || null;
+};
+
+export default WithMarkdownContent;

apps/site/components/withMetaBar.tsx

@@ -3,7 +3,7 @@
 import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import { useFormatter, useLocale, useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import Link from '#site/components/Link';
 import WithAvatarGroup from '#site/components/withAvatarGroup';
@@ -14,7 +14,11 @@ import { TRANSLATION_URL } from '#site/next.constants.mjs';
 import { defaultLocale } from '#site/next.locales.mjs';
 import { getGitHubBlobUrl } from '#site/util/gitHubUtils';
 
-const WithMetaBar: FC = () => {
+type WithMetaBarProps = {
+  items?: ComponentProps<typeof MetaBar>['items'];
+};
+
+const WithMetaBar: FC<WithMetaBarProps> = ({ items }) => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
   const lastUpdated = frontmatter.date
@@ -45,8 +49,11 @@ const WithMetaBar: FC = () => {
       heading={t('components.metabar.tableOfContents')}
       as={Link}
       items={{
+        ...items,
         [t('components.metabar.lastUpdated')]: lastUpdated,
-        [t('components.metabar.readingTime')]: readingTimeText,
+        ...(readingTime.minutes >= 1 && {
+          [t('components.metabar.readingTime')]: readingTimeText,
+        }),
         ...(usernames.length && {
           [t(
             `components.metabar.${usernames.length > 1 ? 'authors' : 'author'}`

apps/site/components/withProgressionSidebar.tsx

@@ -4,39 +4,53 @@ import ProgressionSidebar from '@node-core/ui-components/Common/ProgressionSideb
 import { usePathname } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import type { RichTranslationValues } from 'next-intl';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import Link from '#site/components/Link';
 import { useSiteNavigation } from '#site/hooks/server';
 import { useRouter } from '#site/navigation.mjs';
 import type { NavigationKeys } from '#site/types';
 
-type WithProgressionSidebarProps = {
-  navKey: NavigationKeys;
-  context?: Record<string, RichTranslationValues>;
-};
+type Group = ComponentProps<typeof ProgressionSidebar>['groups'][number];
+
+type WithProgressionSidebarProps =
+  | {
+      navKey: NavigationKeys;
+      context?: Record<string, RichTranslationValues>;
+      groups?: never;
+    }
+  | {
+      groups: Array<Group>;
+      navKey?: never;
+      context?: never;
+    };
 
-const WithProgressionSidebar: FC<WithProgressionSidebarProps> = ({
-  navKey,
-  context,
-}) => {
+const WithProgressionSidebar: FC<WithProgressionSidebarProps> = props => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname();
   const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
-  const [[, sidebarNavigation]] = getSideNavigation([navKey], context);
 
-  const mappedProgressionSidebarItems = sidebarNavigation.items.map(
-    ([, { label, items }]) => ({
+  let groups: Array<Group> = [];
+
+  if ('navKey' in props && props.navKey) {
+    const [[, sidebarNavigation]] = getSideNavigation(
+      [props.navKey],
+      props.context
+    );
+
+    groups = sidebarNavigation.items.map(([, { label, items }]) => ({
       groupName: label,
       items: items.map(([, item]) => item),
-    })
-  );
+    }));
+  } else if ('groups' in props) {
+    groups = props.groups;
+  }
 
   return (
     <ProgressionSidebar
-      groups={mappedProgressionSidebarItems}
+      groups={groups}
       pathname={pathname?.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
       onSelect={push}