refactor: code cleanup and reusability

app/[locale]/[[...path]]/page.tsx

@@ -37,6 +37,8 @@ export const generateMetadata = async (c: DynamicParams) => {
 export const generateStaticParams = async () => {
   const paths: DynamicStaticPaths[] = [];
 
+  // We don't need to compute all possible paths on regular builds
+  // as we benefit from Next.js's ISR (Incremental Static Regeneration)
   if (!ENABLE_STATIC_EXPORT) {
     return [];
   }

components/Docs/NodeApiVersionLinks.tsx

@@ -1,21 +1,13 @@
-import { useMemo } from 'react';
-
-import { useNodeReleases } from '@/hooks/useNodeReleases';
 import { DOCS_URL } from '@/next.constants.mjs';
+import { releaseData } from '@/next.json.mjs';
 
 const NodeApiVersionLinks = () => {
-  const { releases } = useNodeReleases();
-
-  const mappedReleases = useMemo(
-    () =>
-      // Gets all major releases without the 0x release as those are divided on 0.12x and 0.10x
-      releases.slice(0, -1).map(({ major }) => (
-        <li key={major}>
-          <a href={`${DOCS_URL}latest-v${major}.x/api/`}>Node.js {major}.x</a>
-        </li>
-      )),
-    [releases]
-  );
+  // Gets all major releases without the 0x release as those are divided on 0.12x and 0.10x
+  const mappedReleases = releaseData.slice(0, -1).map(({ major }) => (
+    <li key={major}>
+      <a href={`${DOCS_URL}latest-v${major}.x/api/`}>Node.js {major}.x</a>
+    </li>
+  ));
 
   return (
     <ul>

components/Downloads/DownloadReleasesTable.tsx

@@ -1,15 +1,13 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import { useNodeReleases } from '@/hooks/useNodeReleases';
+import { releaseData } from '@/next.json.mjs';
 import { getNodeApiLink } from '@/util/getNodeApiLink';
 import { getNodejsChangelog } from '@/util/getNodeJsChangelog';
 
 const DownloadReleasesTable: FC = () => {
   const t = useTranslations();
 
-  const { releases } = useNodeReleases();
-
   return (
     <table id="tbVersions" className="download-table full-width">
       <thead>
@@ -27,7 +25,7 @@ const DownloadReleasesTable: FC = () => {
         </tr>
       </thead>
       <tbody>
-        {releases.map(release => (
+        {releaseData.map(release => (
           <tr key={release.major}>
             <td data-label="Version">Node.js {release.version}</td>
             <td data-label="LTS">{release.codename}</td>

components/Downloads/PrimaryDownloadMatrix.tsx

@@ -51,7 +51,7 @@ const PrimaryDownloadMatrix: FC<NodeRelease> = ({
           <li>
             <Link
               className={getIsVersionClassName(!isLts)}
-              href="/download/current/"
+              href="/download/current"
               title={`${downloads['display-hint']} ${downloads.current}`}
             >
               <div className="title">{downloads.current}</div>

components/withLayout.tsx

@@ -6,7 +6,6 @@ import BlogPostLayout from '@/layouts/BlogPostLayout';
 import ContributeLayout from '@/layouts/ContributeLayout';
 import DefaultLayout from '@/layouts/DefaultLayout';
 import DocsLayout from '@/layouts/DocsLayout';
-import DownloadCurrentLayout from '@/layouts/DownloadCurrentLayout';
 import DownloadLayout from '@/layouts/DownloadLayout';
 import IndexLayout from '@/layouts/IndexLayout';
 import LearnLayout from '@/layouts/LearnLayout';
@@ -15,12 +14,10 @@ import type { LegacyLayouts } from '@/types';
 const layoutComponents = {
   'docs.hbs': DocsLayout,
   'about.hbs': AboutLayout,
-  'blog-index.hbs': BlogCategoryLayout,
+  'blog-categpry.hbs': BlogCategoryLayout,
   'blog-post.hbs': BlogPostLayout,
-  'category-index.hbs': BlogCategoryLayout,
   'contribute.hbs': ContributeLayout,
   'download.hbs': DownloadLayout,
-  'download-current.hbs': DownloadCurrentLayout,
   'index.hbs': IndexLayout,
   'learn.hbs': LearnLayout,
   'page.hbs': DefaultLayout,
@@ -30,10 +27,7 @@ type WithLayoutProps = PropsWithChildren<{ layout: LegacyLayouts }>;
 
 export const WithLayout: FC<WithLayoutProps> = ({ layout, children }) => {
   const LayoutComponent = useMemo(
-    () =>
-      layout in layoutComponents
-        ? layoutComponents[layout as keyof typeof layoutComponents]
-        : DefaultLayout,
+    () => layoutComponents[layout] || DefaultLayout,
     [layout]
   );
 

components/withNodeRelease.tsx

@@ -1,9 +1,7 @@
-import { useMemo } from 'react';
 import type { FC } from 'react';
 
-import { useNodeReleases } from '@/hooks/useNodeReleases';
+import { releaseData } from '@/next.json.mjs';
 import type { NodeRelease, NodeReleaseStatus } from '@/types';
-import { isNodeRelease } from '@/util/nodeRelease';
 
 type WithNodeReleaseProps = {
   status: NodeReleaseStatus[] | NodeReleaseStatus;
@@ -14,20 +12,9 @@ export const WithNodeRelease: FC<WithNodeReleaseProps> = ({
   status,
   children: Component,
 }) => {
-  const { getReleaseByStatus } = useNodeReleases();
+  const matchingRelease = releaseData.find(release =>
+    [status].flat().includes(release.status)
+  ) as NodeRelease;
 
-  const [release] = useMemo(
-    () =>
-      [status]
-        .flat()
-        .map(s => getReleaseByStatus(s))
-        .filter(s => !!s),
-    [status, getReleaseByStatus]
-  );
-
-  if (release !== undefined && isNodeRelease(release)) {
-    return <Component release={release} />;
-  }
-
-  return null;
+  return <Component release={matchingRelease} />;
 };

layouts/DocsLayout.tsx

@@ -1,19 +1,16 @@
 'use client';
 
 import type { RichTranslationValues } from 'next-intl';
-import { useMemo } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 
 import SideNavigation from '@/components/SideNavigation';
-import { useNodeReleases } from '@/hooks/useNodeReleases';
+import { releaseData } from '@/next.json.mjs';
 
 const DocsLayout: FC<PropsWithChildren> = ({ children }) => {
-  const { getReleaseByStatus, getLatestIsLtsRelease } = useNodeReleases();
-
-  const [lts, current] = useMemo(
-    () => [getLatestIsLtsRelease(), getReleaseByStatus('Current')],
-    [getLatestIsLtsRelease, getReleaseByStatus]
-  );
+  const [lts, current] = [
+    releaseData.find(({ isLts }) => isLts),
+    releaseData.find(({ status }) => status === 'Current'),
+  ];
 
   const translationContext: Record<string, RichTranslationValues> = {
     apiLts: {

layouts/DownloadLayout.tsx

@@ -6,13 +6,17 @@ import PrimaryDownloadMatrix from '@/components/Downloads/PrimaryDownloadMatrix'
 import SecondaryDownloadMatrix from '@/components/Downloads/SecondaryDownloadMatrix';
 import { WithNodeRelease } from '@/components/withNodeRelease';
 import { useMatter } from '@/hooks/useMatter';
+import { usePathname } from '@/navigation.mjs';
 import type { LegacyDownloadsFrontMatter } from '@/types';
 
 const DownloadLayout: FC<PropsWithChildren> = ({ children }) => {
   const { matter: frontMatter } = useMatter();
+  const pathname = usePathname();
 
   const { downloads } = frontMatter as LegacyDownloadsFrontMatter;
 
+  const isCurrentReleasePage = pathname.includes('/current');
+
   return (
     <div className="container">
       <article dir="auto">
@@ -22,14 +26,27 @@ const DownloadLayout: FC<PropsWithChildren> = ({ children }) => {
 
         {children}
 
-        <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>
-          {({ release }) => (
-            <>
-              <PrimaryDownloadMatrix {...release} />
-              <SecondaryDownloadMatrix {...release} />
-            </>
-          )}
-        </WithNodeRelease>
+        {isCurrentReleasePage && (
+          <WithNodeRelease status="Current">
+            {({ release }) => (
+              <>
+                <PrimaryDownloadMatrix {...release} />
+                <SecondaryDownloadMatrix {...release} />
+              </>
+            )}
+          </WithNodeRelease>
+        )}
+
+        {isCurrentReleasePage || (
+          <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>
+            {({ release }) => (
+              <>
+                <PrimaryDownloadMatrix {...release} />
+                <SecondaryDownloadMatrix {...release} />
+              </>
+            )}
+          </WithNodeRelease>
+        )}
       </article>
     </div>
   );

next-data/generateNodeReleasesJson.mjs

@@ -3,6 +3,34 @@ import { join } from 'node:path';
 
 import nodevu from '@nodevu/core';
 
+const getNodeReleaseStatus = (now, support) => {
+  if (support.endOfLife) {
+    if (now > new Date(support.endOfLife)) {
+      return 'End-of-life';
+    }
+  }
+
+  if (support.maintenanceStart) {
+    if (now > new Date(support.maintenanceStart)) {
+      return 'Maintenance LTS';
+    }
+  }
+
+  if (support.ltsStart) {
+    if (now > new Date(support.ltsStart)) {
+      return 'Active LTS';
+    }
+  }
+
+  if (support.currentStart) {
+    if (now >= new Date(support.currentStart)) {
+      return 'Current';
+    }
+  }
+
+  return 'Pending';
+};
+
 // this is the destination path for where the JSON file will be written
 const jsonFilePath = join(process.cwd(), 'public/node-releases-data.json');
 
@@ -18,18 +46,27 @@ const generateNodeReleasesJson = async () => {
   const nodeReleases = majors.map(major => {
     const [latestVersion] = Object.values(major.releases);
 
-    return {
-      major: latestVersion.semver.major,
-      version: latestVersion.semver.raw,
-      codename: major.support.codename,
+    const support = {
       currentStart: major.support.phases.dates.start,
       ltsStart: major.support.phases.dates.lts,
       maintenanceStart: major.support.phases.dates.maintenance,
       endOfLife: major.support.phases.dates.end,
-      npm: latestVersion.dependencies.npm,
-      v8: latestVersion.dependencies.v8,
-      releaseDate: latestVersion.releaseDate,
-      modules: latestVersion.modules.version,
+    };
+
+    const status = getNodeReleaseStatus(new Date(), support);
+
+    return {
+      ...support,
+      status,
+      major: latestVersion.semver.major,
+      version: latestVersion.semver.raw,
+      versionWithPrefix: `v${latestVersion.semver.raw}`,
+      codename: major.support.codename || '',
+      isLts: status === 'Active LTS' || status === 'Maintenance LTS',
+      npm: latestVersion.dependencies.npm || '',
+      v8: latestVersion.dependencies.v8 || '',
+      releaseDate: latestVersion.releaseDate || '',
+      modules: latestVersion.modules.version || '',
     };
   });