Merge pull request #6 from nemanjam/feature/add-gallery-page

Add gallery page

Author: nemanjam

docs/working-notes/my-old-code/Gallery.astro

@@ -0,0 +1,98 @@
+---
+import { Image } 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 { 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 imageMetadataToAstroImageProps = (imagesMetadata: ImageMetadata): AstroImageProps => ({
+  src: imagesMetadata,
+  ...IMAGE_SIZES.FIXED.MDX_XXS_16_9,
+  alt: 'Gallery image',
+});
+
+const astroImagePropsToReactImageProps = (astroImageProps: AstroImageProps): ImageProps => {
+  // console.log('astroImageProps', JSON.stringify(astroImageProps, null, 2));
+
+  const astroImageSrc = astroImageProps.src as ImageMetadata;
+
+  return {
+    src: astroImageSrc.src,
+    originalSrc: astroImageSrc.src,
+    width: parseInt(String(astroImageProps.width)),
+    height: parseInt(String(astroImageProps.height)),
+  };
+};
+
+const astroImages = imagesMetadata.map((metadata) => imageMetadataToAstroImageProps(metadata));
+const reactImages = astroImages.map((astroProps) => astroImagePropsToReactImageProps(astroProps));
+
+console.log('images', JSON.stringify(reactImages, null, 2));
+
+const { class: className } = Astro.props;
+---
+
+<div class={cn('', className)}>
+  <ReactGallery
+    client:only="react"
+    images={reactImages}
+    thumbnailImageComponent={(<Image {...IMAGE_SIZES.FIXED.MDX_XXS_16_9} src="" alt="default" />)}
+  />
+</div>
+{
+  /*
+
+/@fs/home/username/Desktop/nemanjam.github.io/src/assets/images/all-images/cyco5.jpg?origWidth=4608&origHeight=2592&origFormat=jpg
+
+<ul class={cn('grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3', className)}>
+  {
+    imagesMetadata.map((image) => (
+      <li>
+        <Image {...IMAGE_SIZES.FIXED.MDX_XXS_16_9} src={image} alt="my image" />
+      </li>
+    ))
+  }
+</ul>
+
+interface Image {
+    key?: Key;
+    src: string;
+    width: number;
+    height: number;
+    nano?: string;
+    alt?: string;
+    tags?: ImageTag[];
+    isSelected?: boolean;
+    caption?: ReactNode;
+    customOverlay?: ReactNode;
+    thumbnailCaption?: ReactNode;
+    orientation?: number;
+}
+*/
+}

docs/working-notes/todo2.md

@@ -200,6 +200,9 @@ https://lea.verou.me/blog/2023/going-lean/#public-or-private-repo%3F
 analytics, internationalisation, github issue template, small project
 https://github.com/wanoo21/tailwind-astro-starting-blog
 
+// good blog design
+https://www.builder.io/blog/react-intersection-observer
+
 -----------
 za local state mora react ili solid
 for state between pages nanostore with localStorage

docs/working-notes/todo3.md

@@ -472,4 +472,26 @@ astro env vars sa schema
 astro component container, render component to string for rss 
 css directive transitions 
 remote collection 2.0, custom folder
+
+-------------
+// gallery
+
+
+For lazy loading checkout unpic - https://unpic.pics/lib/
+
+For image resizing I would use a CDN - depending on usage you might be able to use a free tier or pay very little.
+
+For Gallery - https://benhowell.github.io/react-grid-gallery - which is client side React. For onscroll I used react-intersection-observer - https://www.builder.io/blog/react-intersection-observer
+
+I hope this helps, sorry I can't share my code.
+----
+glob za slike
+poenta, ne sme da ima {} za jednu opciju
+ovo puca
+'/src/assets/images/all-images/*.{jpg}',
+ovo radi
+'/src/assets/images/all-images/*.jpg',
+
+
+------------
 ```

package.json

@@ -48,6 +48,8 @@
     "object-treeify": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-grid-gallery": "^1.0.1",
+    "react-image-lightbox": "^5.1.4",
     "reading-time": "^1.5.0",
     "sharp": "0.32.6",
     "tailwind-clip-path": "^1.0.0",

src/components/Gallery.astro

@@ -0,0 +1,82 @@
+---
+import { getImage } from 'astro:assets';
+
+import ReactGallery from '@/components/react/Gallery';
+import { IMAGE_SIZES } from '@/constants/image';
+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_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 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 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} />
+</div>

src/components/react/Gallery.tsx

@@ -0,0 +1,52 @@
+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 'react-image-lightbox/style.css';
+
+interface Props {
+  images: ImageProps[];
+}
+
+// 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];
+  const nextIndex = (index + 1) % images.length;
+  const nextImage = images[nextIndex] || currentImage;
+  const prevIndex = (index + images.length - 1) % images.length;
+  const prevImage = images[prevIndex] || currentImage;
+
+  const handleClick = (index: number, _item: ImageProps) => setIndex(index);
+  const handleClose = () => setIndex(-1);
+  const handleMovePrev = () => setIndex(prevIndex);
+  const handleMoveNext = () => setIndex(nextIndex);
+
+  return (
+    <div>
+      <ReactGridGallery images={images} onClick={handleClick} enableImageSelection={false} />
+      {!!currentImage && (
+        <Lightbox
+          imageTitle={currentImage.caption}
+          mainSrc={currentImage.originalSrc}
+          mainSrcThumbnail={currentImage.src}
+          nextSrc={nextImage.originalSrc}
+          nextSrcThumbnail={nextImage.src}
+          prevSrc={prevImage.originalSrc}
+          prevSrcThumbnail={prevImage.src}
+          onCloseRequest={handleClose}
+          onMovePrevRequest={handleMovePrev}
+          onMoveNextRequest={handleMoveNext}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Gallery;

src/components/react/ScrollToTop.tsx

@@ -57,6 +57,7 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
     };
 
     // bellow 100 or it will break again on fast scroll
+    // todo: set threshold and remove debounce
     const debouncedCallback = debounce(callback, 20);
     const intersect = new IntersectionObserver(debouncedCallback);
 

src/constants/navigation.ts

@@ -26,6 +26,10 @@ export const NAVIGATION_ITEMS = [
     title: 'About',
     path: ROUTES.ABOUT,
   },
+  {
+    title: 'Gallery',
+    path: ROUTES.GALLERY,
+  },
   // {
   //   title: 'Resume',
   //   path: ROUTES.RESUME,

src/constants/routes.ts

@@ -15,6 +15,7 @@ export const ROUTES = {
   EXPLORE_TAGS: '/blog/explore/tags/',
   EXPLORE_CATEGORIES: '/blog/explore/categories/',
   DESIGN: '/design/',
+  GALLERY: '/gallery/',
   /** maybe in future */
   DRAFTS: '/drafts/',
   _404: '/404/',

src/layouts/Centered.astro

@@ -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>