[marketing] homepage updates

sites/kit.svelte.dev/package.json

@@ -16,13 +16,16 @@
 		"@sveltejs/kit": "workspace:*",
 		"@sveltejs/site-kit": "^2.1.4",
 		"@types/node": "^16.18.6",
+		"d3": "^7.7.0",
+		"d3-dsv": "^3.0.1",
 		"flexsearch": "^0.7.31",
 		"magic-string": "^0.27.0",
 		"marked": "^4.2.3",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
 		"shiki-twoslash": "^3.1.0",
 		"svelte": "^3.53.1",
+		"topojson-client": "^3.1.0",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^4.9.3",
 		"uvu": "^0.5.6",

sites/kit.svelte.dev/src/routes/+page.svelte

@@ -1,8 +1,23 @@
 <script>
-	import { Blurb } from '@sveltejs/site-kit';
-	import Hero from './Hero.svelte';
+	// images
 	import Logotype from './svelte-kit-logotype.svg';
 	import Machine from './svelte-kit-machine.webp?w=1440;800;600;480&format=avif;webp;png&picture';
+
+	// code highlighting
+	import * as hovers from '$lib/docs/client/hovers.js';
+	hovers.setup();
+
+	// sections
+	import { Blurb } from '@sveltejs/site-kit';
+	import Hero from './Hero.svelte';
+	import Adapters from './Adapters.svelte';
+	import Fun from './Fun.svelte';
+	import Grow from './Grow.svelte';
+	import Lighthouse from './Lighthouse.svelte';
+	import Showcase from './Showcase.svelte';
+
+	// css
+	import './common.css';
 </script>
 
 <svelte:head>
@@ -13,81 +28,119 @@
 	<meta name="description" content="SvelteKit is the official Svelte application framework" />
 </svelte:head>
 
-<h1 class="visually-hidden">SvelteKit</h1>
-<Hero
-	title="SvelteKit"
-	logotype={Logotype}
-	tagline="The fastest way to build svelte apps"
-	background={Machine}
-	alt="SvelteKit illustration"
-/>
-
-<div class="blurb-shifter">
-	<Blurb>
-		<div slot="one">
-			<h2>Powered by Svelte</h2>
-			<p>
-				SvelteKit is an application framework powered by Svelte — build bigger apps with a smaller
-				footprint
-			</p>
-
-			<a href="https://svelte.dev" class="cta">learn Svelte</a>
-		</div>
-
-		<div slot="two">
-			<h2>Best of both worlds</h2>
-			<p>
-				All the SEO and progressive enhancement of a server-rendered app, with the slick navigation
-				of an SPA
-			</p>
-
-			<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
+<div class="home">
+	<h1 class="visually-hidden">SvelteKit</h1>
+	<Hero
+		title="SvelteKit"
+		logotype={Logotype}
+		tagline="The fastest way to build svelte apps"
+		background={Machine}
+		alt="SvelteKit illustration"
+	/>
+
+	<div class="blurb-shifter">
+		<Blurb>
+			<div slot="one">
+				<h2>Powered by Svelte</h2>
+				<p>
+					SvelteKit is an application framework powered by Svelte — build bigger apps with a smaller
+					footprint
+				</p>
+
+				<a href="https://svelte.dev" class="cta">learn Svelte</a>
+			</div>
+
+			<div slot="two">
+				<h2>Best of both worlds</h2>
+				<p>
+					All the SEO and progressive enhancement of a server-rendered app, with the slick navigation
+					of an SPA
+				</p>
+
+				<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
+			</div>
+
+			<div slot="three">
+				<h2>Build fast</h2>
+				<p>
+					Hit the ground running with advanced routing, server-side rendering, code-splitting, offline
+					support and more
+				</p>
+
+				<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
+			</div>
+
+			<div class="description" slot="what">
+				<p>
+					SvelteKit is a framework for building web applications of all sizes, with a beautiful
+					development experience and flexible filesystem-based routing.
+				</p>
+
+				<p>
+					Unlike single-page apps, SvelteKit doesn't compromise on SEO, progressive enhancement or the
+					initial load experience — but unlike traditional server-rendered apps, navigation is
+					instantaneous for that app-like feel.
+				</p>
+
+				<p>
+					<a href="https://node.new/sveltekit">Try it on StackBlitz</a> or create a project locally.
+				</p>
+			</div>
+
+			<div slot="how">
+				<pre><code
+						>npm create <span class="orange-highlight">svelte</span>@latest my-app
+cd my-app
+npm install
+npm run dev -- --open</code
+					></pre>
+				<a data-sveltekit-preload-data href="/docs" class="cta">get started</a>
+			</div>
+		</Blurb>
+	</div>
+
+	<div class="fun">
+		<div class="section">
+			<Fun />
 		</div>
