fix: numerous minor improvements and fixes for downloads page

nodejs · Dec 28, 2024 · 15fbb89 · 15fbb89
1 parent c8e604f
commit 15fbb89
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 115 deletions.
diff --git a/apps/site/components/Common/AlertBox/index.tsx b/apps/site/components/Common/AlertBox/index.tsx
@@ -17,7 +17,7 @@ const AlertBox: FC<AlertBoxProps> = ({
 }) => (
   <div className={classNames(styles.alertBox, styles[level], styles[size])}>
     <span className={styles.title}>{title}</span>
-    {children}
+    <span>{children}</span>
   </div>
 );
 

diff --git a/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx b/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx
@@ -8,7 +8,7 @@ import Select from '@/components/Common/Select';
 import { useClientContext } from '@/hooks';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { UserOS } from '@/types/userOS';
-import { OPERATING_SYSTEMS, parseCompat } from '@/util/downloadUtils';
+import { nextItem, OPERATING_SYSTEMS, parseCompat } from '@/util/downloadUtils';
 
 type OperatingSystemDropdownProps = { exclude?: Array<UserOS> };
 
@@ -30,9 +30,22 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   // We parse the compatibility of the dropdown items
   const parsedOperatingSystems = useMemo(
     () => parseCompat(OPERATING_SYSTEMS, release),
-    // We only want to react on the change of the Install Method
+    // We only want to react on the change of the Install Method and Version
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [release.installMethod, release.os]
+    [release.installMethod, release.version]
+  );
+
+  // We set the OS to the next available OS when the current
+  // one is not valid anymore due to Version changes
+  useEffect(
+    () => {
+      if (release.os !== 'LOADING') {
+        release.setOS(nextItem(release.os, parsedOperatingSystems));
+      }
+    },
+    // We only want to react on the change of the Version, Install Method and OS
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [release.installMethod, release.version, release.os]
   );
 
   return (

diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
@@ -96,16 +96,40 @@ const ReleaseCodeBox: FC = () => {
 
   return (
     <div className="mb-6 mt-4 flex flex-col gap-2">
+      <noscript>
+        <AlertBox
+          title={t('components.common.alertBox.warning')}
+          level="warning"
+          size="small"
+        >
+          {t.rich('layouts.download.codeBox.noScriptDetected', {
+            link: text => (
+              <Link href="/about/previous-releases#looking-for-latest-release-of-a-version-branch">
+                <b>{text}</b>
+              </Link>
+            ),
+          })}
+        </AlertBox>
+      </noscript>
+
       {release.status === 'End-of-life' && (
-        <AlertBox title="Warning" level="warning" size="small">
+        <AlertBox
+          title={t('components.common.alertBox.warning')}
+          level="warning"
+          size="small"
+        >
           {t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
             link: text => <Link href="/about/previous-releases/">{text}</Link>,
           })}
         </AlertBox>
       )}
 
       {!currentPlatform || currentPlatform.recommended || (
-        <AlertBox title="Info" level="info" size="small">
+        <AlertBox
+          title={t('components.common.alertBox.info')}
+          level="info"
+          size="small"
+        >
           {t('layouts.download.codeBox.communityPlatformInfo')}
         </AlertBox>
       )}

diff --git a/apps/site/hooks/react-client/useMediaQuery.ts b/apps/site/hooks/react-client/useMediaQuery.ts
@@ -2,25 +2,6 @@
 
 import { useState, useEffect } from 'react';
 
-const mediaQueryChangeSubscribe = (mq: MediaQueryList, handler: () => void) => {
-  if (mq.addEventListener) {
-    mq.addEventListener('change', handler);
-  } else {
-    mq.addListener(handler);
-  }
-};
-
-const mediaQueryChangeUnsubscribe = (
-  mq: MediaQueryList,
-  handler: () => void
-) => {
-  if (mq.removeEventListener) {
-    mq.removeEventListener('change', handler);
-  } else {
-    mq.removeListener(handler);
-  }
-};
-
 const useMediaQuery = (query: string): boolean | undefined => {
   const [matches, setMatches] = useState<boolean>();
 
@@ -29,10 +10,12 @@ const useMediaQuery = (query: string): boolean | undefined => {
       const mq = window.matchMedia(query);
       setMatches(mq.matches);
 
-      const handler = (): void => setMatches(mq.matches);
-      mediaQueryChangeSubscribe(mq, handler);
+      const handler = (event: MediaQueryListEvent): void =>
+        setMatches(event.matches);
+
+      mq.addEventListener('change', handler);
 
-      return (): void => mediaQueryChangeUnsubscribe(mq, handler);
+      return (): void => mq.removeEventListener('change', handler);
     }
 
     return undefined;

diff --git a/apps/site/navigation.json b/apps/site/navigation.json
@@ -380,45 +380,5 @@
         }
       }
     }
