feat: homepage

.prettierignore

@@ -4,4 +4,5 @@ node_modules
 dist
 pnpm-lock.yaml
 .vercel
-_generated.md
+_generated.md
+land-110m.json

apps/svelte.dev/.gitignore

@@ -2,6 +2,8 @@
 /.vercel
 /package
 /src/lib/generated
-/src/routes/_components/Supporters/contributors.js
-/src/routes/_components/Supporters/donors.js
-/static/svelte-app.json
+/src/routes/_home/Supporters/contributors.jpg
+/src/routes/_home/Supporters/contributors.js
+/src/routes/_home/Supporters/donors.jpg
+/src/routes/_home/Supporters/donors.js
+/static/svelte-app.json

apps/svelte.dev/.prettierignore

@@ -1,2 +1,3 @@
 _generated.md
 scripts/create-tutorial-zip/common/.svelte-kit
+land-110m.json

apps/svelte.dev/package.json

@@ -37,26 +37,31 @@
 		"@rich_harris/svelte-split-pane": "^1.1.3",
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/repl": "workspace:*",
+		"@types/d3-geo": "^3.1.0",
 		"@vercel/speed-insights": "^1.0.0",
 		"@webcontainer/api": "^1.1.5",
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
 		"codemirror": "^6.0.1",
 		"cookie": "^0.6.0",
+		"d3-geo": "^3.1.0",
+		"d3-geo-projection": "^4.0.0",
 		"devalue": "^5.0.0",
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
+		"topojson-client": "^3.1.0",
 		"ws": "^8.13.0",
 		"yootils": "^0.3.1"
 	},
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.6.2",
 		"@sveltejs/adapter-vercel": "^5.3.1",
+		"@sveltejs/enhanced-img": "^0.3.0",
 		"@sveltejs/kit": "^2.5.15",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.3",

apps/svelte.dev/scripts/get_contributors.js

@@ -10,8 +10,8 @@ const force = process.env.FORCE_UPDATE === 'true';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(__dirname);
 
