site: move write-less-code REPL embed into example

site/content/blog/2019-04-20-write-less-code.md

@@ -42,7 +42,7 @@ Reducing the amount of code you have to write is an explicit goal of Svelte. To
 <div class="max">
 	<iframe
 		title="Simple component example"
-		src="/repl/embed?gist=6b573f1819d12defc441098236fb9abe"
+		src="/repl/embed?example=blog-write-less-code"
 		scrolling="no"
 	></iframe>
 </div>
@@ -161,4 +161,4 @@ In Vue, meanwhile, we have a default export with a `data` function that returns
 
 These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](https://svelte.dev/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
 
-How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
+How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.

site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js

@@ -0,0 +1,33 @@
+import { css } from 'emotion/dist/emotion.umd.min.js';
+
+const brand = '#74D900';
+
+export const title = css`
+	color: ${brand};
+	font-size: 1em;
+	white-space: nowrap;
+`;
+
+export const comicSans = css`
+	font-family: 'Comic Sans MS';
+`;
+
+export const box = css`
+	position: relative;
+	display: inline-block;
+	border: 2px solid ${brand};
+	line-height: 1;
+	padding: 4px;
+	border-radius: 4px;
+`;
+
+export const link = css`
+	color: inherit;
+	font-weight: bold;
+	text-decoration: none;
+	border-bottom: 1px solid ${brand};
+	&:hover {
+		text-decoration: none;
+		background: ${brand};
+	}
+`;

site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte

@@ -0,0 +1,9 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {a + b}</p>

site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "-"
+}