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