feat: Download layout

.husky/pre-commit

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

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,66 @@
+'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, os, userBitness]);
+
+  // @TOOD: 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]);
+
+  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;

components/Downloads/Release/BlogPostLink.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { FC, PropsWithChildren } from 'react';
+import { useContext } from 'react';
+
+import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const BlogPostLink: FC<PropsWithChildren> = ({ children }) => {
+  const { release } = useContext(ReleaseContext);
+  const version = release.versionWithPrefix;
+
+  return (
+    <LinkWithArrow href={`/blog/release/${version}`}>{children}</LinkWithArrow>
+  );
+};
+
+export default BlogPostLink;

components/Downloads/Release/DownloadButton.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
+import { useTranslations } from 'next-intl';
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import Button from '@/components/Common/Button';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
+
+type DownloadButtonProps = { kind: 'installer' | 'binary' | 'source' };
+
+const DownloadButton: FC<DownloadButtonProps> = ({ kind = 'installer' }) => {
+  const t = useTranslations();
+  const { release, os, bitness } = useContext(ReleaseContext);
+
+  const version = release.versionWithPrefix;
+  const url = getNodeDownloadUrl(version, os, bitness, kind);
+
+  return (
+    <div className="mb-2 mt-6">
+      <Button href={url} disabled={!version}>
+        <CloudArrowDownIcon />
+
+        {t('layouts.download.buttons.prebuilt', { version })}
+      </Button>
+    </div>
+  );
+};
+
+export default DownloadButton;