\ No newline at end of file
diff --git a/site/content/examples/00-introduction/00-hello-world/meta.json b/site/content/examples/00-introduction/00-hello-world/meta.json
new file mode 100644
index 0000000000..2f47184710
--- /dev/null
+++ b/site/content/examples/00-introduction/00-hello-world/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Adding data"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
new file mode 100644
index 0000000000..6a76b43dde
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
@@ -0,0 +1,7 @@
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/meta.json b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
new file mode 100644
index 0000000000..89614e0aa6
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Dynamic attributes"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte
new file mode 100644
index 0000000000..cacaf8ccba
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/App.svelte
@@ -0,0 +1,9 @@
+
+
+
Styled!
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/meta.json b/site/content/examples/00-introduction/02-styling/meta.json
new file mode 100644
index 0000000000..dcdf2bff01
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Styling"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte
new file mode 100644
index 0000000000..e0a2e5fe17
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/App.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
These styles...
+
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/Nested.svelte b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
new file mode 100644
index 0000000000..17685233a5
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
@@ -0,0 +1 @@
+
...don't affect this element
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/meta.json b/site/content/examples/00-introduction/03-nested-components/meta.json
new file mode 100644
index 0000000000..5848360a40
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Nested components"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/App.svelte b/site/content/examples/00-introduction/04-html-tags/App.svelte
new file mode 100644
index 0000000000..4029f076e2
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/App.svelte
@@ -0,0 +1,5 @@
+
+
+
{@html string}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/meta.json b/site/content/examples/00-introduction/04-html-tags/meta.json
new file mode 100644
index 0000000000..01af59ac84
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "HTML tags"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/meta.json b/site/content/examples/00-introduction/meta.json
new file mode 100644
index 0000000000..5c8f7bc10b
--- /dev/null
+++ b/site/content/examples/00-introduction/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Introduction"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
new file mode 100644
index 0000000000..bc50d74cfc
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/meta.json b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
new file mode 100644
index 0000000000..feb3e8f338
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Reactive assignments"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
new file mode 100644
index 0000000000..f7aca3bd80
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
{count} * 2 = {doubled}
+
{doubled} * 2 = {quadrupled}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/meta.json b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
new file mode 100644
index 0000000000..d824d83669
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Reactive declarations"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/App.svelte b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
new file mode 100644
index 0000000000..f757be6f51
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
@@ -0,0 +1,16 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/meta.json b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
new file mode 100644
index 0000000000..1ef62c8830
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Reactive statements"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/meta.json b/site/content/examples/01-reactivity/meta.json
new file mode 100644
index 0000000000..c908815e04
--- /dev/null
+++ b/site/content/examples/01-reactivity/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Reactivity"
+}
\ No newline at end of file
diff --git a/site/content/examples/nested-components/App.svelte b/site/content/examples/02-props/00-declaring-props/App.svelte
similarity index 56%
rename from site/content/examples/nested-components/App.svelte
rename to site/content/examples/02-props/00-declaring-props/App.svelte
index 83cc0c6eb5..79d7e6b789 100644
--- a/site/content/examples/nested-components/App.svelte
+++ b/site/content/examples/02-props/00-declaring-props/App.svelte
@@ -2,5 +2,4 @@
import Nested from './Nested.svelte';
-
This is a top-level element.
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/Nested.svelte b/site/content/examples/02-props/00-declaring-props/Nested.svelte
new file mode 100644
index 0000000000..ecd3cb6254
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/Nested.svelte
@@ -0,0 +1,5 @@
+
+
+
The answer is {answer}
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/meta.json b/site/content/examples/02-props/00-declaring-props/meta.json
new file mode 100644
index 0000000000..485c2708bd
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Declaring props"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/App.svelte b/site/content/examples/02-props/01-default-values/App.svelte
new file mode 100644
index 0000000000..f9d63b30d6
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/App.svelte
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/Nested.svelte b/site/content/examples/02-props/01-default-values/Nested.svelte
new file mode 100644
index 0000000000..35ee5c9f88
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/Nested.svelte
@@ -0,0 +1,5 @@
+
+
+
The answer is {answer}
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/meta.json b/site/content/examples/02-props/01-default-values/meta.json
new file mode 100644
index 0000000000..f690d64349
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Default values"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/App.svelte b/site/content/examples/02-props/02-spread-props/App.svelte
new file mode 100644
index 0000000000..f40d3b89c8
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/App.svelte
@@ -0,0 +1,12 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/Info.svelte b/site/content/examples/02-props/02-spread-props/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/Info.svelte
@@ -0,0 +1,12 @@
+
+
+
+ The {name} package is {speed} fast.
+ Download version {version} from npm
+ and learn more here
+
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/meta.json b/site/content/examples/02-props/02-spread-props/meta.json
new file mode 100644
index 0000000000..3f4b5128bf
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Spread props"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/meta.json b/site/content/examples/02-props/meta.json
new file mode 100644
index 0000000000..7b9e0a2783
--- /dev/null
+++ b/site/content/examples/02-props/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Props"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/App.svelte b/site/content/examples/03-logic/00-if-blocks/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/App.svelte
@@ -0,0 +1,19 @@
+
+
+{#if user.loggedIn}
+
+{/if}
+
+{#if !user.loggedIn}
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/meta.json b/site/content/examples/03-logic/00-if-blocks/meta.json
new file mode 100644
index 0000000000..21598b878e
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "If blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/App.svelte b/site/content/examples/03-logic/01-else-blocks/App.svelte
new file mode 100644
index 0000000000..c82565c2f7
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/App.svelte
@@ -0,0 +1,17 @@
+
+
+{#if user.loggedIn}
+
+{:else}
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/meta.json b/site/content/examples/03-logic/01-else-blocks/meta.json
new file mode 100644
index 0000000000..5703b7ea92
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Else blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/App.svelte b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
new file mode 100644
index 0000000000..9102618ff4
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
@@ -0,0 +1,11 @@
+
+
+{#if x > 10}
+
{x} is greater than 10
+{:else if 5 > x}
+
{x} is less than 5
+{:else}
+
{x} is between 5 and 10
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/meta.json b/site/content/examples/03-logic/02-else-if-blocks/meta.json
new file mode 100644
index 0000000000..c778d9f48b
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Else-if blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte
new file mode 100644
index 0000000000..6ea5097be2
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/App.svelte
@@ -0,0 +1,17 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/03-logic/03-each-blocks/meta.json b/site/content/examples/03-logic/03-each-blocks/meta.json
new file mode 100644
index 0000000000..d829b3cc53
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
new file mode 100644
index 0000000000..73a2dcc609
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+{#each things as thing (thing.id)}
+
+{/each}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
new file mode 100644
index 0000000000..4e86d32109
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -0,0 +1,9 @@
+
+
+
{valueAtStart} / {value}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/meta.json b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
new file mode 100644
index 0000000000..faee8bff8d
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Keyed each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte
new file mode 100644
index 0000000000..8c8036c0f1
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/App.svelte
@@ -0,0 +1,30 @@
+
+
+
+
+{#await promise}
+
...waiting
+{:then number}
+
The number is {number}
+{:catch error}
+
{error.message}
+{/await}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/05-await-blocks/meta.json b/site/content/examples/03-logic/05-await-blocks/meta.json
new file mode 100644
index 0000000000..c7a809f5ed
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Await blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/meta.json b/site/content/examples/03-logic/meta.json
new file mode 100644
index 0000000000..3ecf1ccee2
--- /dev/null
+++ b/site/content/examples/03-logic/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Logic"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte
new file mode 100644
index 0000000000..f26112f06c
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/App.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+ The mouse position is {m.x} x {m.y}
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/meta.json b/site/content/examples/04-events/00-dom-events/meta.json
new file mode 100644
index 0000000000..5b3e37e41f
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "DOM events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
new file mode 100644
index 0000000000..f0fd6ff17a
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
+ The mouse position is {m.x} x {m.y}
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/meta.json b/site/content/examples/04-events/01-inline-handlers/meta.json
new file mode 100644
index 0000000000..575b9ab2b6
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Inline handlers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/App.svelte b/site/content/examples/04-events/02-event-modifiers/App.svelte
new file mode 100644
index 0000000000..94df49cb2d
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/App.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/meta.json b/site/content/examples/04-events/02-event-modifiers/meta.json
new file mode 100644
index 0000000000..322bb5ba5e
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Event modifiers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/App.svelte b/site/content/examples/04-events/03-component-events/App.svelte
new file mode 100644
index 0000000000..a8d14a368a
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/App.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/Inner.svelte b/site/content/examples/04-events/03-component-events/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/Inner.svelte
@@ -0,0 +1,15 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/meta.json b/site/content/examples/04-events/03-component-events/meta.json
new file mode 100644
index 0000000000..2a777d4d00
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Component events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/App.svelte b/site/content/examples/04-events/04-event-forwarding/App.svelte
new file mode 100644
index 0000000000..973df50f0a
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Inner.svelte b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
@@ -0,0 +1,15 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Outer.svelte b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
new file mode 100644
index 0000000000..10c28f298a
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/meta.json b/site/content/examples/04-events/04-event-forwarding/meta.json
new file mode 100644
index 0000000000..3a8aa674b7
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
new file mode 100644
index 0000000000..1429cae207
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
new file mode 100644
index 0000000000..75630ea99c
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
@@ -0,0 +1,15 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/meta.json b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
new file mode 100644
index 0000000000..9aa593808f
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "DOM event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/meta.json b/site/content/examples/04-events/meta.json
new file mode 100644
index 0000000000..c5f088e208
--- /dev/null
+++ b/site/content/examples/04-events/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Events"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/00-text-inputs/App.svelte b/site/content/examples/05-bindings/00-text-inputs/App.svelte
new file mode 100644
index 0000000000..5eab79764a
--- /dev/null
+++ b/site/content/examples/05-bindings/00-text-inputs/App.svelte
@@ -0,0 +1,6 @@
+
+
+
+
Hello {name || 'stranger'}!
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/00-text-inputs/meta.json b/site/content/examples/05-bindings/00-text-inputs/meta.json
new file mode 100644
index 0000000000..45577af5be
--- /dev/null
+++ b/site/content/examples/05-bindings/00-text-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Text inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/App.svelte b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
new file mode 100644
index 0000000000..798d57e021
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
{a} + {b} = {a + b}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/meta.json b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
new file mode 100644
index 0000000000..72f8579704
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Numeric inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
new file mode 100644
index 0000000000..b82d31e783
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+{#if yes}
+
Thank you. We will bombard your inbox and sell your personal details.
+{:else}
+
You must opt in to continue. If you're not paying, you're the product.
+{/if}
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/meta.json b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
new file mode 100644
index 0000000000..723312a3d9
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Checkbox inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/03-group-inputs/App.svelte b/site/content/examples/05-bindings/03-group-inputs/App.svelte
new file mode 100644
index 0000000000..a46c61c7e7
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/App.svelte
@@ -0,0 +1,52 @@
+
+
+
Size
+
+
+
+
+
+
+
+
Flavours
+
+{#each menu as flavour}
+
+{/each}
+
+{#if flavours.length === 0}
+
Please select at least one flavour
+{:else if flavours.length > scoops}
+
Can't order more flavours than scoops!
+{:else}
+
+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+ of {join(flavours)}
+
+{/if}
diff --git a/site/content/examples/05-bindings/03-group-inputs/meta.json b/site/content/examples/05-bindings/03-group-inputs/meta.json
new file mode 100644
index 0000000000..2203d6e6fa
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Group inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
new file mode 100644
index 0000000000..be338bf47f
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+{@html marked(value)}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/meta.json b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
new file mode 100644
index 0000000000..01adf6b5cf
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Textarea inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-select-bindings/App.svelte b/site/content/examples/05-bindings/05-select-bindings/App.svelte
new file mode 100644
index 0000000000..3f1e7fa7e1
--- /dev/null
+++ b/site/content/examples/05-bindings/05-select-bindings/App.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/05-select-bindings/meta.json
new file mode 100644
index 0000000000..fe170eb0fc
--- /dev/null
+++ b/site/content/examples/05-bindings/05-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Select bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte
new file mode 100644
index 0000000000..d808850158
--- /dev/null
+++ b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte
@@ -0,0 +1,53 @@
+
+
+
Size
+
+
+
+
+
+
+
+
Flavours
+
+
+
+{#if flavours.length === 0}
+
Please select at least one flavour
+{:else if flavours.length > scoops}
+
Can't order more flavours than scoops!
+{:else}
+
+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+ of {join(flavours)}
+
+{/if}
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json
new file mode 100644
index 0000000000..abf7635407
--- /dev/null
+++ b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Select multiple"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
new file mode 100644
index 0000000000..92bdc7754f
--- /dev/null
+++ b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
@@ -0,0 +1,39 @@
+
+
+
Todos
+
+{#each todos as todo}
+
+
+
+
+
+{/each}
+
+
+
+
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
new file mode 100644
index 0000000000..2d27051b49
--- /dev/null
+++ b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Each block bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte
new file mode 100644
index 0000000000..2cf819fca0
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/App.svelte
@@ -0,0 +1,130 @@
+
+
+
+
+
+ {format(time)}
+ click anywhere to {paused ? 'play' : 'pause'} / drag to seek
+ {format(duration)}
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/08-media-elements/meta.json
new file mode 100644
index 0000000000..4e40a6acee
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Media elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/09-dimensions/App.svelte
new file mode 100644
index 0000000000..ca992599c1
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/App.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
size: {w}px x {h}px
+
+
+ {text}
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/09-dimensions/meta.json
new file mode 100644
index 0000000000..9f8b6602c7
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Dimensions"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/10-bind-this/App.svelte
new file mode 100644
index 0000000000..eacd203629
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/App.svelte
@@ -0,0 +1,59 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/10-bind-this/meta.json
new file mode 100644
index 0000000000..da5ce399ab
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "bind:this={canvas}"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/11-component-bindings/App.svelte
new file mode 100644
index 0000000000..67fec4a5ad
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/App.svelte
@@ -0,0 +1,14 @@
+
+
+
{view}
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
new file mode 100644
index 0000000000..c457a15cb5
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/11-component-bindings/meta.json
new file mode 100644
index 0000000000..4c921d0e8a
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Component bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/meta.json b/site/content/examples/05-bindings/meta.json
new file mode 100644
index 0000000000..8bb0142ecc
--- /dev/null
+++ b/site/content/examples/05-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
new file mode 100644
index 0000000000..1b83727627
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -0,0 +1,38 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/meta.json b/site/content/examples/06-lifecycle/00-onmount/meta.json
new file mode 100644
index 0000000000..3b2799c5bc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "onMount"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/App.svelte b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
new file mode 100644
index 0000000000..93a721ef44
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -0,0 +1,11 @@
+
+
+
+ The page has been open for
+ {seconds} {seconds === 1 ? 'second' : 'seconds'}
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/meta.json b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
new file mode 100644
index 0000000000..d87febd1a5
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "onDestroy"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/utils.js b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
new file mode 100644
index 0000000000..0f75f29e2a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+ const interval = setInterval(callback, milliseconds);
+
+ onDestroy(() => {
+ clearInterval(interval);
+ });
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte
new file mode 100644
index 0000000000..373b6dcb6a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -0,0 +1,106 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/meta.json b/site/content/examples/06-lifecycle/02-update/meta.json
new file mode 100644
index 0000000000..c92a6db8dc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "beforeUpdate and afterUpdate"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
new file mode 100644
index 0000000000..c9cb6de420
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/meta.json b/site/content/examples/06-lifecycle/03-tick/meta.json
new file mode 100644
index 0000000000..0a406e13aa
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "tick"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/meta.json b/site/content/examples/06-lifecycle/meta.json
new file mode 100644
index 0000000000..2f833e2a4a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Lifecycle"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte
new file mode 100644
index 0000000000..ee542f789d
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -0,0 +1,18 @@
+
+
+
The count is {count_value}
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-reactivity/App.svelte b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
similarity index 50%
rename from site/content/examples/homepage-demo-reactivity/App.svelte
rename to site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
index 9d1b2757c0..2b5763012b 100644
--- a/site/content/examples/homepage-demo-reactivity/App.svelte
+++ b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
@@ -1,11 +1,11 @@
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Resetter.svelte b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/meta.json b/site/content/examples/07-stores/00-writable-stores/meta.json
new file mode 100644
index 0000000000..e0b2a6809d
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Writable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/stores.js b/site/content/examples/07-stores/00-writable-stores/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/App.svelte b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
new file mode 100644
index 0000000000..10ebfb65bb
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -0,0 +1,12 @@
+
+
+
The count is {$count}
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/meta.json b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
new file mode 100644
index 0000000000..a7e4c5fefc
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Auto-subscriptions"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/stores.js b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/App.svelte b/site/content/examples/07-stores/02-readable-stores/App.svelte
new file mode 100644
index 0000000000..3ff0b0362f
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/App.svelte
@@ -0,0 +1,12 @@
+
+
+
The time is {formatter.format($time)}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/meta.json b/site/content/examples/07-stores/02-readable-stores/meta.json
new file mode 100644
index 0000000000..3f420cafd8
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Readable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/stores.js b/site/content/examples/07-stores/02-readable-stores/stores.js
new file mode 100644
index 0000000000..015de5ad45
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/stores.js
@@ -0,0 +1,11 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(function start(set) {
+ const interval = setInterval(() => {
+ set(new Date());
+ }, 1000);
+
+ return function stop() {
+ clearInterval(interval);
+ };
+}, new Date());
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/App.svelte b/site/content/examples/07-stores/03-derived-stores/App.svelte
new file mode 100644
index 0000000000..8182ecd671
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/App.svelte
@@ -0,0 +1,17 @@
+
+
+
The time is {formatter.format($time)}
+
+
+ This page has been open for
+ {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/meta.json b/site/content/examples/07-stores/03-derived-stores/meta.json
new file mode 100644
index 0000000000..23105b0bfa
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Derived stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js
new file mode 100644
index 0000000000..2f3af1247a
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/stores.js
@@ -0,0 +1,18 @@
+import { readable, derive } from 'svelte/store';
+
+export const time = readable(function start(set) {
+ const interval = setInterval(() => {
+ set(new Date());
+ }, 1000);
+
+ return function stop() {
+ clearInterval(interval);
+ };
+}, new Date());
+
+const start = new Date();
+
+export const elapsed = derive(
+ time,
+ $time => Math.round(($time - start) / 1000)
+);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/App.svelte b/site/content/examples/07-stores/04-custom-stores/App.svelte
new file mode 100644
index 0000000000..a320cc052f
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/App.svelte
@@ -0,0 +1,9 @@
+
+
+
The count is {$count}
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/meta.json b/site/content/examples/07-stores/04-custom-stores/meta.json
new file mode 100644
index 0000000000..7394c55f28
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Custom stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/stores.js b/site/content/examples/07-stores/04-custom-stores/stores.js
new file mode 100644
index 0000000000..5a26025b03
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/stores.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+function createCount() {
+ const { subscribe, set, update } = writable(0);
+
+ return {
+ subscribe,
+ increment: () => update(n => n + 1),
+ decrement: () => update(n => n - 1),
+ reset: () => set(0)
+ };
+}
+
+export const count = createCount();
\ No newline at end of file
diff --git a/site/content/examples/07-stores/meta.json b/site/content/examples/07-stores/meta.json
new file mode 100644
index 0000000000..ad974de0d9
--- /dev/null
+++ b/site/content/examples/07-stores/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte
new file mode 100644
index 0000000000..83f3b50a04
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/App.svelte
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/meta.json b/site/content/examples/08-motion/00-tweened/meta.json
new file mode 100644
index 0000000000..39d3af7f38
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Tweened"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
new file mode 100644
index 0000000000..9918cf40e8
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/meta.json b/site/content/examples/08-motion/01-spring/meta.json
new file mode 100644
index 0000000000..f871fea53e
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Spring"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/meta.json b/site/content/examples/08-motion/meta.json
new file mode 100644
index 0000000000..e6fa83cd7f
--- /dev/null
+++ b/site/content/examples/08-motion/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Motion"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/App.svelte b/site/content/examples/09-transitions/00-transition/App.svelte
new file mode 100644
index 0000000000..b7909fb86e
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/App.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+{#if visible}
+
+ Fades in and out
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/meta.json b/site/content/examples/09-transitions/00-transition/meta.json
new file mode 100644
index 0000000000..e07975554f
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "The transition directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
new file mode 100644
index 0000000000..01047f5e37
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+{#if visible}
+
+ Flies in and out
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
new file mode 100644
index 0000000000..517bc54c3c
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Adding parameters"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/App.svelte b/site/content/examples/09-transitions/02-in-and-out/App.svelte
new file mode 100644
index 0000000000..36d36664e6
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/App.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+{#if visible}
+
+ Flies in, fades out
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/meta.json b/site/content/examples/09-transitions/02-in-and-out/meta.json
new file mode 100644
index 0000000000..627f409fa4
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "In and out"
+}
\ No newline at end of file
diff --git a/site/content/examples/transitions-custom/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
similarity index 62%
rename from site/content/examples/transitions-custom/App.svelte
rename to site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
index bee159e4c5..6e8dfcaf08 100644
--- a/site/content/examples/transitions-custom/App.svelte
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -1,14 +1,14 @@
- visible
-
-{#if visible}
-
- wheeee!!!!!
-
-{/if}
-
+
+
+
+{#if visible}
+
+ transitions!
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/meta.json b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
new file mode 100644
index 0000000000..8b70464ca8
--- /dev/null
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Custom CSS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
new file mode 100644
index 0000000000..3b3fb94d1c
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+{#if visible}
+
+ The quick brown fox jumps over the lazy dog
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/meta.json b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
new file mode 100644
index 0000000000..1ec11d90f9
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Custom JS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/App.svelte b/site/content/examples/09-transitions/05-transition-events/App.svelte
new file mode 100644
index 0000000000..da79897365
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/App.svelte
@@ -0,0 +1,25 @@
+
+
+
status: {status}
+
+
+
+{#if visible}
+
+ Flies in and out
+
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/meta.json b/site/content/examples/09-transitions/05-transition-events/meta.json
new file mode 100644
index 0000000000..b46e28feed
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Transition events"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
new file mode 100644
index 0000000000..c46096c204
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
todo
+ {#each todos.filter(t => !t.done) as todo (todo.id)}
+
+ {/each}
+
+
+
+
done
+ {#each todos.filter(t => t.done) as todo (todo.id)}
+
+ {/each}
+
+
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
new file mode 100644
index 0000000000..e11e18b60e
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+ let requested = new Map();
+ let provided = new Map();
+
+ function crossfade(from, node) {
+ const to = node.getBoundingClientRect();
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const style = getComputedStyle(node);
+ const transform = style.transform === 'none' ? '' : style.transform;
+
+ return {
+ duration: 400,
+ easing: quintOut,
+ css: (t, u) => `
+ opacity: ${t};
+ transform: ${transform} translate(${u * dx}px,${u * dy}px);
+ `
+ };
+ }
+
+ return {
+ send(node, params) {
+ provided.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (requested.has(params.key)) {
+ const { rect } = requested.get(params.key);
+ requested.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ // if the node is disappearing altogether
+ // (i.e. wasn't claimed by the other list)
+ // then we need to supply an outro
+ provided.delete(params.key);
+ return fallback(node, params);
+ };
+ },
+
+ receive(node, params) {
+ requested.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (provided.has(params.key)) {
+ const { rect } = provided.get(params.key);
+ provided.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ requested.delete(params.key);
+ return fallback(node, params);
+ };
+ }
+ };
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/meta.json b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
new file mode 100644
index 0000000000..b9fc7da898
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Deferred transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/meta.json b/site/content/examples/09-transitions/meta.json
new file mode 100644
index 0000000000..cb9291d73f
--- /dev/null
+++ b/site/content/examples/09-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
new file mode 100644
index 0000000000..c46096c204
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
todo
+ {#each todos.filter(t => !t.done) as todo (todo.id)}
+
+ {/each}
+
+
+
+
done
+ {#each todos.filter(t => t.done) as todo (todo.id)}
+
+ {/each}
+
+
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/crossfade.js b/site/content/examples/10-animations/00-animate/crossfade.js
new file mode 100644
index 0000000000..e11e18b60e
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+ let requested = new Map();
+ let provided = new Map();
+
+ function crossfade(from, node) {
+ const to = node.getBoundingClientRect();
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const style = getComputedStyle(node);
+ const transform = style.transform === 'none' ? '' : style.transform;
+
+ return {
+ duration: 400,
+ easing: quintOut,
+ css: (t, u) => `
+ opacity: ${t};
+ transform: ${transform} translate(${u * dx}px,${u * dy}px);
+ `
+ };
+ }
+
+ return {
+ send(node, params) {
+ provided.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (requested.has(params.key)) {
+ const { rect } = requested.get(params.key);
+ requested.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ // if the node is disappearing altogether
+ // (i.e. wasn't claimed by the other list)
+ // then we need to supply an outro
+ provided.delete(params.key);
+ return fallback(node, params);
+ };
+ },
+
+ receive(node, params) {
+ requested.set(params.key, {
+ rect: node.getBoundingClientRect()
+ });
+
+ return () => {
+ if (provided.has(params.key)) {
+ const { rect } = provided.get(params.key);
+ provided.delete(params.key);
+
+ return crossfade(rect, node);
+ }
+
+ requested.delete(params.key);
+ return fallback(node, params);
+ };
+ }
+ };
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/meta.json b/site/content/examples/10-animations/00-animate/meta.json
new file mode 100644
index 0000000000..dd7e345443
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "The animate directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/meta.json b/site/content/examples/10-animations/meta.json
new file mode 100644
index 0000000000..c71301495e
--- /dev/null
+++ b/site/content/examples/10-animations/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Animations"
+}
\ No newline at end of file
diff --git a/site/content/examples/svg-clock/App.svelte b/site/content/examples/11-svg/01-clock/App.svelte
similarity index 87%
rename from site/content/examples/svg-clock/App.svelte
rename to site/content/examples/11-svg/01-clock/App.svelte
index 19b56d7335..49d3a7f809 100644
--- a/site/content/examples/svg-clock/App.svelte
+++ b/site/content/examples/11-svg/01-clock/App.svelte
@@ -2,15 +2,12 @@
import { onMount } from 'svelte';
let time = new Date();
- let hours, minutes, seconds;
-
- $: {
- // this block runs reactively, whenever
- // `time` changes
- hours = time.getHours();
- minutes = time.getMinutes();
- seconds = time.getSeconds();
- }
+
+ // these automatically update when `time`
+ // changes, because of the `$:` prefix
+ $: hours = time.getHours();
+ $: minutes = time.getMinutes();
+ $: seconds = time.getSeconds();
onMount(() => {
const interval = setInterval(() => {
@@ -23,6 +20,44 @@
});
+
+
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/site/content/examples/11-svg/01-clock/meta.json b/site/content/examples/11-svg/01-clock/meta.json
new file mode 100644
index 0000000000..ec7137feb6
--- /dev/null
+++ b/site/content/examples/11-svg/01-clock/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Clock"
+}
\ No newline at end of file
diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/examples/11-svg/02-bar-chart/App.svelte
similarity index 84%
rename from site/content/examples/bar-chart/App.svelte
rename to site/content/examples/11-svg/02-bar-chart/App.svelte
index 82af1834a8..e0f27586c3 100644
--- a/site/content/examples/bar-chart/App.svelte
+++ b/site/content/examples/11-svg/02-bar-chart/App.svelte
@@ -1,7 +1,14 @@
-
US birthrate by year {width}/{height}
+
US birthrate by year
\ No newline at end of file
diff --git a/site/src/components/Repl/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte
new file mode 100644
index 0000000000..6c30c34eba
--- /dev/null
+++ b/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -0,0 +1,233 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/InputOutputToggle.svelte b/site/src/components/Repl/InputOutputToggle.svelte
similarity index 100%
rename from site/src/routes/repl/_components/InputOutputToggle.svelte
rename to site/src/components/Repl/InputOutputToggle.svelte
diff --git a/site/src/components/Repl/Message.svelte b/site/src/components/Repl/Message.svelte
new file mode 100644
index 0000000000..6a9183dfb3
--- /dev/null
+++ b/site/src/components/Repl/Message.svelte
@@ -0,0 +1,80 @@
+
+
+
+
+
+ {#if details}
+
{message(details)}
+ {:else}
+
+ {/if}
+
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/Compiler.js b/site/src/components/Repl/Output/Compiler.js
new file mode 100644
index 0000000000..b6d13e53bd
--- /dev/null
+++ b/site/src/components/Repl/Output/Compiler.js
@@ -0,0 +1,38 @@
+export default class Compiler {
+ constructor(version) {
+ this.worker = new Worker('/workers/compiler.js');
+ this.worker.postMessage({ type: 'init', version });
+
+ this.uid = 1;
+ this.handlers = new Map();
+
+ this.worker.onmessage = event => {
+ const handler = this.handlers.get(event.data.id);
+ handler(event.data.result);
+ this.handlers.delete(event.data.id);
+ };
+ }
+
+ compile(component, options) {
+ return new Promise(fulfil => {
+ const id = this.uid++;
+
+ this.handlers.set(id, fulfil);
+
+ this.worker.postMessage({
+ id,
+ type: 'compile',
+ source: component.source,
+ options: Object.assign({
+ name: component.name,
+ filename: `${component.name}.svelte`
+ }, options),
+ entry: component.name === 'App'
+ });
+ });
+ }
+
+ destroy() {
+ this.worker.terminate();
+ }
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte
similarity index 69%
rename from site/src/routes/repl/_components/Output/CompilerOptions.svelte
rename to site/src/components/Repl/Output/CompilerOptions.svelte
index 278f7aa275..75f7301aa7 100644
--- a/site/src/routes/repl/_components/Output/CompilerOptions.svelte
+++ b/site/src/components/Repl/Output/CompilerOptions.svelte
@@ -1,5 +1,7 @@
+
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_utils/getLocationFromStack.js b/site/src/components/Repl/Output/getLocationFromStack.js
similarity index 100%
rename from site/src/routes/repl/_utils/getLocationFromStack.js
rename to site/src/components/Repl/Output/getLocationFromStack.js
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
new file mode 100644
index 0000000000..59d67b5fcf
--- /dev/null
+++ b/site/src/components/Repl/Output/index.svelte
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if embedded}
+
+ {:else}
+
+
+
+
+
+
+
Compiler options
+
+
+
+
+ {/if}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/SplitPane.svelte b/site/src/components/Repl/SplitPane.svelte
similarity index 99%
rename from site/src/routes/repl/_components/SplitPane.svelte
rename to site/src/components/Repl/SplitPane.svelte
index a79ef8b775..d7106553f3 100644
--- a/site/src/routes/repl/_components/SplitPane.svelte
+++ b/site/src/components/Repl/SplitPane.svelte
@@ -71,6 +71,7 @@
}
.pane {
+ position: relative;
float: left;
width: 100%;
height: 100%;
diff --git a/site/src/routes/repl/_components/_codemirror.js b/site/src/components/Repl/_codemirror.js
similarity index 100%
rename from site/src/routes/repl/_components/_codemirror.js
rename to site/src/components/Repl/_codemirror.js
diff --git a/site/src/routes/repl/_components/codemirror.css b/site/src/components/Repl/codemirror.css
similarity index 100%
rename from site/src/routes/repl/_components/codemirror.css
rename to site/src/components/Repl/codemirror.css
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
new file mode 100644
index 0000000000..aa9e423932
--- /dev/null
+++ b/site/src/components/Repl/index.svelte
@@ -0,0 +1,250 @@
+
+
+
+
+
`;
+ };
+
+ let html = marked(content, { renderer });
+ if (found.chapter.startsWith('01')) {
+ const meta = JSON.parse(fs.readFileSync(`content/tutorial/${found.section}/meta.json`));
+ html = `
+