From 8fa676bfb0d9c77324fd704030af1f7ac55df072 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 23 Apr 2019 14:48:18 -0400
Subject: [PATCH 1/3] site: in examples.json don't return sections with no
title
---
site/src/routes/examples/index.json.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/src/routes/examples/index.json.js b/site/src/routes/examples/index.json.js
index 4cb4d9c554..8617d70cab 100644
--- a/site/src/routes/examples/index.json.js
+++ b/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, {
From f2e1b0ea9973d2f012468d31fdbc6efa8e7e13d2 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 23 Apr 2019 14:49:25 -0400
Subject: [PATCH 2/3] site: move svelte-css-in-js REPL embed into example
---
site/content/blog/2018-12-26-svelte-css-in-js.md | 3 +--
.../20181225-blog-svelte-css-in-js/App.svelte | 10 ++++++++++
.../20181225-blog-svelte-css-in-js/Hero.svelte | 15 +++++++++++++++
.../20181225-blog-svelte-css-in-js/meta.json | 3 +++
site/content/examples/99-embeds/meta.json | 1 +
5 files changed, 30 insertions(+), 2 deletions(-)
create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
create mode 100644 site/content/examples/99-embeds/meta.json
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 @@
+{}
From e49db5c65f0013a92e28fd3f749efb587aea17ef Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 23 Apr 2019 14:49:48 -0400
Subject: [PATCH 3/3] site: move write-less-code REPL embed into example
---
.../blog/2019-04-20-write-less-code.md | 4 +--
.../20181225-blog-svelte-css-in-js/styles.js | 33 +++++++++++++++++++
.../20190420-blog-write-less-code/App.svelte | 9 +++++
.../20190420-blog-write-less-code/meta.json | 3 ++
4 files changed, 47 insertions(+), 2 deletions(-)
create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md
index daa22b9206..d6c8b77193 100644
--- a/site/content/blog/2019-04-20-write-less-code.md
+++ b/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.
\ No newline at end of file
+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.
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
new file mode 100644
index 0000000000..faf91b13d4
--- /dev/null
+++ b/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};
+ }
+`;
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
new file mode 100644
index 0000000000..46cf93b0fc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
new file mode 100644
index 0000000000..eaa2a1da63
--- /dev/null
+++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "-"
+}