Cutlery/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-08-07 09:01:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor background image rendering in Wrapper

Browse Source
This commit is contained in:
shamoon 2025-08-01 20:51:40 -04:00
parent 085d91b3f7
commit a2e3aa7085
No known key found for this signature in database
2 changed files with 44 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/index.jsx
View File

@ -519,18 +519,6 @@ export default function Wrapper({ initialSettings, fallback }) {
} }
} }
const wrapperStyle = backgroundImage
? {
backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundAttachment: "fixed",
backgroundRepeat: "no-repeat",
}
: {
backgroundColor: "rgb(var(--bg-color))",
};
useEffect(() => { useEffect(() => {
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
@ -540,31 +528,40 @@ export default function Wrapper({ initialSettings, fallback }) {
html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light"); html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-"))); html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
const themeClass = initialSettings.color ? `theme-${initialSettings.color}` : "theme-slate"; html.classList.add(`theme-${initialSettings.color || "slate"}`);
html.classList.add(themeClass);
return () => { // Remove any previously applied inline styles
// Clean up background-related styles body.style.backgroundImage = "";
body.style.backgroundImage = ""; body.style.backgroundColor = "";
body.style.backgroundColor = ""; body.style.backgroundAttachment = "";
};
}, [backgroundImage, opacity, theme, initialSettings.color]); }, [backgroundImage, opacity, theme, initialSettings.color]);
return ( return (
<div id="page_wrapper" className="relative min-h-screen" style={wrapperStyle}> <>
<div {backgroundImage && (
id="inner_wrapper" <div
tabIndex="-1" id="background"
className={classNames( aria-hidden="true"
"w-full h-full min-h-screen overflow-auto", style={{
backgroundBlur && backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`, }}
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`, />
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`, )}
)} <div id="page_wrapper" className="relative h-full">
> <div
<Index initialSettings={initialSettings} fallback={fallback} /> id="inner_wrapper"
tabIndex="-1"
className={classNames(
"w-full h-full overflow-auto",
backgroundBlur &&
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
)}
>
<Index initialSettings={initialSettings} fallback={fallback} />
</div>
</div> </div>
</div> </>
); );
} }

14
src/styles/globals.css
View File

@ -24,11 +24,25 @@
} }
} }
html,
body,
#__next { #__next {
height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#background {
position: fixed;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
pointer-events: none;
}
html, html,
body { body {
font-family: Manrope, "Manrope-Fallback", Arial, sans-serif; font-family: Manrope, "Manrope-Fallback", Arial, sans-serif;