feat: introduced new downloads page (#7357)

Co-authored-by: Geoffrey Booth <webadmin@geoffreybooth.com>
Co-authored-by: Jordan Harband <ljharb@gmail.com>

Author: 3 people

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

@@ -3,8 +3,13 @@ import {
   providePaginatedBlogPosts,
 } from '@/next-data/providers/blogData';
 import { defaultLocale } from '@/next.locales.mjs';
+import type { BlogCategory } from '@/types';
 
-type DynamicStaticPaths = { locale: string; category: string; page: string };
+type DynamicStaticPaths = {
+  locale: string;
+  category: BlogCategory;
+  page: string;
+};
 type StaticParams = { params: Promise<DynamicStaticPaths> };
 
 // This is the Route Handler for the `GET` method which handles the request

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/Common/BlogPostCard/index.tsx

@@ -5,13 +5,14 @@ import FormattedTime from '@/components/Common/FormattedTime';
 import Preview from '@/components/Common/Preview';
 import Link from '@/components/Link';
 import WithAvatarGroup from '@/components/withAvatarGroup';
+import type { BlogCategory } from '@/types';
 import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
 import styles from './index.module.css';
 
 type BlogPostCardProps = {
   title: string;
-  category: string;
+  category: BlogCategory;
   description?: string;
   authors?: Array<string>;
   date?: Date;

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

@@ -3,6 +3,7 @@
     relative
     inline-flex
     items-center
+    justify-center
     gap-2
     py-2.5
     text-center

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

@@ -108,8 +108,14 @@
   }
 }
 
