feat(gallery): load and display exif data

app/components/GalleryModal.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-type ImageMetadata = {
+import type { InternalApi } from "nitropack/types";
-  url: string;
-  date: string;
-  camera: string;
-  lens: string;
-  settings?: {
-    aperture?: string;
-    shutter?: string;
-    iso?: string;
-    focalLength?: string;
-  };
-};
 
 const props = defineProps<{
-  images: ImageMetadata[];
+  images: InternalApi["/api/gallery"]["get"][number][];
   initialIndex: number;
 }>();
 
@@ -76,24 +65,16 @@ const currentIndex = ref(props.initialIndex);
           <div
             class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
           >
-            <span>{{ item.date }}</span>
+            <span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
             <span class="text-white/50">|</span>
-            <span>{{ item.camera }}</span>
+            <span>{{ item.exif.camera }}</span>
             <span class="text-white/50">|</span>
-            <span>{{ item.lens }}</span>
+            <span>{{ item.exif.lens }}</span>
-            <template v-if="item.settings">
             <span class="text-white/50">|</span>
-              <span v-if="item.settings.aperture">{{
+            <span>{{ item.exif.settings.aperture }}</span>
-                item.settings.aperture
+            <span>{{ item.exif.settings.shutter }}</span>
-              }}</span>
+            <span>ISO {{ item.exif.settings.iso }}</span>
-              <span v-if="item.settings.shutter">{{
+            <span>{{ item.exif.settings.focalLength }}</span>
-                item.settings.shutter
-              }}</span>
-              <span v-if="item.settings.iso">ISO {{ item.settings.iso }}</span>
-              <span v-if="item.settings.focalLength">{{
-                item.settings.focalLength
-              }}</span>
-            </template>
           </div>
         </UCarousel>
 

app/pages/gallery.vue

@@ -1,213 +1,78 @@
 <script setup lang="ts">
 import { LazyGalleryModal } from "#components";
+import type { InternalApi } from "nitropack/types";
 
-type ImageMetadata = {
+const images = ref<InternalApi["/api/gallery"]["get"]>([]);
-  url: string;
-  date: string;
-  camera: string;
-  lens: string;
-  settings?: {
-    aperture?: string;
-    shutter?: string;
-    iso?: string;
-    focalLength?: string;
-  };
-};
-
-const images: ImageMetadata[] = [
-  {
-    url: "https://picsum.photos/640/640?random=1",
-    date: "March 7, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/640/800?random=2",
-    date: "March 8, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/800/640?random=3",
-    date: "March 10, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/1000/640?random=4",
-    date: "March 12, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/640/400?random=5",
-    date: "March 15, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/640/800?random=6",
-    date: "March 18, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/810/640?random=7",
-    date: "March 20, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/760/640?random=8",
-    date: "March 22, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/640/900?random=9",
-    date: "March 25, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/1000/640?random=10",
-    date: "March 28, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-  {
-    url: "https://picsum.photos/640/600?random=11",
-    date: "March 30, 2025",
-    camera: "Olympus EPL-7",
-    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
-    settings: {
-      aperture: "f/10",
-      shutter: "1/250s",
-      iso: "500",
-      focalLength: "60mm",
-    },
-  },
-];
-
-const columnCount = ref(3);
-
-const getColumnImages = (columnNumber: number) =>
-  images.filter((_, index) => index % columnCount.value === columnNumber - 1);
-
-const updateColumns = () => {
-  if (window.innerWidth < 768) {
-    columnCount.value = 1;
-  } else if (window.innerWidth < 1152) {
-    columnCount.value = 2;
-  } else {
-    columnCount.value = 3;
-  }
-};
 
+const scrollArea = ref();
 const overlay = useOverlay();
 const galleryModal = overlay.create(LazyGalleryModal);
 
-const openModal = async (image: ImageMetadata) => {
+const openModal = async (index: number) => {
-  const index = images.indexOf(image);
-  if (index !== -1) {
   const instance = galleryModal.open({
-      images,
+    images: images.value,
     initialIndex: index,
   });
 
   const newIndex: number = await instance.result;
-    if (newIndex !== index) {
+  if (newIndex !== index && scrollArea.value?.virtualizer) {
-      const targetElement = document.querySelector(
+    scrollArea.value.virtualizer.scrollToIndex(newIndex, {
-        `[data-image-index="${newIndex}"]`,
+      align: "center",
-      );
+      behavior: "instant",
-      if (targetElement) {
+    });
-        targetElement.scrollIntoView({ behavior: "instant", block: "center" });
-      }
-    }
   }
 };
 
+const lanes = ref(3);
+
+const updateLanes = () => {
+  if (window.innerWidth < 768) {
+    lanes.value = 1;
+  } else if (window.innerWidth < 1152) {
+    lanes.value = 2;
+  } else {
+    lanes.value = 3;
+  }
+};
+
+const { data: galleryPhotos } = await useAsyncData("gallery", () =>
+  $fetch("/api/gallery"),
+);
+
 onMounted(() => {
-  updateColumns();
+  if (!galleryPhotos.value) return;
-  window.addEventListener("resize", updateColumns);
+
+  // shuffle
+  images.value = galleryPhotos.value
+    .map((photo) => ({ photo, sort: Math.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ photo }) => photo);
+
+  updateLanes();
+  window.addEventListener("resize", updateLanes);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", updateColumns);
+  window.removeEventListener("resize", updateLanes);
 });
 </script>
 
 <template>
-  <div
+  <UScrollArea
-    class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono]"
+    ref="scrollArea"
+    :items="images"
+    :virtualize="{
+      lanes,
+      gap: 24,
+      estimateSize: (index) => {
+        if (index === 0) return 150;
+        return 330;
+      },
+    }"
+    class="p-6 lg:p-8 xl:p-10 2xl:p-12 h-screen bg-[#0a0a0a] text-white font-[JetBrains_Mono]"
   >
