single client image Home page works

Author: nemanjam

docs/working-notes/todo4.md

@@ -56,7 +56,8 @@ git checkout feat/tailwind4-v2
 mdx not formatting, prettierignore, breaks them
 for screenshots use new not private window and select window in screenshot tool, not screen or selection, hide dock for 16/9 // important
 breadcrumb navigation, projects
-random image client component for Home page, onClick
+    random image client component for Home page, onClick
+use picture with srcSet for Home image
 ```
 
 

src/components/ImageRandom.astro

@@ -0,0 +1,9 @@
+---
+import ImageRandomReact from '@/components/react/ImageRandom';
+import { allImagesSrc } from '@/utils/image';
+
+// forward Astro (MDX) class attr to className React
+const { class: className, ...props } = Astro.props;
+---
+
+<ImageRandomReact {...props} {className} {allImagesSrc} client:load />

src/components/react/ImageRandom.tsx

@@ -1,27 +1,32 @@
 import { useEffect, useState } from 'react';
 
-import { getRandomImageSrc } from '@/utils/image';
+import { getRandomElementFromArray } from '@/utils/array';
 import { cn } from '@/utils/styles';
 
-import type { FC } from 'react';
+import type { FC, ImgHTMLAttributes } from 'react';
 
-interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {}
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+  // Important: must pass all allImagesSrc from the server or they wont be included on client
+  allImagesSrc: string[];
+}
 
-const ImageRandom: FC<Props> = ({ className, ...props }) => {
-  const [imageSrc, setImageSrc] = useState(''); // use loader image
+const ImageRandomReact: FC<Props> = ({ allImagesSrc, className, ...props }) => {
+  const [imageSrc, setImageSrc] = useState(allImagesSrc[0]);
 
   useEffect(() => {
     const run = async () => {
-      setImageSrc(await getRandomImageSrc());
+      setImageSrc(getRandomElementFromArray(allImagesSrc));
     };
 
     run();
   }, [setImageSrc]);
 
   const handleClick = async () => {
-    setImageSrc(await getRandomImageSrc());
+    setImageSrc(getRandomElementFromArray(allImagesSrc));
   };
 
+  // Todo: use <picture srcSet> for responsive images
+
   return (
     <img
       {...props}
@@ -33,4 +38,4 @@ const ImageRandom: FC<Props> = ({ className, ...props }) => {
   );
 };
 
-export default ImageRandom;
+export default ImageRandomReact;

src/pages/index.mdx

@@ -4,22 +4,11 @@ title: 'Home'
 description: 'Welcome to my blog'
 ---
 
-import { Image } from 'astro:assets';
-
-import { IMAGE_SIZES } from '../constants/image';
-import { getRandomImageMetadata } from '../utils/image';
-
-{/* 
-import ImageRandom from '../components/react/ImageRandom';
-*/}
+import ImageRandom from '../components/ImageRandom.astro';
 
 # 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 /> 
-*/}
+<ImageRandom class="w-full sm:max-h-96 object-cover" /> 
 
 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/image.ts

@@ -29,6 +29,8 @@ export const getAllImagesMetadata = (): ImageMetadata[] => {
 // static build, call only once
 export const allImagesMetadata = getAllImagesMetadata();
 
+/*-------------------------------- Gallery page ------------------------------*/
+
 // used in gallery
 export const imageMetadataToReactImageProps = async (
   imagesMetadata: ImageMetadata
@@ -67,7 +69,7 @@ export const imageMetadataToReactImageProps = async (
   return reactImageProps;
 };
 
-/*-------------------------------- Random Hero image ------------------------------*/
+/*-------------------------------- Home page, random image ------------------------------*/
 
 export const getRandomImageMetadata = (): ImageMetadata =>
   getRandomElementFromArray(allImagesMetadata);
@@ -82,7 +84,8 @@ export const imageMetadataToHeroImageSrc = async (
 
   const lightboxAstroImageProps = {
     ...astroImageProps,
-    // cant use responsive sizes here, must pass viewport width from client
+    // must use picture tag with srcSet
+    // ...IMAGE_SIZES.RESPONSIVE.POST_HERO,
     ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
     alt: 'Hero image',
   };
@@ -93,9 +96,7 @@ export const imageMetadataToHeroImageSrc = async (
   return imageSrc;
 };
 
-export const getRandomImageSrc = async (): Promise<string> => {
-  const imageMetadata = getRandomImageMetadata();
-  const imageSrc = await imageMetadataToHeroImageSrc(imageMetadata);
+export const getAllImagesSrc = (): Promise<string[]> =>
+  Promise.all(allImagesMetadata.map(imageMetadataToHeroImageSrc));
 
-  return imageSrc;
-};
+export const allImagesSrc = await getAllImagesSrc();