Merge branch 'main' into mobile-styles

Author: Rich-Harris

apps/svelte.dev/src/lib/icons/discord-dark.svg

@@ -83,7 +83,7 @@
 			background: no-repeat 50% 50%;
 			background-size: calc(100% - 1rem) auto;
 			padding: 0 0.5rem;
-			opacity: 0.6;
+			height: 100%;
 
 			:global(.dark) & {
 				opacity: 0.8;
@@ -103,19 +103,19 @@
 
 		[data-icon='discord'] {
 			width: 3.4rem;
-			background-image: url($lib/icons/discord-black.svg);
+			background-image: url($lib/icons/discord-light.svg);
 
 			:global(.dark) & {
-				background-image: url($lib/icons/discord-white.svg);
+				background-image: url($lib/icons/discord-dark.svg);
 			}
 		}
 
 		[data-icon='github'] {
 			width: 3rem;
-			background-image: url($lib/icons/github-black.svg);
+			background-image: url($lib/icons/github-light.svg);
 
 			:global(.dark) & {
-				background-image: url($lib/icons/github-white.svg);
+				background-image: url($lib/icons/github-dark.svg);
 			}
 		}
 	}

apps/svelte.dev/src/lib/icons/discord-black.svg renamed to apps/svelte.dev/src/lib/icons/discord-light.svg

@@ -9,7 +9,7 @@
 			<enhanced:img src="./companies/apple.svg" alt="Apple logo" />
 		</div>
 	</div>
-	<h2>used by companies you've heard of</h2>
+	<h2>used by companies you’ve heard of</h2>
 	<div class="wing">
 		<div class="logos">
 			<enhanced:img src="./companies/spotify.svg" alt="Spotify logo" />

apps/svelte.dev/src/lib/icons/discord-white.svg

@@ -10,56 +10,31 @@
 		<p>
 			Svelte is a UI framework that uses a compiler to let you write breathtakingly concise
 			components that do minimal work in the browser, using languages you already know — HTML, CSS
-			and JavaScript. <strong>It's a love letter to web development.</strong>
+			and JavaScript. <strong>It’s a love letter to web development.</strong>
 		</p>
 
 		<p>
-			But don't take our word for it. Developers consistently rank Svelte as the framework they're
-			<a
-				target="_blank"
-				rel="noreferrer"
-				href="https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies"
-			>
-				most
-			</a>
-			<a
-				target="_blank"
-				rel="noreferrer"
-				href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
-			>
-				excited
-			</a>
-			<a
-				target="_blank"
-				rel="noreferrer"
-				href="https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/"
-			>
-				about
-			</a>
-
-			<a
-				target="_blank"
-				rel="noreferrer"
-				href="https://twitter.com/Rich_Harris/status/1589675637195042817"
-			>
-				using</a
-			>.
+			But don’t take our word for it. Developers consistently rank Svelte as the framework they’re
+			most excited about using.
 		</p>
 	</div>
 
 	<!-- svelte-ignore a11y_consider_explicit_label (the <enhanced:img> alt takes care of it)-->
 	<div class="screenshots">
 		<a href="https://survey.stackoverflow.co/2024/technology#2-web-frameworks-and-technologies">
-			<enhanced:img alt="Stack Overflow 2024 Developer Survey" src="./stack-overflow.png"
+			<enhanced:img
+				alt="Stack Overflow 2024 Developer Survey"
+				src="./stack-overflow.png?w=1200,1600"
 			></enhanced:img>
 		</a>
 
 		<a href="https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/">
-			<enhanced:img alt="State of JavaScript 2023" src="./state-of-js-chart.png"></enhanced:img>
+			<enhanced:img alt="State of JavaScript 2023" src="./state-of-js-chart.png?w=1000,1400"
+			></enhanced:img>
 		</a>
 
 		<a href="https://x.com/flaviocopes/status/1730895911864189299">
-			<enhanced:img alt="Tweet from @flaviocopes" src="./flavio-light.png"></enhanced:img>
+			<enhanced:img alt="Tweet from @flaviocopes" src="./flavio-light.png?w=800"></enhanced:img>
 		</a>
 	</div>
 </div>

apps/svelte.dev/src/lib/icons/github-white.svg renamed to apps/svelte.dev/src/lib/icons/github-dark.svg

@@ -47,13 +47,16 @@
 
 				if (node.nodeName === 'CODE') {
 					const { file } = node.dataset;
+
 					if (file) {
 						dispatch('select', { file });
 					}
 				}
 
 				if (node.nodeName === 'SPAN' && node.classList.contains('filename')) {
-					const file = exercise.scope.prefix + node.textContent;
+					const ext = node.dataset.ext || '';
+					const file = exercise.scope.prefix + node.textContent + ext;
+
 					dispatch('select', { file });
 				}
 			}}