-    <div class="flex gap-6">
+    <template #default="{ item: image, index }">
-      <div
+      <header v-if="index === 0" class="pr-2 pb-6">
-        v-for="col in columnCount"
-        :key="col"
-        class="flex-1 flex flex-col gap-6"
-      >
-        <header v-if="col === 1" class="pr-2 pb-6">
         <UButton
           icon="i-lucide-arrow-left"
           size="md"
@@ -222,23 +87,22 @@ onUnmounted(() => {
 
         <h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
         <p class="text-neutral-600 text-sm mt-2 w-4/5">
-            Started on March 7th, 2025. I love macro photography of insects and
+          Started on March 2025. I love macro photography of insects and
           flowers.
         </p>
       </header>
+
       <div
-          v-for="(image, idx) in getColumnImages(col)"
+        v-else
-          :key="idx"
+        class="relative overflow-hidden rounded-sm cursor-pointer"
-          :data-image-index="images.indexOf(image)"
+        @click="openModal(index)"
-          class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
-          @click="openModal(image)"
       >
         <img
           :src="image.url"
+          loading="lazy"
           class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
         />
       </div>
-      </div>
+    </template>
-    </div>
+  </UScrollArea>
-  </div>
 </template>

package.json

@@ -15,6 +15,7 @@
     "@tresjs/cientos": "^5.1.2",
     "@tresjs/core": "^5.2.0",
     "@tresjs/nuxt": "^5.1.2",
+    "exifr": "^7.1.3",
     "gsap": "3.13.0",
     "pinia": "3.0.4",
     "tailwindcss": "^4.1.18",

pnpm-lock.yaml

@@ -16,6 +16,9 @@ importers:
       "@tresjs/nuxt":
         specifier: ^5.1.2
         version: 5.1.2(f1341efb47d1338baf7454f3b929107c)
+      exifr:
+        specifier: ^7.1.3
+        version: 7.1.3
       gsap:
         specifier: 3.13.0
         version: 3.13.0
@@ -5572,6 +5575,12 @@ packages:
       }
     engines: { node: ">=16.17" }
 
+  exifr@7.1.3:
+    resolution:
+      {
+        integrity: sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==,
+      }
+
   expand-template@2.0.3:
     resolution:
       {
@@ -14097,6 +14106,8 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
+  exifr@7.1.3: {}
+
   expand-template@2.0.3: {}
 
   exsolve@1.0.8: {}

server/api/gallery.get.ts

@@ -0,0 +1,82 @@
+import { readdir } from "fs/promises";
+import { join } from "path";
+import exifr from "exifr";
+import { z } from "zod";
+
+const exifSchema = z.object({
+  DateTimeOriginal: z.date(),
+  Make: z.string(),
+  Model: z.string(),
+  LensModel: z.string(),
+  FNumber: z.number(),
+  ExposureTime: z.number(),
+  ISO: z.number(),
+  FocalLength: z.number(),
+});
+
+export default defineCachedEventHandler(
+  async () => {
+    const publicDir = join(process.cwd(), "public/gallery");
+
+    try {
+      const files = await readdir(publicDir);
+      const imageFiles = files.filter((file) =>
+        /\.(jpg|jpeg|png|webp)$/i.test(file),
+      );
+
+      const imagesWithExif = await Promise.all(
+        imageFiles.map(async (filename) => {
+          const filePath = join(publicDir, filename);
+          const rawExif = await exifr.parse(filePath, {
+            tiff: true,
+            exif: true,
+            gps: false,
+            interop: false,
+            ifd1: false,
+          });
+
+          const exif = exifSchema.parse(rawExif);
+
+          return {
+            filename,
+            url: `/gallery/${filename}`,
+            exif: {
+              date: exif.DateTimeOriginal,
+              camera: `${exif.Make} ${exif.Model}`,
+              lens: exif.LensModel,
+              settings: {
+                aperture: `f/${exif.FNumber}`,
+                shutter: `1/${Math.round(1 / exif.ExposureTime)}s`,
+                iso: String(exif.ISO),
+                focalLength: `${exif.FocalLength}mm`,
+              },
+            },
+          };
+        }),
+      );
+
+      return imagesWithExif;
+    } catch (err) {
+      console.log(err);
+      throw createError({
+        statusCode: 500,
+        message: "Failed to read gallery directory",
+      });
+    }
+  },
+  {
+    maxAge: 60 * 60 * 24,
+    getKey: async () => {
+      const publicDir = join(process.cwd(), "public/gallery");
+      try {
+        const files = await readdir(publicDir);
+        const imageFiles = files.filter((file) =>
+          /\.(jpg|jpeg|png|webp)$/i.test(file),
+        );
+        return `gallery:${imageFiles.length}`;
+      } catch {
+        return "gallery:0";
+      }
+    },
+  },
+);