Looking at adding a lightbox

2024-04-25 20:18:27 +01:00
parent 1e02cb3827
commit 6343dda1fa
14 changed files with 678 additions and 599 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,3 +1,5 @@
+import million from "million/compiler";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  swcMinify: true,
@@ -5,4 +7,8 @@ const nextConfig = {
  output: "standalone",
 };

-export default nextConfig;
+const millionConfig = {
+  auto: { rsc: true }, rsc: true
+}
+
+export default million.next(nextConfig, millionConfig);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,32 +11,31 @@
    "lint:fix": "next lint -- --fix"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.18",
    "@heroicons/react": "^2.1.3",
-    "@next/bundle-analyzer": "^14.1.4",
+    "@next/bundle-analyzer": "^14.2.2",
    "@tailwindcss/typography": "^0.5.12",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.23",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "14.1.4",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.2.2",
    "exif-reader": "^2.0.1",
-    "framer-motion": "^11.0.23",
+    "framer-motion": "^11.1.7",
    "glob": "^10.3.12",
    "million": "^3.0.6",
-    "next": "14.1.4",
+    "next": "14.2.2",
    "next-auth": "^4.24.7",
    "postcss": "^8.4.38",
    "radash": "^12.1.0",
    "react": "^18.2.0",
-    "react-datocms": "^5.0.3",
    "react-dom": "^18.2.0",
