Add OpenCollective donors to site (#6793)

pull/6796/head
Ben McCann 3 years ago committed by GitHub
parent 54ba76c1f0
commit 0d4ad364be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

2
.gitignore vendored

@ -30,7 +30,9 @@ _output
/site/.sessions /site/.sessions
/site/static/svelte-app.json /site/static/svelte-app.json
/site/static/contributors.jpg /site/static/contributors.jpg
/site/static/donors.jpg
/site/static/workers /site/static/workers
/site/scripts/svelte-app /site/scripts/svelte-app
/site/scripts/community /site/scripts/community
/site/src/routes/_contributors.js /site/src/routes/_contributors.js
/site/src/routes/_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();

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

@ -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}

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

Loading…
Cancel
Save