Merge branch 'main' into WSL-Guidance-on-Download-Page

Signed-off-by: Vishal <93390689+Vishal-K-988@users.noreply.github.com>

Author: vishalkumargeed

apps/site/components/MDX/Image/index.tsx

@@ -2,11 +2,7 @@ import type { ImageProps } from 'next/image';
 import Image from 'next/image';
 import type { FC } from 'react';
 
-import { isSvgImage } from '#site/util/imageUtils';
-
 const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
-  const isUnoptimizedImage = isSvgImage(src.toString());
-
   if (!width || !height) {
     // Since `width` and `height` are not provided in the Markdown image format,
     // we provide the height and width automatically.
@@ -15,7 +11,6 @@ const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
       <Image
         {...props}
         src={src}
-        unoptimized={isUnoptimizedImage}
         alt={alt}
         width={0}
         height={0}
@@ -25,16 +20,7 @@ const MDXImage: FC<ImageProps> = ({ width, height, alt, src, ...props }) => {
     );
   }
 
-  return (
-    <Image
-      {...props}
-      alt={alt}
-      width={width}
-      height={height}
-      src={src}
-      unoptimized={isUnoptimizedImage}
-    />
-  );
+  return <Image {...props} alt={alt} width={width} height={height} src={src} />;
 };
 
 export default MDXImage;

apps/site/components/withAvatarGroup.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
-import Image from 'next/image';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '#site/components/Link';
@@ -27,7 +26,6 @@ const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
       clickable: clickable,
     })}
     as={Link}
-    img={Image}
     {...props}
   />
 );

apps/site/next.config.mjs

