fix(site): Optimise contributors donors images (#8956)

pull/8989/head
Puru Vijay 2 years ago committed by GitHub
parent d2d219f8ca
commit f10ec8350d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -68,11 +68,6 @@ try {
new URL(`../src/routes/_components/Supporters/contributors.jpg`, import.meta.url).pathname
);
// TODO: Optimizing the static/contributors.jpg image should probably get automated as well
console.log(
'remember to additionally optimize the resulting /static/contributors.jpg image file via e.g. https://squoosh.app '
);
const str = `[\n\t${authors.map((a) => `'${a.login}'`).join(',\n\t')}\n]`;
writeFile(outputFile, `export default ${str};`);

@ -61,10 +61,6 @@ try {
.writeAsync(
new URL(`../src/routes/_components/Supporters/donors.jpg`, import.meta.url).pathname
);
// 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]`;

@ -2,6 +2,11 @@
import { Section } from '@sveltejs/site-kit/components';
import contributors from './contributors.js';
import donors from './donors.js';
// @ts-ignore
import contributors_img from './contributors.jpg?w=1200&format=webp';
// @ts-ignore
import donors_img from './donors.jpg?w=1200&format=webp';
</script>
<Section --background="var(--sk-back-2">
@ -20,6 +25,7 @@
<a
class="supporter"
style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
style:background-image="url({contributors_img})"
href="https://github.com/{contributor}"
>
{contributor}
@ -37,6 +43,7 @@
<a
class="supporter"
style="background-position: {(100 * i) / (donors.length - 1)}% 0"
style:background-image="url({donors_img})"
href="https://opencollective.com/svelte">{donor}</a
>
{/each}
@ -85,14 +92,6 @@
filter: drop-shadow(1px 2px 8px rgba(0, 0, 0, 0.3));
}
.contributors .supporter {
background-image: url(./contributors.jpg);
}
.donors .supporter {
background-image: url(./donors.jpg);
}
@media (min-width: 480px) {
.grid {
grid-template-columns: repeat(8, minmax(0, 1fr));

Loading…
Cancel
Save