remove gallery api endpoints, use import.meta

Author: nemanjam

docs/working-notes/todo4.md

@@ -72,6 +72,14 @@ placeholder - blur, bg-color, single // extract line
 img with srcset
 
 rename all-images to gallery-images
+endpoint to create open graph images, because they dont exist in the file system
+
+// only in dev
+http://localhost:3000/_image?href=/@fs/home/username/Desktop/nemanjam.github.io/src/assets/images/all-images/morning1.jpg?origWidth=4608&origHeight=2592&origFormat=jpg&w=1280&h=720&f=webp
+
+// in prod
+http://localhost:3000/_astro/focus1.CEdGhKb3_nVk9T.webp
+
 ```
 
 

src/constants/image.ts

@@ -25,6 +25,10 @@ export const TW_SCREENS = {
 // add quality and loading in future
 export const IMAGE_SIZES = {
   FIXED: {
+    BLUR: {
+      width: 10,
+      height: 10,
+    },
     AVATAR: {
       width: 48,
       height: 48,

src/libs/api/gallery/image-path.ts

@@ -0,0 +1,44 @@
+import { EXCLUDE_IMAGES } from '@/constants/gallery';
+import { imageMetadataToImageProps } from '@/libs/gallery/transform';
+
+import type { GalleryImageProps, HeroImageProps, ImageProps } from '@/libs/gallery/transform';
+import type { ImageMetadata } from 'astro';
+
+// no need for API route, image server already exists, it will only rewrite url
+
+export const getGalleryImagesMetadata = (): 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;
+};
+
+export const getImagesProps = async (): Promise<ImageProps[]> =>
+  Promise.all(getGalleryImagesMetadata().map(imageMetadataToImageProps));
+
+export const getHeroImagesProps = (): Promise<HeroImageProps[]> =>
+  getImagesProps().then((imagesProps) =>
+    imagesProps.map((imageProps) => ({
+      blur: imageProps.blur,
+      hero: imageProps.hero,
+    }))
+  );
+
+export const getGalleryImagesProps = (): Promise<GalleryImageProps[]> =>
+  getImagesProps().then((imagesProps) =>
+    imagesProps.map((imageProps) => ({
+      blur: imageProps.blur,
+      thumbnail: imageProps.thumbnail,
+      lightbox: imageProps.lightbox,
+    }))
+  );

src/libs/api/gallery/images.ts

@@ -0,0 +1,77 @@
+import { getImage } from 'astro:assets';
+
+import { IMAGE_SIZES } from '@/constants/image';
+
+import type { GetImageResult, ImageMetadata } from 'astro';
+
+export interface ImageAttributes {
+  src: string;
+  width: number;
+  height: number;
+}
+
+export interface ImageProps {
+  blur: ImageAttributes;
+  color?: ImageAttributes;
+  thumbnail: ImageAttributes;
+  lightbox: ImageAttributes; // fullSize, 1280x720
+  hero: ImageAttributes;
+}
+
+export type HeroImageProps = Pick<ImageProps, 'blur' | 'hero'>;
+
+export type GalleryImageProps = Pick<ImageProps, 'blur' | 'thumbnail' | 'lightbox'>;
+
+export const imageMetadataToImageProps = async (
+  imagesMetadata: ImageMetadata
+): Promise<ImageProps> => {
+  const astroImageProps = {
+    src: imagesMetadata,
+    format: 'webp',
+  };
+
+  const blurAstroImageProps = {
+    ...astroImageProps,
+    ...IMAGE_SIZES.FIXED.BLUR,
+    alt: 'Blur image',
+  };
+
+  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 heroAstroImageProps = {
+    ...lightboxAstroImageProps,
+    alt: 'Hero image',
+  };
+
+  const optimizedBlurAstroImageProps = await getImage(blurAstroImageProps);
+  const optimizedThumbnailAstroImageProps = await getImage(thumbnailAstroImageProps);
+  const optimizedLightboxAstroImageProps = await getImage(lightboxAstroImageProps);
+  const optimizedHeroAstroImageProps = await getImage(heroAstroImageProps);
+
+  const imageProps = {
+    blur: getImageAttributes(optimizedBlurAstroImageProps),
+    thumbnail: getImageAttributes(optimizedThumbnailAstroImageProps),
+    lightbox: getImageAttributes(optimizedLightboxAstroImageProps),
+    hero: getImageAttributes(optimizedHeroAstroImageProps),
+  };
+
+  return imageProps;
+};
+
+/*-------------------------------- utils ------------------------------*/
+
+const getImageAttributes = (image: GetImageResult): ImageAttributes => ({
+  src: image.src,
+  width: parseInt(String(image.attributes.width)),
+  height: parseInt(String(image.attributes.height)),
+});

src/libs/gallery/images.ts

@@ -28,6 +28,7 @@ export const getStaticPaths = async () => {
   return paths;
 };
 
+// endpoint to create open graph images, because they don't exist in the file system
 export const GET: APIRoute = async ({ props }: APIContext) => {
   // limit number of chars
   const { title, heroImage, pageId } = props.page;