-.dropdown:has(.label) .text > span > span {
-  @apply pl-3;
+.dropdown:has(.label) .text > span {
+  &:has(svg) > svg {
+    @apply ml-3;
+  }
+
+  &:not(&:has(svg)) > span {
+    @apply ml-3;
+  }
 }
 
 .inline {

apps/site/components/Common/Select/index.stories.tsx

@@ -1,10 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Select from '@/components/Common/Select';
-import AIX from '@/components/Icons/Platform/AIX';
-import Apple from '@/components/Icons/Platform/Apple';
-import Linux from '@/components/Icons/Platform/Linux';
-import Microsoft from '@/components/Icons/Platform/Microsoft';
+import OSIcons from '@/components/Icons/OperatingSystem';
 
 type Story = StoryObj<typeof Select>;
 type Meta = MetaObj<typeof Select>;
@@ -79,22 +76,22 @@ export const InlineSelect: Story = {
           {
             value: 'linux',
             label: 'Linux',
-            iconImage: <Linux width={16} height={16} />,
+            iconImage: <OSIcons.Linux width={16} height={16} />,
           },
           {
             value: 'macos',
             label: 'macOS',
-            iconImage: <Apple width={16} height={16} />,
+            iconImage: <OSIcons.Apple width={16} height={16} />,
           },
           {
             value: 'windows',
             label: 'Windows',
-            iconImage: <Microsoft width={16} height={16} />,
+            iconImage: <OSIcons.Microsoft width={16} height={16} />,
           },
           {
             value: 'aix',
             label: 'AIX',
-            iconImage: <AIX width={16} height={16} />,
+            iconImage: <OSIcons.AIX width={16} height={16} />,
           },
         ],
       },

apps/site/components/Common/Select/index.tsx

@@ -5,44 +5,47 @@ import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
-import type { FC } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import Skeleton from '@/components/Common/Skeleton';
 import type { FormattedMessage } from '@/types';
 
 import styles from './index.module.css';
 
-type SelectValue = {
-  label: FormattedMessage;
-  value: string;
-  iconImage?: React.ReactNode;
+export type SelectValue<T extends string> = {
+  label: FormattedMessage | string;
+  value: T;
+  iconImage?: ReactElement<SVGSVGElement>;
   disabled?: boolean;
 };
 
-type SelectGroup = {
-  label?: FormattedMessage;
-  items: Array<SelectValue>;
+export type SelectGroup<T extends string> = {
+  label?: FormattedMessage | string;
+  items: Array<SelectValue<T>>;
 };
 
 const isStringArray = (values: Array<unknown>): values is Array<string> =>
   Boolean(values[0] && typeof values[0] === 'string');
 
-const isValuesArray = (values: Array<unknown>): values is Array<SelectValue> =>
+const isValuesArray = <T extends string>(
+  values: Array<unknown>
+): values is Array<SelectValue<T>> =>
   Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
 
-type SelectProps = {
-  values: Array<SelectGroup | string | SelectValue>;
-  defaultValue?: string;
+type SelectProps<T extends string> = {
+  values: Array<SelectGroup<T>> | Array<T> | Array<SelectValue<T>>;
+  defaultValue?: T;
   placeholder?: string;
   label?: string;
   inline?: boolean;
-  onChange?: (value: string) => void;
+  onChange?: (value: T) => void;
   className?: string;
   ariaLabel?: string;
   loading?: boolean;
+  disabled?: boolean;
 };
 
-const Select: FC<SelectProps> = ({
+const Select = <T extends string>({
   values = [],
   defaultValue,
   placeholder,
@@ -52,7 +55,8 @@ const Select: FC<SelectProps> = ({
   className,
   ariaLabel,
   loading = false,
-}) => {
+  disabled = false,
+}: SelectProps<T>): ReactNode => {
   const id = useId();
   const [value, setValue] = useState(defaultValue);
 
@@ -69,7 +73,7 @@ const Select: FC<SelectProps> = ({
       return [{ items: mappedValues }];
     }
 
-    return mappedValues as Array<SelectGroup>;
+    return mappedValues as Array<SelectGroup<T>>;
   }, [values]);
 
   // We render the actual item slotted to fix/prevent the issue
@@ -82,8 +86,39 @@ const Select: FC<SelectProps> = ({
     [mappedValues, value]
   );
 
+  const memoizedMappedValues = useMemo(() => {
+    return mappedValues.map(({ label, items }, key) => (
+      <SelectPrimitive.Group key={label?.toString() ?? key}>
+        {label && (
+          <SelectPrimitive.Label
+            className={classNames(styles.item, styles.label)}
+          >
+            {label}
+          </SelectPrimitive.Label>
+        )}
+
+        {items.map(({ value, label, iconImage, disabled }) => (
+          <SelectPrimitive.Item
+            key={value}
+            value={value}
+            disabled={disabled}
+            className={classNames(styles.item, styles.text)}
+          >
+            <SelectPrimitive.ItemText>
+              {iconImage}
+              <span>{label}</span>
+            </SelectPrimitive.ItemText>
+          </SelectPrimitive.Item>
+        ))}
+      </SelectPrimitive.Group>
+    ));
+    // We explicitly want to recalculate these values only when the values themselves changed
+    // This is to prevent re-rendering and re-calcukating the values on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(values)]);
+
   // Both change the internal state and emit the change event
-  const handleChange = (value: string) => {
+  const handleChange = (value: T) => {
     setValue(value);
 
     if (typeof onChange === 'function') {
@@ -106,15 +141,23 @@ const Select: FC<SelectProps> = ({
           </label>
         )}
 
-        <SelectPrimitive.Root value={value} onValueChange={handleChange}>
+        <SelectPrimitive.Root
+          value={currentItem !== undefined ? value : undefined}
+          onValueChange={handleChange}
+          disabled={disabled}
+        >
           <SelectPrimitive.Trigger
             className={styles.trigger}
             aria-label={ariaLabel}
             id={id}
           >
             <SelectPrimitive.Value placeholder={placeholder}>
-              {currentItem?.iconImage}
-              <span>{currentItem?.label}</span>
+              {currentItem !== undefined && (
+                <>
+                  {currentItem.iconImage}
+                  <span>{currentItem.label}</span>
+                </>
+              )}
             </SelectPrimitive.Value>
             <ChevronDownIcon className={styles.icon} />
           </SelectPrimitive.Trigger>
@@ -129,31 +172,7 @@ const Select: FC<SelectProps> = ({
               <ScrollPrimitive.Root type="auto">
                 <SelectPrimitive.Viewport>
                   <ScrollPrimitive.Viewport>
-                    {mappedValues.map(({ label, items }, key) => (
-                      <SelectPrimitive.Group key={label?.toString() ?? key}>
-                        {label && (
-                          <SelectPrimitive.Label
-                            className={classNames(styles.item, styles.label)}
-                          >
-                            {label}
-                          </SelectPrimitive.Label>
-                        )}
-
-                        {items.map(({ value, label, iconImage, disabled }) => (
-                          <SelectPrimitive.Item
-                            key={value}
-                            value={value}
-                            disabled={disabled}
-                            className={classNames(styles.item, styles.text)}
-                          >
-                            <SelectPrimitive.ItemText>
-                              {iconImage}
-                              <span>{label}</span>
-                            </SelectPrimitive.ItemText>
-                          </SelectPrimitive.Item>
-                        ))}
-                      </SelectPrimitive.Group>
-                    ))}
+                    {memoizedMappedValues}
                   </ScrollPrimitive.Viewport>
                 </SelectPrimitive.Viewport>
                 <ScrollPrimitive.Scrollbar orientation="vertical">

apps/site/components/Common/Skeleton/index.tsx

@@ -3,12 +3,21 @@ import { isValidElement } from 'react';
 
 import styles from './index.module.css';
 
-type SkeletonProps = { loading?: boolean };
+type SkeletonProps = { hide?: boolean; loading?: boolean };
 
 const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
   children,
+  hide = false,
   loading = true,
 }) => {
+  // This can be used to completely hide the children after the Skeleton has loaded
+  // If certain criterias do not match. This is useful for conditional rendering without
+  // changing the actual tree that the Skeleton is wrapping
+  if (!loading && hide) {
+    return null;
+  }
+
+  // If we finished loading, we can hide the Skeleton and render the children tree
   if (!loading) {
     return children;
   }

apps/site/components/Containers/MetaBar/index.tsx

@@ -8,7 +8,7 @@ import Link from '@/components/Link';
 import styles from './index.module.css';
 
 type MetaBarProps = {
-  items: Record<string, React.ReactNode>;
+  items: Partial<Record<IntlMessageKeys, React.ReactNode>>;
   headings?: {
     items: Array<Heading>;
     minDepth?: number;
@@ -33,7 +33,7 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
           .filter(([, value]) => !!value)
           .map(([key, value]) => (
             <Fragment key={key}>
-              <dt>{t(key)}</dt>
+              <dt>{t(key as IntlMessageKeys)}</dt>
               <dd>{value}</dd>
             </Fragment>
           ))}

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -8,7 +8,7 @@ import Button from '@/components/Common/Button';
 import { useClientContext } from '@/hooks';
 import type { NodeRelease } from '@/types';
 import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
-import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
+import { getUserPlatform } from '@/util/getUserPlatform';
 
 import styles from './index.module.css';
 
@@ -18,14 +18,10 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
   release: { versionWithPrefix },
   children,
 }) => {
-  const {
-    os,
-    bitness: userBitness,
-    architecture: userArchitecture,
-  } = useClientContext();
-
-  const bitness = getUserBitnessByArchitecture(userArchitecture, userBitness);
-  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
+  const { os, bitness, architecture } = useClientContext();
+
+  const platform = getUserPlatform(architecture, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, platform);
 
   return (
     <>

apps/site/components/Downloads/DownloadLink.tsx

@@ -5,15 +5,18 @@ import type { FC, PropsWithChildren } from 'react';
 import { useClientContext } from '@/hooks';
 import type { NodeRelease } from '@/types';
 import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
+import { getUserPlatform } from '@/util/getUserPlatform';
 
 type DownloadLinkProps = { release: NodeRelease };
 
 const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   release: { versionWithPrefix },
   children,
 }) => {
-  const { os, bitness } = useClientContext();
-  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
+  const { os, bitness, architecture } = useClientContext();
+
+  const platform = getUserPlatform(architecture, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, platform);
 
   return <a href={downloadLink}>{children}</a>;
 };