From 9050595b7c432608ce2c4b19986ec63cb5b944a8 Mon Sep 17 00:00:00 2001
From: Muhammad Ibrahim <iby@9.technology>
Date: Tue, 28 Oct 2025 17:35:15 +0000
Subject: [PATCH] fix: Make trianglify/canvas optional and handle gracefully

Canvas requires Python and native build tools which fail in Docker builds
with --ignore-scripts. Since trianglify is only used for cosmetic backgrounds
on the login and layout pages, we can make it optional.

Changes:
- Added try-catch around trianglify usage in Login and Layout
- Using --ignore-scripts in frontend Dockerfile to skip canvas native build
- Gracefully fail when trianglify is not available (background won't render)

This allows the frontend to build and run even without canvas/trianglify.
---
 docker/frontend.Dockerfile         |  5 +++--
 frontend/src/components/Layout.jsx | 35 +++++++++++++++++-------------
 frontend/src/pages/Login.jsx       | 35 +++++++++++++++++-------------
 3 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/docker/frontend.Dockerfile b/docker/frontend.Dockerfile
index 523cda5..d9379a9 100644
--- a/docker/frontend.Dockerfile
+++ b/docker/frontend.Dockerfile
@@ -23,8 +23,9 @@ 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 &&\
-    (npm rebuild canvas || echo "Canvas rebuild failed, continuing without native bindings")
+    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
 
 COPY frontend/ ./
 
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 9833914..b161ccc 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -245,23 +245,28 @@ const Layout = ({ children }) => {
 				themeConfig?.login &&
 				document.documentElement.classList.contains("dark")
 			) {
-				// Get current date as seed for daily variation
-				const today = new Date();
-				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+				try {
+					// 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);
+					// 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);
+				}
 			}
 		};
 
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 03c5054..a4d4f9d 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -61,23 +61,28 @@ const Login = () => {
 	useEffect(() => {
 		const generateBackground = () => {
 			if (canvasRef.current && themeConfig?.login) {
-				// Get current date as seed for daily variation
-				const today = new Date();
-				const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+				try {
+					// 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);
+					// 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);
+				}
 			}
 		};