home page image api route in progress

Author: nemanjam

docs/working-notes/todo4.md

@@ -61,6 +61,17 @@ use picture with srcSet for Home image
 solve loading fallback for async client image
 astro image as react child, wont work because of props
 https://docs.astro.build/en/guides/images/#images-in-ui-framework-components
+------------
+https://github.com/RafidMuhymin/astro-imagetools // not needed actually, placeholder...
+load on scroll?
+------------
+git checkout feat/new-gallery
+
+use api route same as og-image, for gallery and home
+placeholder - blur, bg-color, single // extract line
+img with srcset
+
+rename all-images to gallery-images
 ```
 
 

src/constants/gallery.ts

@@ -0,0 +1 @@
+export const EXCLUDE_IMAGES = ['avatar1.jpg'];

src/constants/routes.ts

@@ -31,5 +31,6 @@ export const ROUTES = {
     OG_IMAGES: '/api/open-graph/',
     FEED_JSON: '/api/feed.json',
     FEED_RSS: '/api/feed.xml',
+    GALLERY: '/api/gallery/',
   },
 } as const;

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

@@ -0,0 +1,38 @@
+import { getImage } from 'astro:assets';
+
+import { IMAGE_SIZES } from '@/constants/image';
+
+import type { ImageMetadata } from 'astro';
+
+// Todo: add blur, thumb, full size images
+
+// move to types
+export interface ImageSources {
+  blur: string;
+  color: string;
+  thumbnail: string;
+  fullSize: string;
+}
+
+// only for Home for now
+export const imageMetadataToImageSources = async (
+  imageMetadata: ImageMetadata
+): Promise<string> => {
+  const astroImageProps = {
+    src: imageMetadata,
+    format: 'webp',
+  };
+
+  const fullSizeAstroImageProps = {
+    ...astroImageProps,
+    // must use picture tag with srcSet
+    // ...IMAGE_SIZES.RESPONSIVE.POST_HERO,
+    ...IMAGE_SIZES.FIXED.MDX_XL_16_9,
+    alt: 'Hero image',
+  };
+
+  const optimizedImageProps = await getImage(fullSizeAstroImageProps);
+  const { src: imageSrc } = optimizedImageProps;
+
+  return imageSrc;
+};

src/libs/api/gallery/images.ts

@@ -0,0 +1,31 @@
+import { EXCLUDE_IMAGES } from '@/constants/gallery';
+
+import type { ImageMetadata } from 'astro';
+
+// must use {path: image} object instead of array for getStaticPaths()
+
+export type GalleryImages = Record<string, ImageMetadata>;
+
+export const getGalleryImages = async (): Promise<GalleryImages> => {
+  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
+    // cant be even variable
+    '/src/assets/images/all-images/*.jpg',
+    { eager: true }
+  );
+
+  const imagesTupleArray = Object.entries(imageModules)
+    // filter excluded filenames
+    .filter(([path]) => !EXCLUDE_IMAGES.some((excludedFileName) => path.endsWith(excludedFileName)))
+    // create [path, imageMetadata] tuple array
+    .map(([path, imageModule]) => {
+      // src/assets/images/all-images/riverside1.jpg -> 'gallery/riverside1'
+      const fileName = path.replace(/^\/src\/assets\/images\/all-images\/|\.jpe?g|\.png$/g, '');
+      const imagePath = `gallery/${fileName}`;
+
+      return [imagePath, imageModule.default];
+    });
+
+  const imagesObject: GalleryImages = Object.fromEntries(imagesTupleArray);
+
+  return imagesObject;
+};

src/pages/api/gallery/[...route].ts

@@ -0,0 +1,137 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+import satori from 'satori';
+import sharp from 'sharp';
+
+import { FILE_PATHS } from '@/constants/file-paths';
+import { CONFIG_CLIENT } from '@/config/client';
+import { getPages } from '@/libs/api/open-graph/pages';
+import templateHtml from '@/libs/api/open-graph/template-html';
+import { removeTrailingSlash } from '@/utils/paths';
+import { trimHttpProtocol } from '@/utils/strings';
+
+import type { APIContext, APIRoute } from 'astro';
+
+const { SITE_URL } = CONFIG_CLIENT;
+const { FONTS_FOLDER, OG_FOLDER, IMAGE_404, AVATAR } = FILE_PATHS;
+
+export const getStaticPaths = async () => {
+  const pages = await getPages();
+
+  // object to array of tuples
+  const paths = Object.entries(pages).map(([path, page]) => ({
+    params: { route: path },
+    props: { page },
+  }));
+
+  return paths;
+};
+
+export const GET: APIRoute = async ({ props }: APIContext) => {
+  // limit number of chars
+  const { title, heroImage, pageId } = props.page;
+
+  // resize images in template in CSS only, not in sharp
+
+  // avatarImage
+  const avatarImageBase64Url = await getBase64Image(AVATAR);
+
+  // heroImage
+  let heroImagePath: string;
+
+  switch (true) {
+    case Boolean(heroImage?.fsPath):
+      heroImagePath = heroImage?.fsPath;
+      break;
+    // hardcoded in 404.mdx frontmatter
+    case pageId === 'page404':
+      heroImagePath = IMAGE_404;
+      break;
+
+    // fallback to random default image
+    default:
+      heroImagePath = await getRandomImage(OG_FOLDER);
+      break;
+  }
+
+  const heroImageBase64Url = await getBase64Image(heroImagePath);
+
+  const templateProps = {
+    title,
+    heroImageUrl: heroImageBase64Url,
+    avatarImageUrl: avatarImageBase64Url,
+    siteUrl: trimHttpProtocol(SITE_URL),
+  };
+
+  const fontData = await fs.readFile(`${FONTS_FOLDER}inter-regular.woff`);
+
+  const svg = await satori(templateHtml(templateProps) as React.ReactNode, {
+    width: 1200,
+    height: 630,
+    fonts: [
+      {
+        name: 'Inter',
+        data: fontData,
+        weight: 400,
+        style: 'normal',
+      },
+    ],
+  });
+
+  const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();
+
+  return new Response(pngBuffer);
+};
+
+/*-------------------------------- utils ------------------------------*/
+
+const getBase64Image = async (imagePath: string): Promise<string> => {
+  const imageData = await fs.readFile(imagePath);
+
+  const imageType = getImageType(imagePath);
+  const imageBase64 = Buffer.from(imageData).toString('base64');
+  const imageBase64Url = `data:image/${imageType};base64,${imageBase64}`;
+
+  return imageBase64Url;
+};
+
+const getImageType = (imagePath: string) => {
+  const extension = path.extname(imagePath).toLowerCase();
+
+  let imageType: string;
+  switch (extension) {
+    case '.png':
+      imageType = 'png';
+      break;
+    case '.jpg':
+    case '.jpeg':
+      imageType = 'jpeg';
+      break;
+    default:
+      throw new Error('Unsupported heroImage file extension');
+  }
+
+  return imageType;
+};
+
+const getRandomImage = async (folderPath: string): Promise<string> => {
+  const trimmedFolderPath = removeTrailingSlash(folderPath);
+
+  const files = await fs.readdir(trimmedFolderPath);
+
+  // omit ./, ../
+  const imageFiles = files.filter((file) => {
+    const ext = path.extname(file).toLowerCase();
+    return ext === '.jpg' || ext === '.jpeg' || ext === '.png';
+  });
+
+  if (imageFiles.length === 0) throw new Error(`No default og images found in: ${folderPath}`);
+
+  const randomIndex = Math.floor(Math.random() * imageFiles.length);
+  const randomImage = imageFiles[randomIndex];
+
+  const randomImageWithPath = `${trimmedFolderPath}/${randomImage}`;
+
+  return randomImageWithPath;
+};

src/pages/api/home/[...route].ts

@@ -0,0 +1,26 @@
+import { imageMetadataToImageSources } from '@/libs/api/gallery/image-path';
+import { getGalleryImages } from '@/libs/api/gallery/images';
+
+import type { APIContext, APIRoute } from 'astro';
+
+export const getStaticPaths = async () => {
+  const images = await getGalleryImages();
+
+  // object to array of tuples
+  const paths = Object.entries(images).map(([path, image]) => ({
+    // matches file name [...route].ts
+    params: { route: path },
+    props: { image },
+  }));
+
+  return paths;
+};
+
+export const GET: APIRoute = async ({ props }: APIContext) => {
+  const { image } = props;
+  const imageSrc = await imageMetadataToImageSources(image);
+
+  // generate blur, thumb and full size images, extract into separate function
+
+  return new Response(imageSrc); // should be json
+};