fix glob, images are loading

Author: nemanjam

docs/working-notes/todo3.md

@@ -484,5 +484,14 @@ For image resizing I would use a CDN - depending on usage you might be able to u
 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',
+
+
 ------------
 ```

src/components/Gallery.astro

@@ -2,31 +2,41 @@
 import { Image } from 'astro:assets';
 
 import { IMAGE_SIZES } from '@/constants/image';
+import { cn } from '@/utils/styles';
 
 import type { ImageMetadata } from 'astro';
 
+export interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+// filenames
+const EXCLUDE_IMAGES = ['avatar1.jpg'];
+
 const getAllImagesMetadata = (): ImageMetadata[] => {
-  //
-  // src/assets/images/all-images/river9.jpg
   const imageModules = import.meta.glob<{ default: ImageMetadata }>(
-    '/src/assets/images/all-images/*.{jpg}',
+    // cant be even variable
+    '/src/assets/images/all-images/*.jpg',
     { eager: true }
   );
 
-  console.log('imageModules', imageModules);
-
-  const imagesMetadata = Object.keys(imageModules).map((path) => imageModules[path].default);
+  // 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 { class: className } = Astro.props;
 ---
 
-<ul>
+<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_XS_16_9} src={image} alt="my image" />
+        <Image {...IMAGE_SIZES.FIXED.MDX_XXS_16_9} src={image} alt="my image" />
       </li>
     ))
   }

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/pages/gallery.mdx

@@ -6,4 +6,4 @@ description: 'Image gallery'
 
 import Gallery from '../components/Gallery.astro';
 
-<Gallery />
+<Gallery class="not-prose" />