From 04286243caf8093920e64d13d8893fdd02c2b9a5 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 10 Mar 2019 22:25:33 -0400
Subject: [PATCH] transfer over all the old examples worth keeping

---
 .../binding-input-checkbox/App.svelte         |  34 ----
 .../homepage-demo-hello-world/App.svelte      |   5 -
 .../homepage-demo-reactivity/App.svelte       |  11 --
 .../homepage-demo-scoped-styles/App.svelte    |  12 --
 .../homepage-demo-scoped-styles/Foo.svelte    |   7 -
 site/content/OLD.examples/manifest.json       | 184 ------------------
 .../11-svg/05-svg-transitions}/App.svelte     |   0
 .../05-svg-transitions}/custom-transitions.js |   0
 .../11-svg/05-svg-transitions/meta.json       |   3 +
 .../11-svg/05-svg-transitions}/shape.js       |   5 +-
 .../14-composition/04-modal}/App.svelte       |   0
 .../14-composition/04-modal}/Modal.svelte     |  22 +--
 .../14-composition/04-modal/meta.json         |   3 +
 .../01-hacker-news}/App.svelte                |   0
 .../01-hacker-news}/Comment.svelte            |   0
 .../01-hacker-news}/Item.svelte               |   0
 .../01-hacker-news}/List.svelte               |   0
 .../01-hacker-news}/Summary.svelte            |   0
 .../20-miscellaneous/01-hacker-news/meta.json |   3 +
 .../02-immutable-data}/App.svelte             |   4 +-
 .../02-immutable-data}/ImmutableTodo.svelte   |   0
 .../02-immutable-data}/MutableTodo.svelte     |   0
 .../02-immutable-data}/flash.js               |   0
 .../02-immutable-data/meta.json               |   3 +
 .../examples/20-miscellaneous/meta.json       |   3 +
 site/src/routes/index.svelte                  |   8 +-
 .../src/routes/repl/_utils/process_example.js |  16 ++
 site/src/routes/repl/embed.svelte             |  13 +-
 site/src/routes/repl/index.svelte             |  17 +-
 29 files changed, 57 insertions(+), 296 deletions(-)
 delete mode 100644 site/content/OLD.examples/binding-input-checkbox/App.svelte
 delete mode 100644 site/content/OLD.examples/homepage-demo-hello-world/App.svelte
 delete mode 100644 site/content/OLD.examples/homepage-demo-reactivity/App.svelte
 delete mode 100644 site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte
 delete mode 100644 site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte
 delete mode 100644 site/content/OLD.examples/manifest.json
 rename site/content/{OLD.examples/homepage-demo-transitions => examples/11-svg/05-svg-transitions}/App.svelte (100%)
 rename site/content/{OLD.examples/homepage-demo-transitions => examples/11-svg/05-svg-transitions}/custom-transitions.js (100%)
 create mode 100644 site/content/examples/11-svg/05-svg-transitions/meta.json
 rename site/content/{OLD.examples/homepage-demo-transitions => examples/11-svg/05-svg-transitions}/shape.js (86%)
 rename site/content/{OLD.examples/modal-with-slot => examples/14-composition/04-modal}/App.svelte (100%)
 rename site/content/{OLD.examples/modal-with-slot => examples/14-composition/04-modal}/Modal.svelte (100%)
 create mode 100644 site/content/examples/14-composition/04-modal/meta.json
 rename site/content/{OLD.examples/hacker-news => examples/20-miscellaneous/01-hacker-news}/App.svelte (100%)
 rename site/content/{OLD.examples/hacker-news => examples/20-miscellaneous/01-hacker-news}/Comment.svelte (100%)
 rename site/content/{OLD.examples/hacker-news => examples/20-miscellaneous/01-hacker-news}/Item.svelte (100%)
 rename site/content/{OLD.examples/hacker-news => examples/20-miscellaneous/01-hacker-news}/List.svelte (100%)
 rename site/content/{OLD.examples/hacker-news => examples/20-miscellaneous/01-hacker-news}/Summary.svelte (100%)
 create mode 100644 site/content/examples/20-miscellaneous/01-hacker-news/meta.json
 rename site/content/{OLD.examples/immutable => examples/20-miscellaneous/02-immutable-data}/App.svelte (89%)
 rename site/content/{OLD.examples/immutable => examples/20-miscellaneous/02-immutable-data}/ImmutableTodo.svelte (100%)
 rename site/content/{OLD.examples/immutable => examples/20-miscellaneous/02-immutable-data}/MutableTodo.svelte (100%)
 rename site/content/{OLD.examples/immutable => examples/20-miscellaneous/02-immutable-data}/flash.js (100%)
 create mode 100644 site/content/examples/20-miscellaneous/02-immutable-data/meta.json
 create mode 100644 site/content/examples/20-miscellaneous/meta.json
 create mode 100644 site/src/routes/repl/_utils/process_example.js

