Cleanup logos on homepage (#6409)

Author: arxpoetica

.gitignore

@@ -30,8 +30,6 @@ _output
 /site/static/svelte-app.json
 /site/static/contributors.jpg
 /site/static/workers
-/site/static/organisations
 /site/scripts/svelte-app
 /site/scripts/community
 /site/src/routes/_contributors.js
-/site/src/routes/_components/WhosUsingSvelte.*

site/package.json

@@ -7,7 +7,7 @@
     "copy-workers": "node scripts/copy-workers.js",
     "migrate": "node-pg-migrate -r dotenv/config",
     "build": "npm run copy-workers && sapper build --legacy",
-    "update": "node scripts/update_template.js && node scripts/get-contributors.js && node scripts/update_whos_using.js",
+    "update": "node scripts/update_template.js && node scripts/get-contributors.js",
     "start": "node __sapper__/build",
     "test": "mocha -r esm test/**",
     "deploy": "make deploy"

site/scripts/update_whos_using.js

@@ -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",
+	},
+];

site/src/routes/_components/WhosUsingSvelte.js

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

site/src/routes/_components/WhosUsingSvelte.svelte

@@ -16,7 +16,6 @@
 	export let gist;
 	export let name;
 	export let zen_mode;
-	export let bundle;
 
 	let saving = false;
 	let downloading = false;

site/src/routes/repl/[id]/_components/AppControls/index.svelte

@@ -167,27 +167,10 @@
 		z-index: 111;
 	}
 
-	.pane { width: 100%; height: 100% }
-
-	.loading {
-		text-align: center;
-		color: var(--second);
-		font-weight: 400;
-		margin: 2em 0 0 0;
-		opacity: 0;
-		animation: fade-in .4s;
-		animation-delay: .2s;
-		animation-fill-mode: both;
-	}
-
 	@keyframes fade-in {
 		0%   { opacity: 0 }
 		100% { opacity: 1 }
 	}
-
-	.input {
-		padding: 2.4em 0 0 0;
-	}
 </style>
 
 <svelte:head>

site/src/routes/repl/[id]/index.svelte

@@ -77,6 +77,7 @@
 			{selected.chapter.title}
 		</span>
 
+		<!-- svelte-ignore a11y-no-onchange -->
 		<select value={slug} on:change={navigate}>
 			{#each sections as section, i}
 				<optgroup label="{i + 1}. {section.title}">