+	</div>
 
-		<div slot="three">
-			<h2>Build fast</h2>
-			<p>
-				Hit the ground running with advanced routing, server-side rendering, code-splitting, offline
-				support and more
-			</p>
+	<div class="section grow">
+		<Grow />
+	</div>
 
-			<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
+	<div class="lighthouse">
+		<div class="section">
+			<Lighthouse />
 		</div>
+	</div>
 
-		<div class="description" slot="what">
-			<p>
-				SvelteKit is a framework for building web applications of all sizes, with a beautiful
-				development experience and flexible filesystem-based routing.
-			</p>
-
-			<p>
-				Unlike single-page apps, SvelteKit doesn't compromise on SEO, progressive enhancement or the
-				initial load experience — but unlike traditional server-rendered apps, navigation is
-				instantaneous for that app-like feel.
-			</p>
-
-			<p>
-				<a href="https://node.new/sveltekit">Try it on StackBlitz</a> or create a project locally.
-			</p>
-		</div>
+	<div class="section adapters">
+		<Adapters />
+	</div>
 
-		<div slot="how">
-			<pre><code
-					>npm create <span class="orange-highlight">svelte</span>@latest my-app
-cd my-app
-npm install
-npm run dev -- --open</code
-				></pre>
-			<a data-sveltekit-preload-data href="/docs" class="cta">get started</a>
+	<div class="showcase">
+		<div class="section">
+			<Showcase />
 		</div>
-	</Blurb>
+	</div>
 </div>
 
 <style>
 	:global(.hero-container:dir(rtl)) {
 		max-width: 116rem;
 	}
 
+	/* @vedam -------------------------------------
+		Because I didn't want to fiddle arround in @sveltejs/site-kit
+		I tweaked the h3s font-size here.
+		I don't know if changing this value is a foottrap elsewhere.
+	*/
+	:global(.typo-default) {
+		--h3: 3.6rem !important;
+	}
+	/* /@vedam ------------------------------------- */
+
 	pre {
 		height: 100%;
 		display: flex;
@@ -107,4 +160,33 @@ npm run dev -- --open</code
 			margin-top: -12em;
 		}
 	}
+
+	.section {
+		position: relative;
+		margin: 0 auto 10rem auto;
+		padding: 0 var(--side-nav);
+		max-width: 120rem;
+	}
+
+	.fun {
+		background: #f5f8fc;
+		padding: 10rem 2rem 3rem;
+		margin: 0 auto 10rem;
+	}
+
+	.lighthouse {
+		background: #212121;
+		padding: 10rem 2rem;
+		margin: 0 auto 10rem auto;
+	}
+
+	.lighthouse .section {
+		margin: 0 auto;
+	}
+
+	.showcase {
+		background: #f5f8fc;
+		padding: 10rem 2rem;
+		margin: 0 auto;
+	}
 </style>

sites/kit.svelte.dev/src/routes/Adapters.svelte