diff --git a/site/content/OLD.examples/binding-input-checkbox/App.svelte b/site/content/OLD.examples/binding-input-checkbox/App.svelte
deleted file mode 100644
index 901054fbc0..0000000000
--- a/site/content/OLD.examples/binding-input-checkbox/App.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	const todos = [
-		{
-			description: "Buy some milk",
-			done: true
-		},
-		{
-			description: "Do the laundry",
-			done: true
-		},
-		{
-			description: "Find life's true purpose",
-			done: false
-		}
-	];
-</script>
-
-<style>
-	input[type="text"] {
-		width: 20em;
-		max-width: calc(100% - 2em);
-	}
-
-	.done {
-		opacity: 0.6;
-	}
-</style>
-
-{#each todos as todo}
-	<div class="todo {todo.done ? 'done': ''}">
-		<input type=checkbox bind:checked={todo.done}>
-		<input type=text bind:value={todo.description}>
-	</div>
-{/each}
\ No newline at end of file
diff --git a/site/content/OLD.examples/homepage-demo-hello-world/App.svelte b/site/content/OLD.examples/homepage-demo-hello-world/App.svelte
deleted file mode 100644
index 22b3c84db0..0000000000
--- a/site/content/OLD.examples/homepage-demo-hello-world/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let name = 'world';
-</script>
-
-<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/OLD.examples/homepage-demo-reactivity/App.svelte b/site/content/OLD.examples/homepage-demo-reactivity/App.svelte
deleted file mode 100644
index 9d1b2757c0..0000000000
--- a/site/content/OLD.examples/homepage-demo-reactivity/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	let count = 0;
-
-	function increment() {
-		count += 1;
-	}
-</script>
-
-<button on:click={increment}>
-	clicks: {count}
-</button>
\ No newline at end of file
diff --git a/site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte b/site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte
deleted file mode 100644
index b1fe0495a9..0000000000
--- a/site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import Foo from './Foo.svelte';
-</script>
-
-<style>
-	p {
-		font-weight: bold;
-	}
-</style>
-
-<p>this &lt;p&gt; is bold but not red</p>
-<Foo/>
\ No newline at end of file
diff --git a/site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte b/site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte
deleted file mode 100644
index eb1dd82f7f..0000000000
--- a/site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<style>
-	p {
-		color: red;
-	}
-</style>
-
-<p>this &lt;p&gt; is red but not bold</p>
\ No newline at end of file
diff --git a/site/content/OLD.examples/manifest.json b/site/content/OLD.examples/manifest.json
deleted file mode 100644
index cc7b2f887b..0000000000
--- a/site/content/OLD.examples/manifest.json
+++ /dev/null
@@ -1,184 +0,0 @@
-[
-	{
-		"name": "Basics",
-		"examples": [
-			{
-				"slug": "hello-world",
-				"title": "Hello World!"
-			},
-			{
-				"slug": "if-blocks",
-				"title": "If blocks"
-			},
-			{
-				"slug": "each-blocks",
-				"title": "Each blocks"
-			},
-			{
-				"slug": "scoped-styles",
-				"title": "Scoped styles"
-			}
-		]
-	},
-	{
-		"name": "Two-way bindings",
-		"examples": [
-			{
-				"slug": "binding-input-text",
-				"title": "Text input"
-			},
-			{
-				"slug": "binding-input-numeric",
-				"title": "Numeric input"
-			},
-			{
-				"slug": "binding-textarea",
-				"title": "Textarea"
-			},
-			{
-				"slug": "binding-input-checkbox",
-				"title": "Checkbox input"
-			},
-			{
-				"slug": "binding-input-checkbox-group",
-				"title": "Checkbox input (grouped)"
-			},
-			{
-				"slug": "binding-input-radio",
-				"title": "Radio input"
-			},
-			{
-				"slug": "binding-media-elements",
-				"title": "Media elements"
-			}
-		]
-	},
-	{
-		"name": "Nested components",
-		"examples": [
-			{
-				"slug": "nested-components",
-				"title": "Nested components"
-			},
-			{
-				"slug": "modal-with-slot",
-				"title": "Modal with <slot>"
-			},
-			{
-				"slug": "self-references",
-				"title": "Self-references"
-			}
-		]
-	},
-	{
-		"name": "SVG and dataviz",
-		"examples": [
-			{
-				"slug": "svg-clock",
-				"title": "SVG Clock"
-			},
-			{
-				"slug": "line-chart",
-				"title": "Line/area chart"
-			},
-			{
-				"slug": "bar-chart",
-				"title": "Bar chart"
-			},
-			{
-				"slug": "scatterplot",
-				"title": "Scatterplot"
-			}
-		]
-	},
-	{
-		"name": "Transitions",
-		"examples": [
-			{
-				"slug": "transitions-fade",
-				"title": "Simple fade"
-			},
-			{
-				"slug": "transitions-fly",
-				"title": "Parameterised"
-			},
-			{
-				"slug": "transitions-in-out",
-				"title": "In and out"
-			},
-			{
-				"slug": "transitions-custom",
-				"title": "Custom CSS"
-			}
-		]
-	},
-	{
-		"name": "Motion",
-		"examples": [
-			{
-				"slug": "motion-spring",
-				"title": "Spring physics"
-			}
-		]
-	},
-	{
-		"name": "Async data",
-		"examples": [
-			{
-				"slug": "await-block",
-				"title": "Await block"
-			}
-		]
-	},
-	{
-		"name": "7guis",
-		"examples": [
-			{
-				"slug": "7guis-counter",
-				"title": "Counter"
-			},
-			{
-				"slug": "7guis-temperature",
-				"title": "Temperature converter"
-			},
-			{
-				"slug": "7guis-flight-booker",
-				"title": "Flight booker"
-			},
-			{
-				"slug": "7guis-timer",
-				"title": "Timer"
-			},
-			{
-				"slug": "7guis-crud",
-				"title": "CRUD"
-			},
-			{
-				"slug": "7guis-circles",
-				"title": "Circles"
-			}
-		]
-	},
-	{
-		"name": "<:Window>",
-		"examples": [
-			{
-				"slug": "parallax",
-				"title": "Parallax"
-			}
-		]
-	},
-	{
-		"name": "Miscellaneous",
-		"examples": [
-			{
-				"slug": "hacker-news",
-				"title": "Hacker News"
-			},
-			{
-				"slug": "immutable",
-				"title": "Immutable data"
-			}
-		]
-	}
-]
diff --git a/site/content/OLD.examples/homepage-demo-transitions/App.svelte b/site/content/examples/11-svg/05-svg-transitions/App.svelte
similarity index 100%
rename from site/content/OLD.examples/homepage-demo-transitions/App.svelte
rename to site/content/examples/11-svg/05-svg-transitions/App.svelte
diff --git a/site/content/OLD.examples/homepage-demo-transitions/custom-transitions.js b/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
similarity index 100%
rename from site/content/OLD.examples/homepage-demo-transitions/custom-transitions.js
rename to site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
diff --git a/site/content/examples/11-svg/05-svg-transitions/meta.json b/site/content/examples/11-svg/05-svg-transitions/meta.json
new file mode 100644
index 0000000000..aa14d1a3d4
--- /dev/null
+++ b/site/content/examples/11-svg/05-svg-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "SVG transitions"
+}
\ No newline at end of file
diff --git a/site/content/OLD.examples/homepage-demo-transitions/shape.js b/site/content/examples/11-svg/05-svg-transitions/shape.js
similarity index 86%
rename from site/content/OLD.examples/homepage-demo-transitions/shape.js
rename to site/content/examples/11-svg/05-svg-transitions/shape.js
index 032a58bf24..9ed2128ebe 100644
--- a/site/content/OLD.examples/homepage-demo-transitions/shape.js
+++ b/site/content/examples/11-svg/05-svg-transitions/shape.js
@@ -1,5 +1,2 @@
 export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