+    "react-zoom-pan-pinch": "^3.4.4",
    "server-only": "^0.0.1",
    "sharp": "^0.33.3",
    "tailwind-scrollbar": "^3.1.0",
    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.5"
  }
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
-}>): JSX.Element {
+}>): React.JSX.Element {
  return (
    <html className={`${inter.variable} font-sans`} lang="en">
      <body className="min-h-screen flex flex-col bg-dracula-bg">
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 import Sim from '@/components/sim';

-export default function Home(): JSX.Element {
+export default function Home(): React.JSX.Element {
  return (
    <>
      <Sim/>
--- a/src/app/photos/page.tsx
+++ b/src/app/photos/page.tsx
@@ -3,14 +3,15 @@ import { glob } from "glob";
 import sharp from 'sharp';
 import exifReader from 'exif-reader';
 import { pick } from 'radash';
+import Lightbox from "@/components/lightbox";

 type ImageData = {
  width: number,
  height: number,
-  blur: string,
+  blur: `data:image/${string}`,
  src: string,
+  camera?: string,
  exif: Partial<{
-    ExposureProgram: number,
    ExposureBiasValue: number,
    FNumber: number,
    ISOSpeedRatings: number,
@@ -24,30 +25,32 @@ 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' })
+      .resize({ width: 12, height: 12, fit: 'inside' })
      .toBuffer();
    const exifData = exif ? exifReader(exif) : undefined;
+
    return {
      width: width ?? 10,
      height: height ?? 10,
-      blur: blur.toString('base64'),
+      blur: `data:image/jpeg;base64,${blur.toString('base64')}` as `data:image/${string}`,
      src: fileName.slice(6),
-      exif: pick(exifData?.Photo ?? {}, ['ExposureProgram', 'ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
+      camera: exifData?.Image?.Model,
+      exif: pick(exifData?.Photo ?? {}, ['ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
    };
  });
  
  return { images: await Promise.all(images) };
 }

-export default async function Home(): Promise<JSX.Element> {
+export default async function Home(): Promise<React.JSX.Element> {
  const { images } = await getImages();

-
  return (
-    <div className="grid gap-2 grid-cols-3">
+    <Lightbox imageData={images}>
      {images.map((image) => (
        <div className="relative" key={image.src}>
          <Image
@@ -58,11 +61,11 @@ export default async function Home(): Promise<JSX.Element> {
            loading="lazy"
            width={image.width}
            height={image.height}
-            blurDataURL={`data:image/jpeg;base64,${image.blur}`}
-            placeholder={`data:image/jpeg;base64,${image.blur}`}
+            blurDataURL={image.blur}
+            placeholder={image.blur}
          />
        </div>
      ))}
-    </div>
+    </Lightbox>
  );
 }
--- a/src/components/auth/login.tsx
+++ b/src/components/auth/login.tsx
@@ -5,7 +5,7 @@ import { LogoutButton } from "./logout_button";
 /**
 * This is a server component, then the buttons are client side
 */
-export default async function LogIn(): Promise<JSX.Element | undefined> {
+export default async function LogIn(): Promise<React.JSX.Element | undefined> {
  const session = await auth();
  if (session) {
    return (
--- a/src/components/auth/login_button.tsx
+++ b/src/components/auth/login_button.tsx
@@ -2,7 +2,7 @@
 import { UserCircleIcon } from '@heroicons/react/24/outline';
 import { signIn } from "next-auth/react";

-export function LoginButton(): JSX.Element {
+export function LoginButton(): React.JSX.Element {
  return (
    <button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signIn('cognito')}>
      <UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-orange transition-colors'/>
--- a/src/components/auth/logout_button.tsx
+++ b/src/components/auth/logout_button.tsx
@@ -2,7 +2,7 @@
 import { UserCircleIcon } from '@heroicons/react/24/outline';
 import { signOut } from "next-auth/react";

-export function LogoutButton(): JSX.Element {
+export function LogoutButton(): React.JSX.Element {
  return (
    <button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signOut()}>
      <UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-red transition-colors'/>
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,4 +1,4 @@
-export default function NavBar(): JSX.Element {
+export default function NavBar(): React.JSX.Element {
  return (
    <footer className="bg-dracula-bg-darker border-t-2 border-dracula-purple">
      <div className="mx-auto max-w-7xl px-4">
--- a/src/components/lightbox.tsx
+++ b/src/components/lightbox.tsx
@@ -0,0 +1,76 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+
+type ImageData = {
+  width: number,
+  height: number,
+  blur: `data:image/${string}`,
+  src: string,
+  camera?: string,
+  exif: Partial<{
+    ExposureBiasValue: number,
+    FNumber: number,
+    ISOSpeedRatings: number,
+    FocalLength: number,
+    DateTimeOriginal: Date,
+    LensModel: string
+  }>
+}
+
+type LightboxProps = {
+  children: React.JSX.Element[],
+  imageData: ImageData[]
+}
+
+export default function Lightbox(props: LightboxProps): React.JSX.Element {
+  const [active, setActive] = useState<ImageData | null>(null);
+  return (
+    <>
+      <div className="grid gap-2 grid-cols-3">
+        {props.children.map((image, index) => (
+          <button key={`lightbox_img_${index}`} onClick={(() => {
+            setActive(props.imageData[index]);
+          })}>
+            {image}
+          </button>
+        ))}
+      </div>
+      { active ? (
+        <div className="fixed top-0 left-0 w-full h-full z-30">
+          <div className="bg-black bg-opacity-80 w-full h-full p-12">
+            <div className="flex flex-col w-full h-full">
+              <div className="p-1 mb-4">
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.DateTimeOriginal?.toLocaleDateString()}</span>
+                <button className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple" onClick={() => setActive(null)}>
+                  <span>x</span>
+                </button>
+              </div>
+              <div className="relative w-full h-full m-auto">
+                <Image
+                  alt={active.src}
+                  src={active.src}
+                  className="opacity-100 object-contain m-auto"
+                  loading="eager"
+                  unoptimized={true}
+                  fill
+                  blurDataURL={active.blur}
+                  placeholder={active.blur}
+                />
+              </div>
+              <div className="flex flex-row flex-wrap self-center justify-center gap-4 max-w-3xl mt-4">
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.camera}</span>
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.LensModel}</span>
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.FocalLength}mm</span>
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">f/{active.exif.FNumber}</span>
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">ISO {active.exif.ISOSpeedRatings}</span>
+                <span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.ExposureBiasValue}EV</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -12,7 +12,7 @@ const navigation = [
  { name: 'Contact', href: '#', current: false },
 ];

-export default function NavBar({LogIn}: {LogIn: JSX.Element}): JSX.Element {
+export default function NavBar({LogIn}: {LogIn: React.JSX.Element}): React.JSX.Element {
  const [open, setOpen] = useState(false);

  return (
--- a/src/components/sim.tsx
+++ b/src/components/sim.tsx
@@ -3,7 +3,7 @@
 import { shuffle } from "radash";
 import { FormEvent, useState, useRef, useCallback, useEffect } from "react";

-export default function Sim(): JSX.Element {
+export default function Sim(): React.JSX.Element {
  const [outputs, setOutputs] = useState<
    { runs: number; tickets: number; totalWin: number }[]
  >([]);
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,8 +15,8 @@ const config: Config = {
      colors: {
        // Nicked from the vs code version of the theme https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml
        dracula: {
-          'bglighter': '#424450',
-          'bglight': '#343746',
+          'bg-lighter': '#424450',
+          'bg-light': '#343746',
          'bg': '#282A36',
          'bg-dark': '#21222C',
          'bg-darker': '#191A21',