@@ -88,6 +88,7 @@ const nextConfig = {
       '@radix-ui/react-tabs',
       '@radix-ui/react-toast',
       '@radix-ui/react-tooltip',
+      '@radix-ui/react-avatar',
       '@orama/highlight',
       '@orama/react-components',
       '@heroicons/react',

apps/site/types/userOS.ts

@@ -1,3 +1,4 @@
+
 import type { OperatingSystemLabel } from '../util/downloadUtils/constants.json';
 import type downloadConstants from '../util/downloadUtils/constants.json';
 
@@ -13,3 +14,4 @@ export type UserBitness = (typeof downloadConstants.UserBitness)[number];
 // Derive the union type of UserArchitecture from the JSON array values.
 export type UserArchitecture =
   (typeof downloadConstants.UserArchitecture)[number];
+

apps/site/util/__tests__/imageUtils.test.mjs

@@ -1,4 +1,5 @@
 {
+
   "OperatingSystemLabel": {
     "WIN": "Windows",
     "MAC": "macOS",
@@ -54,15 +55,18 @@
       "label": "NVM",
       "value": "NVM",
       "compatibility": { "os": ["MAC", "LINUX", "OTHER"] },
+
       "recommended": true,
       "url": "https://github.com/nvm-sh/nvm",
       "info": "layouts.download.codeBox.platformInfo.nvm"
     },
     {
+
       "key": "FNM",
       "label": "FNM",
       "value": "FNM",
       "compatibility": { "os": ["MAC", "LINUX", "WIN"] },
+
       "recommended": true,
       "url": "https://github.com/Schniz/fnm",
       "info": "layouts.download.codeBox.platformInfo.fnm"
@@ -71,6 +75,7 @@
       "key": "BREW",
       "label": "BREW",
       "value": "BREW",
+
       "compatibility": {
         "os": ["MAC", "LINUX"],
         "releases": ["Current", "LTS"]
@@ -83,14 +88,17 @@
       "label": "DEVBOX",
       "value": "DEVBOX",
       "compatibility": { "os": ["MAC", "LINUX"] },
+
       "url": "https://jetify.com/devbox/",
       "info": "layouts.download.codeBox.platformInfo.devbox"
     },
     {
+
       "key": "CHOCO",
       "label": "CHOCO",
       "value": "CHOCO",
       "compatibility": { "os": ["WIN"] },
+
       "url": "https://chocolatey.org/",
       "info": "layouts.download.codeBox.platformInfo.choco"
     },
@@ -99,27 +107,33 @@
       "label": "DOCKER",
       "value": "DOCKER",
       "compatibility": { "os": ["WIN", "MAC", "LINUX"] },
+
       "recommended": true,
       "url": "https://docs.docker.com/get-started/get-docker/",
       "info": "layouts.download.codeBox.platformInfo.docker"
     },
     {
+
       "key": "N",
       "label": "N",
       "value": "N",
       "compatibility": { "os": ["MAC", "LINUX"] },
+
       "url": "https://github.com/tj/n",
       "info": "layouts.download.codeBox.platformInfo.n"
     },
     {
+
       "key": "VOLTA",
       "label": "VOLTA",
       "value": "VOLTA",
       "compatibility": { "os": ["WIN", "MAC", "LINUX"] },
+
       "url": "https://docs.volta.sh/guide/getting-started",
       "info": "layouts.download.codeBox.platformInfo.volta"
     }
   ],
+
   "Platforms": {
     "WIN": [
       {
@@ -224,4 +238,5 @@
   ],
   "UserBitness": ["64", "32"],
   "UserArchitecture": ["arm", "x86"]
+
 }

apps/site/util/downloadUtils/constants.json

@@ -2,6 +2,8 @@ import type { SelectValue } from '@node-core/ui-components/Common/Select';
 import * as InstallMethodIcons from '@node-core/ui-components/Icons/InstallationMethod';
 import * as OSIcons from '@node-core/ui-components/Icons/OperatingSystem';
 import * as PackageManagerIcons from '@node-core/ui-components/Icons/PackageManager';
+
+
 import satisfies from 'semver/functions/satisfies';
 
 import type { NodeReleaseStatus } from '#site/types';
@@ -56,6 +58,7 @@ type DownloadDropdownItem<T extends string> = {
 // when the current item is disabeld/excluded/not valid
 // And this is useful when a parent release value (i.e. OS) is changed
 // and requires the current dropdown (i.e. Platform) to be updated
+
 export const nextItem = <T extends string>(
   current: T,
   items: Array<DownloadDropdownItem<T>>
@@ -77,6 +80,7 @@ export const nextItem = <T extends string>(
 
 // This function is used to parse the compatibility of the dropdown items
 // In a nice and static way that allows a lot of abstraction and flexibility
+
 export const parseCompat = <
   K extends string,
   T extends DownloadDropdownItem<K>,
@@ -193,3 +197,4 @@ export const PLATFORMS: Record<
   UserOS | 'LOADING',
   Array<DownloadDropdownItem<UserPlatform>>
 > = Platforms;
+

apps/site/util/downloadUtils/index.tsx

@@ -1,5 +1,6 @@
+import * as RadixAvatar from '@radix-ui/react-avatar';
 import classNames from 'classnames';
-import type { HTMLAttributes, ElementType } from 'react';
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
 import type { LinkLike } from '#ui/types';
@@ -14,12 +15,8 @@ export type AvatarProps = {
   size?: 'small' | 'medium';
   url?: string;
   as?: LinkLike | 'div';
-  img?: ElementType | 'img';
 };
 
-// @TODO: We temporarily removed the Avatar Radix UI primitive, since it was causing flashing
-// during initial load and not being able to render nicely when images are already cached.
-// @see https://github.com/radix-ui/primitives/pull/3008
 const Avatar = forwardRef<
   HTMLSpanElement,
   HTMLAttributes<HTMLSpanElement> & AvatarProps
@@ -33,14 +30,13 @@ const Avatar = forwardRef<
       url,
       size = 'small',
       as: Component = 'a',
-      img: Image = 'img',
       ...props
     },
     ref
   ) => {
     if (!url) Component = 'div';
     return (
-      <span
+      <RadixAvatar.Root
         {...props}
         ref={ref}
         className={classNames(styles.avatar, styles[size], props.className)}
@@ -50,25 +46,20 @@ const Avatar = forwardRef<
           target={url ? '_blank' : undefined}
           className={styles.wrapper}
         >
-          {image && (
-            <Image
-              width={40}
-              height={40}
-              loading="lazy"
-              decoding="async"
-              src={image}
-              alt={name || nickname}
-              className={styles.item}
-            />
-          )}
-
-          {!image && (
-            <span className={classNames(styles.item, styles[size])}>
-              {fallback}
-            </span>
-          )}
+          <RadixAvatar.Image
+            loading="lazy"
+            decoding="async"
+            src={image}
+            alt={name || nickname}
+            className={styles.item}
+          />
+          <RadixAvatar.Fallback
+            className={classNames(styles.item, styles[size])}
+          >
+            {fallback}
+          </RadixAvatar.Fallback>
         </Component>
-      </span>
+      </RadixAvatar.Root>
     );
   }
 );

apps/site/util/imageUtils.ts

@@ -16,7 +16,6 @@ const AvatarOverlay: FC<AvatarOverlayProps> = ({
   fallback,
   url,
   as: Component = 'a',
-  img,
 }) => (
   <Component className={styles.overlay} href={url} target="_blank">
     <Avatar
@@ -25,7 +24,6 @@ const AvatarOverlay: FC<AvatarOverlayProps> = ({
       nickname={nickname}
       fallback={fallback}
       size="medium"
-      img={img}
     />
 
     <div className={styles.user}>