feat: pills on footer and clean up code (#7999)

Author: ovflowd

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

@@ -6,7 +6,6 @@ import type { FC } from 'react';
 import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
 import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
 import Link from '#site/components/Link';
-import LinkWithArrow from '#site/components/LinkWithArrow';
 import type { NodeRelease } from '#site/types';
 
 type ReleaseModalProps = {
@@ -71,12 +70,6 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
       <Title>{modalHeading}</Title>
 
       <Content>
-        {release.releaseAnnounceLink && (
-          <LinkWithArrow href={release.releaseAnnounceLink}>
-            {t('components.releaseModal.releaseAnnouncement')}
-          </LinkWithArrow>
-        )}
-
         <ReleaseOverview release={release} />
 
         <h5>{t('components.releaseModal.minorVersions')}</h5>

apps/site/components/withFooter.tsx

@@ -1,18 +1,20 @@
-'use client';
-
+import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
 import Footer from '@node-core/ui-components/Containers/Footer';
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
+import { getClientContext } from '#site/client-context';
 import Link from '#site/components/Link';
-import { usePathname } from '#site/navigation.mjs';
 import { siteNavigation } from '#site/next.json.mjs';
 
-const WithFooter: FC = () => {
-  const t = useTranslations();
-  const pathname = usePathname();
+import WithNodeRelease from './withNodeRelease';
+
+const WithFooter: FC = async () => {
+  const t = await getTranslations();
+  const { pathname } = getClientContext();
 
   const { socialLinks, footerLinks } = siteNavigation;
+
   const updatedFooterLinks = footerLinks
     .slice(0, -1)
     .map(link => ({ ...link, text: t(link.text) }));
@@ -25,7 +27,43 @@ const WithFooter: FC = () => {
     footerLinks: updatedFooterLinks,
   };
 
-  return <Footer navigation={navigation} as={Link} pathname={pathname} />;
+  const primary = (
+    <>
+      <WithNodeRelease status="Active LTS">
+        {({ release }) => (
+          <BadgeGroup
+            size="small"
+            kind="info"
+            badgeText={release.versionWithPrefix}
+            href={`/blog/release/${release.versionWithPrefix}`}
+          >
+            {t('components.containers.footer.releasePills.latestLTS')}
+          </BadgeGroup>
+        )}
+      </WithNodeRelease>
+
+      <WithNodeRelease status="Current">
+        {({ release }) => (
+          <BadgeGroup
+            size="small"
+            badgeText={release.versionWithPrefix}
+            href={`/blog/release/${release.versionWithPrefix}`}
+          >
+            {t('components.containers.footer.releasePills.latestRelease')}
+          </BadgeGroup>
+        )}
+      </WithNodeRelease>
+    </>
+  );
+
+  return (
+    <Footer
+      navigation={navigation}
+      as={Link}
+      pathname={pathname}
+      slots={{ primary }}
+    />
+  );
 };
 
 export default WithFooter;

apps/site/next-data/downloadSnippets.ts

@@ -1,14 +1,12 @@
 import {
   ENABLE_STATIC_EXPORT,
-  NEXT_DATA_URL,
   IS_NOT_VERCEL_RUNTIME_ENV,
+  NEXT_DATA_URL,
 } from '#site/next.constants.mjs';
 import { availableLocaleCodes } from '#site/next.locales.mjs';
 import type { DownloadSnippet } from '#site/types';
 
-export default async function getDownloadSnippets(
-  lang: string
-): Promise<Array<DownloadSnippet>> {
+export default async function getDownloadSnippets(lang: string) {
   // Prevents attempting to retrieve data for an unsupported language as both the generator
   // and the API endpoint will simply return 404. And we want to prevent a 404 response.
   if (!availableLocaleCodes.includes(lang)) {
@@ -39,5 +37,6 @@ export default async function getDownloadSnippets(
   // Note: We do manual JSON.parse after response.text() to prevent React from throwing an Error
   // that does not provide a clear stack trace of which request is failing and what the JSON.parse error is
   const response = await fetch(fetchURL);
-  return JSON.parse(await response.text());
+
+  return JSON.parse(await response.text()) as Array<DownloadSnippet>;
 }

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

@@ -1,10 +1,8 @@
 'use strict';
 
-import { readFile } from 'node:fs/promises';
+import { readFile, glob } from 'node:fs/promises';
 import { basename, extname, join } from 'node:path';
 
-import { glob } from 'glob';
-
 import { availableLocaleCodes } from '../../next.locales.mjs';
 
 /**
@@ -20,11 +18,13 @@ export default async function generateDownloadSnippets() {
   const downloadSnippets = availableLocaleCodes.flatMap(async locale => {
     // We retrieve the full pathnames of all Blog Posts to read each file individually
     // Note that we get the files original language (Bash/PowerShell, etc)
-    const filenames = await glob('**/*.bash', {
+    const filenamesPromise = glob('**/*.bash', {
       root: process.cwd(),
       cwd: `snippets/${locale}/download`,
     });
 
+    const filenames = await Array.fromAsync(filenamesPromise);
+
     // Creates the base path for the snippets for Node to read from
     const basePath = join(process.cwd(), `snippets/${locale}/download`);
 

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

@@ -1,7 +1,6 @@
 'use strict';
 
 import nodevu from '@nodevu/core';
-import { glob } from 'glob';
 
 // Gets the appropriate release status for each major release
 const getNodeReleaseStatus = (now, support) => {
@@ -33,12 +32,6 @@ const getNodeReleaseStatus = (now, support) => {
  * @returns {Promise<Array<import('../../types').NodeRelease>>}
  */
 const generateReleaseData = async () => {
-  const releaseAnnouncements = await glob('**/*-release-announce.md', {
-    root: process.cwd(),
-    cwd: 'pages/en/blog/announcements/',
-    absolute: false,
-  });
-
   const nodevuOutput = await nodevu({ fetch });
 
   const majors = Object.entries(nodevuOutput).filter(
@@ -81,14 +74,6 @@ const generateReleaseData = async () => {
       releaseDate: release.releaseDate,
     }));
 
-    const majorVersion = latestVersion.semver.major;
-
-    const releaseAnnounceLink = releaseAnnouncements.includes(
-      `v${majorVersion}-release-announce.md`
-    )
-      ? `/blog/announcements/v${majorVersion}-release-announce`
-      : undefined;
-
     return {
       ...support,
       status: status,
@@ -101,7 +86,6 @@ const generateReleaseData = async () => {
       v8: latestVersion.dependencies.v8,
       releaseDate: latestVersion.releaseDate,
       modules: latestVersion.modules.version || '',
-      releaseAnnounceLink: releaseAnnounceLink,
       minorVersions: minorVersions,
     };
   });

apps/site/next.helpers.mjs

@@ -1,9 +1,8 @@
 'use strict';
 
+import { glob } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 
-import { glob } from 'glob';
-
 /**
  * We create a locale cache of Glob Promises
  * to avoid reading the file system multiple times
@@ -37,7 +36,11 @@ export const getMarkdownFiles = async (root, cwd, ignore = []) => {
   const cacheKey = `${root}${cwd}${ignore.join('')}`;
 
   if (!globCacheByPath.has(cacheKey)) {
-    globCacheByPath.set(cacheKey, glob('**/*.{md,mdx}', { root, cwd, ignore }));
+    const result = Array.fromAsync(
+      glob('**/*.{md,mdx}', { root, cwd, ignore })
+    );
+
+    globCacheByPath.set(cacheKey, result);
   }
 
   return globCacheByPath.get(cacheKey);

apps/site/package.json

@@ -56,7 +56,6 @@
     "cross-env": "catalog:",
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
-    "glob": "~11.0.1",
     "gray-matter": "~4.0.3",
     "next": "15.3.4",
     "next-intl": "~4.3.4",

apps/site/pages/en/index.mdx

@@ -26,24 +26,6 @@ layout: home
         <br />
         <small className="!text-xs">for Node.js 18 and below</small>
       </Button>
-
-      <div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
-        <WithNodeRelease status="Active LTS">
-          {({ release }) =>
-            <BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
-              Latest LTS
-            </BadgeGroup>}
-        </WithNodeRelease>
-
-        <WithNodeRelease status="Current">
-          {({ release }) =>
-            <BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
-              Latest Release
-            </BadgeGroup>}
-        </WithNodeRelease>
-      </div>
-
-      <span className="italic text-center text-xs! text-neutral-800 dark:text-neutral-600">"LTS" refers to the long-term support version of Node.js. <Link href="/about/previous-releases">Learn more about Node.js releases.</Link></span>
     </div>
 
   </div>