paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-11-16 03:41:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Install canvas build dependencies to make trianglify work

Browse Source 
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.
This commit is contained in:
Muhammad Ibrahim
2025-10-28 17:36:18 +00:00
parent 9050595b7c
commit 285e4c59ee
3 changed files with 34 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docker/frontend.Dockerfile
View File

@@ -17,15 +17,16 @@ CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000"]
# Builder stage for production # Builder stage for production
FROM node:lts-alpine AS builder 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 WORKDIR /app/frontend
COPY frontend/package*.json ./ COPY frontend/package*.json ./
RUN npm cache clean --force &&\ RUN npm cache clean --force &&\
rm -rf node_modules ~/.npm /root/.npm &&\ 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 &&\ npm install --legacy-peer-deps --no-audit --prefer-online --fetch-retries=3 --fetch-retry-mintimeout=20000 --fetch-retry-maxtimeout=120000
echo "package.json" > node_modules/.gitignore &&\
echo "Express cors and trianglify are not needed in production build" || true
COPY frontend/ ./ COPY frontend/ ./

35
frontend/src/components/Layout.jsx
View File

@@ -245,28 +245,23 @@ const Layout = ({ children }) => {
themeConfig?.login && themeConfig?.login &&
document.documentElement.classList.contains("dark") document.documentElement.classList.contains("dark")
) { ) {
try { // Get current date as seed for daily variation
// Get current date as seed for daily variation const today = new Date();
const today = new Date(); const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
// Generate pattern with selected theme configuration // Generate pattern with selected theme configuration
const pattern = trianglify({ const pattern = trianglify({
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
cellSize: themeConfig.login.cellSize, cellSize: themeConfig.login.cellSize,
variance: themeConfig.login.variance, variance: themeConfig.login.variance,
seed: dateSeed, seed: dateSeed,
xColors: themeConfig.login.xColors, xColors: themeConfig.login.xColors,
yColors: themeConfig.login.yColors, yColors: themeConfig.login.yColors,
}); });
// Render to canvas // Render to canvas
pattern.toCanvas(bgCanvasRef.current); pattern.toCanvas(bgCanvasRef.current);
} catch (error) {
// Silently fail if trianglify/canvas is not available
console.debug("Trianglify background not available:", error.message);
}
} }
}; };

35
frontend/src/pages/Login.jsx
View File

@@ -61,28 +61,23 @@ const Login = () => {
useEffect(() => { useEffect(() => {
const generateBackground = () => { const generateBackground = () => {
if (canvasRef.current && themeConfig?.login) { if (canvasRef.current && themeConfig?.login) {
try { // Get current date as seed for daily variation
// Get current date as seed for daily variation const today = new Date();
const today = new Date(); const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
const dateSeed = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
// Generate pattern with selected theme configuration // Generate pattern with selected theme configuration
const pattern = trianglify({ const pattern = trianglify({
width: canvasRef.current.offsetWidth, width: canvasRef.current.offsetWidth,
height: canvasRef.current.offsetHeight, height: canvasRef.current.offsetHeight,
cellSize: themeConfig.login.cellSize, cellSize: themeConfig.login.cellSize,
variance: themeConfig.login.variance, variance: themeConfig.login.variance,
seed: dateSeed, seed: dateSeed,
xColors: themeConfig.login.xColors, xColors: themeConfig.login.xColors,
yColors: themeConfig.login.yColors, yColors: themeConfig.login.yColors,
}); });
// Render to canvas // Render to canvas
pattern.toCanvas(canvasRef.current); pattern.toCanvas(canvasRef.current);
} catch (error) {
// Silently fail if trianglify/canvas is not available
console.debug("Trianglify background not available:", error.message);
}
} }
}; };