Merge branch 'main' into dependabot/npm_and_yarn/apps/site/npm_and_yarn-c6d5a854cf

Author: ovflowd

apps/site/app/[locale]/download/archive/[version]/page.tsx

@@ -51,7 +51,10 @@ const getPage: FC<PageParams> = async props => {
   if (version === 'current') {
     const releaseData = await provideReleaseData();
 
-    const release = releaseData.find(release => release.status === 'Current');
+    // There's no Current release while the next major is in its Alpha phase
+    const release =
+      releaseData.find(release => release.status === 'Current') ??
+      releaseData.find(release => release.status === 'LTS');
 
     redirect(`/${locale}/download/archive/${release?.versionWithPrefix}`);
   }

apps/site/components/withAvatarGroup.tsx apps/site/components/AvatarGroup.tsxapps/site/components/withAvatarGroup.tsx renamed to apps/site/components/AvatarGroup.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
+import AvatarGroupContainer from '@node-core/ui-components/Common/AvatarGroup';
 
 import Link from '#site/components/Link';
 import { getAuthors } from '#site/util/author';
 
 import type { AuthorProps } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithAvatarGroupProps = Omit<
-  ComponentProps<typeof AvatarGroup>,
+type AvatarGroupProps = Omit<
+  ComponentProps<typeof AvatarGroupContainer>,
   'avatars' | 'as'
 > &
   AuthorProps;
 
-const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
+const AvatarGroup: FC<AvatarGroupProps> = ({
   usernames,
   names,
   clickable = true,
   ...props
 }) => (
-  <AvatarGroup
+  <AvatarGroupContainer
     avatars={getAuthors({
       usernames,
       names,
@@ -31,4 +31,4 @@ const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
   />
 );
 
-export default WithAvatarGroup;
+export default AvatarGroup;

apps/site/components/Blog/BlogPostCard/index.tsx

@@ -1,9 +1,9 @@
 import Preview from '@node-core/ui-components/Common/Preview';
 import { useTranslations } from 'next-intl';
 
+import AvatarGroup from '#site/components/AvatarGroup';
 import FormattedTime from '#site/components/Common/FormattedTime';
 import Link from '#site/components/Link';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
 import { mapBlogCategoryToPreviewType } from '#site/util/blog';
 
 import type { BlogCategory } from '#site/types';
@@ -49,7 +49,7 @@ const BlogPostCard: FC<BlogPostCardProps> = ({
       {description && <p className={styles.description}>{description}</p>}
 
       <footer className={styles.footer}>
-        <WithAvatarGroup names={authors} size="medium" clickable={false} />
+        <AvatarGroup names={authors} size="medium" clickable={false} />
 
         <div className={styles.author}>
           {authors && <p>{authors.join(', ')}</p>}

…s/site/components/withBlogCategories.tsx apps/site/components/BlogCategories.tsxapps/site/components/withBlogCategories.tsx renamed to apps/site/components/BlogCategories.tsx apps/site/components/withBlogCategories.tsx renamed to apps/site/components/BlogCategories.tsx

@@ -8,7 +8,7 @@ import { mapAuthorToCardAuthors } from '#site/util/author';
 import type { BlogPostsRSC } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithBlogCategoriesProps = {
+type BlogCategoriesProps = {
   categories: ComponentProps<typeof LinkTabs>['tabs'];
   blogData: BlogPostsRSC & { category: string; page: number };
 };
@@ -18,10 +18,7 @@ const mapPaginationPages = (category: string, pages: number) =>
     url: `/blog/${category}/page/${page + 1}`,
   }));
 
-const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
-  categories,
-  blogData,
-}) => {
+const BlogCategories: FC<BlogCategoriesProps> = ({ categories, blogData }) => {
   const t = useTranslations();
 
   return (
@@ -58,4 +55,4 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
   );
 };
 
-export default WithBlogCategories;
+export default BlogCategories;

…s/site/components/withBlogCrossLinks.tsx apps/site/components/BlogCrossLinks.tsxapps/site/components/withBlogCrossLinks.tsx renamed to apps/site/components/BlogCrossLinks.tsx apps/site/components/withBlogCrossLinks.tsx renamed to apps/site/components/BlogCrossLinks.tsx

@@ -5,7 +5,7 @@ import { getBlogData } from '#site/util/blog';
 import type { BlogCategory } from '#site/types';
 import type { FC } from 'react';
 
-const WithBlogCrossLinks: FC = () => {
+const BlogCrossLinks: FC = () => {
   const { pathname } = getClientContext();
 
   // Extracts from the static URL the components used for the Blog Post slug
@@ -48,4 +48,4 @@ const WithBlogCrossLinks: FC = () => {
   );
 };
 
-export default WithBlogCrossLinks;
+export default BlogCrossLinks;

apps/site/components/withBreadcrumbs.tsx apps/site/components/Breadcrumbs.tsxapps/site/components/withBreadcrumbs.tsx renamed to apps/site/components/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Breadcrumbs from '@node-core/ui-components/Common/Breadcrumbs';
+import BreadcrumbsContainer from '@node-core/ui-components/Common/Breadcrumbs';
 import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
@@ -13,11 +13,11 @@ import type { NavigationKeys } from '#site/types';
 import type { BreadcrumbLink } from '@node-core/ui-components/Common/Breadcrumbs';
 import type { FC } from 'react';
 
-type WithBreadcrumbsProps = {
+type BreadcrumbsProps = {
   navKeys?: Array<NavigationKeys>;
 };
 
-const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ navKeys = [] }) => {
   const { getSideNavigation } = useSiteNavigation();
   const t = useTranslations();
   const { pathname } = useClientContext();
@@ -64,7 +64,7 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   };
 
   return (
-    <Breadcrumbs
+    <BreadcrumbsContainer
       links={getBreadcrumbs()}
       maxLength={maxLength}
       as={Link}
@@ -73,4 +73,4 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   );
 };
 
-export default WithBreadcrumbs;
+export default Breadcrumbs;

…/site/components/withDownloadSection.tsx apps/site/components/DownloadSection.tsxapps/site/components/withDownloadSection.tsx renamed to apps/site/components/DownloadSection.tsx apps/site/components/withDownloadSection.tsx renamed to apps/site/components/DownloadSection.tsx

@@ -9,14 +9,14 @@ import {
   ReleasesProvider,
 } from '#site/providers/releaseProvider';
 
-import type { NodeRelease } from '../types';
+import type { NodeRelease, NodeReleaseStatus } from '../types';
 import type { FC, PropsWithChildren } from 'react';
 
-type WithDownloadSectionProps = PropsWithChildren<{
+type DownloadSectionProps = PropsWithChildren<{
   releases: Array<NodeRelease>;
 }>;
 
-const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
+const DownloadSection: FC<DownloadSectionProps> = async ({
   releases,
   children,
 }) => {
@@ -39,7 +39,11 @@ const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
     .concat(localeSnippets);
 
   // Decides which initial release to use based on the current pathname
-  const initialRelease = pathname.endsWith('/current') ? 'Current' : 'LTS';
+  const initialRelease: Array<NodeReleaseStatus> = pathname.endsWith('/alpha')
+    ? ['Alpha', 'Current', 'LTS']
+    : pathname.endsWith('/current')
+      ? ['Current', 'LTS']
+      : ['LTS'];
 
   return (
     <WithNodeRelease status={initialRelease}>
@@ -52,4 +56,4 @@ const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
   );
 };
 
-export default WithDownloadSection;
+export default DownloadSection;

apps/site/components/Downloads/Release/InstallationMethodDropdown.tsx

@@ -23,15 +23,15 @@ const InstallationMethodDropdown: FC = () => {
   );
 
   // We group Platforms on the Platform Dropdown to provide the User
-  // understanding of what is recommended/official and what is not.
-  const grouppedMethods = useMemo(
+  // understanding of what is recommended and what is not.
+  const groupedMethods = useMemo(
     () => [
       {
-        label: t('layouts.download.dropdown.platformGroups.official'),
+        label: t('layouts.download.dropdown.platformGroups.recommended'),
         items: parsedInstallMethods.filter(({ recommended }) => recommended),
       },
       {
-        label: t('layouts.download.dropdown.platformGroups.unofficial'),
+        label: t('layouts.download.dropdown.platformGroups.community'),
         items: parsedInstallMethods.filter(({ recommended }) => !recommended),
       },
     ],
@@ -47,8 +47,8 @@ const InstallationMethodDropdown: FC = () => {
     if (release.os !== 'LOADING' && release.installMethod === '') {
       const installationMethod =
         // Sets either the utmost recommended platform or the first non-disabled one
-        // Note that the first item of groupped platforms is always the recommended one
-        nextItem<InstallationMethod | ''>('', grouppedMethods[0].items) ||
+        // Note that the first item of grouped platforms is always the recommended one
+        nextItem<InstallationMethod | ''>('', groupedMethods[0].items) ||
         nextItem<InstallationMethod | ''>('', parsedInstallMethods);
 
       // This will never return an empty string as there should always be an item
@@ -75,7 +75,7 @@ const InstallationMethodDropdown: FC = () => {
 
   return (
     <Select<InstallationMethod | ''>
-      values={grouppedMethods}
+      values={groupedMethods}
       value={release.installMethod}
       loading={release.os === 'LOADING' || release.installMethod === ''}
       ariaLabel={t('layouts.download.dropdown.platform')}

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -9,7 +9,7 @@ import { use, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import Link from '#site/components/Link';
-import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
+import ReleaseAlertBox from '#site/components/ReleaseAlertBox';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -115,7 +115,7 @@ const usePlatformInfo = (installMethod: string) => {
  * ReleaseCodeBox component displays installation instructions based on platform and context
  */
 const ReleaseCodeBox: FC = () => {
-  const { snippets } = use(ReleasesContext);
+  const { snippets, releases } = use(ReleasesContext);
   const context = use(ReleaseContext);
   const t = useTranslations();
 
@@ -149,7 +149,7 @@ const ReleaseCodeBox: FC = () => {
       </noscript>
 
       {/* Release status alert */}
-      <WithReleaseAlertBox status={context.release.status} />
+      <ReleaseAlertBox release={context.release} releases={releases} />
 
       {/* Community platform notice */}
       {platformInfo.exists && !platformInfo.recommended && (

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -2,15 +2,16 @@
 
 import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
-import { use } from 'react';
+import { use, useEffect } from 'react';
 
-import { redirect, usePathname } from '#site/navigation';
+import { redirect, usePathname } from '#site/navigation.mjs';
 import { STATUS_KIND_MAP } from '#site/next.constants.mjs';
 import {
   ReleaseContext,
   ReleasesContext,
 } from '#site/providers/releaseProvider';
 
+import type { NodeReleaseStatus } from '#site/types';
 import type { FC } from 'react';
 
 const VersionDropdown: FC = () => {
@@ -22,19 +23,41 @@ const VersionDropdown: FC = () => {
 
   // Allows us to keep the route semantically correct to what the user should expect
   // from the /current and non /current routes.
+  const getRedirectPath = (status: NodeReleaseStatus) => {
+    if (['LTS', 'EOL'].includes(status) && !pathname.endsWith('/download')) {
+      return '/download';
+    }
+
+    if (status === 'Current' && !pathname.includes('current')) {
+      return '/download/current';
+    }
+
+    if (status === 'Alpha' && !pathname.includes('alpha')) {
+      return '/download/alpha';
+    }
+  };
+
+  // Ensure the initial route is correct based on the release status.
+  useEffect(() => {
+    const redirectPath = getRedirectPath(release.status);
+    if (redirectPath) {
+      redirect({ href: redirectPath, locale });
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps -- deps are correct on first render, and this should not run again.
+  }, []);
+
+  // Handle setting the new version or navigating to the correct route based on status.
   const setVersionOrNavigate = (version: string) => {
-    const release = releases.find(
+    const selectedRelease = releases.find(
       ({ versionWithPrefix }) => versionWithPrefix === version
     );
 
-    if (release?.status === 'LTS' && pathname.includes('current')) {
-      redirect({ href: '/download', locale });
-      return;
-    }
-
-    if (release?.status === 'Current' && !pathname.includes('current')) {
-      redirect({ href: '/download/current', locale });
-      return;
+    if (selectedRelease) {
+      const href = getRedirectPath(selectedRelease.status);
+      if (href) {
+        redirect({ href, locale });
+        return;
+      }
     }
 
     setVersion(version);