Merge pull request #330 from IrisShaders/banner-image

feat: Randomized Banner Images
IrisShaders · Sep 30, 2024 · 991cb24 · 991cb24
2 parents 16a4b15 + bbda104
commit 991cb24
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 3 deletions.
diff --git a/public/banners/1.webp b/public/banners/1.webp
diff --git a/public/banners/2.webp b/public/banners/2.webp
diff --git a/public/banners/3.webp b/public/banners/3.webp
diff --git a/public/banners/4.webp b/public/banners/4.webp
diff --git a/public/banners/5.webp b/public/banners/5.webp
diff --git a/public/banners/6.webp b/public/banners/6.webp
diff --git a/src/assets/banner.webp b/src/assets/banner.webp
diff --git a/src/components/BannerImage.astro b/src/components/BannerImage.astro
@@ -0,0 +1,20 @@
+---
+import fs from 'fs';
+
+import type { Props } from '@astrojs/starlight/props';
+
+const imageFiles = fs.readdirSync("./public/banners");
+---
+
+<div id="banner-img">a</div>
+
+<script define:vars={{imageFiles}}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const bannerImage = document.querySelector("#banner-img");
+    const randomIndex = Math.floor(Math.random() * imageFiles.length);
+    const randomImage = `/banners/${imageFiles[randomIndex]}`;
+
+    bannerImage.style.backgroundImage = `url(${randomImage})`;
+  });
+</script>
+
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
@@ -23,7 +23,9 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-<div class="bg-img"></div>
+import BannerImage from '../../components/BannerImage.astro'
+
+<BannerImage />
 
 ## Get Started
 

diff --git a/src/styles/root.css b/src/styles/root.css
@@ -32,16 +32,16 @@
 	--background-image-opacity: 1.0;
 }
 
-.bg-img {
+#banner-img {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 130vh;
 	opacity: var(--background-image-opacity);
-	background: url(../assets/banner.webp);
 	background-repeat: no-repeat;
 	background-size: cover;
+	background-position: center;
 	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
 	z-index: -1;
 }