From 285e4c59eea39186912b4924e4c7c5895baf97b4 Mon Sep 17 00:00:00 2001
From: Muhammad Ibrahim <iby@9.technology>
Date: Tue, 28 Oct 2025 17:36:18 +0000
Subject: [PATCH] fix: Install canvas build dependencies to make trianglify
 work

Canvas requires native build tools to compile:
- python3: For node-gyp
- make, g++, pkgconfig: C++ compiler and build tools
- cairo-dev, jpeg-dev, pango-dev, giflib-dev: Native libraries

By installing these dependencies before npm install, canvas can properly
build its native bindings for both AMD64 and ARM64 architectures.

Removed try-catch blocks around trianglify since it should now work properly.
---
 docker/frontend.Dockerfile         |  7 +++---
 frontend/src/components/Layout.jsx | 35 +++++++++++++-----------------
 frontend/src/pages/Login.jsx       | 35 +++++++++++++-----------------
 3 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/docker/frontend.Dockerfile b/docker/frontend.Dockerfile
index d9379a9..c4e2806 100644
--- a/docker/frontend.Dockerfile
+++ b/docker/frontend.Dockerfile
@@ -17,15 +17,16 @@ CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000"]
 # Builder stage for production
 FROM node:lts-alpine AS builder
 
+# Install build dependencies for canvas
+RUN apk add --no-cache python3 make g++ pkgconfig cairo-dev jpeg-dev pango-dev giflib-dev
+
 WORKDIR /app/frontend
 
 COPY frontend/package*.json ./
 
 RUN npm cache clean --force &&\
     rm -rf node_modules ~/.npm /root/.npm &&\
-    npm install --legacy-peer-deps --no-audit --prefer-online --fetch-retries=3 --fetch-retry-mintimeout=20000 --fetch-retry-maxtimeout=120000 --ignore-scripts &&\
-    echo "package.json" > node_modules/.gitignore &&\
-    echo "Express cors and trianglify are not needed in production build" || true
+    npm install --legacy-peer-deps --no-audit --prefer-online --fetch-retries=3 --fetch-retry-mintimeout=20000 --fetch-retry-maxtimeout=120000
 
 COPY frontend/ ./
 
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index b161ccc..9833914 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -245,28 +245,23 @@ const Layout = ({ children }) => {
 				themeConfig?.login &&
 				document.documentElement.classList.contains("dark")
 			) {
-				try {
-					// Get current date as seed for daily variation
-					const today = new Date();
-					const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+				// Get current date as seed for daily variation
+				const today = new Date();
+				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
 
-					// Generate pattern with selected theme configuration
-					const pattern = trianglify({
-						width: window.innerWidth,
-						height: window.innerHeight,
-						cellSize: themeConfig.login.cellSize,
-						variance: themeConfig.login.variance,
-						seed: dateSeed,
-						xColors: themeConfig.login.xColors,
-						yColors: themeConfig.login.yColors,
-					});
+				// Generate pattern with selected theme configuration
+				const pattern = trianglify({
+					width: window.innerWidth,
+					height: window.innerHeight,
+					cellSize: themeConfig.login.cellSize,
+					variance: themeConfig.login.variance,
+					seed: dateSeed,
+					xColors: themeConfig.login.xColors,
+					yColors: themeConfig.login.yColors,
+				});
 
-					// Render to canvas
-					pattern.toCanvas(bgCanvasRef.current);
-				} catch (error) {
-					// Silently fail if trianglify/canvas is not available
-					console.debug("Trianglify background not available:", error.message);
-				}
+				// Render to canvas
+				pattern.toCanvas(bgCanvasRef.current);
 			}
 		};
 
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index a4d4f9d..03c5054 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -61,28 +61,23 @@ const Login = () => {
 	useEffect(() => {
 		const generateBackground = () => {
 			if (canvasRef.current && themeConfig?.login) {
-				try {
-					// Get current date as seed for daily variation
-					const today = new Date();
-					const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+				// Get current date as seed for daily variation
+				const today = new Date();
+				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
 
-					// Generate pattern with selected theme configuration
-					const pattern = trianglify({
-						width: canvasRef.current.offsetWidth,
-						height: canvasRef.current.offsetHeight,
-						cellSize: themeConfig.login.cellSize,
-						variance: themeConfig.login.variance,
-						seed: dateSeed,
-						xColors: themeConfig.login.xColors,
-						yColors: themeConfig.login.yColors,
-					});
+				// Generate pattern with selected theme configuration
+				const pattern = trianglify({
+					width: canvasRef.current.offsetWidth,
+					height: canvasRef.current.offsetHeight,
+					cellSize: themeConfig.login.cellSize,
+					variance: themeConfig.login.variance,
+					seed: dateSeed,
+					xColors: themeConfig.login.xColors,
+					yColors: themeConfig.login.yColors,
+				});
 
-					// Render to canvas
-					pattern.toCanvas(canvasRef.current);
-				} catch (error) {
-					// Silently fail if trianglify/canvas is not available
-					console.debug("Trianglify background not available:", error.message);
-				}
+				// Render to canvas
+				pattern.toCanvas(canvasRef.current);
 			}
 		};