[site] only show 20 avatars instead of current massive wall (#6974)

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);
 

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);

site/src/routes/_components/Contributors.svelte

@@ -3,19 +3,24 @@
 </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>
 
+<div id="contributors">
 	{#each contributors as contributor, i}
 		<a
 			class="contributor"
@@ -24,3 +29,6 @@
 			{contributor}
 		</a>
 	{/each}
+</div>
+
+<p>And so <a href="https://github.com/sveltejs/svelte/graphs/contributors">many more →</a></p>

site/src/routes/_components/Donors.svelte

@@ -3,19 +3,24 @@
 </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>
 
+<div id="donors">
 	{#each donors as donor, i}
 		<a
 			class="donor"
@@ -25,3 +30,6 @@
 			{donor}
 		</a>
 	{/each}
+</div>
+
+<p>And so <a href="https://opencollective.com/svelte">many more →</a></p>

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>