Merge pull request sveltejs#1901 from sveltejs/embedded-repl

embedded REPLs

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

@@ -57,7 +57,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		width: 100%;
+		width: 100vw;
 		height: var(--nav-h);
 		padding: 0 var(--side-nav);
 		margin: 0 auto;
@@ -162,7 +162,7 @@
 			position: fixed;
 			top: 0;
 			left: 0;
-			width: 100%;
+			width: 100vw;
 			height: var(--nav-h);
 			padding: 0 var(--side-nav) 0 var(--side-nav);
 			display: flex;

site/src/components/TopNav.html

@@ -3,10 +3,14 @@
 	import Nav from '../components/TopNav.html';
 
 	export let child;
+	export let path;
 </script>
 
 <InlineSvg />
-<Nav segment={child.segment} />
+{#if path !== '/repl/embed'}
+	<Nav segment={child.segment} />
+{/if}
+
 <main>
 	<svelte:component this={child.component} {...child.props} />
 </main>
@@ -15,7 +19,7 @@
 	main {
 		position: relative;
 		margin: 0 auto;
-		padding: var(--nav-h) 0 0 0;
+		padding: var(--nav-h) var(--side-nav) 0 var(--side-nav);
 		overflow-x: hidden;
 	}
 </style>

site/src/routes/_layout.html

@@ -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

@@ -77,15 +77,6 @@ <h2>{post.metadata.title}</h2>
 		text-transform: uppercase;
 	}
 
-	/* .post:first-child .byline::after {
-		content: 'Latest post';
-		font-weight: 700;
-		color: var(--second);
-		text-transform: uppercase;
-		margin-left: 1em;
-	} */
-
-
 	.post p {
 		font-size: var(--h5);
 		max-width: 30em;
@@ -103,21 +94,4 @@ <h2>{post.metadata.title}</h2>
 	.posts a:hover > h2 {
 		color: var(--flash)
 	}
-
-	.byline {
-		/* width: 100%; */
-		padding: 1.6rem 0 0 0;
-		/* border-bottom: 1px solid var(--second); */
-		font: 300 var(--code-fs)/1.7 var(--font-mono);
-	}
-
-	time {
-		/* border-bottom: 1px solid var(--second); */
-	}
-
-	.byline a {
-		color: var(--second);
-	}
-
-	.byline a:hover { color: var(--flash) }
 </style>