From fd407a78c8f06b065f524059de81d893ce7452fe Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sun, 2 Apr 2023 01:28:20 +0530
Subject: [PATCH] Apply the suggestions

---
 sites/svelte.dev/scripts/generate_examples.js |  4 ++-
 .../src/lib/components/ReplWidget.svelte      | 10 +++----
 .../routes/(authed)/repl/[id].json/+server.js |  4 +--
 sites/svelte.dev/src/routes/+page.server.js   |  2 +-
 sites/svelte.dev/src/routes/+page.svelte      |  5 ----
 .../src/routes/_components/Demo.svelte        | 27 +++++++++++++++++--
 .../src/routes/examples/api/+server.js        |  8 ++++++
 .../examples/api/[slug].json/+server.js       | 17 ++++++++++++
 8 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 sites/svelte.dev/src/routes/examples/api/+server.js
 create mode 100644 sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js

diff --git a/sites/svelte.dev/scripts/generate_examples.js b/sites/svelte.dev/scripts/generate_examples.js
index 3ae9904d1d..c9ff30e9a9 100644
--- a/sites/svelte.dev/scripts/generate_examples.js
+++ b/sites/svelte.dev/scripts/generate_examples.js
@@ -5,7 +5,9 @@ const examples_data = get_examples_data(
 	new URL('../../../site/content/examples', import.meta.url).pathname
 );
 
+fs.mkdirSync(new URL('../src/lib/generated/', import.meta.url), { recursive: true });
+
 fs.writeFileSync(
-	new URL('../src/routes/(authed)/repl/[id].json/examples-data.js', import.meta.url),
+	new URL('../src/lib/generated/examples-data.js', import.meta.url),
 	`export default ${JSON.stringify(examples_data)}`
 );
diff --git a/sites/svelte.dev/src/lib/components/ReplWidget.svelte b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
index 7d64eadd6f..3bea26e503 100644
--- a/sites/svelte.dev/src/lib/components/ReplWidget.svelte
+++ b/sites/svelte.dev/src/lib/components/ReplWidget.svelte
@@ -2,21 +2,20 @@
 	import { browser } from '$app/environment';
 	import { process_example } from '$lib/utils/examples';
 	import Repl from '@sveltejs/repl';
-	import { getContext, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 
 	export let version = '3';
 	export let gist = null;
 	export let example = null;
 	export let embedded = false;
 
+	/** @type {import('@sveltejs/repl').default} */
 	let repl;
 	let name = 'loading...';
 
 	let mounted = false;
 
-	const repl_widget_examples = getContext('repl_widget_examples');
-
-	function load(gist, example) {
+	async function load(gist, example) {
 		if (version !== 'local') {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
@@ -60,7 +59,8 @@
 				});
 		} else if (example) {
 			const components = process_example(
-				repl_widget_examples.find(({ id }) => id === example).files
+				// repl_widget_examples.find(({ id }) => id === example).files
+				(await fetch(`/examples/api/${example}.json`).then((r) => r.json())).files
 			);
 
 			repl.set({
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js b/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
index 1fd0b5a984..3725391795 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
@@ -2,9 +2,9 @@ import { dev } from '$app/environment';
 import { client } from '$lib/db/client';
 import * as gist from '$lib/db/gist';
 import { get_example } from '$lib/server/examples';
-import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
+import { get_examples_list } from '$lib/server/examples/get-examples';
 import { error, json } from '@sveltejs/kit';
-import examples_data from './examples-data.js';
+import examples_data from '$lib/generated/examples-data.js';
 
 export const prerender = 'auto';
 
diff --git a/sites/svelte.dev/src/routes/+page.server.js b/sites/svelte.dev/src/routes/+page.server.js
index e171f25a36..69bc35dac9 100644
--- a/sites/svelte.dev/src/routes/+page.server.js
+++ b/sites/svelte.dev/src/routes/+page.server.js
@@ -1,5 +1,5 @@
 import { get_example } from '$lib/server/examples';
-import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
+import { get_examples_data } from '$lib/server/examples/get-examples';
 
 export const prerender = true;
 
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index 15d5566104..295b543b15 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -1,16 +1,11 @@
 <script>
 	import { Blurb } from '@sveltejs/site-kit/components';
-	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 Supporters from './_components/Supporters/index.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
-
-	export let data;
-
-	setContext('repl_widget_examples', data.examples);
 </script>
 
 <svelte:head>
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index a230e10aa0..d4b780d2d9 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/sites/svelte.dev/src/routes/_components/Demo.svelte
@@ -1,9 +1,32 @@
 <script>
-	import { getContext } from 'svelte';
 	import Example from './Example.svelte';
 	import Section from './Section.svelte';
 
-	const examples = getContext('repl_widget_examples');
+	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.',
+		},
+	];
 
 	$: selected = examples[0];
 </script>
diff --git a/sites/svelte.dev/src/routes/examples/api/+server.js b/sites/svelte.dev/src/routes/examples/api/+server.js
new file mode 100644
index 0000000000..632c2c5dc4
--- /dev/null
+++ b/sites/svelte.dev/src/routes/examples/api/+server.js
@@ -0,0 +1,8 @@
+// @ts-check
+import examples_data from '$lib/generated/examples-data.js';
+import { get_examples_list } from '$lib/server/examples/get-examples';
+import { json } from '@sveltejs/kit';
+
+export const GET = () => {
+	return json(get_examples_list(examples_data));
+};
diff --git a/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js b/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js
new file mode 100644
index 0000000000..45594024bf
--- /dev/null
+++ b/sites/svelte.dev/src/routes/examples/api/[slug].json/+server.js
@@ -0,0 +1,17 @@
+import examples_data from '$lib/generated/examples-data.js';
+import { get_example } from '$lib/server/examples';
+import { get_examples_list } from '$lib/server/examples/get-examples';
+import { error, json } from '@sveltejs/kit';
+
+export const GET = ({ params }) => {
+	const examples = new Set(
+		get_examples_list(examples_data)
+			.map((category) => category.examples)
+			.flat()
+			.map((example) => example.slug)
+	);
+
+	if (!examples.has(params.slug)) throw error(404, 'Example not found');
+
+	return json(get_example(examples_data, params.slug));
+};