put homepage demos into the repo

Author: Rich-Harris

site/content/examples/homepage-demo-hello-world/App.html

@@ -0,0 +1 @@
+<h1>Hello {name}!</h1>

site/content/examples/homepage-demo-hello-world/data.json5

@@ -0,0 +1,3 @@
+{
+  "name": "world"
+}

site/content/examples/homepage-demo-reactivity/App.html

@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<button on:click={increment}>
+	clicks: {count}
+</button>

site/content/examples/homepage-demo-reactivity/data.json5

@@ -0,0 +1 @@
+{}

site/content/examples/homepage-demo-scoped-styles/App.html

@@ -0,0 +1,12 @@
+<script>
+	import Foo from './Foo.html';
+</script>
+
+<style>
+	p {
+		font-weight: bold;
+	}
+</style>
+
+<p>this &lt;p&gt; is bold but not red</p>
+<Foo/>

site/content/examples/homepage-demo-scoped-styles/Foo.html

@@ -0,0 +1,7 @@
+<style>
+	p {
+		color: red;
+	}
+</style>
+
+<p>this &lt;p&gt; is red but not bold</p>

site/content/examples/homepage-demo-scoped-styles/data.json5

@@ -0,0 +1 @@
+{}

site/content/examples/homepage-demo-transitions/App.html

@@ -0,0 +1,74 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { fade, draw, fly } from 'svelte/transition';
+	import { expand, blur } from './custom-transitions.js';
+	import { inner, outer } from './shape.js';
+
+	let visible = true;
+</script>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	path {
+		fill: white;
+		opacity: 1;
+	}
+
+	label {
+		position: absolute;
+		top: 1em;
+		left: 1em;
+	}
+
+	.centered {
+		font-size: 20vw;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		font-family: 'Overpass';
+		letter-spacing: 0.12em;
+		color: #676778;
+		font-weight: 100;
+	}
+
+	.centered span {
+		will-change: filter;
+	}
+</style>
+
+{#if visible}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+		<g out:fade="{{duration: 200}}" opacity=0.2>
+			<path
+				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
+				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
+				d={outer}
+			/>
+			<path
+				in:draw="{{duration: 1000}}"
+				style="stroke:#ff3e00; stroke-width: 1.5"
+				d={inner}
+			/>
+		</g>
+	</svg>
+
+	<div class="centered" out:fly="{{y: -20, duration: 800}}">
+		{#each 'SVELTE' as char, i}
+			<span
+				in:blur="{{delay: 1000 + i * 150, duration: 800}}"
+			>{char}</span>
+		{/each}
+	</div>
+{/if}
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	toggle me
+</label>
+
+<link href="https://fonts.googleapis.com/css?family=Overpass:100" rel="stylesheet">

site/content/examples/homepage-demo-transitions/custom-transitions.js

@@ -0,0 +1,34 @@
+import { cubicOut } from 'svelte/easing';
+
+export function expand(node, params) {
+	const {
+		delay = 0,
+		duration = 400,
+		easing = cubicOut
+	} = params;
+
+	const w = parseFloat(getComputedStyle(node).strokeWidth);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: t => `opacity: ${t}; stroke-width: ${t * w}`
+	};
+}
+
+export function blur(node, params) {
+	const {
+		b = 10,
+		delay = 0,
+		duration = 400,
+		easing = cubicOut
+	} = params;
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (t, u) => `opacity: ${t}; filter: blur(${u * b}px);`
+	};
+}

site/content/examples/homepage-demo-transitions/data.json5

@@ -0,0 +1 @@
+{}

site/content/examples/homepage-demo-transitions/shape.js

@@ -53,22 +53,21 @@ function createExample(slug) {
 export function get(req, res) {
 	const { slug } = req.params;
 
-	if (!slugs.has(slug)) {
+	try {
+		if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') {
+			lookup.set(slug, createExample(slug));
+		}
+
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(lookup.get(slug));
+	} catch (err) {
 		res.writeHead(404, {
 			'Content-Type': 'application/json'
 		});
 
 		res.end(JSON.stringify({ error: 'not found' }));
-		return;
 	}
-
-	if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') {
-		lookup.set(slug, createExample(slug));
-	}
-
-	res.writeHead(200, {
-		'Content-Type': 'application/json'
-	});
-
-	res.end(lookup.get(slug));
 }

site/src/routes/api/examples/[slug].js

@@ -182,7 +182,7 @@ <h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
 
 	<iframe
 		title="Hello world example"
-		src="/repl/embed?gist=0eb9e3a2d22b981b67924c326ed1293a"
+		src="/repl/embed?demo=homepage-demo-hello-world"
 		scrolling="no"
 	></iframe>
 </section>
@@ -193,8 +193,8 @@ <h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
 	</div>
 
 	<iframe
-		title="Scoped styles example"
-		src="/repl/embed?gist=ea123e7c4e7edc809670eb2dcab25b56"
+		title="Hello world example"
+		src="/repl/embed?demo=homepage-demo-scoped-styles"
 		scrolling="no"
 	></iframe>
 </section>
@@ -205,8 +205,8 @@ <h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
 	</div>
 
 	<iframe
-		title="Reactivity example"
-		src="/repl/embed?gist=7b7908b677eb0c374e17f1c5b6287e6e"
+		title="Hello world example"
+		src="/repl/embed?demo=homepage-demo-reactivity"
 		scrolling="no"
 	></iframe>
 </section>
@@ -217,8 +217,8 @@ <h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
 	</div>
 
 	<iframe
-		title="Transitions example"
-		src="/repl/embed?gist=c5336bba9eb1195bb2403aa04ff25186"
+		title="Hello world example"
+		src="/repl/embed?demo=homepage-demo-transitions"
 		scrolling="no"
 	></iframe>
 </section>

site/src/routes/index.html

@@ -68,7 +68,7 @@
 		workers.compiler.postMessage({ type: 'init', version });
 		workers.compiler.onmessage = event => {
 			js = event.data.js;
-			css = event.data.css;
+			css = event.data.css || `/* Add a <style> tag to see compiled CSS */`;
 			if (event.data.props) props = event.data.props;
 		};
 

site/src/routes/repl/_components/Repl.html

@@ -4,11 +4,7 @@
 	import Repl from './_components/Repl.html';
 
 	export let query;
-
-	let version = query.version;
-	let gist_id = query.gist;
-
-	let gist;
+	let version = query.version || 'alpha';
 
 	let app = {
 		components: [],
@@ -18,15 +14,14 @@
 	let name = 'loading...';
 
 	onMount(() => {
-		fetch(`https://unpkg.com/svelte@${version || 'alpha'}/package.json`)
+		fetch(`https://unpkg.com/svelte@${version}/package.json`)
 			.then(r => r.json())
 			.then(pkg => {
 				version = pkg.version;
 			});
 
-		if (gist_id) {
-			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
-				gist = data;
+		if (query.gist) {
+			fetch(`gist/${query.gist}`).then(r => r.json()).then(data => {
 				const { id, description, files } = data;
 
 				name = description;
@@ -63,8 +58,19 @@
 
 				app = { components, values };
 			});
-		} else {
-			// TODO err...
+		} else if (query.demo) {
+			const url = `api/examples/${query.demo}`;
+
+			fetch(url).then(async response => {
+				if (response.ok) {
+					const data = await response.json();
+
+					app = {
+						values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
+						components: data.components
+					};
+				}
+			});
 		}
 	});