feat: format datetimes

Author: araujogui

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

@@ -2,6 +2,7 @@ import Badge from '@node-core/ui-components/Common/Badge';
 import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
+import FormattedTime from '@/components/Common/FormattedTime';
 import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton';
 import getReleaseData from '@/next-data/releaseData';
 
@@ -31,10 +32,10 @@ const DownloadReleasesTable: FC = async () => {
             <td data-label="Version">v{release.major}</td>
             <td data-label="LTS">{release.codename || '-'}</td>
             <td data-label="Date">
-              <time>{release.currentStart}</time>
+              <FormattedTime date={release.currentStart} />
             </td>
             <td data-label="Date">
-              <time>{release.releaseDate}</time>
+              <FormattedTime date={release.releaseDate} />
             </td>
             <td data-label="Status">
               <Badge

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

@@ -22,7 +22,7 @@
       gap-2;
 
     h1 {
-      @apply text-base
+      @apply text-sm
         font-semibold;
     }
 

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

@@ -7,6 +7,7 @@ import {
 import { useTranslations } from 'next-intl';
 import type { FC, ReactNode } from 'react';
 
+import FormattedTime from '@/components/Common/FormattedTime';
 import type { NodeRelease } from '@/types';
 
 import styles from './index.module.css';
@@ -41,16 +42,14 @@ export const ReleaseOverview: FC<ReleaseOverviewProps> = ({ release }) => {
       <div className={styles.container}>
         <Item
           icon={<CalendarIcon />}
-          title={release.currentStart}
+          title={<FormattedTime date={release.currentStart} />}
           subtitle={t('components.releaseOverview.firstReleased')}
         />
-        {release.releaseDate && (
-          <Item
-            icon={<ClockIcon />}
-            title={release.releaseDate}
-            subtitle={t('components.releaseOverview.lastUpdated')}
-          />
-        )}
+        <Item
+          icon={<ClockIcon />}
+          title={<FormattedTime date={release.releaseDate} />}
+          subtitle={t('components.releaseOverview.lastUpdated')}
+        />
         <Item
           icon={<Square3Stack3DIcon />}
           title={release.minorVersions.length}
@@ -70,13 +69,11 @@ export const ReleaseOverview: FC<ReleaseOverviewProps> = ({ release }) => {
             subtitle={t('components.releaseOverview.npmVersion')}
           />
         )}
-        {release.v8 && (
-          <Item
-            icon={<CodeBracketSquareIcon />}
-            title={`v${release.v8}`}
-            subtitle={t('components.releaseOverview.v8Version')}
-          />
-        )}
+        <Item
+          icon={<CodeBracketSquareIcon />}
+          title={`v${release.v8}`}
+          subtitle={t('components.releaseOverview.v8Version')}
+        />
       </div>
     </div>
   );

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

@@ -83,8 +83,8 @@ const generateReleaseData = async () => {
       codename: major.support.codename || '',
       isLts: status === 'LTS',
       npm: latestVersion.dependencies.npm || '',
-      v8: latestVersion.dependencies.v8 || '',
-      releaseDate: latestVersion.releaseDate || '',
+      v8: latestVersion.dependencies.v8,
+      releaseDate: latestVersion.releaseDate,
       modules: latestVersion.modules.version || '',
       minorVersions,
     };

apps/site/types/releases.ts

@@ -14,8 +14,8 @@ export interface NodeReleaseSource {
   maintenanceStart?: string;
   endOfLife: string;
   npm?: string;
-  v8?: string;
-  releaseDate?: string;
+  v8: string;
+  releaseDate: string;
   modules?: string;
 }