Add a banner if theres a new version since last visit

Author: xPaw

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
 	"vcs": {
 		"enabled": false,
 		"clientKind": "git",

index.html

@@ -123,6 +123,9 @@ <h1 class="hero-fluff">
 					<div class="download-notes">
 						<a href="#release-notes" class="download-version">View release notes</a>
 					</div>
+					<a class="update-banner" id="js-update-banner" href="#release-notes" hidden>
+						New version released since your last visit — view release notes
+					</a>
 				</div>
 			</div>
 			<div class="hero-right">

package.json

@@ -5,6 +5,6 @@
 		"fix": "biome check --write"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.2.4"
+		"@biomejs/biome": "2.3.14"
 	}
 }

static/main.js

@@ -40,6 +40,25 @@ fetch('https://api.github.com/repositories/42366054/releases?per_page=5', {
 
 		const latestRelease = releases[0];
 
+		try {
+			const currentVersion = latestRelease.tag_name;
+			const storedVersion = localStorage.getItem('s2v-last-version');
+
+			if (storedVersion && storedVersion !== currentVersion) {
+				const banner = document.getElementById('js-update-banner');
+				banner.hidden = false;
+
+				banner.addEventListener('click', () => {
+					banner.hidden = true;
+					localStorage.setItem('s2v-last-version', currentVersion);
+				});
+			} else {
+				localStorage.setItem('s2v-last-version', currentVersion);
+			}
+		} catch (e) {
+			console.error(e);
+		}
+
 		for (const asset of latestRelease.assets) {
 			if (asset.name === 'Source2Viewer.exe') {
 				document.getElementById('js-download').href =

static/style.css

@@ -62,6 +62,32 @@ a:active {
 	z-index: -1;
 }
 
+.update-banner {
+	display: inline-block;
+	margin-top: 0.75rem;
+	padding: 0.5rem 0.75rem;
+	background: hsl(140 50% 20%);
+	border: 1px solid hsl(140 60% 50%);
+	border-radius: 0.5rem;
+	font-size: 0.9rem;
+	color: #fff;
+	text-decoration: none;
+	cursor: pointer;
+	opacity: 1;
+	transition: opacity 200ms;
+
+	&:hover {
+		background: hsl(140 50% 25%);
+		color: #fff;
+	}
+
+	&[hidden] {
+		display: inline-block;
+		pointer-events: none;
+		opacity: 0;
+	}
+}
+
 .hero {
 	min-height: max(1000px, 90vh);
 	display: flex;