-
-export const outer = `
-	M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z
-	M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
\ No newline at end of file
+export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
\ No newline at end of file
diff --git a/site/content/OLD.examples/modal-with-slot/App.svelte b/site/content/examples/14-composition/04-modal/App.svelte
similarity index 100%
rename from site/content/OLD.examples/modal-with-slot/App.svelte
rename to site/content/examples/14-composition/04-modal/App.svelte
diff --git a/site/content/OLD.examples/modal-with-slot/Modal.svelte b/site/content/examples/14-composition/04-modal/Modal.svelte
similarity index 100%
rename from site/content/OLD.examples/modal-with-slot/Modal.svelte
rename to site/content/examples/14-composition/04-modal/Modal.svelte
index 87f1b02299..5ffa5989a4 100644
--- a/site/content/OLD.examples/modal-with-slot/Modal.svelte
+++ b/site/content/examples/14-composition/04-modal/Modal.svelte
@@ -4,17 +4,6 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<div class='modal-background' on:click='{() => dispatch("close")}'></div>
-
-<div class='modal'>
-	<slot name='header'></slot>
-	<hr>
-	<slot></slot>
-	<hr>
-
-	<button on:click='{() => dispatch("close")}'>close modal</button>
-</div>
-
 <style>
 	.modal-background {
 		position: fixed;
@@ -43,3 +32,14 @@
 		display: block;
 	}
 </style>
+
+<div class='modal-background' on:click='{() => dispatch("close")}'></div>
+
+<div class='modal'>
+	<slot name='header'></slot>
+	<hr>
+	<slot></slot>
+	<hr>
+
+	<button on:click='{() => dispatch("close")}'>close modal</button>
+</div>
diff --git a/site/content/examples/14-composition/04-modal/meta.json b/site/content/examples/14-composition/04-modal/meta.json
new file mode 100644
index 0000000000..c39791fcf6
--- /dev/null
+++ b/site/content/examples/14-composition/04-modal/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Modal"
+}
\ No newline at end of file
diff --git a/site/content/OLD.examples/hacker-news/App.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
similarity index 100%
rename from site/content/OLD.examples/hacker-news/App.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
diff --git a/site/content/OLD.examples/hacker-news/Comment.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
similarity index 100%
rename from site/content/OLD.examples/hacker-news/Comment.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
diff --git a/site/content/OLD.examples/hacker-news/Item.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
similarity index 100%
rename from site/content/OLD.examples/hacker-news/Item.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
diff --git a/site/content/OLD.examples/hacker-news/List.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
similarity index 100%
rename from site/content/OLD.examples/hacker-news/List.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
diff --git a/site/content/OLD.examples/hacker-news/Summary.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte
similarity index 100%
rename from site/content/OLD.examples/hacker-news/Summary.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/meta.json b/site/content/examples/20-miscellaneous/01-hacker-news/meta.json
new file mode 100644
index 0000000000..becbac4ea7
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Hacker News"
+}
\ No newline at end of file
diff --git a/site/content/OLD.examples/immutable/App.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
similarity index 89%
rename from site/content/OLD.examples/immutable/App.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
index b4ae34285f..e81d781677 100644
--- a/site/content/OLD.examples/immutable/App.svelte
+++ b/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
@@ -30,7 +30,7 @@
 <h2>Immutable</h2>
 {#each todos as todo}
 	<label on:click="{() => toggle(todo.id)}">
-		<span>{todo.done ? "😎": "☹️"}</span>
+		<span>{todo.done ? "😎": "🙁"}</span>
 		<ImmutableTodo {todo}/>
 	</label>
 {/each}
@@ -38,7 +38,7 @@
 <h2>Mutable</h2>
 {#each todos as todo}
 	<label on:click="{() => toggle(todo.id)}">
-		<span>{todo.done ? "😎": "☹️"}</span>
+		<span>{todo.done ? "😎": "🙁"}</span>
 		<MutableTodo {todo}/>
 	</label>
 {/each}
diff --git a/site/content/OLD.examples/immutable/ImmutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
similarity index 100%
rename from site/content/OLD.examples/immutable/ImmutableTodo.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
diff --git a/site/content/OLD.examples/immutable/MutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
similarity index 100%
rename from site/content/OLD.examples/immutable/MutableTodo.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
diff --git a/site/content/OLD.examples/immutable/flash.js b/site/content/examples/20-miscellaneous/02-immutable-data/flash.js
similarity index 100%
rename from site/content/OLD.examples/immutable/flash.js
rename to site/content/examples/20-miscellaneous/02-immutable-data/flash.js
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/meta.json b/site/content/examples/20-miscellaneous/02-immutable-data/meta.json
new file mode 100644
index 0000000000..68e56ee7fa
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/02-immutable-data/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Immutable data"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-miscellaneous/meta.json b/site/content/examples/20-miscellaneous/meta.json
new file mode 100644
index 0000000000..116634ec42
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Miscellaneous"
+}
\ No newline at end of file
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 0171d4a450..edde4372c6 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -233,7 +233,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Hello world example"
-		src="/repl/embed?demo=homepage-demo-hello-world"
+		src="/repl/embed?example=hello-world"
 		scrolling="no"
 	></iframe>
 </section>
@@ -245,7 +245,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Scope styles example"
-		src="/repl/embed?demo=homepage-demo-scoped-styles"
+		src="/repl/embed?example=nested-components"
 		scrolling="no"
 	></iframe>
 </section>
@@ -257,7 +257,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Reactivity example"
-		src="/repl/embed?demo=homepage-demo-reactivity"
+		src="/repl/embed?example=reactive-assignments"
 		scrolling="no"
 	></iframe>
 </section>
@@ -269,7 +269,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Transitions example"
-		src="/repl/embed?demo=homepage-demo-transitions"
+		src="/repl/embed?example=svg-transitions"
 		scrolling="no"
 	></iframe>
 </section>
diff --git a/site/src/routes/repl/_utils/process_example.js b/site/src/routes/repl/_utils/process_example.js
new file mode 100644
index 0000000000..fc61d79ad3
--- /dev/null
+++ b/site/src/routes/repl/_utils/process_example.js
@@ -0,0 +1,16 @@
+export function process_example(files) {
+	return files
+		.map(file => {
+			const [name, type] = file.name.split('.');
+			return { name, type, source: file.source };
+		})
+		.sort((a, b) => {
+			if (a.name === 'App' && a.type === 'svelte') return -1;
+			if (b.name === 'App' && b.type === 'svelte') return 1;
+
+			if (a.type === b.type) return a.name < b.name ? -1 : 1;
+
+			if (a.type === 'svelte') return -1;
+			if (b.type === 'svelte') return 1;
+		});
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index 0dc123ce22..9cc680afb0 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -3,16 +3,17 @@
 		return {
 			version: query.version || 'beta',
 			gist: query.gist,
-			demo: query.demo
+			example: query.example
 		};
 	}
 </script>
 
 <script>
 	import { onMount } from 'svelte';
+	import { process_example } from './_utils/process_example.js';
 	import Repl from '../../components/Repl/index.svelte';
 
-	export let version, gist, demo;
+	export let version, gist, example;
 
 	let repl;
 	let name = 'loading...';
@@ -57,15 +58,13 @@
 
 				repl.set({ components });
 			});
-		} else if (demo) {
-			const url = `api/examples/${demo}`;
-
-			fetch(url).then(async response => {
+		} else if (example) {
+			fetch(`examples/${example}.json`).then(async response => {
 				if (response.ok) {
 					const data = await response.json();
 
 					repl.set({
-						components: data.components
+						components: process_example(data.files)
 					});
 				}
 			});
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 196c48a09a..8671717f5d 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -11,6 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { locate } from 'locate-character';
+	import { process_example } from './_utils/process_example.js';
 	import AppControls from './_components/AppControls/index.svelte';
 	import Repl from '../../components/Repl/index.svelte';
 
@@ -93,21 +94,7 @@
 
 				name = data.title;
 
-				const components = data.files
-					.map(file => {
-						const [name, type] = file.name.split('.');
-						return { name, type, source: file.source };
-					})
-					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'svelte') return -1;
-						if (b.name === 'App' && b.type === 'svelte') return 1;
-
-						if (a.type === b.type) return a.name < b.name ? -1 : 1;
-
-						if (a.type === 'svelte') return -1;
-						if (b.type === 'svelte') return 1;
-					});
-
+				const components = process_example(data.files);
 				repl.set({ components });
 
 				gist = null;