refactor: minor versions table

Author: canerakdas

apps/site/components/Downloads/MinorReleasesTable/index.module.css

@@ -1,35 +1,29 @@
 @reference "../../../styles/index.css";
 
-.links {
+.additionalLinks {
   @apply flex
     h-4
     items-center
     gap-2;
 }
 
+.items {
+  @apply flex
+    h-9
+    gap-2;
+}
+
 .scrollable {
   @apply scrollbar-thin
     flex
-    max-h-[21rem]
-    snap-y
-    snap-mandatory
+    max-h-[29rem]
     overflow-y-auto;
+}
 
-  thead {
-    @apply rounded-t-xs
-      sticky
-      top-px
-      bg-white
-      shadow-[0_-1px_0_0_var(--color-neutral-200)]
-      dark:bg-neutral-950
-      dark:shadow-[0_-1px_0_0_var(--color-neutral-800)];
-  }
-
-  thead th {
-    @apply last:md:w-56;
-  }
+.information {
+  @apply md:w-96;
+}
 
-  tr {
-    @apply snap-start;
-  }
+.links {
+  @apply md:w-44;
 }

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

@@ -1,15 +1,19 @@
 'use client';
 
+import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';
 import Separator from '@node-core/ui-components/Common/Separator';
+import NpmIcon from '@node-core/ui-components/Icons/PackageManager/Npm';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
+import LinkWithArrow from '#site/components/LinkWithArrow';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
 import type { MinorVersion } from '#site/types';
 import { getNodeApiLink } from '#site/util/getNodeApiLink';
 
 import styles from './index.module.css';
+import { ReleaseOverviewItem } from '../ReleaseOverview';
 
 type MinorReleasesTableProps = {
   releases: Array<MinorVersion>;
@@ -18,19 +22,21 @@ type MinorReleasesTableProps = {
 export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
   releases,
 }) => {
-  const t = useTranslations('components.minorReleasesTable');
+  const t = useTranslations('components');
 
   return (
     <div className={styles.scrollable}>
       <table>
         <thead>
           <tr>
-            <th>{t('version')}</th>
-            <th>{t('links')}</th>
+            <th>{t('minorReleasesTable.version')}</th>
+            <th className={styles.information}>
+              {t('minorReleasesTable.information')}
+            </th>
+            <th className={styles.links}>{t('minorReleasesTable.links')}</th>
           </tr>
         </thead>
         <tbody>
-          <tr />
           {releases.map(release => (
             <tr key={release.version}>
               <td>
@@ -39,20 +45,49 @@ export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
                 </Link>
               </td>
               <td>
-                <div className={styles.links}>
+                <div className={styles.items}>
+                  {release.modules && (
+                    <>
+                      <ReleaseOverviewItem
+                        Icon={CodeBracketSquareIcon}
+                        title={`v${release.modules}`}
+                        subtitle={t('releaseOverview.nApiVersion')}
+                      />
+                      <Separator orientation="vertical" />
+                    </>
+                  )}
+                  {release.npm && (
+                    <>
+                      <ReleaseOverviewItem
+                        Icon={NpmIcon}
+                        title={`v${release.npm}`}
+                        subtitle={t('releaseOverview.npmVersion')}
+                      />
+                      <Separator orientation="vertical" />
+                    </>
+                  )}
+                  <ReleaseOverviewItem
+                    Icon={CodeBracketSquareIcon}
+                    title={`v${release.v8}`}
+                    subtitle={t('releaseOverview.v8Version')}
+                  />
+                </div>
+              </td>
+              <td>
+                <div className={styles.additionalLinks}>
                   <Link
                     kind="neutral"
-                    href={`${BASE_CHANGELOG_URL}${release.version}`}
+                    href={getNodeApiLink(`v${release.version}`)}
                   >
-                    {t('actions.changelog')}
+                    {t('minorReleasesTable.actions.docs')}
                   </Link>
                   <Separator orientation="vertical" />
-                  <Link
+                  <LinkWithArrow
                     kind="neutral"
-                    href={getNodeApiLink(`v${release.version}`)}
+                    href={`${BASE_CHANGELOG_URL}${release.version}`}
                   >
-                    {t('actions.docs')}
-                  </Link>
+                    {t('minorReleasesTable.actions.changelog')}
+                  </LinkWithArrow>
                 </div>
               </td>
             </tr>

apps/site/components/Downloads/ReleaseOverview/index.module.css

@@ -15,24 +15,24 @@
       gap-4
       lg:grid-cols-3;
   }
+}
 
-  .item {
-    @apply flex
-      items-center
-      gap-2;
+.item {
+  @apply flex
+    items-center
+    gap-2;
 
-    h1 {
-      @apply text-sm
-        font-semibold;
-    }
+  dt {
+    @apply text-sm
+      font-semibold;
+  }
 
-    h2 {
-      @apply text-xs
-        font-normal;
-    }
+  dd {
+    @apply text-xs
+      font-normal;
+  }
 
-    svg {
-      @apply size-4;
-    }
+  svg {
+    @apply size-4;
   }
 }

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

@@ -13,23 +13,25 @@ import type { NodeRelease } from '#site/types';
 
 import styles from './index.module.css';
 
-type ItemProps = {
+type ReleaseOverviewItemProps = {
   Icon: FC<SVGProps<SVGSVGElement>>;
   title: ReactNode;
   subtitle: ReactNode;
 };
 
-const Item: FC<ItemProps> = ({ Icon, title, subtitle }) => {
-  return (
-    <div className={styles.item}>
-      <Icon />
-      <div>
-        <h2>{subtitle}</h2>
-        <h1>{title}</h1>
-      </div>
-    </div>
-  );
-};
+export const ReleaseOverviewItem: FC<ReleaseOverviewItemProps> = ({
+  Icon,
+  title,
+  subtitle,
+}) => (
+  <div className={styles.item}>
+    <Icon />
+    <dl>
+      <dd>{subtitle}</dd>
+      <dt>{title}</dt>
+    </dl>
+  </div>
+);
 
 type ReleaseOverviewProps = {
   release: NodeRelease;
@@ -41,36 +43,36 @@ export const ReleaseOverview: FC<ReleaseOverviewProps> = ({ release }) => {
   return (
     <div className={styles.root}>
       <div className={styles.container}>
-        <Item
+        <ReleaseOverviewItem
           Icon={CalendarIcon}
           title={<FormattedTime date={release.currentStart} />}
           subtitle={t('components.releaseOverview.firstReleased')}
         />
-        <Item
+        <ReleaseOverviewItem
           Icon={ClockIcon}
           title={<FormattedTime date={release.releaseDate} />}
           subtitle={t('components.releaseOverview.lastUpdated')}
         />
-        <Item
+        <ReleaseOverviewItem
           Icon={Square3Stack3DIcon}
           title={release.minorVersions.length}
           subtitle={t('components.releaseOverview.minorVersions')}
         />
         {release.modules && (
-          <Item
+          <ReleaseOverviewItem
             Icon={CodeBracketSquareIcon}
             title={`v${release.modules}`}
             subtitle={t('components.releaseOverview.nApiVersion')}
           />
         )}
         {release.npm && (
-          <Item
+          <ReleaseOverviewItem
             Icon={NpmIcon}
             title={`v${release.npm}`}
             subtitle={t('components.releaseOverview.npmVersion')}
           />
         )}
-        <Item
+        <ReleaseOverviewItem
           Icon={CodeBracketSquareIcon}
           title={`v${release.v8}`}
           subtitle={t('components.releaseOverview.v8Version')}

apps/site/pages/en/download/archive.mdx

@@ -34,26 +34,26 @@ layout: download-archive
           tarball.
         </li>
       </ul>
-      <h2>Binary Downloads</h2>
-      <DownloadsTable source={binaries} />
-      <h2>Installer Packages</h2>
-      <DownloadsTable source={installers} />
-      <h2>Minor versions</h2>
-      <MinorReleasesTable releases={release.minorVersions} />
       <details>
         <summary>
-          <h2 className="inline">Other releases</h2>
+          <h3>Other releases</h3>
         </summary>
         <ul>
           {majorVersions.map(version => (
             <li key={version}>
               <Link href={`/download/${version}`}>
-                <h3>Node.js {version}</h3>
+                <h4>Node.js {version}</h4>
               </Link>
             </li>
           ))}
         </ul>
       </details>
+      <h2>Binary Downloads</h2>
+      <DownloadsTable source={binaries} />
+      <h2>Installer Packages</h2>
+      <DownloadsTable source={installers} />
+      <h2>Minor versions</h2>
+      <MinorReleasesTable releases={release.minorVersions} />
     </>
   )}
 </WithDownloadArchive>

packages/i18n/locales/en.json

@@ -179,6 +179,7 @@
       "version": "Version",
       "links": "Links",
       "showMore": "Show more",
+      "information": "Version Informations",
       "actions": {
         "release": "Release",
         "changelog": "Changelog",
@@ -343,4 +344,4 @@
     },
     "logo": "Node.js logo"
   }
-}
+}

packages/ui-components/styles/markdown.css

@@ -170,4 +170,15 @@ main {
       @apply sm:border-l-0;
     }
   }
+
+  details {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply inline;
+    }
+  }
 }