use spritesheet for contributors - fixes #2329

.gitignore

@@ -25,5 +25,6 @@ _actual*.*
 /site/.env
 /site/.sessions
 /site/static/svelte-app.json
+/site/static/contributors.jpg
 /site/scripts/svelte-app
 /site/src/routes/_contributors.js

site/scripts/get-contributors.js

@@ -1,16 +1,39 @@
 const fs = require('fs');
 const fetch = require('node-fetch');
+const Jimp = require('jimp');
 
 process.chdir(__dirname);
 
-fetch(`https://api.github.com/repos/sveltejs/svelte/stats/contributors`)
-	.then(r => r.json())
-	.then(contributors => {
-		const munged = contributors
-			.sort((a, b) => b.total - a.total)
-			.map(({ author }) => ({ name: author.login, src: author.avatar_url }));
+const SIZE = 64;
 
-		const str = `[\n\t${munged.map(c => `{ name: '${c.name}', src: '${c.src}' }`).join(',\n\t')}\n]`;
+async function main() {
+	const res = await fetch(`https://api.github.com/repos/sveltejs/svelte/stats/contributors`);
+	const contributors = await res.json();
 
-		fs.writeFileSync(`../src/routes/_contributors.js`, `export default ${str};`);
-	});
+	const authors = contributors
+		.sort((a, b) => b.total - a.total)
+		.map(({ author }) => author);
+
+	const sprite = new Jimp(SIZE * authors.length, SIZE);
+
+	for (let i = 0; i < authors.length; i += 1) {
+		const author = authors[i];
+		console.log(`${i + 1} / ${authors.length}: ${author.login}`);
+
+		const image_data = await fetch(author.avatar_url);
+		const buffer = await image_data.arrayBuffer();
+
+		const image = await Jimp.read(buffer);
+		image.resize(SIZE, SIZE);
+
+		sprite.composite(image, i * SIZE, 0);
+	}
+
+	await sprite.quality(80).write(`../static/contributors.jpg`);
+
+	const str = `[\n\t${authors.map(a => `'${a.login}'`).join(',\n\t')}\n]`;
+
+	fs.writeFileSync(`../src/routes/_contributors.js`, `export default ${str};`);
+}
+
+main();

site/src/routes/index.svelte

@@ -159,7 +159,8 @@
 		border-radius: 50%;
 		text-indent: -9999px;
 		display: inline-block;
-		background-size: 100% 100%;
+		background: no-repeat url(/contributors.jpg);
+		background-size: auto 102%;
 		margin: 0 0.5em 0.5em 0;
 		border: 1px solid var(--second);
 	}
@@ -318,11 +319,11 @@ npm run dev & open http://localhost:5000
 
 	<p class="linkify">Svelte is free and open source software, made possible by the work of dozens of volunteers. <a href="https://github.com/sveltejs/svelte">Join us!</a></p>
 
-	{#each contributors as contributor}
+	{#each contributors as contributor, i}
 		<a
 			class="contributor"
-			style="background-image: url({contributor.src})"
-			href="https://github.com/{contributor.name}"
-		>{contributor.name}</a>
+			style="background-position: {100 * i / (contributors.length - 1)}% 0"
+			href="https://github.com/{contributor}"
+		>{contributor}</a>
 	{/each}
 </section>