Home page, random static full width image

Author: nemanjam

docs/working-notes/todo4.md

@@ -56,6 +56,7 @@ 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
 ```
 
 

src/components/Gallery.astro

@@ -1,76 +1,16 @@
 ---
-import { getImage } from 'astro:assets';
-
 import ReactGallery from '@/components/react/Gallery';
-import { IMAGE_SIZES } from '@/constants/image';
+import { sliceToMod4 } from '@/utils/array';
+import { allImagesMetadata, imageMetadataToReactImageProps } from '@/utils/images';
 import { randomizeArray } from '@/utils/objects';
 import { cn } from '@/utils/styles';
 
-import type { ImageProps } from '@/types/common';
-import type { ImageMetadata } from 'astro';
-
 export interface Props extends astroHTML.JSX.HTMLAttributes {}
 
-// filenames
-const EXCLUDE_IMAGES = ['avatar1.jpg'];
-
-const getAllImagesMetadata = (): ImageMetadata[] => {
-  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
-    // cant be even variable
-    '/src/assets/images/all-images/*.jpg',
-    { eager: true }
-  );
-
-  // convert map to array
-  const imagesMetadata = Object.keys(imageModules)
-    // filter excluded filenames
-    .filter((path) => !EXCLUDE_IMAGES.some((excludedFileName) => path.endsWith(excludedFileName)))
-    // return metadata array
-    .map((path) => imageModules[path].default);
-  return imagesMetadata;
-};
-
-const imagesMetadata = getAllImagesMetadata();
-
-const imageMetadataToReactImageProps = async (
-  imagesMetadata: ImageMetadata
-): Promise<ImageProps> => {
-  const astroImageProps = {
-    src: imagesMetadata,
-    format: 'webp',
-  };
-
-  const thumbnailAstroImageProps = {
-    ...astroImageProps,
-    ...IMAGE_SIZES.FIXED.MDX_XS_16_9,
-    alt: 'Thumbnail image',
-  };
-
-  const lightboxAstroImageProps = {
-    ...astroImageProps,
-    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
-    alt: 'Lightbox image',
-  };
-
-  const optimizedThumbnailAstroImageProps = await getImage(thumbnailAstroImageProps);
-  const { src, attributes } = optimizedThumbnailAstroImageProps;
-
-  const optimizedLightboxAstroImageProps = await getImage(lightboxAstroImageProps);
-  const { src: originalSrc } = optimizedLightboxAstroImageProps;
-
-  const reactImageProps = {
-    src,
-    originalSrc,
-    // width and height only for thumbnails
-    width: parseInt(String(attributes.width)),
-    height: parseInt(String(attributes.height)),
-  };
-
-  return reactImageProps;
-};
+const allImagesMetadataMod4 = sliceToMod4(allImagesMetadata);
 
 const reactImages = await Promise.all(
-  imagesMetadata.map((metadata) => imageMetadataToReactImageProps(metadata))
+  allImagesMetadataMod4.map((metadata) => imageMetadataToReactImageProps(metadata))
 );
 
 const randomizedReactImages = randomizeArray(reactImages);

src/pages/index.mdx

@@ -7,11 +7,11 @@ description: 'Welcome to my blog'
 import { Image } from 'astro:assets';
 
 import { IMAGE_SIZES } from '../constants/image';
-import River10Image from '../assets/images/all-images/river10.jpg';
+import { getRandomImageMetadata } from '../utils/images';
 
 # Hello and welcome
 
-<Image {...IMAGE_SIZES.FIXED.MDX_MD} src={River10Image} alt="Fishing spot" />
+<Image {...IMAGE_SIZES.RESPONSIVE.POST_HERO} src={getRandomImageMetadata()} class="sm:max-h-96 object-cover" alt="Fishing spot" />
 
 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/array.ts

@@ -0,0 +1,4 @@
+export const getRandomElementFromArray = <T>(arr: T[]): T =>
+  arr[Math.floor(Math.random() * arr.length)];
+
+export const sliceToMod4 = <T>(arr: T[]): T[] => arr.slice(0, arr.length - (arr.length % 4));

src/utils/gradients.ts

@@ -1,6 +1,6 @@
 import { default as twColors } from 'tailwindcss/colors';
 
-import { getRandomElementFromArray as rnd } from '@/utils/strings';
+import { getRandomElementFromArray as rnd } from '@/utils/array';
 
 import type { DefaultColors } from 'tailwindcss/types/generated/colors';
 

src/utils/images.ts

@@ -0,0 +1,72 @@
+import { getImage } from 'astro:assets';
+
+import { IMAGE_SIZES } from '@/constants/image';
+import { getRandomElementFromArray } from '@/utils/array';
+
+import type { ImageProps } from '@/types/common';
+import type { ImageMetadata } from 'astro';
+
+// filenames
+const EXCLUDE_IMAGES = ['avatar1.jpg'];
+
+export const getAllImagesMetadata = (): ImageMetadata[] => {
+  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
+    // cant be even variable
+    '/src/assets/images/all-images/*.jpg',
+    { eager: true }
+  );
+
+  // convert map to array
+  const imagesMetadata = Object.keys(imageModules)
+    // filter excluded filenames
+    .filter((path) => !EXCLUDE_IMAGES.some((excludedFileName) => path.endsWith(excludedFileName)))
+    // return metadata array
+    .map((path) => imageModules[path].default);
+
+  return imagesMetadata;
+};
+
+// static build, call only once
+export const allImagesMetadata = getAllImagesMetadata();
+
+// used in gallery
+export const imageMetadataToReactImageProps = async (
+  imagesMetadata: ImageMetadata
+): Promise<ImageProps> => {
+  const astroImageProps = {
+    src: imagesMetadata,
+    format: 'webp',
+  };
+
+  const thumbnailAstroImageProps = {
+    ...astroImageProps,
+    ...IMAGE_SIZES.FIXED.MDX_XS_16_9,
+    alt: 'Thumbnail image',
+  };
+
+  const lightboxAstroImageProps = {
+    ...astroImageProps,
+    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
+    alt: 'Lightbox image',
+  };
+
+  const optimizedThumbnailAstroImageProps = await getImage(thumbnailAstroImageProps);
+  const { src, attributes } = optimizedThumbnailAstroImageProps;
+
+  const optimizedLightboxAstroImageProps = await getImage(lightboxAstroImageProps);
+  const { src: originalSrc } = optimizedLightboxAstroImageProps;
+
+  const reactImageProps = {
+    src,
+    originalSrc,
+    // width and height only for thumbnails
+    width: parseInt(String(attributes.width)),
+    height: parseInt(String(attributes.height)),
+  };
+
+  return reactImageProps;
+};
+
+// for Home page
+export const getRandomImageMetadata = (): ImageMetadata =>
+  getRandomElementFromArray(allImagesMetadata);

src/utils/strings.ts

@@ -8,9 +8,6 @@ export const getRandomLengthSubstring = (inputString: string, length: number, ma
 export const limitString = (str: string, maxLength: number) =>
   str.length > maxLength ? str.slice(0, maxLength).trim() + '...' : str.trim();
 
-export const getRandomElementFromArray = <T>(arr: T[]): T =>
-  arr[Math.floor(Math.random() * arr.length)];
-
 export const trimHttpProtocol = (url: string) => {
   const trailingSlashRegex = /\/$/;
   const protocolRegex = /^(https?:\/\/)/i;