Remove examples api

sites/svelte.dev/src/lib/components/ReplWidget.svelte

@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment';
 	import { process_example } from '$lib/utils/examples';
 	import Repl from '@sveltejs/repl';
-	import { onMount } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 
 	export let version = '3';
 	export let gist = null;
@@ -57,15 +57,12 @@
 					repl.set({ components });
 				});
 		} else if (example) {
-			fetch(`/examples/api/${example}.json`).then(async (response) => {
+			const components = process_example(
-				if (response.ok) {
+				getContext('repl_widget_examples').find(({ id }) => id === example).files
-					const data = await response.json();
+			);
-					const components = process_example(data.files);
+
-
+			repl.set({
-					repl.set({
+				components,
-						components,
-					});
-				}
 			});
 		}
 	}

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

@@ -1 +0,0 @@
-export const prerender = true;

sites/svelte.dev/src/routes/+page.server.js

@@ -0,0 +1,43 @@
+import { get_example } from '$lib/server/examples';
+import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
+
+export const prerender = true;
+
+const examples = [
+	{
+		id: 'hello-world',
+		title: 'Hello World',
+		description: 'Svelte components are built on top of HTML. Just add data.',
+	},
+	{
+		id: 'nested-components',
+		title: 'Scoped CSS',
+		description:
+			'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.',
+	},
+	{
+		id: 'reactive-assignments',
+		title: 'Reactivity',
+		description:
+			'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
+	},
+	{
+		id: 'svg-transitions',
+		title: 'Transitions',
+		description:
+			'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
+	},
+];
+
+export const load = () => {
+	const examples_data = get_examples_data();
+
+	return {
+		examples: examples.map(({ description, id, title }) => ({
+			id,
+			title,
+			description,
+			files: get_example(examples_data, id).files,
+		})),
+	};
+};

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

@@ -1,11 +1,16 @@
 <script>
 	import { Blurb } from '@sveltejs/site-kit/components';
-	import Supporters from './_components/Supporters/index.svelte';
+	import { setContext } from 'svelte';
+	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
+	import Demo from './_components/Demo.svelte';
 	import Hero from './_components/Hero.svelte';
 	import Image from './_components/Image.svelte';
-	import Demo from './_components/Demo.svelte';
+	import Supporters from './_components/Supporters/index.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
-	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
+
+	export let data;
+
+	setContext('repl_widget_examples', data.examples);
 </script>
 
 <svelte:head>

sites/svelte.dev/src/routes/_components/Demo.svelte

@@ -1,34 +1,11 @@
 <script>
+	import { getContext } from 'svelte';
 	import Example from './Example.svelte';
 	import Section from './Section.svelte';
 
-	const examples = [
+	const examples = getContext('repl_widget_examples');
-		{
+
-			id: 'hello-world',
+	$: selected = examples[0];
-			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.',
-		},
-		{
-			id: 'nested-components',
-			title: 'Scoped CSS',
-			description:
-				'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a >.',
-		},
-		{
-			id: 'reactive-assignments',
-			title: 'Reactivity',
-			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
-		},
-		{
-			id: 'svg-transitions',
-			title: 'Transitions',
-			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
-		},
-	];
-
-	let selected = examples[0];
 </script>
 
 <Section --background="radial-gradient(circle at 40% 30%, rgb(110, 113, 118), rgb(81, 93, 106))">
@@ -48,10 +25,12 @@
 			<a href="/examples">more <span class="large-show">&nbsp;examples</span> &rarr;</a>
 		</div>
 
-		<Example id={selected.id} />
+		{#if selected}
+			<Example id={selected?.id} />
+		{/if}
 	</div>
 
-	<p class="description">{@html selected.description}</p>
+	<p class="description">{@html selected?.description}</p>
 </Section>
 
 <style>

sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js

@@ -1,7 +0,0 @@
-import { get_example } from '$lib/server/examples';
-import { get_examples_data } from '$lib/server/examples/get-examples';
-import { json } from '@sveltejs/kit';
-
-export const GET = async ({ params }) => {
-	return json(get_example(get_examples_data(), params.slug));
-};