Added a nicer homepage image experience with randomization

Kareadita · Nov 18, 2024 · 5ce5a25 · 5ce5a25
1 parent 726adde
commit 5ce5a25
Show file tree

Hide file tree

Showing 24 changed files with 53 additions and 20 deletions.
diff --git a/components/AppPreview.tsx b/components/AppPreview.tsx
@@ -1,27 +1,37 @@
-import { motion } from 'framer-motion'
-import { useTheme } from 'nextra-theme-docs'
-import { useEffect } from 'react'
+import { useEffect, useState, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { useTheme } from 'next-themes';
 
 export default function AppPreview() {
-	const { resolvedTheme } = useTheme()
+	const { resolvedTheme, systemTheme } = useTheme();
+	const [isThemeResolved, setIsThemeResolved] = useState(false);
 
-	//* This is a workaround to preload the other image in the background so if a user
-	//* switches themes, the image will already be loaded and there won't be a stutter.
-	// ! NOTE: There is a chance that 'system' will pop up first, only then resolving to
-	// ! either 'dark' or 'light'. I don't see this as much of an issue, TBH.
 	useEffect(() => {
-		let imageUrl = 'homepage-light2.png'
-		if (resolvedTheme == 'dark') {
-			imageUrl = 'homepage-dark2.png'
+		if (resolvedTheme || systemTheme) {
+			setIsThemeResolved(true);
 		}
+	}, [resolvedTheme, systemTheme]);
 
-		const image = new Image()
-		image.src = `/${imageUrl}`
-	}, [resolvedTheme])
+	const getRandomImageClass = (theme) => {
+		const darkClasses = [
+			'bg-dark2', 'bg-dark3', 'bg-dark4', 'bg-dark5',
+			'bg-dark6', 'bg-dark7', 'bg-dark8', 'bg-dark9',
+		];
+		const lightClasses = [
+			'bg-light2', 'bg-light3', 'bg-light4', 'bg-light5',
+			'bg-light6', 'bg-light7', 'bg-light8', 'bg-light9',
+			'bg-light10', 'bg-light11', 'bg-light12', 'bg-light13',
+		];
 
-	const backgroundImageClass = resolvedTheme === 'dark'
-		? "dark:bg-[url('/homepage-dark2.png')]"
-		: "bg-[url('/homepage-light2.png')]";
+		const classes = theme === 'dark' ? darkClasses : lightClasses;
+		return classes[Math.floor(Math.random() * classes.length)];
+	};
+
+	const backgroundImageClass = useMemo(() => getRandomImageClass(resolvedTheme), [resolvedTheme]);
+
+	if (!isThemeResolved) {
+		return <div className="h-[432px] lg:h-[700px]" />;
+	}
 
 	return (
 		<div className="relative -mt-7 h-[432px] w-full sm:p-0 lg:h-[700px]">
@@ -34,5 +44,5 @@ export default function AppPreview() {
 				/>
 			</div>
 		</div>
-	)
+	);
 }
diff --git a/public/homepage-dark.png b/public/homepage-dark.png
diff --git a/public/homepage-dark.webp b/public/homepage-dark.webp
diff --git a/public/homepage-dark2.png b/public/homepage-dark2.png
diff --git a/public/homepage-dark3.png b/public/homepage-dark3.png
diff --git a/public/homepage-dark4.png b/public/homepage-dark4.png
diff --git a/public/homepage-dark5.png b/public/homepage-dark5.png
diff --git a/public/homepage-dark6.png b/public/homepage-dark6.png
diff --git a/public/homepage-dark7.png b/public/homepage-dark7.png
diff --git a/public/homepage-dark8.png b/public/homepage-dark8.png
diff --git a/public/homepage-dark9.png b/public/homepage-dark9.png
diff --git a/public/homepage-light10.png b/public/homepage-light10.png
diff --git a/public/homepage-light11.png b/public/homepage-light11.png
diff --git a/public/homepage-light12.png b/public/homepage-light12.png
diff --git a/public/homepage-light13.png b/public/homepage-light13.png
diff --git a/public/homepage-light3.png b/public/homepage-light3.png
diff --git a/public/homepage-light4.png b/public/homepage-light4.png
diff --git a/public/homepage-light5.png b/public/homepage-light5.png
diff --git a/public/homepage-light6.png b/public/homepage-light6.png
diff --git a/public/homepage-light7.png b/public/homepage-light7.png
diff --git a/public/homepage-light8.png b/public/homepage-light8.png
diff --git a/public/homepage-light9.png b/public/homepage-light9.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,6 +9,29 @@ module.exports = {
 	darkMode: 'class',
 	plugins: [],
 	theme: {
-		extend: {},
+		extend: {
+			backgroundImage: {
+				'dark2': "url('/homepage-dark2.png')",
+				'dark3': "url('/homepage-dark3.png')",
+				'dark4': "url('/homepage-dark4.png')",
+				'dark5': "url('/homepage-dark5.png')",
+				'dark6': "url('/homepage-dark6.png')",
+				'dark7': "url('/homepage-dark7.png')",
+				'dark8': "url('/homepage-dark8.png')",
+				'dark9': "url('/homepage-dark9.png')",
+				'light2': "url('/homepage-light2.png')",
+				'light3': "url('/homepage-light3.png')",
+				'light4': "url('/homepage-light4.png')",
+				'light5': "url('/homepage-light5.png')",
+				'light6': "url('/homepage-light6.png')",
+				'light7': "url('/homepage-light7.png')",
+				'light8': "url('/homepage-light8.png')",
+				'light9': "url('/homepage-light9.png')",
+				'light10': "url('/homepage-light10.png')",
+				'light11': "url('/homepage-light11.png')",
+				'light12': "url('/homepage-light12.png')",
+				'light13': "url('/homepage-light13.png')",
+			},
+		},
 	},
 }
diff --git a/theme.config.tsx b/theme.config.tsx
@@ -45,7 +45,7 @@ export default {
 			<meta property="og:description" content="Lightning fast with a slick design, Kavita is a rocket fueled self-hosted digital library which supports a vast array of file formats." />
 			<meta property="og:url" content="https://wiki.kavitareader.com/" />
 			<meta property="og:type" content="website" />
-			<meta property="og:image" content="https://raw.githubusercontent.com/Kareadita/Wiki-Nextra/main/public/homepage-dark.webp" />
+			<meta property="og:image" content="https://raw.githubusercontent.com/Kareadita/Wiki-Nextra/main/public/homepage-dark3.png" />
 			<meta property="og:image:alt" content="Kavita Wiki" />
 			<meta property="og:image:type" content="image/webp" />
 			<meta property="og:image:width" content="1332" />