Merge pull request #2524 from sveltejs/gh-2447

Move embedded REPL contents into examples

site/content/blog/2018-12-26-svelte-css-in-js.md

@@ -19,7 +19,7 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t
 <div class="max">
 	<iframe
 		title="Aphrodite example"
-		src="/repl/embed?gist=ad495ff5ba9ceefe5984fe62c1f15e19"
+		src="/repl/embed?example=blog-svelte-css-in-js"
 		scrolling="no"
 	></iframe>
 </div>
@@ -27,4 +27,3 @@ Here, we're using [Emotion](https://emotion.sh) to generate scoped class names t
 It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
 
 Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
-

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/App.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { comicSans, link } from './styles.js';
+	import Hero from './Hero.html';
+</script>
+
+<Hero/>
+
+<div class={comicSans}>
+	<p>Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a></p>
+</div>

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

@@ -0,0 +1,15 @@
+<script>
+	import { title, comicSans, box } from './styles.js';
+</script>
+
+<div class="{title} {comicSans}">
+	<h1>
+		<div class={box}>
+			<div class={box}>
+				<div class={box}>CSS</div>
+				in JS
+			</div>
+			in HTML
+		</div>
+	</h1>
+</div>

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

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

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": "-"
+}

site/content/examples/99-embeds/meta.json

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

site/src/routes/examples/index.json.js

@@ -5,7 +5,7 @@ let cached;
 export function get(req, res) {
 	try {
 		if (!cached || process.env.NODE_ENV !== 'production') {
-			cached = JSON.stringify(get_examples());
+			cached = JSON.stringify(get_examples().filter(section => section.title));
 		}
 
 		res.writeHead(200, {