-// ../src/routes/_components/Supporters/contributors.js
-const outputFile = new URL(`../src/routes/_components/Supporters/contributors.js`, import.meta.url);
+// ../src/routes/_home/Supporters/contributors.js
+const outputFile = new URL(`../src/routes/_home/Supporters/contributors.js`, import.meta.url);
 
 try {
 	if (!force && (await stat(outputFile))) {
@@ -65,9 +65,7 @@ try {
 	await sprite
 		.quality(80)
 		.writeAsync(
-			fileURLToPath(
-				new URL(`../src/routes/_components/Supporters/contributors.jpg`, import.meta.url)
-			)
+			fileURLToPath(new URL(`../src/routes/_home/Supporters/contributors.jpg`, import.meta.url))
 		);
 
 	const str = `[\n\t${authors.map((a) => `'${a.login}'`).join(',\n\t')}\n]`;

apps/svelte.dev/scripts/get_donors.js

@@ -10,7 +10,7 @@ const force = process.env.FORCE_UPDATE === 'true';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(__dirname);
 
-const outputFile = new URL(`../src/routes/_components/Supporters/donors.js`, import.meta.url);
+const outputFile = new URL(`../src/routes/_home/Supporters/donors.js`, import.meta.url);
 
 try {
 	if (!force && (await stat(outputFile))) {
@@ -59,7 +59,7 @@ try {
 	await sprite
 		.quality(80)
 		.writeAsync(
-			fileURLToPath(new URL(`../src/routes/_components/Supporters/donors.jpg`, import.meta.url))
+			fileURLToPath(new URL(`../src/routes/_home/Supporters/donors.jpg`, import.meta.url))
 		);
 
 	const str = `[\n\t${included.map((a) => `${JSON.stringify(a.backer.name)}`).join(',\n\t')}\n]`;

apps/svelte.dev/src/ambient.d.ts

@@ -1 +1,10 @@
 declare module 'do-not-zip';
+declare module 'd3-geo-projection';
+declare module 'topojson-client';
+
+// remove this once enhanced-img fixed its ambient types
+declare module '*?enhanced' {
+	import type { Picture } from 'vite-imagetools';
+	const value: Picture;
+	export default value;
+}

apps/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte

@@ -67,7 +67,7 @@
 	<title>{name} • REPL • Svelte</title>
 
 	<meta name="twitter:title" content="{data.gist.name} • REPL • Svelte" />
-	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
+	<meta name="twitter:description" content="Web development, but fun" />
 	<meta name="Description" content="Interactive Svelte playground" />
 </svelte:head>
 

apps/svelte.dev/src/routes/(authed)/repl/[id]/embed/+page.svelte

@@ -57,7 +57,7 @@
 	<title>{data.gist.name} • REPL • Svelte</title>
 
 	<meta name="twitter:title" content="{data.gist.name} • REPL • Svelte" />
-	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
+	<meta name="twitter:description" content="Web development, but fun" />
 	<meta name="Description" content="Interactive Svelte playground" />
 </svelte:head>
 

apps/svelte.dev/src/routes/+page.svelte

@@ -1,110 +1,125 @@
 <script>
 	import { Blurb, Footer, TrySection } from '@sveltejs/site-kit/home';
-	import Demo from './_components/Demo.svelte';
-	import Hero from './_components/Hero.svelte';
-	import Supporters from './_components/Supporters/index.svelte';
-	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
+	import Hero from './_home/Hero.svelte';
+	import Supporters from './_home/Supporters/index.svelte';
+	import WhosUsingSvelte from './_home/WhosUsingSvelte/index.svelte';
+	import Svelte from './_home/Svelte.svelte';
+	import Features from './_home/Features.svelte';
+	import Deployment from './_home/Deployment.svelte';
+	import Showcase from './_home/Showcase.svelte';
+	import './_home/common.css';
+	import HeroSvelteKit from './_home/HeroSvelteKit.svelte';
 </script>
 
 <svelte:head>
-	<title>Svelte • Cybernetically enhanced web apps</title>
+	<title>Svelte • Web development, but fun</title>
 
 	<meta name="twitter:title" content="Svelte" />
-	<meta name="twitter:description" content="Cybernetically enhanced web apps" />
-	<meta name="Description" content="Cybernetically enhanced web apps" />
+	<meta name="twitter:description" content="Web development, but fun" />
+	<meta name="Description" content="Web development, but fun" />
 </svelte:head>
 
-<h1 class="visually-hidden">Svelte</h1>
-
-<Hero />
-
-<Blurb --background="var(--sk-back-1)">
-	{#snippet one()}
-		<div>
-			<h2>compiled</h2>
-			<p>
-				Svelte shifts as much work as possible out of the browser and into your build step. No more
-				manual optimisations — just faster, more efficient apps.
-			</p>
-		</div>
-	{/snippet}
-
-	{#snippet two()}
-		<div>
-			<h2>compact</h2>
-			<p>
-				Write breathtakingly concise components using languages you already know — HTML, CSS and
-				JavaScript. Oh, and your application bundles will be tiny as well.
-			</p>
-		</div>
-	{/snippet}
-
-	{#snippet three()}
-		<div>
-			<h2>complete</h2>
-			<p>
-				Built-in scoped styling, state management, motion primitives, form bindings and more — don't
-				waste time trawling npm for the bare essentials. It's all here.
-			</p>
-		</div>
-	{/snippet}
-</Blurb>
-
-<TrySection />
-
-<Demo />
-
-<WhosUsingSvelte />
-
-<Supporters />
-
-<Footer
-	links={{
-		resources: [
-			{
-				title: 'documentation',
-				href: '/docs'
-			},
-			{
-				title: 'tutorial',
-				href: '/tutorial'
-			},
-			{
-				title: 'repl',
-				href: '/repl'
-			},
-			{
-				title: 'blog',
-				href: '/blog'
-			}
-		],
-		connect: [
-			{
-				title: 'github',
-				href: 'https://github.com/sveltejs/svelte'
-			},
-			{
-				title: 'opencollective',
-				href: 'https://opencollective.com/svelte'
-			},
-			{
-				title: 'discord',
-				href: '/chat'
-			},
-			{
-				title: 'twitter',
-				href: 'https://twitter.com/sveltejs'
-			}
-		]
-	}}
->
-	{#snippet license()}
-		<span>
-			Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
-			under the MIT license
-		</span>
-	{/snippet}
-</Footer>
+<div class="home">
+	<h1 class="visually-hidden">Svelte</h1>
+
+	<Hero />
+
+	<Blurb --background="var(--sk-back-1)">
+		{#snippet one()}
+			<div>
+				<h2>fast</h2>
+				<p>
+					Svelte shifts as much work as possible out of the browser and into your build step. No
+					more manual optimisations — just faster, smaller and more efficient apps.
+				</p>
+			</div>
+		{/snippet}
+
+		{#snippet two()}
+			<div>
+				<h2>fun</h2>
+				<p>
+					Write concise components using languages you already know — HTML, CSS and JavaScript. Get
+					things done without fighting the framework. Code with joy.
+				</p>
+			</div>
+		{/snippet}
+
+		{#snippet three()}
+			<div>
+				<h2>flexible</h2>
+				<p>
+					Svelte scales from tiny widgets all the way to big full-stack applications. State
+					management, motion primitives, form bindings and more — all built-in.
+				</p>
+			</div>
+		{/snippet}
+	</Blurb>
+
+	<TrySection />
+
+	<Svelte />
+
+	<HeroSvelteKit />
+
+	<Features />
+
+	<Deployment />
+
+	<Showcase />
+
+	<WhosUsingSvelte />
+
+	<Supporters />
+
+	<Footer
+		links={{
+			resources: [
+				{
+					title: 'documentation',
+					href: '/docs'
+				},
+				{
+					title: 'tutorial',
+					href: '/tutorial'
+				},
+				{
+					title: 'repl',
+					href: '/repl'
+				},
+				{
+					title: 'blog',
+					href: '/blog'
+				}
+			],
+			connect: [
+				{
+					title: 'github',
+					href: 'https://github.com/sveltejs/svelte'
+				},
+				{
+					title: 'opencollective',
+					href: 'https://opencollective.com/svelte'
+				},
+				{
+					title: 'discord',
+					href: '/chat'
+				},
+				{
+					title: 'twitter',
+					href: 'https://twitter.com/sveltejs'
+				}
+			]
+		}}
+	>
+		{#snippet license()}
+			<span>
+				Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
+				under the MIT license
+			</span>
+		{/snippet}
+	</Footer>
+</div>
 
 <style>
 	h2 {