diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md
index 5e8e6ed71b..f77eb83206 100644
--- a/site/content/blog/2018-12-26-svelte-css-in-js.md
+++ b/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.
-
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
new file mode 100644
index 0000000000..c8487abefe
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
new file mode 100644
index 0000000000..9f60c276ce
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
new file mode 100644
index 0000000000..eaa2a1da63
--- /dev/null
+++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "-"
+}
diff --git a/site/content/examples/99-embeds/meta.json b/site/content/examples/99-embeds/meta.json
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/site/content/examples/99-embeds/meta.json
@@ -0,0 +1 @@
+{}