add support for static background colors
All checks were successful
Deploy / deploy (push) Successful in 5m39s

This commit is contained in:
Lee 2024-10-01 21:10:30 +01:00
parent 8f0a7d2dd0
commit 5e84e553a1
2 changed files with 13 additions and 3 deletions

@ -8,7 +8,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
import { AnimatePresence } from "framer-motion"; import { AnimatePresence } from "framer-motion";
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import localFont from "next/font/local"; import localFont from "next/font/local";
import BackgroundImage from "../components/background-image"; import BackgroundCover from "../components/background-cover";
import DatabaseLoader from "../components/loaders/database-loader"; import DatabaseLoader from "../components/loaders/database-loader";
import NavBar from "../components/navbar/navbar"; import NavBar from "../components/navbar/navbar";
import { Colors } from "@/common/colors"; import { Colors } from "@/common/colors";
@ -72,7 +72,7 @@ export default function RootLayout({
<Script defer data-domain="ssr.fascinated.cc" src="https://analytics.fascinated.cc/js/script.js" /> <Script defer data-domain="ssr.fascinated.cc" src="https://analytics.fascinated.cc/js/script.js" />
<DatabaseLoader> <DatabaseLoader>
<Toaster /> <Toaster />
<BackgroundImage /> <BackgroundCover />
<PreloadResources /> <PreloadResources />
<TooltipProvider delayDuration={100}> <TooltipProvider delayDuration={100}>
<OfflineNetwork> <OfflineNetwork>

@ -5,7 +5,7 @@ import { config } from "../../config";
import { getImageUrl } from "@/common/image-utils"; import { getImageUrl } from "@/common/image-utils";
import useDatabase from "../hooks/use-database"; import useDatabase from "../hooks/use-database";
export default function BackgroundImage() { export default function BackgroundCover() {
const database = useDatabase(); const database = useDatabase();
const settings = useLiveQuery(() => database.getSettings()); const settings = useLiveQuery(() => database.getSettings());
@ -25,6 +25,16 @@ export default function BackgroundImage() {
backgroundImage = config.siteUrl + "/" + backgroundImage; backgroundImage = config.siteUrl + "/" + backgroundImage;
} }
// Static background color
if (backgroundImage.startsWith("#")) {
return (
<div
className={`fixed -z-50 object-cover w-screen h-screen pointer-events-none select-none`}
style={{ backgroundColor: backgroundImage }}
/>
);
}
return ( return (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img