From c2149e85294a4ae60124c70b53ff2744714069f4 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 1 Dec 2021 14:04:38 -0800
Subject: [PATCH] [site] only show 20 avatars instead of current massive wall
 (#6974)

---
 site/scripts/get_contributors.js              |  6 ++--
 site/scripts/get_donors.js                    | 10 +++---
 .../routes/_components/Contributors.svelte    | 30 ++++++++++-------
 site/src/routes/_components/Donors.svelte     | 32 ++++++++++++-------
 site/src/routes/index.svelte                  |  4 +--
 5 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/site/scripts/get_contributors.js b/site/scripts/get_contributors.js
index c263de25c5..a98696793b 100644
--- a/site/scripts/get_contributors.js
+++ b/site/scripts/get_contributors.js
@@ -20,7 +20,8 @@ if (!force && fs.existsSync(outputFile)) {
 const base = `https://api.github.com/repos/sveltejs/svelte/contributors`;
 const { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } = process.env;
 
-const SIZE = 64;
+const MAX = 20;
+const SIZE = 128;
 
 async function main() {
 	const contributors = [];
@@ -37,7 +38,8 @@ async function main() {
 
 	const authors = contributors
 		.filter(({ login }) => !login.includes('[bot]'))
-		.sort((a, b) => b.contributions - a.contributions);
+		.sort((a, b) => b.contributions - a.contributions)
+		.slice(0, MAX);
 
 	const sprite = new Jimp(SIZE * authors.length, SIZE);
 
diff --git a/site/scripts/get_donors.js b/site/scripts/get_donors.js
index 9e26391195..a636c60934 100644
--- a/site/scripts/get_donors.js
+++ b/site/scripts/get_donors.js
@@ -17,7 +17,8 @@ if (!force && fs.existsSync(outputFile)) {
 	process.exit(0);
 }
 
-const SIZE = 64;
+const MAX = 20;
+const SIZE = 128;
 
 async function main() {
 	const res = await fetch('https://opencollective.com/svelte/members/all.json');
@@ -28,12 +29,13 @@ async function main() {
 
 	let backers = [...unique.values()]
 		.filter(({ role }) => role === 'BACKER')
-		.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated);
+		.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
+		.slice(0, 3 * MAX);
 
 	const included = [];
-	for (let i = 0; i < backers.length; i += 1) {
+	for (let i = 0; included.length < MAX; i += 1) {
 		const backer = backers[i];
-		console.log(`${i} / ${backers.length}: ${backer.name}`);
+		console.log(`${included.length + 1} / ${MAX}: ${backer.name}`);
 
 		try {
 			const image_data = await fetch(backer.image);
diff --git a/site/src/routes/_components/Contributors.svelte b/site/src/routes/_components/Contributors.svelte
index 74eb3fa50f..aee4c031d6 100644
--- a/site/src/routes/_components/Contributors.svelte
+++ b/site/src/routes/_components/Contributors.svelte
@@ -3,24 +3,32 @@
 </script>
 
 <style>
+	#contributors {
+		margin: 0.4em 0;
+	}
+
 	.contributor {
-		width: 2.4em;
-		height: 2.4em;
+		width: 4.2em;
+		height: 4.2em;
 		border-radius: 50%;
 		text-indent: -9999px;
 		display: inline-block;
 		background: no-repeat url(/contributors.jpg);
 		background-size: auto 102%;
-		margin: 0 0.5em 0.5em 0;
+		margin: 0 1.5em 1.5em 0;
 		border: 2px solid var(--second);
 	}
 </style>
 
-{#each contributors as contributor, i}
-	<a
-		class="contributor"
-		style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
-		href="https://github.com/{contributor}">
-		{contributor}
-	</a>
-{/each}
+<div id="contributors">
+	{#each contributors as contributor, i}
+		<a
+			class="contributor"
+			style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
+			href="https://github.com/{contributor}">
+			{contributor}
+		</a>
+	{/each}
+</div>
+
+<p>And so <a href="https://github.com/sveltejs/svelte/graphs/contributors">many more →</a></p>
diff --git a/site/src/routes/_components/Donors.svelte b/site/src/routes/_components/Donors.svelte
index dc1f7ffcc8..be6091b6e0 100644
--- a/site/src/routes/_components/Donors.svelte
+++ b/site/src/routes/_components/Donors.svelte
@@ -3,25 +3,33 @@
 </script>
 
 <style>
+	#donors {
+		margin: 0.4em 0;
+	}
+
 	.donor {
-		width: 2.4em;
-		height: 2.4em;
+		width: 4.2em;
+		height: 4.2em;
 		border-radius: 50%;
 		text-indent: -9999px;
 		display: inline-block;
 		background: no-repeat url(/donors.jpg);
 		background-size: auto 102%;
-		margin: 0 0.5em 0.5em 0;
+		margin: 0 1.5em 1.5em 0;
 		border: 2px solid var(--second);
 	}
 </style>
 
-{#each donors as donor, i}
-	<a
-		class="donor"
-		style="background-position: {(100 * i) / (donors.length - 1)}% 0"
-		alt="{donor}"
-		href="https://opencollective.com/svelte">
-		{donor}
-	</a>
-{/each}
+<div id="donors">
+	{#each donors as donor, i}
+		<a
+			class="donor"
+			style="background-position: {(100 * i) / (donors.length - 1)}% 0"
+			alt="{donor}"
+			href="https://opencollective.com/svelte">
+			{donor}
+		</a>
+	{/each}
+</div>
+
+<p>And so <a href="https://opencollective.com/svelte">many more →</a></p>
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 2e48531ec5..f64753417a 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -120,13 +120,13 @@ npm run dev
 
 	<p>Svelte is free and open source software, made possible by the work of hundreds of volunteers and donors. <a href="https://github.com/sveltejs/svelte">Join us</a> or <a href="https://opencollective.com/svelte">give</a>!</p>
 
-	<h3>Contributors</h3>
+	<h4>Contributors</h4>
 
 	<Contributors/>
 
 	<p></p>
 
-	<h3>Donors</h3>
+	<h4>Donors</h4>
 
 	<Donors/>
 </Section>