replace thumbnail, lightbox, hero with xs, md, xl

Author: nemanjam

src/components/ImageRandom.astro

@@ -1,11 +1,11 @@
 ---
 import ImageRandomReact from '@/components/react/ImageRandom';
-import { getHeroImagesProps } from '@/libs/gallery/images';
+import { getImagesProps } from '@/libs/gallery/images';
 
 // forward Astro (MDX) class attr to className React
 const { class: className, ...props } = Astro.props;
 
-const galleryImages = await getHeroImagesProps();
+const galleryImages = await getImagesProps();
 ---
 
 <ImageRandomReact {...props} {className} {galleryImages} client:load />

src/components/react/ImageRandom.tsx

@@ -3,25 +3,25 @@ import { useEffect, useMemo, useState } from 'react';
 import { getRandomElementFromArray } from '@/utils/array';
 import { cn } from '@/utils/styles';
 
-import type { HeroImageProps } from '@/libs/gallery/transform';
+import type { ImageAttributes, ImageProps } from '@/libs/gallery/transform';
 import type { FC, ImgHTMLAttributes } from 'react';
 
 interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   // Important: must pass all allImagesSrc from the server or they wont be included on client
-  galleryImages: HeroImageProps[];
+  galleryImages: ImageProps[];
 }
 
-const initialImage: HeroImageProps = {
-  blur: {
-    src: '',
-    width: 0,
-    height: 0,
-  },
-  hero: {
-    src: '',
-    width: 0,
-    height: 0,
-  },
+const imageAttributes: ImageAttributes = {
+  src: '',
+  width: 0,
+  height: 0,
+};
+
+const initialImage: ImageProps = {
+  blur: { ...imageAttributes },
+  xs: { ...imageAttributes },
+  md: { ...imageAttributes },
+  xl: { ...imageAttributes },
 };
 
 const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) => {
@@ -54,10 +54,10 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) =>
         />
       )}
 
-      {image.hero.src && (
+      {image.xl.src && (
         <img
           {...props}
-          src={image.hero.src}
+          src={image.xl.src}
           onClick={handleClick}
           onLoad={() => setIsLoading(false)}
           className={cn(
@@ -69,7 +69,7 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) =>
         />
       )}
 
-      {!image.blur.src && !image.hero.src && <div className={cn('', className)}>placeholder</div>}
+      {!image.blur.src && !image.xl.src && <div className={cn('', className)}>placeholder</div>}
     </>
   );
 };

src/libs/gallery/images.ts

@@ -25,20 +25,3 @@ export const getGalleryImagesMetadata = (): ImageMetadata[] => {
 
 export const getImagesProps = async (): Promise<ImageProps[]> =>
   Promise.all(getGalleryImagesMetadata().map(imageMetadataToImageProps));
-
-export const getHeroImagesProps = (): Promise<HeroImageProps[]> =>
-  getImagesProps().then((imagesProps) =>
-    imagesProps.map((imageProps) => ({
-      blur: imageProps.blur,
-      hero: imageProps.hero,
-    }))
-  );
-
-export const getGalleryImagesProps = (): Promise<GalleryImageProps[]> =>
-  getImagesProps().then((imagesProps) =>
-    imagesProps.map((imageProps) => ({
-      blur: imageProps.blur,
-      thumbnail: imageProps.thumbnail,
-      lightbox: imageProps.lightbox,
-    }))
-  );

src/libs/gallery/transform.ts

@@ -12,16 +12,12 @@ export interface ImageAttributes {
 
 export interface ImageProps {
   blur: ImageAttributes;
-  color?: ImageAttributes;
-  thumbnail: ImageAttributes;
-  lightbox: ImageAttributes; // fullSize, 1280x720
-  hero: ImageAttributes;
+  color?: ImageAttributes; // Todo:
+  xs: ImageAttributes;
+  md: ImageAttributes;
+  xl: ImageAttributes; // fullSize, 1280x720
 }
 
-export type HeroImageProps = Pick<ImageProps, 'blur' | 'hero'>;
-
-export type GalleryImageProps = Pick<ImageProps, 'blur' | 'thumbnail' | 'lightbox'>;
-
 export const imageMetadataToImageProps = async (
   imagesMetadata: ImageMetadata
 ): Promise<ImageProps> => {
@@ -30,39 +26,36 @@ export const imageMetadataToImageProps = async (
     format: 'webp',
   };
 
-  const blurAstroImageProps = {
+  const blurImageProps = {
     ...astroImageProps,
     ...IMAGE_SIZES.FIXED.BLUR,
-    alt: 'Blur image',
   };
 
-  const thumbnailAstroImageProps = {
+  const xsImageProps = {
     ...astroImageProps,
     ...IMAGE_SIZES.FIXED.MDX_XS_16_9,
-    alt: 'Thumbnail image',
   };
 
-  const lightboxAstroImageProps = {
+  const mdImageProps = {
     ...astroImageProps,
-    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
-    alt: 'Lightbox image',
+    ...IMAGE_SIZES.FIXED.MDX_MD_16_9,
   };
 
-  const heroAstroImageProps = {
-    ...lightboxAstroImageProps,
-    alt: 'Hero image',
+  const xlImageProps = {
+    ...astroImageProps,
+    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
   };
 
-  const optimizedBlurAstroImageProps = await getImage(blurAstroImageProps);
-  const optimizedThumbnailAstroImageProps = await getImage(thumbnailAstroImageProps);
-  const optimizedLightboxAstroImageProps = await getImage(lightboxAstroImageProps);
-  const optimizedHeroAstroImageProps = await getImage(heroAstroImageProps);
+  const optimizedBlurImageProps = await getImage(blurImageProps);
+  const optimizedXsImageProps = await getImage(xsImageProps);
+  const optimizedMdImageProps = await getImage(mdImageProps);
+  const optimizedXlImageProps = await getImage(xlImageProps);
 
   const imageProps = {
-    blur: getImageAttributes(optimizedBlurAstroImageProps),
-    thumbnail: getImageAttributes(optimizedThumbnailAstroImageProps),
-    lightbox: getImageAttributes(optimizedLightboxAstroImageProps),
-    hero: getImageAttributes(optimizedHeroAstroImageProps),
+    blur: getImageAttributes(optimizedBlurImageProps),
+    xs: getImageAttributes(optimizedXsImageProps),
+    md: getImageAttributes(optimizedMdImageProps),
+    xl: getImageAttributes(optimizedXlImageProps),
   };
 
   return imageProps;