refactor: layout changes

Author: canerakdas

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

@@ -19,10 +19,10 @@ const DownloadsTable: FC<DownloadsTableProps> = ({ source }) => {
       <thead>
         <tr>
           <th>{t('components.downloadsTable.fileName')}</th>
-          <th className="md:w-24">
+          <th className="md:w-28">
             {t('components.downloadsTable.operatingSystem')}
           </th>
-          <th className="md:w-24">
+          <th className="md:w-28">
             {t('components.downloadsTable.architecture')}
           </th>
         </tr>

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

@@ -6,3 +6,20 @@
     items-center
     gap-2;
 }
+
+.scrollable {
+  @apply scrollbar-thin
+    flex
+    snap-x
+    snap-mandatory
+    overflow-x-auto;
+
+  > table {
+    @apply shrink-0
+      snap-start;
+
+    thead th {
+      @apply last:md:w-56;
+    }
+  }
+}

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

@@ -15,50 +15,67 @@ type MinorReleasesTableProps = {
   releases: Array<MinorVersion>;
 };
 
+const chunkedReleases = (releases: Array<MinorVersion>, size: number) => {
+  const count = Math.ceil(releases.length / size);
+
+  return Array.from({ length: count }, (_, index) =>
+    releases.slice(index * size, (index + 1) * size)
+  );
+};
+
 export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
   releases,
 }) => {
   const t = useTranslations('components.minorReleasesTable');
+  const releaseGroups = chunkedReleases(releases, 8);
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>{t('version')}</th>
-          <th>{t('links')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {releases.map(release => (
-          <tr key={release.version}>
-            <td>v{release.version}</td>
-            <td>
-              <div className={styles.links}>
-                <Link
-                  kind="neutral"
-                  href={`https://nodejs.org/download/release/v${release.version}/`}
-                >
-                  {t('actions.release')}
-                </Link>
-                <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={`${BASE_CHANGELOG_URL}${release.version}`}
-                >
-                  {t('actions.changelog')}
-                </Link>
-                <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={getNodeApiLink(`v${release.version}`)}
-                >
-                  {t('actions.docs')}
-                </Link>
-              </div>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div className={styles.scrollable}>
+      {releaseGroups.map(releases => (
+        <table key={releases[0].version}>
+          <thead>
+            <tr>
+              <th>{t('version')}</th>
+              <th>{t('links')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {releases.map(release => (
+              <tr key={release.version}>
+                <td>
+                  <Link kind="neutral" href={`/download/v${release.version}`}>
+                    v{release.version}
+                  </Link>
+                </td>
+                <td>
+                  <div className={styles.links}>
+                    <Link
+                      kind="neutral"
+                      href={`https://nodejs.org/download/release/v${release.version}/`}
+                    >
+                      {t('actions.release')}
+                    </Link>
+                    <Separator orientation="vertical" />
+                    <Link
+                      kind="neutral"
+                      href={`${BASE_CHANGELOG_URL}${release.version}`}
+                    >
+                      {t('actions.changelog')}
+                    </Link>
+                    <Separator orientation="vertical" />
+                    <Link
+                      kind="neutral"
+                      href={getNodeApiLink(`v${release.version}`)}
+                    >
+                      {t('actions.docs')}
+                    </Link>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ))}
+    </div>
   );
 };

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

@@ -29,7 +29,7 @@ const WithMarkdownContent: FC<WithMarkdownContentProps> = async ({ file }) => {
   const locale = await getLocale();
   const content = await getMarkdownContent(locale, file);
 
-  return content || null;
+  return content;
 };
 
 export default WithMarkdownContent;

apps/site/components/MDX/Details/index.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 { ComponentProps, FC } from 'react';
+import type { FC } from 'react';
 
 import Link from '#site/components/Link';
 import WithAvatarGroup from '#site/components/withAvatarGroup';
@@ -14,11 +14,7 @@ import { TRANSLATION_URL } from '#site/next.constants.mjs';
 import { defaultLocale } from '#site/next.locales.mjs';
 import { getGitHubBlobUrl } from '#site/util/gitHubUtils';
 
-type WithMetaBarProps = {
-  items?: ComponentProps<typeof MetaBar>['items'];
-};
-
-const WithMetaBar: FC<WithMetaBarProps> = ({ items }) => {
+const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
   const lastUpdated = frontmatter.date
@@ -49,11 +45,8 @@ const WithMetaBar: FC<WithMetaBarProps> = ({ items }) => {
       heading={t('components.metabar.tableOfContents')}
       as={Link}
       items={{
-        ...items,
         [t('components.metabar.lastUpdated')]: lastUpdated,
-        ...(readingTime.minutes >= 1 && {
-          [t('components.metabar.readingTime')]: readingTimeText,
-        }),
+        [t('components.metabar.readingTime')]: readingTimeText,
         ...(usernames.length && {
           [t(
             `components.metabar.${usernames.length > 1 ? 'authors' : 'author'}`

apps/site/components/withMarkdownContent.tsx

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

apps/site/components/withMetaBar.tsx

@@ -1,20 +1,13 @@
-import type MetaBar from '@node-core/ui-components/Containers/MetaBar';
-import { getTranslations } from 'next-intl/server';
-import type { ComponentProps, FC } from 'react';
+import type { FC } from 'react';
 
 import { getClientContext } from '#site/client-context';
 import getReleaseData from '#site/next-data/releaseData';
 import {
-  buildMetaBarItems,
   buildReleaseArtifacts,
   extractVersionFromPath,
-  groupReleasesByStatus,
 } from '#site/util/downloadUtils/simple';
 
-type SimplifiedDownload = ReturnType<typeof buildReleaseArtifacts> & {
-  sidebarItems: ReturnType<typeof groupReleasesByStatus>;
-  metabarItems: ComponentProps<typeof MetaBar>['items'];
-};
+type SimplifiedDownload = ReturnType<typeof buildReleaseArtifacts>;
 
 type WithSimplifiedDownloadProps = {
   children: FC<SimplifiedDownload>;
@@ -27,45 +20,34 @@ const WithSimplifiedDownload: FC<WithSimplifiedDownloadProps> = async ({
   children: Component,
 }) => {
   const { pathname } = getClientContext();
-  const [releaseData, t] = await Promise.all([
-    getReleaseData(),
-    getTranslations(),
-  ]);
+  const releaseData = await getReleaseData();
 
   // Extract version from pathname
-  const version = extractVersionFromPath(pathname);
+  const { version, major } = extractVersionFromPath(pathname) || {};
 
   if (!version) {
     return null;
   }
 
   // Find the matching release
   const release = releaseData.find(
-    ({ major, isLts }) =>
-      major === Number(version) || (isLts === true && version === 'simplified')
+    release =>
+      release.major === major ||
+      (release.isLts === true && version === 'simplified')
   );
 
   if (!release) {
     return null;
   }
 
-  const releaseArtifacts = buildReleaseArtifacts(release);
-  const metabarItems = buildMetaBarItems(release, t);
-
-  // Group and localize sidebar items
-  const mappedSidebarItems = groupReleasesByStatus(releaseData, pathname);
-  const localizedSidebarItems = mappedSidebarItems.map(item => ({
-    ...item,
-    groupName: t(`layouts.simpleDownload.statusNames.${item.groupName}`),
-  }));
-
-  return (
-    <Component
-      {...releaseArtifacts}
-      sidebarItems={localizedSidebarItems}
-      metabarItems={metabarItems}
-    />
+  const majorVersions = releaseData.map(release => release.versionWithPrefix);
+  const releaseArtifacts = buildReleaseArtifacts(
+    release,
+    version,
+    majorVersions
   );
+
+  return <Component {...releaseArtifacts} />;
 };
 
 export default WithSimplifiedDownload;