feat: add exif data to image tags

src/components/Image.astro

@@ -1,7 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Picture as AstroImage } from "astro:assets";
-import { generateThumbHash } from "@helpers/image";
+import { generateThumbHash, getExifData } from "@helpers/image";
 interface Props {
   src: ImageMetadata;
   alt: string;
@@ -24,6 +24,8 @@ const {
 
 let thumbhash = hash ? await generateThumbHash(image) : "";
 
+let exif = await getExifData(image);
+
 const sizes = [
   {
     width: 240,
@@ -47,6 +49,7 @@ const sizes = [
   src={image}
   alt={alt}
   data-thumbhash={thumbhash}
+  data-exif={JSON.stringify(exif)}
   pictureAttributes={{
     class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
   }}

src/components/ImageGallery.svelte

@@ -150,6 +150,7 @@
       try {
         let rawExif = image.getAttribute("data-exif");
         exif = JSON.parse(rawExif);
+        console.log(exif);
       } catch (error) {
         // No biggie
       }
@@ -187,8 +188,7 @@
           class:active={currentIndex === i}
           on:click={() => {
             currentIndex = i;
-          }}
-        />
+          }} />
       {/each}
     </div>
   {/if}
@@ -204,21 +204,18 @@
       on:swipe={handleSwipe}
       on:wheel|passive={handleScroll}
       on:mousemove={handleMouseMove}
-      on:pointermove={handlePointerMove}
-    >
+      on:pointermove={handlePointerMove}>
       {#if progress[currentIndex] && progress[currentIndex] < 0.99}
         <div
           transition:fade
           id="progress"
-          style={`transform: scaleX(${progress[currentIndex]});`}
-        />
+          style={`transform: scaleX(${progress[currentIndex]});`} />
       {/if}
 
       <img
         class="background"
         src={images[currentIndex].preview}
-        alt="background blur"
-      />
+        alt="background blur" />
 
       <span>
         <img
@@ -227,15 +224,14 @@
           }px ${window.innerHeight - my}px`}
           srcset={images[currentIndex].loaded ? "" : images[currentIndex].src}
           src={images[currentIndex].loaded}
-          alt={images[currentIndex].alt}
-        />
+          alt={images[currentIndex].alt} />
       </span>
     </div>
     {#if images[currentIndex].exif}
       {@const exif = images[currentIndex].exif}
       <div class="exif" on:click={() => console.log(exif)}>
         {#if "FocalLength" in exif}
-          {exif.FocalLength}mm |
+          {exif.FocalLength} |
         {/if}
 
         {#if "FNumber" in exif}