Display all contributors at the bottom, randomized

Author: xPaw

src/index.html

@@ -679,19 +679,14 @@ <h3>Additional File Formats</h3>
 			<h2>Changelog</h2>
 		</div>
 
+		<div class="container" id="contributors">
+			<h2>Made possible by amazing people</h2>
+			<p class="contributors-desc">Source 2 Viewer is open-source and built by volunteers. Every contribution helps make it better for everyone.</p>
+			<div class="contributor-list" id="js-contributors"></div>
+		</div>
+
 		<footer class="footer">
-			<div class="container">
-				<div class="footer-left">
-					Available under the
-					<a href="https://github.com/ValveResourceFormat/ValveResourceFormat/blob/master/LICENSE">MIT license</a>.<br>
-					Created and maintained by <a href="https://github.com/ValveResourceFormat/ValveResourceFormat/graphs/contributors">various contributors</a>.
-				</div>
-				<div class="footer-right">
-					This project is not affiliated with Valve Software.
-					<br>
-					Source 2 is a trademark and/or registered trademark of Valve Corporation.
-				</div>
-			</div>
+			<div class="container">This project is not affiliated with Valve Software. Source 2 is a trademark and/or registered trademark of Valve Corporation.</div>
 		</footer>
 	</body>
 </html>

src/ru.html

@@ -373,16 +373,7 @@ <h3>Дополнительные форматы файлов</h3>
 
 		<footer class="footer">
 			<div class="container">
-				<div class="footer-left">
-					Проект доступен по
-					<a href="https://github.com/ValveResourceFormat/ValveResourceFormat/blob/master/LICENSE">лицензии MIT</a>.<br>
-					Создается и поддерживается <a href="https://github.com/ValveResourceFormat/ValveResourceFormat/graphs/contributors">сообществом контрибьюторов</a>.
-				</div>
-				<div class="footer-right">
-					Этот проект не связан с Valve Software.
-					<br>
-					Source 2 является товарным знаком и/или зарегистрированным товарным знаком Valve Corporation.
-				</div>
+				Этот проект не связан с Valve Software. Source 2 является товарным знаком и/или зарегистрированным товарным знаком Valve Corporation.
 			</div>
 		</footer>
 	</body>

src/static/main.js

@@ -295,4 +295,69 @@ downloadBtn.addEventListener('click', () => {
 	document.getElementById('js-thank-you')?.classList.add('visible');
 });
 
+/** @param {HTMLElement} container */
+async function LoadContributors(container) {
+	try {
+		const response = await fetch(
+			'https://api.github.com/repositories/42366054/contributors?per_page=100',
+		);
+
+		if (!response.ok) {
+			return;
+		}
+
+		/** @type {{login: string, avatar_url: string, html_url: string, contributions: number, type: string}[]} */
+		const contributors = await response.json();
+		const shuffled = contributors.filter((c) => c.type !== 'Bot');
+
+		for (let i = shuffled.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+		}
+
+		const fragment = document.createDocumentFragment();
+
+		for (const c of shuffled) {
+			const a = document.createElement('a');
+			a.href = `https://github.com/ValveResourceFormat/ValveResourceFormat/commits?author=${c.login}`;
+			a.target = '_blank';
+			a.rel = 'noopener';
+			a.className = 'contributor';
+
+			const img = document.createElement('img');
+			img.src = `${c.avatar_url}&s=64`;
+			img.alt = '';
+			img.width = 32;
+			img.height = 32;
+			img.loading = 'lazy';
+
+			const name = document.createElement('span');
+			name.className = 'contributor-name';
+			name.textContent = c.login;
+
+			a.appendChild(img);
+			a.appendChild(name);
+			fragment.appendChild(a);
+		}
+
+		container.appendChild(fragment);
+	} catch (e) {
+		console.error(e);
+	}
+}
+
 LoadReleases();
+
+const contributorsContainer = document.getElementById('js-contributors');
+if (contributorsContainer) {
+	const observer = new IntersectionObserver(
+		(entries, obs) => {
+			if (entries[0].isIntersecting) {
+				obs.disconnect();
+				LoadContributors(contributorsContainer);
+			}
+		},
+		{ rootMargin: '400px' },
+	);
+	observer.observe(contributorsContainer);
+}

src/static/style.css

@@ -622,33 +622,72 @@ a {
 	}
 }
 
-.footer {
-	margin: 3rem auto;
-	line-height: 1.75;
-	color: #ccc;
+#contributors {
+	padding: 2rem 0 3rem;
 
-	.container {
-		display: flex;
-		justify-content: space-between;
-		align-items: end;
-		gap: 1rem;
+	h2 {
+		font-size: 2.5rem;
+		font-weight: 700;
+		color: #fff;
+		text-align: center;
+		margin: 0 0 1.5rem 0;
 	}
 
-	.footer-right {
-		text-align: right;
+	.contributors-desc {
+		margin: -1rem 0 1.25rem;
+		font-size: 0.9rem;
+		color: rgb(255 255 255 / 70%);
+		text-align: center;
 	}
 
-	@media (max-width: 840px) {
-		.container {
-			flex-direction: column;
-			align-items: unset;
+	.contributor-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		justify-content: center;
+		min-height: 200px;
+	}
+
+	.contributor {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.4rem 0.75rem 0.4rem 0.4rem;
+		background: rgb(255 255 255 / 3%);
+		border: 1px solid rgb(71 168 255 / 12%);
+		border-radius: 0.5rem;
+		text-decoration: none;
+		color: inherit;
+		transition:
+			background 0.15s ease,
+			border-color 0.15s ease;
+
+		img {
+			border-radius: 50%;
+			width: 32px;
+			height: 32px;
+			display: block;
+			flex-shrink: 0;
 		}
 
-		.footer-left,
-		.footer-right {
-			text-align: center;
+		&:hover {
+			background: rgb(71 168 255 / 8%);
+			border-color: rgb(71 168 255 / 40%);
 		}
 	}
+
+	.contributor-name {
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #fff;
+	}
+}
+
+.footer {
+	margin: 3rem auto;
+	line-height: 1.75;
+	color: #ccc;
+	text-align: center;
 }
 
 .floating-nav {