Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

7
Some checks failed
Deploy Frontend / deploy (push) Failing after 55s
Details

Browse Source
This commit is contained in:
Lee 2024-10-04 12:13:20 +01:00
parent 9d5caf3523
commit 5ae657dcd2
2 changed files with 11 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/frontend/Dockerfile
View File

@ -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

35
apps/frontend/src/common/image-utils.ts
View File

@ -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";
});