Rename to changelog, make title sticky on left, prefetch github releases

Author: xPaw

index.html

@@ -121,10 +121,10 @@ <h1 class="hero-fluff">
 					<div class="download-reqs">Requirements: Windows 11, OpenGL 4.6</div>
 					<div class="download-dev">Having issues? <a href="https://nightly.link/ValveResourceFormat/ValveResourceFormat/workflows/build/master/Source2Viewer.zip">Download dev build</a></div>
 					<div class="download-notes">
-						<a href="#release-notes" class="download-version">View release notes</a>
+						<a href="#changelog" class="download-version">View changelog</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 class="update-banner" id="js-update-banner" href="#changelog" hidden>
+						New version released since your last visit — view changelog
 					</a>
 				</div>
 			</div>
@@ -401,8 +401,8 @@ <h3>Additional File Formats</h3>
 			</div>
 		</div>
 
-		<div class="container" id="release-notes">
-			<h2>Release Notes</h2>
+		<div class="container" id="changelog">
+			<h2>Changelog</h2>
 		</div>
 
 		<div class="workshop">

static/main.js

@@ -66,7 +66,7 @@ fetch('https://api.github.com/repositories/42366054/releases?per_page=5', {
 
 				const version = document.querySelector('.download-version');
 
-				let string = `View release notes for v${latestRelease.tag_name}`;
+				let string = `View changelog for v${latestRelease.tag_name}`;
 
 				if (window.innerWidth > 500) {
 					const date = new Date(latestRelease.published_at);
@@ -78,27 +78,56 @@ fetch('https://api.github.com/repositories/42366054/releases?per_page=5', {
 			}
 		}
 
-		const releaseNotesContainer = document.getElementById('release-notes');
+		const releaseNotesContainer = document.getElementById('changelog');
+		const downloadFormatter = new Intl.NumberFormat('en', {
+			notation: 'compact',
+			maximumFractionDigits: 1,
+		});
 
 		releases.forEach((release, index) => {
 			const isLatest = index === 0;
 
 			const releaseSection = document.createElement('div');
 			releaseSection.className = 'release-notes-content';
 
+			const releaseSidebar = document.createElement('div');
+			releaseSidebar.className = 'release-notes-sidebar';
+
 			const releaseHeader = document.createElement('a');
 			releaseHeader.className = 'release-version';
 			releaseHeader.href = release.html_url;
 			releaseHeader.target = '_blank';
 			releaseHeader.rel = 'noopener';
+			releaseHeader.textContent = `v${release.tag_name}`;
+			releaseSidebar.appendChild(releaseHeader);
+
+			const releaseDateSpan = document.createElement('span');
+			releaseDateSpan.className = 'release-date';
 			const releaseDate = new Date(release.published_at);
-			releaseHeader.textContent = `v${release.tag_name} - ${releaseDate.toLocaleDateString()}`;
-			releaseSection.appendChild(releaseHeader);
+			releaseDateSpan.textContent = releaseDate.toLocaleDateString();
+			releaseSidebar.appendChild(releaseDateSpan);
+
+			const totalDownloads = release.assets.reduce(
+				(sum, asset) => sum + asset.download_count,
+				0,
+			);
+
+			if (totalDownloads > 0) {
+				const downloadsSpan = document.createElement('span');
+				downloadsSpan.className = 'release-downloads';
+				downloadsSpan.textContent = `${downloadFormatter.format(totalDownloads)} downloads`;
+				releaseSidebar.appendChild(downloadsSpan);
+			}
+
+			releaseSection.appendChild(releaseSidebar);
+
+			const releaseMain = document.createElement('div');
+			releaseMain.className = 'release-notes-main';
 
 			const releaseContent = document.createElement('div');
 			releaseContent.className = 'release-content';
 			releaseContent.innerHTML = release.body_html;
-			releaseSection.appendChild(releaseContent);
+			releaseMain.appendChild(releaseContent);
 
 			if (isLatest) {
 				const releaseAssetsContainer = document.createElement('div');
@@ -128,9 +157,11 @@ fetch('https://api.github.com/repositories/42366054/releases?per_page=5', {
 				githubLink.textContent = 'View release on GitHub';
 				releaseAssetsContainer.appendChild(githubLink);
 
-				releaseSection.appendChild(releaseAssetsContainer);
+				releaseMain.appendChild(releaseAssetsContainer);
 			}
 
+			releaseSection.appendChild(releaseMain);
+
 			releaseNotesContainer.appendChild(releaseSection);
 		});
 	});

static/style.css

@@ -106,8 +106,8 @@ a:active {
 	vertical-align: middle;
 	cursor: pointer;
 	background: var(--color-accent);
-	border: 2px solid rgb(255 255 255 / 50%);
-	border-radius: 0.6rem;
+	border: 1px solid rgb(255 255 255 / 50%);
+	border-radius: 1rem;
 	font-size: 1.5rem;
 	font-weight: bold;
 	line-height: 1;
@@ -711,11 +711,13 @@ a.hljs-built_in {
 
 		.feature-section > div {
 			padding: 1rem;
+			border: 0;
+			border-radius: 0;
 		}
 	}
 }
 
-#release-notes {
+#changelog {
 	padding: 1.5rem 0;
 
 	> h2 {
@@ -727,19 +729,34 @@ a.hljs-built_in {
 	}
 
 	.release-notes-content {
-		background: rgb(255 255 255 / 3%);
-		border: 1px solid rgb(71 168 255 / 10%);
-		border-radius: 8px;
-		padding: 1.5rem;
-		overflow-x: auto;
 		line-height: 1.6;
 		margin-bottom: 1.5rem;
+		display: flex;
+		gap: 1.5rem;
+
+		.release-notes-sidebar {
+			width: 140px;
+			flex-shrink: 0;
+			position: sticky;
+			top: 0;
+			padding: 1rem;
+			align-self: flex-start;
+		}
+
+		.release-notes-main {
+			flex: 1;
+			min-width: 0;
+			background: rgb(255 255 255 / 3%);
+			border: 1px solid rgb(71 168 255 / 10%);
+			border-radius: 8px;
+			padding: 1.5rem;
+			overflow-x: auto;
+		}
 
 		.release-version {
 			color: var(--color-accent);
 			font-size: 1.5rem;
 			font-weight: 600;
-			margin: 0 0 1rem 0;
 			text-decoration: none;
 			display: block;
 
@@ -749,6 +766,20 @@ a.hljs-built_in {
 			}
 		}
 
+		.release-date {
+			display: block;
+			color: rgb(255 255 255 / 50%);
+			font-size: 0.9rem;
+			margin-top: 0.25rem;
+		}
+
+		.release-downloads {
+			display: block;
+			color: rgb(255 255 255 / 40%);
+			font-size: 0.8rem;
+			margin-top: 0.25rem;
+		}
+
 		h1,
 		h2,
 		h3,
@@ -878,7 +909,19 @@ a.hljs-built_in {
 		}
 
 		.release-notes-content {
-			padding: 1rem;
+			flex-direction: column;
+			gap: 0.5rem;
+
+			.release-notes-sidebar {
+				width: 100%;
+				position: static;
+			}
+
+			.release-notes-main {
+				padding: 1rem;
+				border: 0;
+				border-radius: 0;
+			}
 		}
 	}
 }