add ImageRandom client component on Home page

Author: nemanjam

src/components/Gallery.astro

@@ -1,7 +1,7 @@
 ---
 import ReactGallery from '@/components/react/Gallery';
 import { sliceToMod4 } from '@/utils/array';
-import { allImagesMetadata, imageMetadataToReactImageProps } from '@/utils/images';
+import { allImagesMetadata, imageMetadataToReactImageProps } from '@/utils/image';
 import { randomizeArray } from '@/utils/objects';
 import { cn } from '@/utils/styles';
 

src/components/react/ImageRandom.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+import { getRandomImageSrc } from '@/utils/image';
+import { cn } from '@/utils/styles';
+
+import type { FC } from 'react';
+
+interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {}
+
+const ImageRandom: FC<Props> = ({ className, ...props }) => {
+  const [imageSrc, setImageSrc] = useState(''); // use loader image
+
+  useEffect(() => {
+    const run = async () => {
+      setImageSrc(await getRandomImageSrc());
+    };
+
+    run();
+  }, [setImageSrc]);
+
+  const handleClick = async () => {
+    setImageSrc(await getRandomImageSrc());
+  };
+
+  return (
+    <img
+      {...props}
+      src={imageSrc}
+      onClick={handleClick}
+      className={cn('cursor-pointer', className)}
+      alt="Random Hero image"
+    />
+  );
+};
+
+export default ImageRandom;

src/pages/index.mdx

@@ -4,14 +4,11 @@ title: 'Home'
 description: 'Welcome to my blog'
 ---
 
-import { Image } from 'astro:assets';
-
-import { IMAGE_SIZES } from '../constants/image';
-import { getRandomImageMetadata } from '../utils/images';
+import ImageRandom from '../components/react/ImageRandom';
 
 # Hello and welcome
 
-<Image {...IMAGE_SIZES.RESPONSIVE.POST_HERO} src={getRandomImageMetadata()} class="sm:max-h-96 object-cover" alt="Fishing spot" />
+<ImageRandom className="w-full sm:max-h-96 object-cover" client:load />
 
 Welcome to my coding blog. Here, I will share my coding experiments and thoughts on React.js, Next.js, Node.js, Astro, Python, DevOps, and more. Feel free to read, explore, and comment. Or, if you are feeling overwhelmed by coding, you can take a break and enjoy some random landscape photos.
 

src/utils/images.ts renamed to src/utils/image.ts

@@ -67,6 +67,35 @@ export const imageMetadataToReactImageProps = async (
   return reactImageProps;
 };
 
-// for Home page
+/*-------------------------------- Random Hero image ------------------------------*/
+
 export const getRandomImageMetadata = (): ImageMetadata =>
   getRandomElementFromArray(allImagesMetadata);
+
+export const imageMetadataToHeroImageSrc = async (
+  imageMetadata: ImageMetadata
+): Promise<string> => {
+  const astroImageProps = {
+    src: imageMetadata,
+    format: 'webp',
+  };
+
+  const lightboxAstroImageProps = {
+    ...astroImageProps,
+    // cant use responsive sizes here, must pass viewport width from client
+    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
+    alt: 'Hero image',
+  };
+
+  const optimizedImageProps = await getImage(lightboxAstroImageProps);
+  const { src: imageSrc } = optimizedImageProps;
+
+  return imageSrc;
+};
+
+export const getRandomImageSrc = async (): Promise<string> => {
+  const imageMetadata = getRandomImageMetadata();
+  const imageSrc = await imageMetadataToHeroImageSrc(imageMetadata);
+
+  return imageSrc;
+};