@@ -0,0 +1,111 @@
+<script>
+	import Vercel from './logo-vercel.svg';
+	import Netlify from './logo-netlify.svg';
+	import Cloudflare from './logo-cloudflare.svg';
+	import HTML from './logo-html5.svg';
+	import Node from './logo-nodejs.svg';
+	import Firebase from './logo-firebase.svg';
+	import Deno from './logo-deno.svg';
+	import AppEngine from './logo-appengine.svg';
+
+	const adapters = [
+		{ display: 'Vercel', package: '@sveltejs/adapter-vercel', image: Vercel },
+		{ display: 'Netlify', package: '@sveltejs/adapter-netlify', image: Netlify },
+		{ display: 'Cloudflare', package: '@sveltejs/adapter-cloudflare', image: Cloudflare },
+		{ display: 'your server', package: '@sveltejs/adapter-node', image: HTML },
+		{ display: 'static hosting', package: '@sveltejs/adapter-static', image: Node },
+		{ display: 'Firebase', package: 'svelte-adapter-firebase', image: Firebase },
+		{ display: 'Deno', package: 'svelte-adapter-deno', image: Deno },
+		{ display: 'AppEngine', package: 'svelte-adapter-appengine', image: AppEngine },
+	];
+
+	let i = 0;
+	let adapter;
+
+	function update() {
+		adapter = adapters[i];
+		i = (i + 1) % adapters.length;
+		setTimeout(update, 2200);
+	}
+
+	update();
+</script>
+
+<h2>Deploy Anywhere</h2>
+
+<div class="container">
+
+	<div class="anywhere">
+		<p>SvelteKit builds instant, optimized bundles with the Svelte compiler and code-splitting.</p>
+		<p>Deploy to over 20 different platforms with community adapters by changing just a single line of code.</p>
+	</div>
+
+	<div class="host">
+		<h3>{adapter.display}</h3>
+		<img src={adapter.image} alt="" />
+	</div>
+
+	<div class="code-container">
+		<!-- This has to be prerendered through a complicated pipeline.
+			   I just wrote an FAQ with this code block and then copied the output here.
+				 Needed to encode the curly braces and then update the dynamic part. -->
+		<div class="text"><pre class="shiki twoslash lsp" style="background-color: var(--shiki-color-background); color: var(--shiki-color-text)"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> <data-lsp lsp="(alias) function adapter(options?: AdapterOptions): <a href=&quot;/docs/types#sveltejs-kit-adapter&quot;>Adapter</a>&amp;#10;import adapter">adapter</data-lsp> </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'{adapter.package}'</span><span style="color: var(--shiki-color-text)">;</span></div><div class="line">&nbsp;</div><div class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> &lcub;</span></div><div class="line"><span style="color: var(--shiki-color-text)">  <data-lsp lsp="(property) kit: &lcub;&amp;#10;    adapter: <a href=&quot;/docs/types#sveltejs-kit-adapter&quot;>Adapter</a>;&amp;#10;}">kit</data-lsp></span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> &lcub;</span></div><div class="line"><span style="color: var(--shiki-color-text)">    <data-lsp lsp="(property) adapter: <a href=&quot;/docs/types#sveltejs-kit-adapter&quot;>Adapter</a>">adapter</data-lsp></span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)"><data-lsp lsp="(alias) adapter(options?: AdapterOptions | undefined): <a href=&quot;/docs/types#sveltejs-kit-adapter&quot;>Adapter</a>&amp;#10;import adapter">adapter</data-lsp></span><span style="color: var(--shiki-color-text)">()</span></div><div class="line"><span style="color: var(--shiki-color-text)">  &rcub;</span></div><div class="line"><span style="color: var(--shiki-color-text)">&rcub;</span></div></code></div></pre></div>
+	</div>
+
+</div>
+
+<style>
+	h2 {
+		margin-bottom: 1em;
+	}
+
+	.container {
+		display: grid;
+		grid-template-columns: repeat(10, minmax(0, 1fr));
+		gap: 10px;
+		width: 100%;
+	}
+
+	.host {
+		text-align: center;
+		display: none;
+	}
+
+	.anywhere {
+		grid-column: span 10 / span 10;
+		line-height: 200%;
+	}
+
+	.code-container {
+		grid-column: span 10 / span 10;
+	}
+
+	.code-block {
+		max-width: 450px;
+	}
+
+	@media (min-width: 640px) {
+		.anywhere {
+			grid-column: span 10 / span 10;
+		}
+		.host {
+			grid-column: span 3 / span 3;
+			display: block;
+		}
+		.code-container {
+			grid-column: span 7 / span 7;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.anywhere {
+			grid-column: span 3 / span 3;
+		}
+		.host {
+			grid-column: span 3 / span 3;
+		}
+		.code-container {
+			grid-column: span 4 / span 4;
+		}
+	}
+</style>