apps/frontend/Dockerfile

@@ -3,37 +3,35 @@ FROM fascinated/docker-images:nodejs_20_with_pnpm AS base
 FROM base AS builder
 RUN apk update
 RUN apk add --no-cache libc6-compat
+# Set working directory
 WORKDIR /app
 
 RUN pnpm i -g turbo@^2
 COPY . .
 
+# Generate a partial monorepo with a pruned lockfile for a target workspace.
+# Assuming "frontend" is the name entered in the project's package.json: { name: "frontend" }
 RUN turbo prune frontend --docker
 
 # Add lockfile and package.json's of isolated subworkspace
 FROM base AS installer
-RUN apk update
-RUN apk add --no-cache python3 make g++ gcc pkgconfig pixman cairo-dev libjpeg-turbo-dev pango-dev giflib-dev
 WORKDIR /app
 
+# Add the commit hash
 ARG GIT_REV
 ENV GIT_REV=${GIT_REV}
 
+# Add the sentry auth token
 ARG SENTRY_AUTH_TOKEN
 ENV SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}
 
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 
-RUN pnpm i -g turbo@^2
-
-# Install dependencies after copying pruned lockfile
+# First install the dependencies (as they change less often)
 COPY --from=builder /app/out/json/ .
 RUN pnpm install --frozen-lockfile --quiet
 
-# Debug step to verify pruned output
-RUN ls -al /app/out/full
-
 # Build the project
 COPY --from=builder /app/out/full/ .
 RUN pnpm turbo run build --filter=frontend...
@@ -44,8 +42,7 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 
-RUN apk add --no-cache cairo pango libjpeg-turbo giflib
-
+# Add the commit hash
 ARG GIT_REV
 ENV GIT_REV=${GIT_REV}
 
@@ -54,9 +51,10 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 USER nextjs
 
-# Copy build output
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/.next/standalone ./
 COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/.next/static ./apps/frontend/.next/static
 COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/public ./apps/frontend/public
 
-CMD node apps/frontend/server.js
+CMD node apps/frontend/server.js

apps/frontend/src/common/image-utils.ts

@@ -1,7 +1,4 @@
-import { createCanvas, loadImage } from "canvas";
 import { config } from "../../config";
-import ky from "ky";
-import { extractColors } from "extract-colors";
 import { cache } from "react";
 
 /**
@@ -21,35 +18,5 @@ export function getImageUrl(originalUrl: string) {
  * @returns the average color
  */
 export const getAverageColor = cache(async (src: string) => {
-  const before = performance.now();
-  console.log(`Getting average color of "${src}"...`);
-  try {
-    const response = await ky.get(`https://img.fascinated.cc/upload/w_64,h_64,o_jpg/${src}`);
-    if (response.status !== 200) {
-      return undefined;
-    }
-
-    const imageBuffer = await response.arrayBuffer();
-
-    // Create an image from the buffer using canvas
-    const img = await loadImage(Buffer.from(imageBuffer));
-    const canvas = createCanvas(img.width, img.height);
-    const ctx = canvas.getContext("2d");
-
-    // Draw the image onto the canvas
-    ctx.drawImage(img, 0, 0);
-
-    // Get the pixel data from the canvas
-    const imageData = ctx.getImageData(0, 0, img.width, img.height);
-    const { data, width, height } = imageData;
-
-    // Use your extractColors function to calculate the average color
-    const color = await extractColors({ data, width, height });
-
-    console.log(`Found average color of "${src}" in ${(performance.now() - before).toFixed(0)}ms`);
-    return color[2];
-  } catch (error) {
-    console.error("Error while getting average color:", error);
-    return undefined;
-  }
+  return "#fff";
 });