Cleanup logos on homepage (#6409)
Robert Hall
4 years ago
committed by
GitHub
@ -1,13 +0,0 @@
|
||||
const sh = require('shelljs');
|
||||
|
||||
sh.cd(__dirname + '/../');
|
||||
|
||||
// fetch community repo
|
||||
sh.rm('-rf','scripts/community');
|
||||
sh.exec('npx degit sveltejs/community scripts/community');
|
||||
|
||||
// copy over relevant files
|
||||
sh.cp('scripts/community/whos-using-svelte/WhosUsingSvelte.svelte', 'src/routes/_components/WhosUsingSvelte.svelte');
|
||||
sh.cp('scripts/community/whos-using-svelte/WhosUsingSvelte.js', 'src/routes/_components/WhosUsingSvelte.js');
|
||||
sh.rm('-rf', 'static/organisations');
|
||||
sh.cp('-r', 'scripts/community/whos-using-svelte/organisations', 'static');
|
||||
@ -0,0 +1,80 @@
|
||||
export const companies = [
|
||||
{
|
||||
href: "https://1password.com",
|
||||
filename: "1password.svg",
|
||||
alt: "1Password logo",
|
||||
},
|
||||
{
|
||||
href: "https://www.alaskaair.com/",
|
||||
style: "background-color: #01426a;",
|
||||
filename: "alaskaairlines.svg",
|
||||
alt: "Alaska Airlines logo",
|
||||
},
|
||||
{
|
||||
href: "https://avast.com",
|
||||
filename: "avast.svg",
|
||||
alt: "Avast logo",
|
||||
},
|
||||
{
|
||||
href: "https://chess.com",
|
||||
style: "background-color: #312e2b;",
|
||||
filename: "chess.svg",
|
||||
alt: "Chess.com logo",
|
||||
},
|
||||
{
|
||||
href: "https://fusioncharts.com",
|
||||
filename: "fusioncharts.svg",
|
||||
alt: "FusionCharts logo",
|
||||
},
|
||||
{
|
||||
href: "https://godaddy.com",
|
||||
filename: "godaddy.svg",
|
||||
alt: "GoDaddy logo",
|
||||
},
|
||||
{
|
||||
href: "https://www.ibm.com/",
|
||||
filename: "ibm.svg",
|
||||
alt: "IBM logo",
|
||||
},
|
||||
{
|
||||
href: "https://media.lesechos.fr/infographie",
|
||||
filename: "les-echos.svg",
|
||||
alt: "Les Echos",
|
||||
},
|
||||
{
|
||||
href: "https://www.philips.co.uk",
|
||||
filename: "philips.svg",
|
||||
alt: "Philips logo",
|
||||
},
|
||||
{
|
||||
href: "https://global.rakuten.com/corp/",
|
||||
filename: "rakuten.svg",
|
||||
alt: "Rakuten logo",
|
||||
},
|
||||
{
|
||||
href: "https://razorpay.com",
|
||||
filename: "razorpay.svg",
|
||||
alt: "Razorpay logo",
|
||||
},
|
||||
{
|
||||
href: "https://www.se.com",
|
||||
style: " background-color: #3dcd58; ",
|
||||
filename: "Schneider_Electric.svg",
|
||||
alt: "Schneider Electric",
|
||||
},
|
||||
{
|
||||
href: "https://squareup.com",
|
||||
filename: "square.svg",
|
||||
alt: "Square",
|
||||
},
|
||||
{
|
||||
href: "https://nytimes.com",
|
||||
filename: "nyt.svg",
|
||||
alt: "The New York Times logo",
|
||||
},
|
||||
{
|
||||
href: "https://transloadit.com",
|
||||
filename: "transloadit.svg",
|
||||
alt: "Transloadit",
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import { companies } from './WhosUsingSvelte.js';
|
||||
const randomizer = ({prominent}) => Math.random();
|
||||
const doSort = (a, b) => randomizer(b) - randomizer(a);
|
||||
const sortedCompanies = companies.sort(doSort);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.logos {
|
||||
margin: 1em 0 0 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
a {
|
||||
height: 40px;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid var(--second);
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
color: var(--text);
|
||||
}
|
||||
picture,
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
@media (min-width: 540px) {
|
||||
a {
|
||||
height: 60px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="logos">
|
||||
{#each sortedCompanies as {href, filename, alt, style, picture, span}, index}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
{href}
|
||||
style="{style || ''}"
|
||||
>
|
||||
{#if picture}
|
||||
<picture>
|
||||
{#each picture as {type, srcset}}
|
||||
<source {type} {srcset}>
|
||||
{/each}
|
||||
<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
|
||||
</picture>
|
||||
{:else}
|
||||
<img src="/whos-using-svelte/{filename}" {alt} loading="lazy">
|
||||
{#if span}
|
||||
<span>{span}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 705 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.9 KiB |