jpg glob is failing

Author: nemanjam

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,17 @@ 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.
+------------
 ```

package.json

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

src/components/Gallery.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+import { IMAGE_SIZES } from '@/constants/image';
+
+import type { ImageMetadata } from 'astro';
+
+const getAllImagesMetadata = (): ImageMetadata[] => {
+  //
+  // src/assets/images/all-images/river9.jpg
+  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
+    '/src/assets/images/all-images/*.{jpg}',
+    { eager: true }
+  );
+
+  console.log('imageModules', imageModules);
+
+  const imagesMetadata = Object.keys(imageModules).map((path) => imageModules[path].default);
+  return imagesMetadata;
+};
+
+const imagesMetadata = getAllImagesMetadata();
+---
+
+<ul>
+  {
+    imagesMetadata.map((image) => (
+      <li>
+        <Image {...IMAGE_SIZES.FIXED.MDX_XS_16_9} src={image} alt="my image" />
+      </li>
+    ))
+  }
+</ul>

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

@@ -1,7 +1,7 @@
 ---
 layout: '../layouts/Page.astro'
-title: 'About Me'
-description: 'Lorem ipsum dolor sit amet'
+title: 'About'
+description: 'About me page'
 ---
 
 import { Image } from 'astro:assets';

src/pages/gallery.mdx

@@ -0,0 +1,9 @@
+---
+layout: '../layouts/Page.astro'
+title: 'Gallery'
+description: 'Image gallery'
+---
+
+import Gallery from '../components/Gallery.astro';
+
+<Gallery />

src/pages/index.mdx

@@ -1,7 +1,7 @@
 ---
 layout: '../layouts/Page.astro'
 title: 'Home'
-description: 'Lorem ipsum dolor sit amet'
+description: 'Welcome to nemanjamitic.com'
 ---
 
 import { Image } from 'astro:assets';

yarn.lock

@@ -5556,6 +5556,11 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-grid-gallery@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-grid-gallery/-/react-grid-gallery-1.0.1.tgz#51e9e920cb83df6c61fbd1f2c7eed7db3b6e5a1b"
+  integrity sha512-+fVd6fH9tm0W+UMgzRHET/gmzSs2/l2sGOuELLaHXMto6UhuZdscj9ILHOYe7hn0GBRUJiczMllsEs7OJz9uPA==
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"