react-grid-gallery mostly works

Author: nemanjam

src/components/Gallery.astro

@@ -1,11 +1,11 @@
 ---
-import { Image } from 'astro:assets';
+import { getImage } from 'astro:assets';
 
 import ReactGallery from '@/components/react/Gallery';
 import { IMAGE_SIZES } from '@/constants/image';
 import { cn } from '@/utils/styles';
 
-import type { AstroImageProps, ImageProps } from '@/types/common';
+import type { ImageProps } from '@/types/common';
 import type { ImageMetadata } from 'astro';
 
 export interface Props extends astroHTML.JSX.HTMLAttributes {}
@@ -31,31 +31,52 @@ const getAllImagesMetadata = (): ImageMetadata[] => {
 
 const imagesMetadata = getAllImagesMetadata();
 
-const imageMetadataToAstroImageProps = (imagesMetadata: ImageMetadata): AstroImageProps => ({
-  src: imagesMetadata,
-  ...IMAGE_SIZES.FIXED.MDX_XXS_16_9,
-  alt: 'Gallery image',
-});
+const imageMetadataToReactImageProps = async (
+  imagesMetadata: ImageMetadata
+): Promise<ImageProps> => {
+  const astroImageProps = {
+    src: imagesMetadata,
+    format: 'webp',
+  };
+
+  const thumbnailAstroImageProps = {
+    ...astroImageProps,
+    ...IMAGE_SIZES.FIXED.MDX_XXS_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 astroImagePropsToReactImageProps = (astroImageProps: AstroImageProps): ImageProps => {
-  const astroImageSrc = astroImageProps.src as ImageMetadata;
+  const optimizedLightboxAstroImageProps = await getImage(lightboxAstroImageProps);
+  const { src: originalSrc } = optimizedLightboxAstroImageProps;
 
-  return {
-    src: astroImageSrc.src,
-    originalSrc: astroImageSrc.src,
-    width: parseInt(String(astroImageProps.width)),
-    height: parseInt(String(astroImageProps.height)),
+  const reactImageProps = {
+    src,
+    originalSrc,
+    // width and height only for thumbnails
+    width: parseInt(String(attributes.width)),
+    height: parseInt(String(attributes.height)),
   };
+
+  return reactImageProps;
 };
 
-const astroImages = imagesMetadata.map((metadata) => imageMetadataToAstroImageProps(metadata));
-const reactImages = astroImages.map((astroProps) => astroImagePropsToReactImageProps(astroProps));
+const reactImages = await Promise.all(
+  imagesMetadata.map((metadata) => imageMetadataToReactImageProps(metadata))
+);
+
+// console.log('reactImages', reactImages);
 
 const { class: className } = Astro.props;
 ---
 
 <div class={cn('', className)}>
-  <ReactGallery client:only="react" images={reactImages}>
-    <Image {...IMAGE_SIZES.FIXED.MDX_XXS_16_9} src="https://google.com" alt="default" />
-  </ReactGallery>
+  <ReactGallery client:only="react" images={reactImages} />
 </div>

src/components/react/Gallery.tsx

@@ -1,22 +1,20 @@
-import { cloneElement, useState } from 'react';
+import { useState } from 'react';
 
 import { Gallery as ReactGridGallery } from 'react-grid-gallery';
 import Lightbox from 'react-image-lightbox';
 
 import type { ImageProps } from '@/types/common';
-import type { ReactElement } from 'react';
-import type { ThumbnailImageComponentImageProps } from 'react-grid-gallery';
 
 import 'react-image-lightbox/style.css';
 
-import ThumbnailImage from '@/components/react/ThumbnailImage';
-
 interface Props {
-  children?: ReactElement;
   images: ImageProps[];
 }
 
-const Gallery: React.FC<Props> = ({ images, children: thumbnailImageComponent }) => {
+// global polyfill for react-image-lightbox
+window.global = window.global || window;
+
+const Gallery: React.FC<Props> = ({ images }) => {
   const [index, setIndex] = useState(-1);
 
   const currentImage = images[index];
@@ -30,31 +28,9 @@ const Gallery: React.FC<Props> = ({ images, children: thumbnailImageComponent })
   const handleMovePrev = () => setIndex(prevIndex);
   const handleMoveNext = () => setIndex(nextIndex);
 
-  console.log('currentImage', currentImage);
-
   return (
     <div>
-      <ReactGridGallery
-        images={images}
-        thumbnailImageComponent={(props) => {
-          const imageProps: ThumbnailImageComponentImageProps = props.imageProps;
-
-          // key, src, alt, title, style
-          const { key: _, ...astroImageProps } = imageProps;
-
-          console.log('imageProps', imageProps);
-
-          return (
-            <ThumbnailImage {...props}>
-              {cloneElement(thumbnailImageComponent ?? <></>, {
-                ...astroImageProps,
-              })}
-            </ThumbnailImage>
-          );
-        }}
-        onClick={handleClick}
-        enableImageSelection={false}
-      />
+      <ReactGridGallery images={images} onClick={handleClick} enableImageSelection={false} />
       {!!currentImage && (
         <Lightbox
           imageTitle={currentImage.caption}

src/components/react/ThumbnailImage.tsx

@@ -1,18 +1,25 @@
 ---
 import Base from '@/layouts/Base.astro';
+import { cn } from '@/utils/styles';
 
 import type { BaseProps } from '@/layouts/Base.astro';
 
-export interface Props extends BaseProps {}
+export interface Props extends BaseProps, astroHTML.JSX.HTMLAttributes {}
 
 const props = Astro.props;
+
+// targets <main /> tag
+const { class: className } = Astro.props;
 ---
 
 {/* flex here to take full height for pagination, flex-row align-stretch */}
 {/* h-full dosent work without all parents h-full */}
 
 <Base {...props}>
-  <main id="main" class="flex-grow flex flex-col centered-px max-w-4xl py-4 lg:py-8">
+  <main
+    id="main"
+    class={cn('flex-grow flex flex-col centered-px max-w-4xl py-4 lg:py-8', className)}
+  >
     <slot />
   </main>
 </Base>

src/layouts/Centered.astro

@@ -1,13 +1,16 @@
 ---
 import Centered from '@/layouts/Centered.astro';
 import { getOpenGraphImagePath } from '@/libs/api/open-graph/image-path';
+import { cn } from '@/utils/styles';
 
 export interface Content {
   title: string;
   description: string;
   readingTime: number;
   file: string;
   url: string;
+  /** set max-w-xxx */
+  class: string;
 }
 
 export interface Props {
@@ -16,7 +19,7 @@ export interface Props {
 
 // metadata from frontmatter
 const { content } = Astro.props;
-const { title, description } = content;
+const { title, description, class: className } = content;
 
 // available in Layouts
 const { pathname } = Astro.url;
@@ -28,7 +31,7 @@ const image = getOpenGraphImagePath(path);
 const metadata = { title, description, image };
 ---
 
-<Centered {metadata}>
+<Centered {metadata} class={cn(className)}>
   <article class="my-prose">
     <slot />
   </article>

src/layouts/Page.astro

@@ -2,8 +2,11 @@
 layout: '../layouts/Page.astro'
 title: 'Gallery'
 description: 'Image gallery'
+class: 'max-w-5xl'
 ---
 
 import Gallery from '../components/Gallery.astro';
 
+# Gallery
+
 <Gallery class="not-prose" />

src/pages/gallery.mdx

@@ -15,6 +15,9 @@ export const getActiveNavItemPath = (routePathname: string): NavigationItem['pat
     case routePathname === ROUTES.ABOUT:
       activeNavItem = getNavItem(ROUTES.ABOUT);
       break;
+    case routePathname === ROUTES.GALLERY:
+      activeNavItem = getNavItem(ROUTES.GALLERY);
+      break;
     // unused
     case routePathname === ROUTES.RESUME:
       activeNavItem = getNavItem(ROUTES.RESUME);