Photo Gallery Migration: Gatsby to Astro Follow-Up

The React Component

Since I had already done all the hard work of finding a React lightbox and creating a React component when I was using Gatsby, I decided to try and reuse as much of that code as possible.

import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import Captions from "yet-another-react-lightbox/plugins/captions";
import "yet-another-react-lightbox/plugins/captions.css";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";

import { useState } from "react";

const PhotoGallery = ({images, slides}) => {
  const [index, setIndex] = useState(-1);

  return (
    <>
      <Lightbox
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        slides={slides}
        plugins={[Captions, Zoom, Fullscreen, Slideshow]}
        captions={{ showToggle: true }}
      />
      <div className="tile is-ancestor">
        <div className="tile is-vertical">
          {images.map((imageRow, index) => {
            return (
              <div className="tile is-parent" key={index}>
                {imageRow.map((image, index) => {
                  if (!image.hasOwnProperty('nodeIndex')) {
                    throw Error("No image nodeIndex set");
                  }

                  const nodeIndex = image.nodeIndex;

                  return (
                    <div className="is-4 is-child p-2" key={index}>
                      <div
                        className="is-clickable"
                        onClick={() => setIndex(nodeIndex)}
                        onKeyDown={() => setIndex(nodeIndex)}
                        role="presentation"
                      >
                        <img className="image" alt={image.title} src={image.url} />
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default PhotoGallery;

Compared to the Gatsby component, the JSX is notably simplified. The client-side code is now separated out into a separate file. Note how the component has two properties: images and slides. The images property is a two dimensional array representing the grid of images to be displayed on the page. The slides parameter is a restructured version of the image data to match the arguments required by the Lightbox component.

The Gallery Page

The bulk of the processing for the gallery page takes place in the src/pages/gallery.astro component. As such, it’s the file with the most complex code.

Here’s the code for the page:

---
import fs from "fs";
import os from "os";
import path from "path";

import { S3Client, ListObjectsV2Command, GetObjectCommand, type S3ClientConfig } from "@aws-sdk/client-s3";
import fastExif from "fast-exif";

import Page from "../layouts/Page.astro";
import lodash from "lodash";
import type { GallerySlide, ImageNode } from "../components/types";

import PhotoGallery from "../components/PhotoGallery.jsx";

const tempDirectoryPrefix = "com.logarithmicspirals";
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), tempDirectoryPrefix));

fs.mkdirSync(path.join(tmpDir, "gallery"));

const Bucket = import.meta.env.S3_GALLERY_BUCKET_NAME;
const config: S3ClientConfig = {
  region: import.meta.env.S3_REGION,
  credentials: {
    accessKeyId: import.meta.env.S3_ACCESS_KEY_ID,
    secretAccessKey: import.meta.env.S3_SECRET_ACCESS_KEY
  }
};
const client = new S3Client(config);
const listObjectsCommand = new ListObjectsV2Command({
  Bucket,
  Prefix: "gallery/",
  StartAfter: "gallery/"
});

let imageNodes: Array<ImageNode> = new Array();

try {
  let isTruncated = true;
  let contents = "";

  console.log("Your bucket contains the following images:");

  while (isTruncated) {
    let { Contents, IsTruncated, NextContinuationToken } = await client.send(listObjectsCommand);

    if (!Contents) {
      Contents = [];
    }

    const contentsList = (await Promise.all(Contents?.map(async (c) => {
      const Key = c.Key ?? '';
      const getObjectCommand = new GetObjectCommand({ Bucket, Key });
      const object = await client.send(getObjectCommand);
      const objectPath = path.join(tmpDir, Key);
      const objectBody = (await object.Body?.transformToByteArray());

      if (objectBody) {
        fs.writeFileSync(objectPath, objectBody);
      }

      const url = `${import.meta.env.GALLERY_CLOUDFRONT_DOMAIN}/${Key}`;

      await fastExif.read(objectPath).then(exifData => {
        if (Object.hasOwn(exifData as object, "gps")) {
          throw new Error("GPS data found in image");
        }

        const title = lodash.get(exifData, ["image", "ImageDescription"], null);
        const bodyMake = lodash.get(exifData, ["image", "Make"], null);
        const bodyModel = lodash.get(exifData, ["image", "Model"], null);
        const iso = lodash.get(exifData, ["exif", "ISO"], null);
        var lensModel = lodash.get(exifData, ["exif", "LensModel"], null);
        var lensMake = lodash.get(exifData, ["exif", "LensMake"], null);
        const focalLength = lodash.get(exifData, ["exif", "FocalLength"], null);

        if (lensMake !== null) {
          lensMake = lensMake.replaceAll("\u0000", "");
        }

        if (lensModel !== null) {
          lensModel = lensModel.replaceAll("\u0000", "");
        }

        imageNodes.push({
          key: Key,
          title,
          technical: {
            bodyMake,
            bodyModel,
            focalLength,
            iso,
            lensMake,
            lensModel
          },
          url
        })
      });

      return ` • ${Key}`;
    }))).join("\n");

    contents += contentsList + "\n";
    
    isTruncated = IsTruncated ? IsTruncated : false;
    
    listObjectsCommand.input.ContinuationToken = NextContinuationToken;
  }

  console.log(contents);
} catch (err) {
  console.error(err);
}

imageNodes = imageNodes.sort((a, b) => b.key.localeCompare(a.key));

const slides: GallerySlide[] = imageNodes.map(image => {
  const {bodyMake, bodyModel, lensMake, lensModel} = image.technical;

  return {
    src: image.url,
    title: image.title,
    description: `Shot with a ${bodyMake} ${bodyModel} body and ${lensMake} ${lensModel} lens`
  }
});

const images: Array<Array<ImageNode>> = [];
images.push([]);

let imageRowIndex = 0;

for (let i = 0; i < imageNodes.length; i ++) {
  if ((i + 1) % 3 === 0) {
    images.push([]);
    imageRowIndex ++;
  }

  imageNodes[i].nodeIndex = i;

  images[imageRowIndex].push(imageNodes[i]);
}

fs.rmSync(tmpDir, { recursive: true });
---

<Page title="Photo Gallery | Logarithmic Spirals" description="Dive into the Logarithmic Spirals gallery for a visual journey through architectural wonders and natural beauty.">
  <div class="container">
    <div>
      <h1 class="title is-1 has-text-centered">Photo Gallery</h1>
      <p class="has-text-centered pb-2">
        Welcome to my photo gallery page! Here, I am excited to showcase how
        I've developed both the vision of my photographs and the function of
        my website in tandem. My goal has been to create a seamless
        integration of form and function, where each element of the website,
        from the layout to the photos, work together harmoniously. As you
        explore this gallery, I hope you'll appreciate not only the beauty
        of the photos but also the thoughtfulness behind their presentation.
        Please note that like the website, this gallery is a work in
        progress. I may add or remove photos over time to ensure that I'm
        presenting the best examples of my work. So, I invite you to come
        back often to see what new additions have been made and to continue
        exploring with me.
      </p>
      <p class="has-text-centered">
        My current style of photography is heavily influenced by my love of
        architecture and the outdoors. I enjoy capturing the beauty of the
        natural world and the built environment, and I'm always looking for
        new ways to combine the two. I also enjoy experimenting with
        different techniques, such as long exposures, to create unique
        images. I hope you enjoy my work!
      </p>
    </div>
    <hr />
    <PhotoGallery images={images} slides={slides} client:only="react" />
  </div>
</Page>

Let me break it down as a series of steps:

1. A temporary directory is created in the host system to store images downloaded from S3.
2. An S3Client instance is created.
3. A ListObjectsV2Command instance is created.
4. An array called imageNodes is created to store objects containing image data.
5. The objects in the bucket are iterated over and metadata is extracted from them using the fast-exif package. To extract the metadata, the objects are first downloaded to the temporary directory created in step one.
6. The images are sorted based on their filenames.
7. The slides array is created with objects containing the properties required by yet-another-react-lightbox.
8. The image nodes are restructured into a two-dimensional array called images which will be used to create the image grid on the gallery page.
9. The temporary directory is removed from the host system.
10. The slides and images arrays are passed to the PhotoGallery component.

Note the code for step five was written using the “List objects in a bucket” example from the Amazon S3 examples using SDK for JavaScript (v3) as a starting point.

Now, one weird part is the images are remote so we have to combine the CloudFront domain with the image filename to create the URL:

const url = `${import.meta.env.GALLERY_CLOUDFRONT_DOMAIN}/${Key}`;

This URL is then used by the PhotoGallery component to create the image element on the page.

Now, there is one big drawback to this approach and that is the redownloading of images from S3 while developing in dev mode.

export type ImageNode = {
  key: string,
  title: string,
  technical: {
    bodyMake: string,
    bodyModel: string,
    focalLength: string,
    iso: string,
    lensMake: string,
    lensModel: string
  },
  url: string,
  nodeIndex?: number
}

export type GallerySlide = {
  src: string,
  title: string,
  description: string
}