Fixes

Dockerfile

@@ -1,40 +1,19 @@
-# Install dependencies only when needed
-FROM node:20-alpine AS deps
-WORKDIR /app
+# Base image
+FROM node:20
 
-# Install global Prisma CLI
-RUN npm install -g prisma
+# Set working directory
+WORKDIR /app
 
 # Install dependencies
-COPY package.json package-lock.json* ./
-RUN npm ci
+COPY package.json package-lock.json ./
+RUN npm install
 
-# Copy only prisma schema to generate client early
-COPY prisma ./prisma/
+# Copy the rest of the code
+COPY . .
 RUN npx prisma generate
 
-# Builder image
-FROM node:20-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
+# Expose the dev port
+EXPOSE 3000
 
-# Build the app
-RUN npm run build
-
-# Production image
-FROM node:20-alpine AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-
-# Copy necessary files
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/package.json ./package.json
-COPY --from=builder /app/prisma ./prisma
-
-# Run migrations if needed
-# CMD npx prisma migrate deploy && node .next/standalone/server.js
-CMD node .next/standalone/server.js
+# Run dev server
+CMD ["npm", "run", "dev"]

src/app/(normal)/[gallerySlug]/[albumSlug]/[imageId]/page.tsx

@@ -2,7 +2,6 @@ import ArtistInfoBox from "@/components/images/ArtistInfoBox";
 import GlowingImageWithToggle from "@/components/images/GlowingImageWithToggle";
 import ImageMetadataBox from "@/components/images/ImageMetadataBox";
 import prisma from "@/lib/prisma";
-import Link from "next/link";
 
 export default async function ImagePage({ params }: { params: { gallerySlug: string, albumSlug: string, imageId: string } }) {
   const { imageId } = await params;
@@ -38,15 +37,15 @@ export default async function ImagePage({ params }: { params: { gallerySlug: str
           </div>
 
           {resizedVariant &&
-            <Link href={`/raw/${image.id}`} passHref>
-              <GlowingImageWithToggle
-                alt={image.imageName}
-                variant={resizedVariant}
-                colors={image.colors}
-                src={`/api/image/${resizedVariant.s3Key}`}
-                nsfw={image.nsfw}
-              />
-            </Link>
+            <GlowingImageWithToggle
+              alt={image.imageName}
+              variant={resizedVariant}
+              colors={image.colors}
+              src={`/api/image/${resizedVariant.s3Key}`}
+              nsfw={image.nsfw}
+              imageId={image.id}
+            />
+
           }
           <section className="py-8 flex flex-col gap-4">
             {image.artist && <ArtistInfoBox artist={image.artist} />}

src/app/(raw)/raw/[imageId]/page.tsx

@@ -5,7 +5,7 @@ import NextImage from "next/image";
 import { notFound } from "next/navigation";
 
 export default async function RawImagePage({ params }: { params: { imageId: string } }) {
-  const { imageId } = params;
+  const { imageId } = await params;
 
   const image = await prisma.image.findUnique({
     where: { id: imageId },

src/components/images/GlowingImageWithToggle.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Color, ImageColor, ImageVariant } from "@/generated/prisma";
+import Link from "next/link";
 import { useState } from "react";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
@@ -12,22 +13,26 @@ type Props = {
   alt: string;
   src: string;
   nsfw: boolean;
+  imageId: string;
 }
 
-export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw }: Props) {
+export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw, imageId }: Props) {
   const [animate, setAnimate] = useState(true);
   const [revealed, setRevealed] = useState(!nsfw)
 
   return (
     <div className="relative w-full max-w-fit">
-      <GlowingImageBorder
-        alt={alt}
-        variant={variant}
-        colors={colors}
-        src={src}
-        animate={animate}
-        revealed={revealed}
-      />
+
+      <Link href={`/raw/${imageId}`} passHref>
+        <GlowingImageBorder
+          alt={alt}
+          variant={variant}
+          colors={colors}
+          src={src}
+          animate={animate}
+          revealed={revealed}
+        />
+      </Link>
 
       <div className="flex flex-col items-center gap-4 pt-8">
         <div className="flex items-center gap-2">
@@ -36,14 +41,16 @@ export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw
         </div>
       </div>
 
-      {nsfw && (
-        <div className="flex flex-col items-center gap-4 pt-8">
-          <div className="flex items-center gap-2">
-            <Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
-            <Label htmlFor="animate">Reveal NSFW</Label>
+      {
+        nsfw && (
+          <div className="flex flex-col items-center gap-4 pt-8">
+            <div className="flex items-center gap-2">
+              <Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
+              <Label htmlFor="animate">Reveal NSFW</Label>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )
+      }
+    </div >
   );
 }