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

fix: Make trianglify/canvas optional and handle gracefully

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

5
docker/frontend.Dockerfile
View File

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

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

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

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

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