From 362a7aede9690e6e4f8bc4dec8b2fc1df24ee917 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Wed, 31 May 2023 11:18:25 -0400
Subject: [PATCH] replace examples page

---
 sites/svelte.dev/src/routes/examples/+page.js |  8 --
 .../src/routes/examples/+page.server.js       |  9 ++
 .../src/routes/examples/+page.svelte          | 93 +++++++++++++++++++
 .../routes/examples/[slug]/+page.server.js    | 15 +--
 4 files changed, 104 insertions(+), 21 deletions(-)
 delete mode 100644 sites/svelte.dev/src/routes/examples/+page.js
 create mode 100644 sites/svelte.dev/src/routes/examples/+page.server.js

diff --git a/sites/svelte.dev/src/routes/examples/+page.js b/sites/svelte.dev/src/routes/examples/+page.js
deleted file mode 100644
index 6c39a1de34..0000000000
--- a/sites/svelte.dev/src/routes/examples/+page.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export const prerender = true;
-
-/** @type {import('./$types').PageLoad} */
-export function load() {
-	throw redirect(301, 'examples/hello-world');
-}
diff --git a/sites/svelte.dev/src/routes/examples/+page.server.js b/sites/svelte.dev/src/routes/examples/+page.server.js
new file mode 100644
index 0000000000..8b94021616
--- /dev/null
+++ b/sites/svelte.dev/src/routes/examples/+page.server.js
@@ -0,0 +1,9 @@
+import { get_example, get_examples_data, get_examples_list } from '$lib/server/examples/index.js';
+
+export const prerender = true;
+
+export async function load() {
+	return {
+		examples: get_examples_list(get_examples_data())
+	};
+}
diff --git a/sites/svelte.dev/src/routes/examples/+page.svelte b/sites/svelte.dev/src/routes/examples/+page.svelte
index e69de29bb2..88ad3b16de 100644
--- a/sites/svelte.dev/src/routes/examples/+page.svelte
+++ b/sites/svelte.dev/src/routes/examples/+page.svelte
@@ -0,0 +1,93 @@
+<script>
+	export let data;
+</script>
+
+<svelte:head>
+	<title>Examples • Svelte</title>
+</svelte:head>
+
+<div class="examples">
+	<h1>Examples</h1>
+
+	{#each data.examples as section}
+		<h2>{section.title}</h2>
+
+		<ul>
+			{#each section.examples as example}
+				<li>
+					<a href="/repl/{example.slug}">
+						<img src="/examples/thumbnails/{example.slug}.jpg" alt="{example.title} thumbnail" />
+						{example.title}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/each}
+</div>
+
+<style>
+	.examples {
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+		max-width: var(--sk-page-main-width);
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 4rem;
+		font-weight: 400;
+	}
+
+	ul {
+		list-style: none;
+		display: grid;
+		grid-gap: 1rem;
+	}
+
+	li {
+		position: relative;
+	}
+
+	h2 {
+		color: var(--sk-text-2);
+		font-size: var(--sk-text-l);
+		font-weight: 400;
+		margin-top: 2em;
+	}
+
+	li a {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		border-radius: var(--sk-border-radius);
+		color: var(--sk-text-2);
+		text-decoration: none;
+		/* border: 1px solid #eee; */
+		border-radius: 4px;
+		padding: 1rem;
+		background: white;
+		filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
+	}
+
+	li a:hover {
+		text-decoration: underline;
+	}
+
+	li img {
+		width: 6rem;
+		aspect-ratio: 1;
+		/* background: white; */
+		object-fit: contain;
+	}
+
+	@media (min-width: 540px) {
+		ul {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (min-width: 720px) {
+		ul {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+</style>
diff --git a/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js b/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js
index d7c39af2a5..43d673dd32 100644
--- a/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js
+++ b/sites/svelte.dev/src/routes/examples/[slug]/+page.server.js
@@ -1,16 +1,5 @@
-import { get_example, get_examples_data, get_examples_list } from '$lib/server/examples/index.js';
-
-export const prerender = true;
+import { redirect } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	const examples_data = get_examples_data();
-
-	const examples_list = get_examples_list(examples_data);
-	const example = get_example(examples_data, params.slug);
-
-	return {
-		examples_list,
-		example,
-		slug: params.slug
-	};
+	throw redirect(308, `/repl/${params.slug}`);
 }