Add log in, images page, start mum's sim

src/app/photos/page.tsx

@@ -0,0 +1,68 @@
+import Image from "next/image";
+import { glob } from "glob";
+import sharp from 'sharp';
+import exifReader from 'exif-reader';
+import { pick } from 'radash';
+
+type ImageData = {
+  width: number,
+  height: number,
+  blur: string,
+  src: string,
+  exif: Partial<{
+    ExposureProgram: number,
+    ExposureBiasValue: number,
+    FNumber: number,
+    ISOSpeedRatings: number,
+    FocalLength: number,
+    DateTimeOriginal: Date,
+    LensModel: string
+  }>
+}
+
+export async function getImages(): Promise<{images: ImageData[]}> {
+  const photosGlob = await glob(`public/photos/**/*.{png,jpeg,jpg}`, {
+    nodir: true,
+  });
+  const images = photosGlob.map(async (fileName) => {
+    const { width, height, exif } = await sharp(fileName).metadata();
+    const blur = await sharp(fileName)
+      .resize({ width: 10, height: 10, fit: 'inside' })
+      .toBuffer();
+    const exifData = exif ? exifReader(exif) : undefined;
+    return {
+      width: width ?? 10,
+      height: height ?? 10,
+      blur: blur.toString('base64'),
+      src: fileName.slice(6),
+      exif: pick(exifData?.Photo ?? {}, ['ExposureProgram', 'ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
+    };
+  });
+  
+  return { images: await Promise.all(images) };
+}
+
+export default async function Home(): Promise<JSX.Element> {
+  const { images } = await getImages();
+
+
+  return (
+    <div className="grid gap-2 grid-cols-3">
+      {images.map((image) => (
+        <div className="relative" key={image.src}>
+          <Image
+            alt={image.src}
+            src={image.src}
+            className="object-contain h-auto w-full"
+            sizes="(min-width: 808px) 50vw, 100vw"
+            loading="lazy"
+            width={image.width}
+            height={image.height}
+            blurDataURL={`data:image/jpeg;base64,${image.blur}`}
+            placeholder={`data:image/jpeg;base64,${image.blur}`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}