chore: some code reviews and bug fixes

apps/site/components/Common/AlertBox/index.module.css

@@ -10,9 +10,10 @@
     text-white;
 
   a {
-    @apply font-ibm-plex-mono
+    @apply font-bold
       text-white
-      underline;
+      underline
+      hover:text-white;
 
     &:hover {
       @apply no-underline;

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

@@ -1,25 +1,49 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { useContext } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
 
 import Select from '@/components/Common/Select';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { PackageManager } from '@/types/release';
-import { PACKAGE_MANAGERS } from '@/util/downloadUtils';
+import { nextItem, PACKAGE_MANAGERS, parseCompat } from '@/util/downloadUtils';
 
 const PackageManagerDropdown: FC = () => {
   const release = useContext(ReleaseContext);
   const t = useTranslations();
 
+  // Prevents the Package Manager from being set during OS loading state
+  const setManager = (manager: PackageManager | '') => {
+    if (release.os !== 'LOADING') {
+      release.setPackageManager(manager);
+    }
+  };
+
+  // We parse the compatibility of the dropdown items
+  const parsedPackageManagers = useMemo(
+    () => parseCompat(PACKAGE_MANAGERS, release),
+    // We only want to react on the change of the Version
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [release.version]
+  );
+
+  // We set the Package Manager to the next available Package Manager when the current
+  // one is not valid anymore due to Version changes
+  useEffect(
+    () => setManager(nextItem(release.packageManager, parsedPackageManagers)),
+    // We only want to react on the change of the Version
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [release.version]
+  );
+
   return (
     <Select<PackageManager | ''>
-      values={PACKAGE_MANAGERS}
+      values={parsedPackageManagers}
       defaultValue={release.packageManager}
       loading={release.os === 'LOADING' || release.platform === ''}
       ariaLabel={t('layouts.download.dropdown.packageManager')}
-      onChange={manager => release.setPackageManager(manager)}
+      onChange={manager => manager && setManager(manager)}
       className="min-w-28"
       inline={true}
     />

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

@@ -78,7 +78,7 @@ const PlatformDropdown: FC = () => {
       defaultValue={release.platform}
       loading={release.os === 'LOADING' || release.platform === ''}
       ariaLabel={t('layouts.download.dropdown.platform')}
-      onChange={platform => setPlaform(platform)}
+      onChange={platform => platform && setPlaform(platform)}
       className="min-w-28"
       inline={true}
     />

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

@@ -7,6 +7,7 @@ import { useContext, useMemo } from 'react';
 import AlertBox from '@/components/Common/AlertBox';
 import Skeleton from '@/components/Common/Skeleton';
 import JSXCodeBox from '@/components/JSX/CodeBox';
+import Link from '@/components/Link';
 import { createSval } from '@/next.jsx.compiler.mjs';
 import { ReleaseContext, ReleasesContext } from '@/providers/releaseProvider';
 import type { ReleaseContextType } from '@/types/release';
@@ -81,7 +82,9 @@ const ReleaseCodeBox: FC = () => {
     <div className="mb-6 mt-4 flex flex-col gap-2">
       {release.status === 'End-of-life' && (
         <AlertBox title="Warning" level="warning" size="small">
-          {t('layouts.download.codeBox.unsupportedVersionWarning')}
+          {t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
+            link: text => <Link href="/about/previous-releases/">{text}</Link>,
+          })}
         </AlertBox>
       )}
 

apps/site/components/JSX/CodeBox/index.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import dedent from 'dedent';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import type { FC, PropsWithChildren } from 'react';
 
@@ -19,7 +18,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   showCopyButton,
   className,
 }) => {
-  const highlighted = highlightToHast(dedent(String(children)), language);
+  const highlighted = highlightToHast(String(children), language);
 
   return toJsxRuntime(highlighted, {
     ...reactRuntime,

apps/site/package.json

@@ -52,8 +52,8 @@
     "github-slugger": "~2.0.0",
     "glob": "~11.0.0",
     "gray-matter": "~4.0.3",
-    "next": "15.1.2",
-    "next-intl": "~3.25.3",
+    "next": "15.1.3",
+    "next-intl": "~3.26.3",
     "next-themes": "~0.4.3",
     "postcss": "~8.4.49",
     "postcss-calc": "~10.0.2",
@@ -77,7 +77,7 @@
   },
   "devDependencies": {
     "@eslint/compat": "~1.2.3",
-    "@next/eslint-plugin-next": "15.1.2",
+    "@next/eslint-plugin-next": "15.1.3",
     "@storybook/addon-controls": "^8.4.6",
     "@storybook/addon-interactions": "^8.4.6",
     "@storybook/addon-styling-webpack": "^1.0.1",
@@ -92,7 +92,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/semver": "~7.5.8",
-    "eslint-config-next": "15.1.2",
+    "eslint-config-next": "15.1.3",
     "eslint-import-resolver-typescript": "~3.6.3",
     "eslint-plugin-mdx": "~3.1.5",
     "eslint-plugin-react": "~7.37.2",

apps/site/snippets/en/download/brew.bash

@@ -1,5 +1,5 @@
 # Download and install Homebrew
-curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
+curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
 
 # Download and install Node.js:
 brew install node@${props.release.major}

apps/site/snippets/en/download/fnm.bash

@@ -1,7 +1,7 @@
 # Download and install fnm:
 ${props.os === 'WIN' ?
   'winget install Schniz.fnm' :
-  'curl -fsSL https://fnm.vercel.app/install | bash'
+  'curl -o- https://fnm.vercel.app/install | bash'
 }
 
 # Download and install Node.js:

apps/site/snippets/en/download/nvm.bash

@@ -1,5 +1,5 @@
 # Download and install nvm:
-curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/HEAD/install.sh | bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
 
 # Download and install Node.js:
 nvm install ${props.release.major}

apps/site/util/downloadUtils.tsx

@@ -212,13 +212,13 @@ export const PACKAGE_MANAGERS: Array<
   {
     label: PackageManagerLabel.YARN,
     value: 'YARN',
-    compatibility: {},
+    compatibility: { semver: ['>= v14.19.0', '>= v16.9.0'] },
     iconImage: <PackageManagerIcons.YARN width={16} height={16} />,
   },
   {
     label: PackageManagerLabel.PNPM,
     value: 'PNPM',
-    compatibility: {},
+    compatibility: { semver: ['>= v14.19.0', '>= v16.9.0'] },
     iconImage: <PackageManagerIcons.PNPM width={16} height={16} />,
   },
 ];