Add OpenCollective donors to site (#6793)

.gitignore

@@ -30,7 +30,9 @@ _output
 /site/.sessions
 /site/static/svelte-app.json
 /site/static/contributors.jpg
+/site/static/donors.jpg
 /site/static/workers
 /site/scripts/svelte-app
 /site/scripts/community
 /site/src/routes/_contributors.js
+/site/src/routes/_donors.js

site/scripts/get_donors.js

@@ -0,0 +1,63 @@
+import 'dotenv/config';
+import fs from 'fs';
+import fetch from 'node-fetch';
+import Jimp from 'jimp';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+
+const force = process.env.FORCE_UPDATE === 'true';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+process.chdir(__dirname);
+
+const outputFile = `../src/routes/_donors.js`;
+if (!force && fs.existsSync(outputFile)) {
+	console.info(`[update/donors] ${outputFile} exists. Skipping`);
+	process.exit(0);
+}
+
+const SIZE = 64;
+
+async function main() {
+	const res = await fetch('https://opencollective.com/svelte/members/all.json');
+	const donors = await res.json();
+
+	const unique = new Map();
+	donors.forEach(d => unique.set(d.profile, d));
+
+	let backers = [...unique.values()]
+		.filter(({ role }) => role === 'BACKER')
+		.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated);
+
+	const included = [];
+	for (let i = 0; i < backers.length; i += 1) {
+		const backer = backers[i];
+		console.log(`${i} / ${backers.length}: ${backer.name}`);
+
+		try {
+			const image_data = await fetch(backer.image);
+			const buffer = await image_data.arrayBuffer();
+			const image = await Jimp.read(buffer);
+			image.resize(SIZE, SIZE);
+			included.push({ backer, image });
+		} catch( err) {
+			console.log(`Skipping ${backer.name}: no image data`);			
+		}
+	}
+
+	const sprite = new Jimp(SIZE * included.length, SIZE);
+	for (let i = 0; i < included.length; i += 1) {
+		sprite.composite(included[i].image, i * SIZE, 0);
+	}
+
+	await sprite.quality(80).write(`../static/donors.jpg`);
+	// TODO: Optimizing the static/donors.jpg image should probably get automated as well
+	console.log('remember to additionally optimize the resulting /static/donors.jpg image file via e.g. https://squoosh.app ');
+
+	const str = `[\n\t${included.map(a => `${JSON.stringify(a.backer.name)}`).join(',\n\t')}\n]`;
+
+	fs.writeFileSync(outputFile, `export default ${str};`);
+}
+
+main();

site/scripts/update.js

@@ -4,5 +4,6 @@ sh.env['FORCE_UPDATE'] = process.argv.includes('--force=true');
 
 Promise.all([
 	sh.exec('node ./scripts/get_contributors.js'),
+	sh.exec('node ./scripts/get_donors.js'),
 	sh.exec('node ./scripts/update_template.js')
 ]);

site/src/routes/_components/Donors.svelte

@@ -0,0 +1,27 @@
+<script>
+	import donors from '../_donors.js';
+</script>
+
+<style>
+	.donor {
+		width: 2.4em;
+		height: 2.4em;
+		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;
+		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}

site/src/routes/index.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { Blurb, Hero, Section } from '@sveltejs/site-kit';
 	import Contributors from './_components/Contributors.svelte';
+	import Donors from './_components/Donors.svelte';
 	import Example from './_components/Example.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte';
 	// import Lazy from '../components/Lazy.svelte';
@@ -115,9 +116,17 @@ npm run dev
 </Section>
 
 <Section>
-	<h3>Contributors</h3>
+	<h3>Supporters</h3>
+
+	<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>
 
-	<p>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>
+	<h3>Contributors</h3>
 
 	<Contributors/>
+
+	<p></p>
+
+	<h3>Donors</h3>
+
+	<Donors/>
 </Section>