-  },
-  "download": {
-    "items": {
-      "shaSums": {
-        "link": "https://nodejs.org/dist/{nodeVersion}/SHASUMS256.txt.asc",
-        "label": "components.downloadList.links.shaSums.title"
-      },
-      "allDownloads": {
-        "link": "https://nodejs.org/dist/{nodeVersion}/",
-        "label": "components.downloadList.links.allDownloads"
-      },
-      "packageManager": {
-        "link": "/download/package-manager",
-        "label": "components.downloadList.links.packageManager"
-      },
-      "previousReleases": {
-        "link": "/about/previous-releases",
-        "label": "components.downloadList.links.previousReleases"
-      },
-      "nightlyReleases": {
-        "link": "https://nodejs.org/download/nightly/",
-        "label": "components.downloadList.links.nightlyReleases"
-      },
-      "unofficialBuilds": {
-        "link": "https://unofficial-builds.nodejs.org/download/",
-        "label": "components.downloadList.links.unofficialBuilds"
-      },
-      "buildingFromSource": {
-        "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
-        "label": "components.downloadList.links.buildingFromSource"
-      },
-      "installingOnLinux": {
-        "link": "https://github.com/nodejs/help/wiki/Installation",
-        "label": "components.downloadList.links.installingOnLinux"
-      },
-      "installingOnWsl": {
-        "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
-        "label": "components.downloadList.links.installingOnWsl"
-      }
-    }
   }
 }
diff --git a/apps/site/pages/es/search.mdx b/apps/site/pages/es/search.mdx
diff --git a/apps/site/util/downloadUtils.tsx b/apps/site/util/downloadUtils.tsx
@@ -144,7 +144,7 @@ export const OPERATING_SYSTEMS: Array<DownloadDropdownItem<UserOS>> = [
   {
     label: OperatingSystemLabel.AIX,
     value: 'AIX',
-    compatibility: { installMethod: [''] },
+    compatibility: { installMethod: [''], semver: ['>= 6.7.0'] },
     iconImage: <OSIcons.AIX width={16} height={16} />,
   },
 ];

diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json
@@ -136,22 +136,6 @@
         }
       }
     },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Node.js Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
     "downloadReleasesTable": {
       "changelog": "Changelog",
       "releases": "Releases",
@@ -162,6 +146,11 @@
       "previous": "Previous"
     },
     "common": {
+      "alertBox": {
+        "info": "Info",
+        "warning": "Warning",
+        "danger": "Danger"
+      },
       "breadcrumbs": {
         "navigateToHome": "Navigate to Home"
       },
@@ -202,32 +191,9 @@
       "viewAs": "View as",
       "tableOfContents": "Table of Contents"
     },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    },
     "search": {
       "searchBox": {
         "placeholder": "Start typing..."
-      },
-      "seeAll": {
-        "text": "See all {count} results"
-      },
-      "searchError": {
-        "text": "An error occurred while searching. Please try again later."
-      },
-      "poweredBy": {
-        "text": "Powered by"
-      },
-      "noResults": {
-        "text": "No results found for \"{query}\"."
-      },
-      "emptyState": {
-        "text": "Search something..."
-      },
-      "searchPage": {
-        "title": "You're searching: {query}"
       }
     },
     "blog": {
@@ -278,7 +244,6 @@
       "backToHome": "Back to Home"
     },
     "download": {
-      "selectCategory": "Categories",
       "buttons": {
         "installer": "{os} Installer (.{extension})",
         "binary": "Standalone Binary (.{extension})"
@@ -299,6 +264,7 @@
         "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version. <link>Understand EOL support.</link>",
         "communityPlatformInfo": "Installation methods that involve community software are supported by the teams maintaining that software.",
         "externalSupportInfo": "If you encounter any issues please visit <link>{platform}'s website</link>",
+        "noScriptDetected": "This page requires JavaScript. You can download Node.js without JavaScript by visiting the <link>releases page</link> directly.",
         "platformInfo": {
           "default": "{platform} and their installation scripts are not maintained by the Node.js project.",
           "nvm": "\"nvm\" is a cross-platform Node.js version manager.",