feat: Download layout (#6353)

* feat: Download layout

* refactor: utils methods moved into the file

* refactor/docs: deprecated url path

* refactor/docs: download utils

* refactor: markdown formatting

* fix: download URL paths

* feat: exclude option for os dropdown

* refactor: separated type import

* refactor: styling updates

* refactor: type definitions moved into the own file

* test: unit tests for download utils

* fix: icons added into the download/source buttons

* fix: LinkWithArrow import path

* docs/refactor: source button

* refactor: review updates

* chore: code-review and code improvements

* feat: finished download page

* chore: minor fixes

* chore: code-review and bug fixes

* chore: prevent page reload on tab change

* chore: improve activelink matching

* feat: proper download versions and prebuilt binaries

* feat: added more support text for each respective version

* chore: minor bitness fixes for macOS

* refactor: cleanup of certain logic and added docker package manager

* chore: fix shiki interop client-server

* chore: fix unit test

* chore: minor text correction

* chore: nvm uses v prefix

* chore: rename label to ARM64 to keep it easier to understand

* refactor: reduce layout shift and improve select accessibility

* chore: reduce layout shift, simplify codebox and cleanup text

* Apply suggestions from code review

Signed-off-by: Brian Muenzenmeyer <[email protected]>

* added Docker platform logo, grouped by usage and alphabetized

* chore: minor changes and fixes

* chore: reduce build times by making build of these routes on-demand

* fix: keep same bitness if compatible on OS change, verify OS supports bitness

---------

Signed-off-by: Brian Muenzenmeyer <[email protected]>
Co-authored-by: Claudio Wunder <[email protected]>
Co-authored-by: Brian Muenzenmeyer <[email protected]>

.husky/pre-commit

@@ -3,3 +3,6 @@
 
 # lint and format staged files
 npx lint-staged
+
+# verify typescript staged files
+npx tsc --build .

app/[locale]/next-data/api-data/route.ts

@@ -55,7 +55,7 @@ export const dynamicParams = false;
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/blog-data/[category]/[page]/route.ts

@@ -59,7 +59,7 @@ export const dynamicParams = false;
 
 // Enforces that this route is cached and static as much as possible
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/page-data/route.ts

@@ -64,7 +64,7 @@ export const dynamicParams = false;
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/release-data/route.ts

@@ -24,7 +24,7 @@ export const dynamicParams = false;
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

components/Common/ActiveLink/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '@/components/Link';
-import { useClientContext } from '@/hooks';
+import { usePathname } from '@/navigation.mjs';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
   activeClassName?: string;
@@ -19,7 +19,7 @@ const ActiveLink: FC<ActiveLocalizedLinkProps> = ({
   href = '',
   ...props
 }) => {
-  const { pathname } = useClientContext();
+  const pathname = usePathname();
 
   const finalClassName = classNames(className, {
     [activeClassName]: allowSubPath

components/Common/Breadcrumbs/index.tsx

@@ -1,4 +1,5 @@
-import { useMemo, type FC } from 'react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
 
 import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
 import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';

components/Common/CodeBox/index.tsx

@@ -16,7 +16,7 @@ import styles from './index.module.css';
 
 // Transforms a code element with plain text content into a more structured
 // format for rendering with line numbers
-const transformCode = (code: ReactNode): ReactNode => {
+const transformCode = (code: ReactNode, language: string): ReactNode => {
   if (!isValidElement(code)) {
     // Early return when the `CodeBox` child is not a valid element since the
     // type is a ReactNode, and can assume any value
@@ -35,8 +35,10 @@ const transformCode = (code: ReactNode): ReactNode => {
   // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
+  const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+
   return (
-    <code style={{ fontFamily: 'monospace' }}>
+    <code style={extraStyle}>
       {lines
         .flatMap((line, lineIndex) => {
           const columns = line.split(' ');
@@ -97,7 +99,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   return (
     <div className={styles.root}>
       <pre ref={ref} className={styles.content} tabIndex={0}>
-        {transformCode(children)}
+        {transformCode(children, language)}
       </pre>
 
       {language && (

components/Common/LinkTabs/index.module.css

@@ -28,9 +28,14 @@
   }
 }
 
-.tabsSelect > div {
-  @apply my-6
-    hidden
-    w-full
-    xs:flex;
+.tabsSelect {
+  @apply sm:visible
+    md:hidden;
+
+  > span {
+    @apply my-6
+      hidden
+      w-full
+      xs:flex;
+  }
 }

components/Common/ProgressionSidebar/index.module.css

@@ -20,7 +20,7 @@
       xs:hidden;
   }
 
-  > div {
+  > span {
     @apply hidden
       w-full
       xs:flex;

components/Common/ProgressionSidebar/index.tsx

@@ -27,19 +27,19 @@ const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
 
   return (
     <nav className={styles.wrapper}>
+      <WithRouterSelect
+        label={t('components.common.sidebar.title')}
+        values={selectItems}
+        defaultValue={currentItem?.value}
+      />
+
       {groups.map(({ groupName, items }) => (
         <ProgressionSidebarGroup
           key={groupName.toString()}
           groupName={groupName}
           items={items}
         />
       ))}
-
-      <WithRouterSelect
-        label={t('components.common.sidebar.title')}
-        values={selectItems}
-        defaultValue={currentItem?.value}
-      />
     </nav>
   );
 };

components/Common/Select/index.module.css

@@ -1,6 +1,5 @@
 .select {
-  @apply flex
-    w-fit
+  @apply inline-flex
     flex-col
     gap-1.5;
 
@@ -47,6 +46,7 @@
 
   .trigger span {
     @apply flex
+      h-5
       items-center
       gap-2;
   }
@@ -115,9 +115,11 @@
   .text {
     @apply text-neutral-900
       data-[highlighted]:bg-neutral-100
+      data-[disabled]:text-neutral-600
       data-[highlighted]:text-neutral-900
       dark:text-white
-      dark:data-[highlighted]:bg-neutral-900;
+      dark:data-[highlighted]:bg-neutral-900
+      dark:data-[disabled]:text-neutral-700;
   }
 
   &.dropdown {

components/Common/Select/index.tsx

@@ -14,6 +14,7 @@ type SelectValue = {
   label: FormattedMessage;
   value: string;
   iconImage?: React.ReactNode;
+  disabled?: boolean;
 };
 
 type SelectGroup = {
@@ -34,6 +35,7 @@ type SelectProps = {
   label?: string;
   inline?: boolean;
   onChange?: (value: string) => void;
+  className?: string;
 };
 
 const Select: FC<SelectProps> = ({
@@ -43,6 +45,7 @@ const Select: FC<SelectProps> = ({
   label,
   inline,
   onChange,
+  className,
 }) => {
   const id = useId();
 
@@ -61,12 +64,19 @@ const Select: FC<SelectProps> = ({
   }, [values]);
 
   return (
-    <div className={classNames(styles.select, { [styles.inline]: inline })}>
-      {label && (
+    <span
+      className={classNames(
+        styles.select,
+        { [styles.inline]: inline },
+        className
+      )}
+    >
+      {label && !inline && (
         <label className={styles.label} htmlFor={id}>
           {label}
         </label>
       )}
+
       <Primitive.Root value={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
@@ -92,10 +102,11 @@ const Select: FC<SelectProps> = ({
                     </Primitive.Label>
                   )}
 
-                  {items.map(({ value, label, iconImage }) => (
+                  {items.map(({ value, label, iconImage, disabled }) => (
                     <Primitive.Item
                       key={value}
                       value={value}
+                      disabled={disabled}
                       className={classNames(styles.item, styles.text)}
                     >
                       <Primitive.ItemText>
@@ -110,7 +121,7 @@ const Select: FC<SelectProps> = ({
           </Primitive.Content>
         </Primitive.Portal>
       </Primitive.Root>
-    </div>
+    </span>
   );
 };
 

components/Containers/NavBar/NavItem/index.tsx

@@ -27,6 +27,7 @@ const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
     allowSubPath={href.startsWith('/')}
   >
     <span className={styles.label}>{children}</span>
+
     {type === 'nav' && href.startsWith('http') && (
       <ArrowUpRightIcon className={styles.icon} />
     )}

components/Containers/Sidebar/index.module.css

@@ -22,7 +22,7 @@
       xs:hidden;
   }
 
-  > div {
+  > span {
     @apply hidden
       w-full
       xs:flex;

components/Downloads/DownloadButton/index.tsx

@@ -7,7 +7,7 @@ import type { FC, PropsWithChildren } from 'react';
 import Button from '@/components/Common/Button';
 import { useDetectOS } from '@/hooks';
 import type { NodeRelease } from '@/types';
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 import styles from './index.module.css';
 
@@ -18,7 +18,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
   children,
 }) => {
   const { os, bitness } = useDetectOS();
-  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 
   return (
     <>

components/Downloads/DownloadLink.tsx

@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 
 import { useDetectOS } from '@/hooks';
 import type { NodeRelease } from '@/types';
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 type DownloadLinkProps = { release: NodeRelease };
 
@@ -13,7 +13,7 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   children,
 }) => {
   const { os, bitness } = useDetectOS();
-  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 
   return <a href={downloadLink}>{children}</a>;
 };

components/Downloads/Release/BitnessDropdown.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { useEffect, useContext, useMemo } from 'react';
+import semVer from 'semver';
+
+import Select from '@/components/Common/Select';
+import { useDetectOS } from '@/hooks/react-client';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import { bitnessItems, formatDropdownItems } from '@/util/downloadUtils';
+
+const parseNumericBitness = (bitness: string) =>
+  /^\d+$/.test(bitness) ? Number(bitness) : bitness;
+
+const BitnessDropdown: FC = () => {
+  const { bitness: userBitness } = useDetectOS();
+  const { bitness, os, release, setBitness } = useContext(ReleaseContext);
+  const t = useTranslations();
+
+  // we also reset the bitness when the OS changes, because different OSs have
+  // different bitnesses available
+  useEffect(() => setBitness(userBitness), [setBitness, userBitness]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  const disabledItems = useMemo(() => {
+    const disabledItems = [];
+
+    if (os === 'WIN' && semVer.satisfies(release.version, '< 19.9.0')) {
+      disabledItems.push('arm64');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.0.0')) {
+      disabledItems.push('arm64', 'armv7l');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.4.0')) {
+      disabledItems.push('ppc64le');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 6.6.0')) {
+      disabledItems.push('s390x');
+    }
+
+    return disabledItems;
+  }, [os, release.version]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  useEffect(() => {
+    const mappedBittnessesValues = bitnessItems[os].map(({ value }) => value);
+
+    const currentBittnessExcluded =
+      // Different OSs support different Bitnessess, hence we should also check
+      // if besides the current bitness not being supported for a given release version
+      // we also should check if it is not supported by the OS
+      disabledItems.includes(String(bitness)) ||
+      !mappedBittnessesValues.includes(String(bitness));
+
+    const nonExcludedBitness = mappedBittnessesValues.find(
+      bittness => !disabledItems.includes(bittness)
+    );
+
+    if (currentBittnessExcluded && nonExcludedBitness) {
+      setBitness(nonExcludedBitness);
+    }
+    // we shouldn't react when "actions" change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [os, disabledItems]);
+
+  return (
+    <Select
+      label={t('layouts.download.dropdown.bitness')}
+      values={formatDropdownItems({
+        items: bitnessItems[os],
+        disabledItems,
+      })}
+      defaultValue={String(bitness)}
+      onChange={bitness => setBitness(parseNumericBitness(bitness))}
+      className="w-28"
+      inline={true}
+    />
+  );
+};
+
+export default BitnessDropdown;