diff --git a/apps/svelte.dev/content/examples/00-introduction/00-hello-world/+assets/App.svelte b/apps/svelte.dev/content/examples/00-introduction/00-hello-world/+assets/App.svelte new file mode 100644 index 000000000..aa19c0abc --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/00-hello-world/+assets/App.svelte @@ -0,0 +1,5 @@ + + +

Hello {name}!

diff --git a/apps/svelte.dev/content/examples/00-introduction/00-hello-world/index.md b/apps/svelte.dev/content/examples/00-introduction/00-hello-world/index.md new file mode 100644 index 000000000..6d1839502 --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/00-hello-world/index.md @@ -0,0 +1,3 @@ +--- +title: 'Hello world' +--- diff --git a/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/+assets/App.svelte b/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/+assets/App.svelte new file mode 100644 index 000000000..18259f27b --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/+assets/App.svelte @@ -0,0 +1,7 @@ + + + +{name} dancing diff --git a/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/index.md b/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/index.md new file mode 100644 index 000000000..ae411991a --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/01-dynamic-attributes/index.md @@ -0,0 +1,3 @@ +--- +title: 'Dynamic attributes' +--- diff --git a/apps/svelte.dev/content/examples/00-introduction/02-styling/+assets/App.svelte b/apps/svelte.dev/content/examples/00-introduction/02-styling/+assets/App.svelte new file mode 100644 index 000000000..5266147df --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/02-styling/+assets/App.svelte @@ -0,0 +1,9 @@ +

Styled!

+ + diff --git a/apps/svelte.dev/content/examples/00-introduction/02-styling/index.md b/apps/svelte.dev/content/examples/00-introduction/02-styling/index.md new file mode 100644 index 000000000..0f91b3eb3 --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/02-styling/index.md @@ -0,0 +1,3 @@ +--- +title: 'Styling' +--- diff --git a/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/App.svelte b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/App.svelte new file mode 100644 index 000000000..86f7f3a77 --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/App.svelte @@ -0,0 +1,14 @@ + + +

These styles...

+ + + diff --git a/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/Nested.svelte b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/Nested.svelte new file mode 100644 index 000000000..de5d97fa8 --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/+assets/Nested.svelte @@ -0,0 +1 @@ +

...don't affect this element

diff --git a/apps/svelte.dev/content/examples/00-introduction/03-nested-components/index.md b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/index.md new file mode 100644 index 000000000..b9c08929b --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/03-nested-components/index.md @@ -0,0 +1,3 @@ +--- +title: 'Nested components' +--- diff --git a/apps/svelte.dev/content/examples/00-introduction/04-html-tags/+assets/App.svelte b/apps/svelte.dev/content/examples/00-introduction/04-html-tags/+assets/App.svelte new file mode 100644 index 000000000..ebc5ade2b --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/04-html-tags/+assets/App.svelte @@ -0,0 +1,5 @@ + + +

{@html string}

diff --git a/apps/svelte.dev/content/examples/00-introduction/04-html-tags/index.md b/apps/svelte.dev/content/examples/00-introduction/04-html-tags/index.md new file mode 100644 index 000000000..83119c6fd --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/04-html-tags/index.md @@ -0,0 +1,3 @@ +--- +title: 'HTML tags' +--- diff --git a/apps/svelte.dev/content/examples/00-introduction/index.md b/apps/svelte.dev/content/examples/00-introduction/index.md new file mode 100644 index 000000000..22205ad84 --- /dev/null +++ b/apps/svelte.dev/content/examples/00-introduction/index.md @@ -0,0 +1,3 @@ +--- +title: 'Introduction' +--- diff --git a/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/+assets/App.svelte b/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/+assets/App.svelte new file mode 100644 index 000000000..23c8d9754 --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/+assets/App.svelte @@ -0,0 +1,12 @@ + + + diff --git a/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/index.md b/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/index.md new file mode 100644 index 000000000..c52f07fe0 --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/00-reactive-assignments/index.md @@ -0,0 +1,3 @@ +--- +title: 'Reactive assignments' +--- diff --git a/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/+assets/App.svelte b/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/+assets/App.svelte new file mode 100644 index 000000000..57cc267ef --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/+assets/App.svelte @@ -0,0 +1,17 @@ + + + + +

{count} * 2 = {doubled}

+

{doubled} * 2 = {quadrupled}

diff --git a/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/index.md b/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/index.md new file mode 100644 index 000000000..042e653e2 --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/01-reactive-declarations/index.md @@ -0,0 +1,3 @@ +--- +title: 'Reactive declarations' +--- diff --git a/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/+assets/App.svelte b/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/+assets/App.svelte new file mode 100644 index 000000000..2f042e26f --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/+assets/App.svelte @@ -0,0 +1,19 @@ + + + diff --git a/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/index.md b/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/index.md new file mode 100644 index 000000000..5b4e2f58a --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/02-reactive-statements/index.md @@ -0,0 +1,3 @@ +--- +title: 'Reactive statements' +--- diff --git a/apps/svelte.dev/content/examples/01-reactivity/index.md b/apps/svelte.dev/content/examples/01-reactivity/index.md new file mode 100644 index 000000000..2e2368597 --- /dev/null +++ b/apps/svelte.dev/content/examples/01-reactivity/index.md @@ -0,0 +1,3 @@ +--- +title: 'Reactivity' +--- diff --git a/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/App.svelte b/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/App.svelte new file mode 100644 index 000000000..f64b69a87 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/App.svelte @@ -0,0 +1,5 @@ + + + diff --git a/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/Nested.svelte b/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/Nested.svelte new file mode 100644 index 000000000..5b229b0c1 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/00-declaring-props/+assets/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

diff --git a/apps/svelte.dev/content/examples/02-props/00-declaring-props/index.md b/apps/svelte.dev/content/examples/02-props/00-declaring-props/index.md new file mode 100644 index 000000000..d95bea339 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/00-declaring-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Declaring props' +--- diff --git a/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/App.svelte b/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/App.svelte new file mode 100644 index 000000000..27e880eb5 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/App.svelte @@ -0,0 +1,6 @@ + + + + diff --git a/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/Nested.svelte b/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/Nested.svelte new file mode 100644 index 000000000..218a6a7c6 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/01-default-values/+assets/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

diff --git a/apps/svelte.dev/content/examples/02-props/01-default-values/index.md b/apps/svelte.dev/content/examples/02-props/01-default-values/index.md new file mode 100644 index 000000000..646ca9e05 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/01-default-values/index.md @@ -0,0 +1,3 @@ +--- +title: 'Default values' +--- diff --git a/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/App.svelte b/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/App.svelte new file mode 100644 index 000000000..d2f97713d --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/App.svelte @@ -0,0 +1,12 @@ + + + diff --git a/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/Info.svelte b/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/Info.svelte new file mode 100644 index 000000000..cda1d2895 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/02-spread-props/+assets/Info.svelte @@ -0,0 +1,14 @@ + + +

+ The {name} package is {speed} fast. Download version {version} from + npm + and learn more here +

diff --git a/apps/svelte.dev/content/examples/02-props/02-spread-props/index.md b/apps/svelte.dev/content/examples/02-props/02-spread-props/index.md new file mode 100644 index 000000000..c27374048 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/02-spread-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Spread props' +--- diff --git a/apps/svelte.dev/content/examples/02-props/index.md b/apps/svelte.dev/content/examples/02-props/index.md new file mode 100644 index 000000000..a9cd668e1 --- /dev/null +++ b/apps/svelte.dev/content/examples/02-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Props' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/00-if-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/00-if-blocks/+assets/App.svelte new file mode 100644 index 000000000..f46ce0796 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/00-if-blocks/+assets/App.svelte @@ -0,0 +1,15 @@ + + +{#if user.loggedIn} + +{/if} + +{#if !user.loggedIn} + +{/if} diff --git a/apps/svelte.dev/content/examples/03-logic/00-if-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/00-if-blocks/index.md new file mode 100644 index 000000000..ef126ec1d --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/00-if-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'If blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/01-else-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/01-else-blocks/+assets/App.svelte new file mode 100644 index 000000000..0443c76b3 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/01-else-blocks/+assets/App.svelte @@ -0,0 +1,13 @@ + + +{#if user.loggedIn} + +{:else} + +{/if} diff --git a/apps/svelte.dev/content/examples/03-logic/01-else-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/01-else-blocks/index.md new file mode 100644 index 000000000..407375b6f --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/01-else-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Else blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/+assets/App.svelte new file mode 100644 index 000000000..2b740dbf9 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/+assets/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} diff --git a/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/index.md new file mode 100644 index 000000000..56c2f9ce1 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/02-else-if-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Else-if blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/03-each-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/03-each-blocks/+assets/App.svelte new file mode 100644 index 000000000..7d08b79ab --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/03-each-blocks/+assets/App.svelte @@ -0,0 +1,19 @@ + + +

The Famous Cats of YouTube

+ + diff --git a/apps/svelte.dev/content/examples/03-logic/03-each-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/03-each-blocks/index.md new file mode 100644 index 000000000..613d1d4ef --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/03-each-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Each blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/App.svelte new file mode 100644 index 000000000..3ac3af47d --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/App.svelte @@ -0,0 +1,33 @@ + + + + +
+
+

Keyed

+ {#each things as thing (thing.id)} + + {/each} +
+ +
+

Unkeyed

+ {#each things as thing} + + {/each} +
+
diff --git a/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/Thing.svelte b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/Thing.svelte new file mode 100644 index 000000000..8fb03a458 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/+assets/Thing.svelte @@ -0,0 +1,24 @@ + + +

+ initial + current +

+ + diff --git a/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/index.md new file mode 100644 index 000000000..a4cbcd09c --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/04-keyed-each-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Keyed each blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/05-await-blocks/+assets/App.svelte b/apps/svelte.dev/content/examples/03-logic/05-await-blocks/+assets/App.svelte new file mode 100644 index 000000000..837e2ef49 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/05-await-blocks/+assets/App.svelte @@ -0,0 +1,28 @@ + + + + +{#await promise} +

...waiting

+{:then number} +

The number is {number}

+{:catch error} +

{error.message}

+{/await} diff --git a/apps/svelte.dev/content/examples/03-logic/05-await-blocks/index.md b/apps/svelte.dev/content/examples/03-logic/05-await-blocks/index.md new file mode 100644 index 000000000..6f7157c21 --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/05-await-blocks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Await blocks' +--- diff --git a/apps/svelte.dev/content/examples/03-logic/index.md b/apps/svelte.dev/content/examples/03-logic/index.md new file mode 100644 index 000000000..0d966e08d --- /dev/null +++ b/apps/svelte.dev/content/examples/03-logic/index.md @@ -0,0 +1,3 @@ +--- +title: 'Logic' +--- diff --git a/apps/svelte.dev/content/examples/04-events/00-dom-events/+assets/App.svelte b/apps/svelte.dev/content/examples/04-events/00-dom-events/+assets/App.svelte new file mode 100644 index 000000000..aba60dc3f --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/00-dom-events/+assets/App.svelte @@ -0,0 +1,20 @@ + + + +
+ The mouse position is {m.x} x {m.y} +
+ + diff --git a/apps/svelte.dev/content/examples/04-events/00-dom-events/index.md b/apps/svelte.dev/content/examples/04-events/00-dom-events/index.md new file mode 100644 index 000000000..9abb4b2a2 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/00-dom-events/index.md @@ -0,0 +1,3 @@ +--- +title: 'DOM events' +--- diff --git a/apps/svelte.dev/content/examples/04-events/01-inline-handlers/+assets/App.svelte b/apps/svelte.dev/content/examples/04-events/01-inline-handlers/+assets/App.svelte new file mode 100644 index 000000000..39ed28763 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/01-inline-handlers/+assets/App.svelte @@ -0,0 +1,15 @@ + + + +
(m = { x: e.clientX, y: e.clientY })}> + The mouse position is {m.x} x {m.y} +
+ + diff --git a/apps/svelte.dev/content/examples/04-events/01-inline-handlers/index.md b/apps/svelte.dev/content/examples/04-events/01-inline-handlers/index.md new file mode 100644 index 000000000..983bc91b6 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/01-inline-handlers/index.md @@ -0,0 +1,3 @@ +--- +title: 'Inline handlers' +--- diff --git a/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/App.svelte b/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/App.svelte new file mode 100644 index 000000000..da810c03f --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/App.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/Inner.svelte b/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/Inner.svelte new file mode 100644 index 000000000..7d1a5221c --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/02-component-events/+assets/Inner.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/02-component-events/index.md b/apps/svelte.dev/content/examples/04-events/02-component-events/index.md new file mode 100644 index 000000000..b40d84217 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/02-component-events/index.md @@ -0,0 +1,3 @@ +--- +title: 'Component events' +--- diff --git a/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/App.svelte b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/App.svelte new file mode 100644 index 000000000..c0e17b20a --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/App.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Inner.svelte b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Inner.svelte new file mode 100644 index 000000000..7d1a5221c --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Inner.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Outer.svelte b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Outer.svelte new file mode 100644 index 000000000..b07e93ceb --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/+assets/Outer.svelte @@ -0,0 +1,7 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/03-event-forwarding/index.md b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/index.md new file mode 100644 index 000000000..30a21674b --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/03-event-forwarding/index.md @@ -0,0 +1,3 @@ +--- +title: 'Event forwarding' +--- diff --git a/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/App.svelte b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/App.svelte new file mode 100644 index 000000000..e961fba2f --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/App.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/CustomButton.svelte b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/CustomButton.svelte new file mode 100644 index 000000000..36a5d20a9 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/+assets/CustomButton.svelte @@ -0,0 +1,24 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/index.md b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/index.md new file mode 100644 index 000000000..4ed2ac704 --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/04-dom-event-forwarding/index.md @@ -0,0 +1,3 @@ +--- +title: 'DOM event forwarding' +--- diff --git a/apps/svelte.dev/content/examples/04-events/index.md b/apps/svelte.dev/content/examples/04-events/index.md new file mode 100644 index 000000000..745fe958d --- /dev/null +++ b/apps/svelte.dev/content/examples/04-events/index.md @@ -0,0 +1,3 @@ +--- +title: 'Events' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/+assets/App.svelte new file mode 100644 index 000000000..07e27a1c6 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/+assets/App.svelte @@ -0,0 +1,6 @@ + + + +

Hello {name || 'stranger'}!

diff --git a/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/index.md new file mode 100644 index 000000000..76864d08d --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/00-text-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'Text inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/+assets/App.svelte new file mode 100644 index 000000000..9b0078e3c --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/+assets/App.svelte @@ -0,0 +1,16 @@ + + + + + + +

{a} + {b} = {a + b}

diff --git a/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/index.md new file mode 100644 index 000000000..bd4c6611f --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/01-numeric-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'Numeric inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/+assets/App.svelte new file mode 100644 index 000000000..f3c35e5c7 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/+assets/App.svelte @@ -0,0 +1,16 @@ + + + + +{#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} + + diff --git a/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/index.md new file mode 100644 index 000000000..42a434f16 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/02-checkbox-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'Checkbox inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/+assets/App.svelte new file mode 100644 index 000000000..e3b5e6a78 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/+assets/App.svelte @@ -0,0 +1,49 @@ + + +

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/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/index.md new file mode 100644 index 000000000..bd6160eaf --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/03-group-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'Group inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/+assets/App.svelte new file mode 100644 index 000000000..212547667 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/+assets/App.svelte @@ -0,0 +1,15 @@ + + + + +{@html marked(text)} + + diff --git a/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/index.md new file mode 100644 index 000000000..daeba6b77 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/04-textarea-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'Textarea inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/+assets/App.svelte new file mode 100644 index 000000000..20bff917b --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/+assets/App.svelte @@ -0,0 +1,28 @@ + + + + + + + + +{#if files} +

Selected files:

+ {#each Array.from(files) as file} +

{file.name} ({file.size} bytes)

+ {/each} +{/if} diff --git a/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/index.md b/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/index.md new file mode 100644 index 000000000..3b4b55b95 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/05-file-inputs/index.md @@ -0,0 +1,3 @@ +--- +title: 'File inputs' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/+assets/App.svelte new file mode 100644 index 000000000..8b99afb19 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/+assets/App.svelte @@ -0,0 +1,42 @@ + + +

Insecurity questions

+ +
+ + + + + +
+ +

selected question {selected ? selected.id : '[waiting...]'}

+ + diff --git a/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/index.md b/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/index.md new file mode 100644 index 000000000..66ce0b03f --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/06-select-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: 'Select bindings' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/+assets/App.svelte new file mode 100644 index 000000000..0fa6aeea8 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/+assets/App.svelte @@ -0,0 +1,50 @@ + + +

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/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/index.md b/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/index.md new file mode 100644 index 000000000..5bc73192a --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/07-multiple-select-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: 'Select multiple' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/+assets/App.svelte new file mode 100644 index 000000000..01894dd01 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/+assets/App.svelte @@ -0,0 +1,33 @@ + + +

Todos

+ +{#each todos as todo} +
+ + + +
+{/each} + +

{remaining} remaining

+ + + + diff --git a/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/index.md b/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/index.md new file mode 100644 index 000000000..f9c02bf47 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/08-each-block-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: 'Each block bindings' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/09-media-elements/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/09-media-elements/+assets/App.svelte new file mode 100644 index 000000000..1c4804226 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/09-media-elements/+assets/App.svelte @@ -0,0 +1,134 @@ + + +

Caminandes: Llamigos

+

From Blender Studio. CC-BY

+ +
+ + +
+ + +
+ {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
+
+
+ + diff --git a/apps/svelte.dev/content/examples/05-bindings/09-media-elements/index.md b/apps/svelte.dev/content/examples/05-bindings/09-media-elements/index.md new file mode 100644 index 000000000..c5c3e88d8 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/09-media-elements/index.md @@ -0,0 +1,3 @@ +--- +title: 'Media elements' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/10-dimensions/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/10-dimensions/+assets/App.svelte new file mode 100644 index 000000000..fa4e5056b --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/10-dimensions/+assets/App.svelte @@ -0,0 +1,24 @@ + + + + + +

size: {w}px x {h}px

+ +
+ {text} +
+ + diff --git a/apps/svelte.dev/content/examples/05-bindings/10-dimensions/index.md b/apps/svelte.dev/content/examples/05-bindings/10-dimensions/index.md new file mode 100644 index 000000000..18b9f5c99 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/10-dimensions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Dimensions' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/11-bind-this/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/11-bind-this/+assets/App.svelte new file mode 100644 index 000000000..5a0adf5ec --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/11-bind-this/+assets/App.svelte @@ -0,0 +1,51 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/05-bindings/11-bind-this/index.md b/apps/svelte.dev/content/examples/05-bindings/11-bind-this/index.md new file mode 100644 index 000000000..70211c53f --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/11-bind-this/index.md @@ -0,0 +1,3 @@ +--- +title: 'bind:this={canvas}' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/App.svelte b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/App.svelte new file mode 100644 index 000000000..45d1970a1 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/App.svelte @@ -0,0 +1,29 @@ + + +

{view}

+ + + + diff --git a/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/Keypad.svelte b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/Keypad.svelte new file mode 100644 index 000000000..d3926d79b --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/+assets/Keypad.svelte @@ -0,0 +1,35 @@ + + +
+ + + + + + + + + + + + + +
+ + diff --git a/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/index.md b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/index.md new file mode 100644 index 000000000..98863a40c --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/12-component-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: 'Component bindings' +--- diff --git a/apps/svelte.dev/content/examples/05-bindings/index.md b/apps/svelte.dev/content/examples/05-bindings/index.md new file mode 100644 index 000000000..d0cc12827 --- /dev/null +++ b/apps/svelte.dev/content/examples/05-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: 'Bindings' +--- diff --git a/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/+assets/App.svelte b/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/+assets/App.svelte new file mode 100644 index 000000000..ad8278dcb --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/+assets/App.svelte @@ -0,0 +1,39 @@ + + +

Photo album

+ +
+ {#each photos as photo} +
+ {photo.title} +
{photo.title}
+
+ {:else} + +

loading...

+ {/each} +
+ + diff --git a/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/index.md b/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/index.md new file mode 100644 index 000000000..bf5c56b28 --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/00-onmount/index.md @@ -0,0 +1,3 @@ +--- +title: 'onMount' +--- diff --git a/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/App.svelte b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/App.svelte new file mode 100644 index 000000000..93257981f --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/App.svelte @@ -0,0 +1,12 @@ + + +

+ The page has been open for + {seconds} + {seconds === 1 ? 'second' : 'seconds'} +

diff --git a/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/utils.js b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/utils.js new file mode 100644 index 000000000..42423ff32 --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/+assets/utils.js @@ -0,0 +1,9 @@ +import { onDestroy } from 'svelte'; + +export function onInterval(callback, milliseconds) { + const interval = setInterval(callback, milliseconds); + + onDestroy(() => { + clearInterval(interval); + }); +} diff --git a/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/index.md b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/index.md new file mode 100644 index 000000000..62b21a40d --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/01-ondestroy/index.md @@ -0,0 +1,3 @@ +--- +title: 'onDestroy' +--- diff --git a/apps/svelte.dev/content/examples/06-lifecycle/02-tick/+assets/App.svelte b/apps/svelte.dev/content/examples/06-lifecycle/02-tick/+assets/App.svelte new file mode 100644 index 000000000..b1fbd597c --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/02-tick/+assets/App.svelte @@ -0,0 +1,31 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/06-lifecycle/02-tick/index.md b/apps/svelte.dev/content/examples/06-lifecycle/02-tick/index.md new file mode 100644 index 000000000..82de06d34 --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/02-tick/index.md @@ -0,0 +1,3 @@ +--- +title: 'tick' +--- diff --git a/apps/svelte.dev/content/examples/06-lifecycle/index.md b/apps/svelte.dev/content/examples/06-lifecycle/index.md new file mode 100644 index 000000000..274624f9a --- /dev/null +++ b/apps/svelte.dev/content/examples/06-lifecycle/index.md @@ -0,0 +1,3 @@ +--- +title: 'Lifecycle' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/App.svelte b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/App.svelte new file mode 100644 index 000000000..734bc083d --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/App.svelte @@ -0,0 +1,21 @@ + + +

The count is {countValue}

+ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Decrementer.svelte b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Decrementer.svelte new file mode 100644 index 000000000..bdf37e0aa --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Decrementer.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Incrementer.svelte b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Incrementer.svelte new file mode 100644 index 000000000..28a70fff9 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Incrementer.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Resetter.svelte b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Resetter.svelte new file mode 100644 index 000000000..2e4a46638 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/Resetter.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/stores.js b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/stores.js new file mode 100644 index 000000000..d432d339e --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/+assets/stores.js @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const count = writable(0); diff --git a/apps/svelte.dev/content/examples/07-stores/00-writable-stores/index.md b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/index.md new file mode 100644 index 000000000..a55e46cbb --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/00-writable-stores/index.md @@ -0,0 +1,3 @@ +--- +title: 'Writable stores' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/App.svelte b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/App.svelte new file mode 100644 index 000000000..992368932 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/App.svelte @@ -0,0 +1,12 @@ + + +

The count is {$count}

+ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Decrementer.svelte b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Decrementer.svelte new file mode 100644 index 000000000..bdf37e0aa --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Decrementer.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Incrementer.svelte b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Incrementer.svelte new file mode 100644 index 000000000..28a70fff9 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Incrementer.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Resetter.svelte b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Resetter.svelte new file mode 100644 index 000000000..2e4a46638 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/Resetter.svelte @@ -0,0 +1,9 @@ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/stores.js b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/stores.js new file mode 100644 index 000000000..d432d339e --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/+assets/stores.js @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const count = writable(0); diff --git a/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/index.md b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/index.md new file mode 100644 index 000000000..6b175ce35 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/01-auto-subscriptions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Auto-subscriptions' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/App.svelte b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/App.svelte new file mode 100644 index 000000000..6d1d80b45 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/App.svelte @@ -0,0 +1,12 @@ + + +

The time is {formatter.format($time)}

diff --git a/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/stores.js b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/stores.js new file mode 100644 index 000000000..8c11f6d3a --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/+assets/stores.js @@ -0,0 +1,11 @@ +import { readable } from 'svelte/store'; + +export const time = readable(new Date(), function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}); diff --git a/apps/svelte.dev/content/examples/07-stores/02-readable-stores/index.md b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/index.md new file mode 100644 index 000000000..0bcb4c57c --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/02-readable-stores/index.md @@ -0,0 +1,3 @@ +--- +title: 'Readable stores' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/App.svelte b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/App.svelte new file mode 100644 index 000000000..d1013c1a2 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/App.svelte @@ -0,0 +1,18 @@ + + +

The time is {formatter.format($time)}

+ +

+ This page has been open for + {$elapsed} + {$elapsed === 1 ? 'second' : 'seconds'} +

diff --git a/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/stores.js b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/stores.js new file mode 100644 index 000000000..741f92784 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/+assets/stores.js @@ -0,0 +1,15 @@ +import { readable, derived } from 'svelte/store'; + +export const time = readable(new Date(), function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}); + +const start = new Date(); + +export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000)); diff --git a/apps/svelte.dev/content/examples/07-stores/03-derived-stores/index.md b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/index.md new file mode 100644 index 000000000..1a39266f1 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/03-derived-stores/index.md @@ -0,0 +1,3 @@ +--- +title: 'Derived stores' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/App.svelte b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/App.svelte new file mode 100644 index 000000000..f06fb48ad --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/App.svelte @@ -0,0 +1,9 @@ + + +

The count is {$count}

+ + + + diff --git a/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/stores.js b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/stores.js new file mode 100644 index 000000000..da11e88df --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/+assets/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(); diff --git a/apps/svelte.dev/content/examples/07-stores/04-custom-stores/index.md b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/index.md new file mode 100644 index 000000000..e7e60874c --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/04-custom-stores/index.md @@ -0,0 +1,3 @@ +--- +title: 'Custom stores' +--- diff --git a/apps/svelte.dev/content/examples/07-stores/index.md b/apps/svelte.dev/content/examples/07-stores/index.md new file mode 100644 index 000000000..53e9170f4 --- /dev/null +++ b/apps/svelte.dev/content/examples/07-stores/index.md @@ -0,0 +1,3 @@ +--- +title: 'Stores' +--- diff --git a/apps/svelte.dev/content/examples/08-motion/00-tweened/+assets/App.svelte b/apps/svelte.dev/content/examples/08-motion/00-tweened/+assets/App.svelte new file mode 100644 index 000000000..bf4e20864 --- /dev/null +++ b/apps/svelte.dev/content/examples/08-motion/00-tweened/+assets/App.svelte @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/08-motion/00-tweened/index.md b/apps/svelte.dev/content/examples/08-motion/00-tweened/index.md new file mode 100644 index 000000000..6e6a9dd6b --- /dev/null +++ b/apps/svelte.dev/content/examples/08-motion/00-tweened/index.md @@ -0,0 +1,3 @@ +--- +title: 'Tweened' +--- diff --git a/apps/svelte.dev/content/examples/08-motion/01-spring/+assets/App.svelte b/apps/svelte.dev/content/examples/08-motion/01-spring/+assets/App.svelte new file mode 100644 index 000000000..38d0ab1bf --- /dev/null +++ b/apps/svelte.dev/content/examples/08-motion/01-spring/+assets/App.svelte @@ -0,0 +1,45 @@ + + +
+ + + +
+ + + coords.set({ x: e.clientX, y: e.clientY })} + onmousedown={() => size.set(30)} + onmouseup={() => size.set(10)} +> + + + + diff --git a/apps/svelte.dev/content/examples/08-motion/01-spring/index.md b/apps/svelte.dev/content/examples/08-motion/01-spring/index.md new file mode 100644 index 000000000..38b541169 --- /dev/null +++ b/apps/svelte.dev/content/examples/08-motion/01-spring/index.md @@ -0,0 +1,3 @@ +--- +title: 'Spring' +--- diff --git a/apps/svelte.dev/content/examples/08-motion/index.md b/apps/svelte.dev/content/examples/08-motion/index.md new file mode 100644 index 000000000..aee4f61aa --- /dev/null +++ b/apps/svelte.dev/content/examples/08-motion/index.md @@ -0,0 +1,3 @@ +--- +title: 'Motion' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/00-transition/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/00-transition/+assets/App.svelte new file mode 100644 index 000000000..0109696e1 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/00-transition/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + +{#if visible} +

Fades in and out

+{/if} diff --git a/apps/svelte.dev/content/examples/09-transitions/00-transition/index.md b/apps/svelte.dev/content/examples/09-transitions/00-transition/index.md new file mode 100644 index 000000000..83911f1b4 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/00-transition/index.md @@ -0,0 +1,3 @@ +--- +title: 'The transition directive' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/+assets/App.svelte new file mode 100644 index 000000000..7127f6b67 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + +{#if visible} +

Flies in and out

+{/if} diff --git a/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/index.md b/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/index.md new file mode 100644 index 000000000..5e1de5655 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/01-adding-parameters-to-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Adding parameters' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/+assets/App.svelte new file mode 100644 index 000000000..16fbda8e6 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + +{#if visible} +

Flies in, fades out

+{/if} diff --git a/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/index.md b/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/index.md new file mode 100644 index 000000000..3070eddbc --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/02-in-and-out/index.md @@ -0,0 +1,3 @@ +--- +title: 'In and out' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/+assets/App.svelte new file mode 100644 index 000000000..8edfceb29 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/+assets/App.svelte @@ -0,0 +1,49 @@ + + + + +{#if visible} +
+ transitions! +
+{/if} + + diff --git a/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/index.md b/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/index.md new file mode 100644 index 000000000..d599e2a3f --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/03-custom-css-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Custom CSS transitions' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/+assets/App.svelte new file mode 100644 index 000000000..08ea61fb3 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/+assets/App.svelte @@ -0,0 +1,31 @@ + + + + +{#if visible} +

The quick brown fox jumps over the lazy dog

+{/if} diff --git a/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/index.md b/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/index.md new file mode 100644 index 000000000..71523362f --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/04-custom-js-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Custom JS transitions' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/05-transition-events/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/05-transition-events/+assets/App.svelte new file mode 100644 index 000000000..48a926e26 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/05-transition-events/+assets/App.svelte @@ -0,0 +1,25 @@ + + +

status: {status}

+ + + +{#if visible} +

(status = 'intro started')} + onoutrostart={() => (status = 'outro started')} + onintroend={() => (status = 'intro ended')} + onoutroend={() => (status = 'outro ended')} + > + Flies in and out +

+{/if} diff --git a/apps/svelte.dev/content/examples/09-transitions/05-transition-events/index.md b/apps/svelte.dev/content/examples/09-transitions/05-transition-events/index.md new file mode 100644 index 000000000..7a3e96afc --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/05-transition-events/index.md @@ -0,0 +1,3 @@ +--- +title: 'Transition events' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte new file mode 100644 index 000000000..8135dbe92 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/App.svelte @@ -0,0 +1,155 @@ + + +
+
+

Photo gallery

+ +
+ {#each images as image} +
+ {#if selected !== image} + + {/if} +
+ {/each} +
+ + {#if selected} + {#await selected then d} +
+ + {d.alt} (selected = null)} /> + +

+ via Flickr + – + {d.license.name} +

+
+ {/await} + {/if} +
+
+ + diff --git a/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/images.js b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/images.js new file mode 100644 index 000000000..fa494ccdb --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/+assets/images.js @@ -0,0 +1,102 @@ +const BY = { + name: 'CC BY 2.0', + url: 'https://creativecommons.org/licenses/by/2.0/' +}; + +const BY_SA = { + name: 'CC BY-SA 2.0', + url: 'https://creativecommons.org/licenses/by-sa/2.0/' +}; + +const BY_ND = { + name: 'CC BY-ND 2.0', + url: 'https://creativecommons.org/licenses/by-nd/2.0/' +}; + +// via http://labs.tineye.com/multicolr +export default [ + { + color: '#001f3f', + id: '1', + alt: 'Crepuscular rays', + path: '43428526@N03/7863279376', + license: BY + }, + { + color: '#0074D9', + id: '2', + alt: 'Lapland winter scene', + path: '25507134@N00/6527537485', + license: BY + }, + { + color: '#7FDBFF', + id: '3', + alt: 'Jellyfish', + path: '37707866@N00/3354331318', + license: BY + }, + { + color: '#39CCCC', + id: '4', + alt: 'A man scuba diving', + path: '32751486@N00/4608886209', + license: BY_SA + }, + { + color: '#3D9970', + id: '5', + alt: 'Underwater scene', + path: '25483059@N08/5548569010', + license: BY + }, + { + color: '#2ECC40', + id: '6', + alt: 'Ferns', + path: '8404611@N06/2447470760', + license: BY + }, + { + color: '#01FF70', + id: '7', + alt: 'Posters in a bar', + path: '33917831@N00/114428206', + license: BY_SA + }, + { + color: '#FFDC00', + id: '8', + alt: 'Daffodil', + path: '46417125@N04/4818617089', + license: BY_ND + }, + { + color: '#FF851B', + id: '9', + alt: 'Dust storm in Sydney', + path: '56068058@N00/3945496657', + license: BY + }, + { + color: '#FF4136', + id: '10', + alt: 'Postbox', + path: '31883499@N05/4216820032', + license: BY + }, + { + color: '#85144b', + id: '11', + alt: 'Fireworks', + path: '8484971@N07/2625506561', + license: BY_ND + }, + { + color: '#B10DC9', + id: '12', + alt: 'The Stereophonics', + path: '58028312@N00/5385464371', + license: BY_ND + } +]; diff --git a/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/index.md b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/index.md new file mode 100644 index 000000000..b8cdcebac --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/06-deferred-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Deferred transitions' +--- diff --git a/apps/svelte.dev/content/examples/09-transitions/index.md b/apps/svelte.dev/content/examples/09-transitions/index.md new file mode 100644 index 000000000..45934c677 --- /dev/null +++ b/apps/svelte.dev/content/examples/09-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Transitions' +--- diff --git a/apps/svelte.dev/content/examples/10-animations/00-animate/+assets/App.svelte b/apps/svelte.dev/content/examples/10-animations/00-animate/+assets/App.svelte new file mode 100644 index 000000000..236b5cd99 --- /dev/null +++ b/apps/svelte.dev/content/examples/10-animations/00-animate/+assets/App.svelte @@ -0,0 +1,144 @@ + + +
+ event.key === 'Enter' && add(event.target)} + /> + +
+

todo

+ {#each todos.filter((t) => !t.done) as todo (todo.id)} + + {/each} +
+ +
+

done

+ {#each todos.filter((t) => t.done) as todo (todo.id)} + + {/each} +
+
+ + diff --git a/apps/svelte.dev/content/examples/10-animations/00-animate/index.md b/apps/svelte.dev/content/examples/10-animations/00-animate/index.md new file mode 100644 index 000000000..f2e0a0a3d --- /dev/null +++ b/apps/svelte.dev/content/examples/10-animations/00-animate/index.md @@ -0,0 +1,3 @@ +--- +title: 'The animate directive' +--- diff --git a/apps/svelte.dev/content/examples/10-animations/index.md b/apps/svelte.dev/content/examples/10-animations/index.md new file mode 100644 index 000000000..419d0c245 --- /dev/null +++ b/apps/svelte.dev/content/examples/10-animations/index.md @@ -0,0 +1,3 @@ +--- +title: 'Animations' +--- diff --git a/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/App.svelte b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/App.svelte new file mode 100644 index 000000000..afc54bd6a --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/App.svelte @@ -0,0 +1,103 @@ + + +
+ + + + + + + + + + + + + + +
+ + diff --git a/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Controls.svelte b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Controls.svelte new file mode 100644 index 000000000..056759d24 --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Controls.svelte @@ -0,0 +1,178 @@ + + +
+
+

Ease

+ {#if mobile} + + {:else} +
    + {#each [...eases] as [name]} +
  • + +
    • + {/each} +
+ {/if} +

Type

+ {#if mobile} + + {:else} +
    + {#each types as [name, type]} +
  • + +
    • + {/each} +
+ {/if} +
+

Duration

+
+ + + + + + +
+
+ + diff --git a/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Grid.svelte b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Grid.svelte new file mode 100644 index 000000000..56af8f47c --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/Grid.svelte @@ -0,0 +1,40 @@ + + + + + + +{#each { length: 8 } as _, i} + {#if i < 6} + + {/if} + +{/each} + + + + + + diff --git a/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/eases.js b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/eases.js new file mode 100644 index 000000000..c4e4ed8d4 --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/00-easing/+assets/eases.js @@ -0,0 +1,43 @@ +import * as eases from 'svelte/easing'; + +const processed_eases = {}; + +for (const ease in eases) { + if (ease === 'linear') { + processed_eases.linear = eases.linear; + } else { + const name = ease.replace(/In$|InOut$|Out$/, ''); + const type = ease.match(/In$|InOut$|Out$/)[0]; + + if (!(name in processed_eases)) processed_eases[name] = {}; + processed_eases[name][type] = {}; + processed_eases[name][type].fn = eases[ease]; + + let shape = 'M0 1000'; + for (let i = 1; i <= 1000; i++) { + shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `; + processed_eases[name][type].shape = shape; + } + } +} + +const sorted_eases = new Map([ + ['sine', processed_eases.sine], + ['quad', processed_eases.quad], + ['cubic', processed_eases.cubic], + ['quart', processed_eases.quart], + ['quint', processed_eases.quint], + ['expo', processed_eases.expo], + ['circ', processed_eases.circ], + ['back', processed_eases.back], + ['elastic', processed_eases.elastic], + ['bounce', processed_eases.bounce] +]); + +export const types = [ + ['Ease In', 'In'], + ['Ease Out', 'Out'], + ['Ease In Out', 'InOut'] +]; + +export { sorted_eases as eases }; diff --git a/apps/svelte.dev/content/examples/11-easing/00-easing/index.md b/apps/svelte.dev/content/examples/11-easing/00-easing/index.md new file mode 100644 index 000000000..3a299c744 --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/00-easing/index.md @@ -0,0 +1,3 @@ +--- +title: 'Ease Visualiser' +--- diff --git a/apps/svelte.dev/content/examples/11-easing/index.md b/apps/svelte.dev/content/examples/11-easing/index.md new file mode 100644 index 000000000..26c5287f2 --- /dev/null +++ b/apps/svelte.dev/content/examples/11-easing/index.md @@ -0,0 +1,3 @@ +--- +title: 'Easing' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte new file mode 100644 index 000000000..3d0d85f3f --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/01-clock/+assets/App.svelte @@ -0,0 +1,85 @@ + + + + + + + {#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute} + + + {#each [1, 2, 3, 4] as offset} + + {/each} + {/each} + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/12-svg/01-clock/index.md b/apps/svelte.dev/content/examples/12-svg/01-clock/index.md new file mode 100644 index 000000000..9f31a7076 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/01-clock/index.md @@ -0,0 +1,3 @@ +--- +title: 'Clock' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/02-bar-chart/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/02-bar-chart/+assets/App.svelte new file mode 100644 index 000000000..a1761a9ec --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/02-bar-chart/+assets/App.svelte @@ -0,0 +1,118 @@ + + +

US birthrate by year

+ +
+ + + + {#each yTicks as tick} + + + {tick} {tick === 20 ? ' per 1,000 population' : ''} + + {/each} + + + + + {#each points as point, i} + + {width > 380 ? point.year : formatMobile(point.year)} + + {/each} + + + + {#each points as point, i} + + {/each} + + +
+ + diff --git a/apps/svelte.dev/content/examples/12-svg/02-bar-chart/index.md b/apps/svelte.dev/content/examples/12-svg/02-bar-chart/index.md new file mode 100644 index 000000000..086ceb7db --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/02-bar-chart/index.md @@ -0,0 +1,3 @@ +--- +title: 'Bar chart' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/App.svelte new file mode 100644 index 000000000..4d72124c7 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/App.svelte @@ -0,0 +1,117 @@ + + +

Arctic sea ice minimum

+ +
+ + + + {#each yTicks as tick} + + + {tick} {tick === 8 ? ' million sq km' : ''} + + {/each} + + + + + {#each xTicks as tick} + + + {width > 380 ? tick : formatMobile(tick)} + + {/each} + + + + + + +
+ +

+ Average September extent. Source: NSIDC/NASA +

+ + diff --git a/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/data.js b/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/data.js new file mode 100644 index 000000000..e50c29c9a --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/03-area-chart/+assets/data.js @@ -0,0 +1,45 @@ +export default [ + { x: 1979, y: 7.19 }, + { x: 1980, y: 7.83 }, + { x: 1981, y: 7.24 }, + { x: 1982, y: 7.44 }, + { x: 1983, y: 7.51 }, + { x: 1984, y: 7.1 }, + { x: 1985, y: 6.91 }, + { x: 1986, y: 7.53 }, + { x: 1987, y: 7.47 }, + { x: 1988, y: 7.48 }, + { x: 1989, y: 7.03 }, + { x: 1990, y: 6.23 }, + { x: 1991, y: 6.54 }, + { x: 1992, y: 7.54 }, + { x: 1993, y: 6.5 }, + { x: 1994, y: 7.18 }, + { x: 1995, y: 6.12 }, + { x: 1996, y: 7.87 }, + { x: 1997, y: 6.73 }, + { x: 1998, y: 6.55 }, + { x: 1999, y: 6.23 }, + { x: 2000, y: 6.31 }, + { x: 2001, y: 6.74 }, + { x: 2002, y: 5.95 }, + { x: 2003, y: 6.13 }, + { x: 2004, y: 6.04 }, + { x: 2005, y: 5.56 }, + { x: 2006, y: 5.91 }, + { x: 2007, y: 4.29 }, + { x: 2008, y: 4.72 }, + { x: 2009, y: 5.38 }, + { x: 2010, y: 4.92 }, + { x: 2011, y: 4.61 }, + { x: 2012, y: 3.62 }, + { x: 2013, y: 5.35 }, + { x: 2014, y: 5.28 }, + { x: 2015, y: 4.63 }, + { x: 2016, y: 4.72 }, + { x: 2017, y: 4.82 }, + { x: 2018, y: 4.79 }, + { x: 2019, y: 4.36 }, + { x: 2020, y: 4 }, + { x: 2021, y: 4.92 } +]; diff --git a/apps/svelte.dev/content/examples/12-svg/03-area-chart/index.md b/apps/svelte.dev/content/examples/12-svg/03-area-chart/index.md new file mode 100644 index 000000000..2c3da85ea --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/03-area-chart/index.md @@ -0,0 +1,3 @@ +--- +title: 'Area chart' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/App.svelte new file mode 100644 index 000000000..186193b11 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/App.svelte @@ -0,0 +1,24 @@ + + +
+

Anscombe's quartet

+ + + + + +
+ + diff --git a/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/Scatterplot.svelte b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/Scatterplot.svelte new file mode 100644 index 000000000..7cb457472 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/Scatterplot.svelte @@ -0,0 +1,91 @@ + + + + + + + + {#each yTicks as tick} + + + {tick} + + {/each} + + + + + {#each xTicks as tick} + + + {tick} + + {/each} + + + + {#each points as point} + + {/each} + + + diff --git a/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/data.js b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/data.js new file mode 100644 index 000000000..71ce9dffe --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/+assets/data.js @@ -0,0 +1,54 @@ +export default { + a: [ + { x: 10, y: 8.04 }, + { x: 8, y: 6.95 }, + { x: 13, y: 7.58 }, + { x: 9, y: 8.81 }, + { x: 11, y: 8.33 }, + { x: 14, y: 9.96 }, + { x: 6, y: 7.24 }, + { x: 4, y: 4.26 }, + { x: 12, y: 10.84 }, + { x: 7, y: 4.82 }, + { x: 5, y: 5.68 } + ], + b: [ + { x: 10, y: 9.14 }, + { x: 8, y: 8.14 }, + { x: 13, y: 8.74 }, + { x: 9, y: 8.77 }, + { x: 11, y: 9.26 }, + { x: 14, y: 8.1 }, + { x: 6, y: 6.13 }, + { x: 4, y: 3.1 }, + { x: 12, y: 9.13 }, + { x: 7, y: 7.26 }, + { x: 5, y: 4.74 } + ], + c: [ + { x: 10, y: 7.46 }, + { x: 8, y: 6.77 }, + { x: 13, y: 12.74 }, + { x: 9, y: 7.11 }, + { x: 11, y: 7.81 }, + { x: 14, y: 8.84 }, + { x: 6, y: 6.08 }, + { x: 4, y: 5.39 }, + { x: 12, y: 8.15 }, + { x: 7, y: 6.42 }, + { x: 5, y: 5.73 } + ], + d: [ + { x: 8, y: 6.58 }, + { x: 8, y: 5.76 }, + { x: 8, y: 7.71 }, + { x: 8, y: 8.84 }, + { x: 8, y: 8.47 }, + { x: 8, y: 7.04 }, + { x: 8, y: 5.25 }, + { x: 19, y: 12.5 }, + { x: 8, y: 5.56 }, + { x: 8, y: 7.91 }, + { x: 8, y: 6.89 } + ] +}; diff --git a/apps/svelte.dev/content/examples/12-svg/04-scatterplot/index.md b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/index.md new file mode 100644 index 000000000..010286bc6 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/04-scatterplot/index.md @@ -0,0 +1,3 @@ +--- +title: 'Scatterplot' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/App.svelte b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/App.svelte new file mode 100644 index 000000000..385f3258a --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/App.svelte @@ -0,0 +1,68 @@ + + +{#if visible} + + + + + + + +
+ {#each 'SVELTE' as char, i} + {char} + {/each} +
+{/if} + + + + + + diff --git a/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/custom-transitions.js b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/custom-transitions.js new file mode 100644 index 000000000..58b9198a8 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/custom-transitions.js @@ -0,0 +1,14 @@ +import { cubicOut } from 'svelte/easing'; + +export function expand(node, params) { + const { delay = 0, duration = 400, easing = cubicOut } = params; + + const w = parseFloat(getComputedStyle(node).strokeWidth); + + return { + delay, + duration, + easing, + css: (t) => `opacity: ${t}; stroke-width: ${t * w}` + }; +} diff --git a/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/shape.js b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/shape.js new file mode 100644 index 000000000..3a85ab44b --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/+assets/shape.js @@ -0,0 +1,2 @@ +export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`; +export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`; diff --git a/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/index.md b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/index.md new file mode 100644 index 000000000..1906a2dc1 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/05-svg-transitions/index.md @@ -0,0 +1,3 @@ +--- +title: 'SVG transitions' +--- diff --git a/apps/svelte.dev/content/examples/12-svg/index.md b/apps/svelte.dev/content/examples/12-svg/index.md new file mode 100644 index 000000000..bcc5778a9 --- /dev/null +++ b/apps/svelte.dev/content/examples/12-svg/index.md @@ -0,0 +1,3 @@ +--- +title: 'SVG' +--- diff --git a/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/App.svelte b/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/App.svelte new file mode 100644 index 000000000..fe7947ffa --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/App.svelte @@ -0,0 +1,30 @@ + + + +{#if showModal} +
(showModal = false)}>Click outside me!
+{/if} + + diff --git a/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/click_outside.js b/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/click_outside.js new file mode 100644 index 000000000..3a9a56159 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/00-actions/+assets/click_outside.js @@ -0,0 +1,15 @@ +export function clickOutside(node) { + const handleClick = (event) => { + if (!node.contains(event.target)) { + node.dispatchEvent(new CustomEvent('outclick')); + } + }; + + document.addEventListener('click', handleClick, true); + + return { + destroy() { + document.removeEventListener('click', handleClick, true); + } + }; +} diff --git a/apps/svelte.dev/content/examples/13-actions/00-actions/index.md b/apps/svelte.dev/content/examples/13-actions/00-actions/index.md new file mode 100644 index 000000000..3435bc9ce --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/00-actions/index.md @@ -0,0 +1,3 @@ +--- +title: 'The use directive' +--- diff --git a/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/App.svelte b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/App.svelte new file mode 100644 index 000000000..96a51e119 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/App.svelte @@ -0,0 +1,21 @@ + + + + + + +{#if pressed} +

congratulations, you pressed and held for {duration}ms

+{/if} diff --git a/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/longpress.js b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/longpress.js new file mode 100644 index 000000000..240ecd002 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/+assets/longpress.js @@ -0,0 +1,26 @@ +export function longpress(node, duration) { + let timer; + + const handleMousedown = () => { + timer = setTimeout(() => { + node.dispatchEvent(new CustomEvent('longpress')); + }, duration); + }; + + const handleMouseup = () => { + clearTimeout(timer); + }; + + node.addEventListener('mousedown', handleMousedown); + node.addEventListener('mouseup', handleMouseup); + + return { + update(newDuration) { + duration = newDuration; + }, + destroy() { + node.removeEventListener('mousedown', handleMousedown); + node.removeEventListener('mouseup', handleMouseup); + } + }; +} diff --git a/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/index.md b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/index.md new file mode 100644 index 000000000..5e1de5655 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/01-adding-parameters-to-actions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Adding parameters' +--- diff --git a/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/App.svelte b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/App.svelte new file mode 100644 index 000000000..ce93e9d29 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/App.svelte @@ -0,0 +1,55 @@ + + +
+ + diff --git a/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/pannable.js b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/pannable.js new file mode 100644 index 000000000..d7d476662 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/+assets/pannable.js @@ -0,0 +1,53 @@ +export function pannable(node) { + let x; + let y; + + function handleMousedown(event) { + x = event.clientX; + y = event.clientY; + + node.dispatchEvent( + new CustomEvent('panstart', { + detail: { x, y } + }) + ); + + window.addEventListener('mousemove', handleMousemove); + window.addEventListener('mouseup', handleMouseup); + } + + function handleMousemove(event) { + const dx = event.clientX - x; + const dy = event.clientY - y; + x = event.clientX; + y = event.clientY; + + node.dispatchEvent( + new CustomEvent('panmove', { + detail: { x, y, dx, dy } + }) + ); + } + + function handleMouseup(event) { + x = event.clientX; + y = event.clientY; + + node.dispatchEvent( + new CustomEvent('panend', { + detail: { x, y } + }) + ); + + window.removeEventListener('mousemove', handleMousemove); + window.removeEventListener('mouseup', handleMouseup); + } + + node.addEventListener('mousedown', handleMousedown); + + return { + destroy() { + node.removeEventListener('mousedown', handleMousedown); + } + }; +} diff --git a/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/index.md b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/index.md new file mode 100644 index 000000000..8661a7c86 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/03-actions-pannable/index.md @@ -0,0 +1,3 @@ +--- +title: 'A more complex action' +--- diff --git a/apps/svelte.dev/content/examples/13-actions/index.md b/apps/svelte.dev/content/examples/13-actions/index.md new file mode 100644 index 000000000..dafdab061 --- /dev/null +++ b/apps/svelte.dev/content/examples/13-actions/index.md @@ -0,0 +1,3 @@ +--- +title: 'Actions' +--- diff --git a/apps/svelte.dev/content/examples/14-classes/00-classes/+assets/App.svelte b/apps/svelte.dev/content/examples/14-classes/00-classes/+assets/App.svelte new file mode 100644 index 000000000..f96741845 --- /dev/null +++ b/apps/svelte.dev/content/examples/14-classes/00-classes/+assets/App.svelte @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/14-classes/00-classes/index.md b/apps/svelte.dev/content/examples/14-classes/00-classes/index.md new file mode 100644 index 000000000..266b27c78 --- /dev/null +++ b/apps/svelte.dev/content/examples/14-classes/00-classes/index.md @@ -0,0 +1,3 @@ +--- +title: 'The class directive' +--- diff --git a/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/+assets/App.svelte b/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/+assets/App.svelte new file mode 100644 index 000000000..95866b40a --- /dev/null +++ b/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/+assets/App.svelte @@ -0,0 +1,18 @@ + + + + +
+ some {big ? 'big' : 'small'} text +
+ + diff --git a/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/index.md b/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/index.md new file mode 100644 index 000000000..40bb2353f --- /dev/null +++ b/apps/svelte.dev/content/examples/14-classes/01-class-shorthand/index.md @@ -0,0 +1,3 @@ +--- +title: 'Shorthand class directive' +--- diff --git a/apps/svelte.dev/content/examples/14-classes/index.md b/apps/svelte.dev/content/examples/14-classes/index.md new file mode 100644 index 000000000..da4599491 --- /dev/null +++ b/apps/svelte.dev/content/examples/14-classes/index.md @@ -0,0 +1,3 @@ +--- +title: 'Classes' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/App.svelte new file mode 100644 index 000000000..986bdc01c --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/App.svelte @@ -0,0 +1,8 @@ + + + +

Hello!

+

This is a box. It can contain anything.

+ diff --git a/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/Box.svelte b/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/Box.svelte new file mode 100644 index 000000000..4eb9b5800 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/00-render-props/+assets/Box.svelte @@ -0,0 +1,18 @@ + + +
+ {@render children()} +
+ + diff --git a/apps/svelte.dev/content/examples/15-composition/00-render-props/index.md b/apps/svelte.dev/content/examples/15-composition/00-render-props/index.md new file mode 100644 index 000000000..f83fb1ad9 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/00-render-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Render props' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/App.svelte new file mode 100644 index 000000000..708428d4d --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/App.svelte @@ -0,0 +1,10 @@ + + + +

Hello!

+

This is a box. It can contain anything.

+ + + diff --git a/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/Box.svelte b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/Box.svelte new file mode 100644 index 000000000..384529b58 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/+assets/Box.svelte @@ -0,0 +1,22 @@ + + +
+ {#if children} + {@render children()} + {:else} + no content was provided + {/if} +
+ + diff --git a/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/index.md b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/index.md new file mode 100644 index 000000000..d48f7e88e --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/01-render-prop-fallbacks/index.md @@ -0,0 +1,3 @@ +--- +title: 'Render prop fallbacks' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/App.svelte new file mode 100644 index 000000000..99c5b2cfe --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/App.svelte @@ -0,0 +1,12 @@ + + + + {#snippet name()} P. Sherman {/snippet} + + {#snippet address()} + 42 Wallaby Way
+ Sydney + {/snippet} + diff --git a/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/ContactCard.svelte b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/ContactCard.svelte new file mode 100644 index 000000000..3094db1f9 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/+assets/ContactCard.svelte @@ -0,0 +1,64 @@ + + +
+

+ {#if name} + {@render name()} + {:else} + Unknown name + {/if} +

+ +
+ {#if address} + {@render address()} + {:else} + Unknown address + {/if} +
+ + +
+ + diff --git a/apps/svelte.dev/content/examples/15-composition/02-named-render-props/index.md b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/index.md new file mode 100644 index 000000000..2f35f354a --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/02-named-render-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Named render props' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/App.svelte new file mode 100644 index 000000000..2d3637e10 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/App.svelte @@ -0,0 +1,57 @@ + + + + {#snippet children(active)} +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ {/snippet} + + + + {#snippet children(active)} +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ {/snippet} + + + + {#snippet children(active)} +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ {/snippet} + + + diff --git a/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/Hoverable.svelte b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/Hoverable.svelte new file mode 100644 index 000000000..6a957fec9 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/+assets/Hoverable.svelte @@ -0,0 +1,17 @@ + + + +
+ {@render children(hovering)} +
diff --git a/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/index.md b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/index.md new file mode 100644 index 000000000..21f2e3637 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/03-render-prop-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Render prop props' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/App.svelte new file mode 100644 index 000000000..0f0b3f94e --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + {#snippet}Bob{/snippet} + {#snippet email()}bob@email.com{/snippet} + + + + {#snippet}Alice{/snippet} + {#snippet phone()}12345678{/snippet} + diff --git a/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/Profile.svelte b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/Profile.svelte new file mode 100644 index 000000000..b080bede5 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/+assets/Profile.svelte @@ -0,0 +1,28 @@ + + +
+
Name
+ {@render name()} + {#if email} +
Email
+ {@render email()} + {/if} + {#if phone} +
Phone
+ {@render phone()} + {/if} +
+ + diff --git a/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/index.md b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/index.md new file mode 100644 index 000000000..971d81866 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/04-conditional-render-props/index.md @@ -0,0 +1,3 @@ +--- +title: 'Conditional render props' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/App.svelte b/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/App.svelte new file mode 100644 index 000000000..239a52ad3 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/App.svelte @@ -0,0 +1,33 @@ + + + + + + {#snippet header()} +

+ modal + adjective mod·al \ˈmō-dəl\ +

+ {/snippet} + +
    +
  1. of or relating to modality in logic
    2. +
  2. + containing provisions as to the mode of procedure or the manner of taking effect —used of a + contract or legacy +
    3. +
  3. of or relating to a musical mode
    4. +
  4. of or relating to structure as opposed to substance
    5. +
  5. + of, relating to, or constituting a grammatical form or category characteristically indicating + predication +
    6. +
  6. of or relating to a statistical mode
    7. +
+ + merriam-webster.com + diff --git a/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/Modal.svelte b/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/Modal.svelte new file mode 100644 index 000000000..e130a9b6f --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/05-modal/+assets/Modal.svelte @@ -0,0 +1,65 @@ + + + + (showModal = false)} + onclick={(e) => { if (e.target === dialog) dialog.close(); }} +> +
+ {@render header?.()} +
+ {@render children?.()} +
+ + +
+ + + diff --git a/apps/svelte.dev/content/examples/15-composition/05-modal/index.md b/apps/svelte.dev/content/examples/15-composition/05-modal/index.md new file mode 100644 index 000000000..db9565abd --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/05-modal/index.md @@ -0,0 +1,3 @@ +--- +title: 'Modal' +--- diff --git a/apps/svelte.dev/content/examples/15-composition/index.md b/apps/svelte.dev/content/examples/15-composition/index.md new file mode 100644 index 000000000..478f4b725 --- /dev/null +++ b/apps/svelte.dev/content/examples/15-composition/index.md @@ -0,0 +1,3 @@ +--- +title: 'Component composition' +--- diff --git a/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/App.svelte b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/App.svelte new file mode 100644 index 000000000..d564c9eee --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/Map.svelte b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/Map.svelte new file mode 100644 index 000000000..e931e5562 --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/Map.svelte @@ -0,0 +1,48 @@ + + + + + + +
+ {#if map} + {@render children?.()} + {/if} +
+ + diff --git a/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/MapMarker.svelte b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/MapMarker.svelte new file mode 100644 index 000000000..6fdc0c17f --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/MapMarker.svelte @@ -0,0 +1,13 @@ + diff --git a/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/mapbox.js b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/mapbox.js new file mode 100644 index 000000000..42660d35a --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/00-context-api/+assets/mapbox.js @@ -0,0 +1,8 @@ +import mapbox from 'mapbox-gl'; + +// https://docs.mapbox.com/help/glossary/access-token/ +mapbox.accessToken = MAPBOX_ACCESS_TOKEN; + +const key = {}; + +export { mapbox, key }; diff --git a/apps/svelte.dev/content/examples/16-context/00-context-api/index.md b/apps/svelte.dev/content/examples/16-context/00-context-api/index.md new file mode 100644 index 000000000..feb9399ba --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/00-context-api/index.md @@ -0,0 +1,3 @@ +--- +title: 'setContext and getContext' +--- diff --git a/apps/svelte.dev/content/examples/16-context/index.md b/apps/svelte.dev/content/examples/16-context/index.md new file mode 100644 index 000000000..848b1ff19 --- /dev/null +++ b/apps/svelte.dev/content/examples/16-context/index.md @@ -0,0 +1,3 @@ +--- +title: 'Context API' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/+assets/App.svelte new file mode 100644 index 000000000..67d391f1c --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/+assets/App.svelte @@ -0,0 +1,12 @@ + + + + +I'm a {selected} tag diff --git a/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/index.md b/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/index.md new file mode 100644 index 000000000..38eb893d1 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/01-svelte-element/index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/+assets/App.svelte new file mode 100644 index 000000000..7a6ed68df --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/+assets/App.svelte @@ -0,0 +1,42 @@ + + + + +
+ {#if key} + {key === ' ' ? 'Space' : key} +

{keyCode}

+ {:else} +

Focus this window and press any key

+ {/if} +
+ + diff --git a/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/index.md b/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/index.md new file mode 100644 index 000000000..d75796af0 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/02-svelte-window/index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/+assets/App.svelte new file mode 100644 index 000000000..7f9f8bd97 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/+assets/App.svelte @@ -0,0 +1,86 @@ + + + + + + {#each layers as layer} + parallax layer {layer} + {/each} + + +
+ scroll down + +
+ You have scrolled {y} pixels +
+
+ + diff --git a/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/index.md b/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/index.md new file mode 100644 index 000000000..41fb11ab0 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/03-svelte-window-bindings/index.md @@ -0,0 +1,3 @@ +--- +title: ' bindings' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte new file mode 100644 index 000000000..e3ea0002e --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/+assets/App.svelte @@ -0,0 +1,10 @@ + + + + +

Select this text to fire events

+

Selection: {selection}

diff --git a/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/index.md b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/index.md new file mode 100644 index 000000000..b78852c7c --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/04-svelte-document/index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/+assets/App.svelte new file mode 100644 index 000000000..088cc7312 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/+assets/App.svelte @@ -0,0 +1,34 @@ + + + + + +Kitten wants to know what's going on + + diff --git a/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/index.md b/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/index.md new file mode 100644 index 000000000..0c635c7ba --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/07-svelte-body/index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/+assets/App.svelte b/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/+assets/App.svelte new file mode 100644 index 000000000..5e6bb2d94 --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/+assets/App.svelte @@ -0,0 +1,5 @@ + + + + +

Hello world!

diff --git a/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/index.md b/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/index.md new file mode 100644 index 000000000..13f5322dc --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/08-svelte-head/index.md @@ -0,0 +1,3 @@ +--- +title: '' +--- diff --git a/apps/svelte.dev/content/examples/17-special-elements/index.md b/apps/svelte.dev/content/examples/17-special-elements/index.md new file mode 100644 index 000000000..2e5368c3c --- /dev/null +++ b/apps/svelte.dev/content/examples/17-special-elements/index.md @@ -0,0 +1,3 @@ +--- +title: 'Special elements' +--- diff --git a/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/App.svelte b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/App.svelte new file mode 100644 index 000000000..f750967b3 --- /dev/null +++ b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/App.svelte @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/AudioPlayer.svelte b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/AudioPlayer.svelte new file mode 100644 index 000000000..203ffa0f2 --- /dev/null +++ b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/AudioPlayer.svelte @@ -0,0 +1,59 @@ + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
+ + diff --git a/apps/svelte.dev/content/examples/18-module-context/01-module-exports/index.md b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/index.md new file mode 100644 index 000000000..484a0b998 --- /dev/null +++ b/apps/svelte.dev/content/examples/18-module-context/01-module-exports/index.md @@ -0,0 +1,3 @@ +--- +title: 'Named exports' +--- diff --git a/apps/svelte.dev/content/examples/18-module-context/index.md b/apps/svelte.dev/content/examples/18-module-context/index.md new file mode 100644 index 000000000..d0a9ee8c1 --- /dev/null +++ b/apps/svelte.dev/content/examples/18-module-context/index.md @@ -0,0 +1,3 @@ +--- +title: 'Module context' +--- diff --git a/apps/svelte.dev/content/examples/19-debugging/00-debug/+assets/App.svelte b/apps/svelte.dev/content/examples/19-debugging/00-debug/+assets/App.svelte new file mode 100644 index 000000000..5b04faa80 --- /dev/null +++ b/apps/svelte.dev/content/examples/19-debugging/00-debug/+assets/App.svelte @@ -0,0 +1,13 @@ + + + + + +{@debug user} + +

Hello {user.firstname}!

diff --git a/apps/svelte.dev/content/examples/19-debugging/00-debug/index.md b/apps/svelte.dev/content/examples/19-debugging/00-debug/index.md new file mode 100644 index 000000000..5753d1e13 --- /dev/null +++ b/apps/svelte.dev/content/examples/19-debugging/00-debug/index.md @@ -0,0 +1,3 @@ +--- +title: 'The @debug tag' +--- diff --git a/apps/svelte.dev/content/examples/19-debugging/index.md b/apps/svelte.dev/content/examples/19-debugging/index.md new file mode 100644 index 000000000..72a2acc5b --- /dev/null +++ b/apps/svelte.dev/content/examples/19-debugging/index.md @@ -0,0 +1,3 @@ +--- +title: 'Debugging' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/+assets/App.svelte new file mode 100644 index 000000000..115950602 --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/+assets/App.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/index.md b/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/index.md new file mode 100644 index 000000000..eac86462a --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/01-7guis-counter/index.md @@ -0,0 +1,3 @@ +--- +title: 'Counter' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/+assets/App.svelte new file mode 100644 index 000000000..4733e1fb7 --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/+assets/App.svelte @@ -0,0 +1,24 @@ + + + + setBothFromC(e.target.value)} type="number" /> °C = + setBothFromF(e.target.value)} type="number" /> °F + + diff --git a/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/index.md b/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/index.md new file mode 100644 index 000000000..e33ea1bac --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/02-7guis-temperature/index.md @@ -0,0 +1,3 @@ +--- +title: 'Temperature Converter' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/+assets/App.svelte new file mode 100644 index 000000000..83f33eb88 --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/+assets/App.svelte @@ -0,0 +1,59 @@ + + + + + + + + + + + diff --git a/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/index.md b/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/index.md new file mode 100644 index 000000000..2e2f4586b --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/03-7guis-flight-booker/index.md @@ -0,0 +1,3 @@ +--- +title: 'Flight booker' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/+assets/App.svelte new file mode 100644 index 000000000..f5cc4399b --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/+assets/App.svelte @@ -0,0 +1,37 @@ + + + + + + +
{(elapsed / 1000).toFixed(1)}s
+ + + + diff --git a/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/index.md b/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/index.md new file mode 100644 index 000000000..7ce249968 --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/04-7guis-timer/index.md @@ -0,0 +1,3 @@ +--- +title: 'Timer' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/+assets/App.svelte new file mode 100644 index 000000000..3bb48348e --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/+assets/App.svelte @@ -0,0 +1,91 @@ + + + + + + + + + + + +
+ + + +
+ + diff --git a/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/index.md b/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/index.md new file mode 100644 index 000000000..c410305b0 --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/05-7guis-crud/index.md @@ -0,0 +1,3 @@ +--- +title: 'CRUD' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/+assets/App.svelte b/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/+assets/App.svelte new file mode 100644 index 000000000..675c7122d --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/+assets/App.svelte @@ -0,0 +1,131 @@ + + + + +
+ + +
+ + + {#each circles as circle} + + select(circle, event)} + oncontextmenu={(e) => { + e.stopPropagation(); + e.preventDefault(); + adjusting = !adjusting; + if (adjusting) selected = circle; + }} + fill={circle === selected ? '#ccc' : 'white'} + /> + {/each} + + +{#if adjusting} +
+

adjust diameter of circle at {selected.cx}, {selected.cy}

+ +
+{/if} + + diff --git a/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/index.md b/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/index.md new file mode 100644 index 000000000..8f58b0fea --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/06-7guis-circles/index.md @@ -0,0 +1,3 @@ +--- +title: 'Circle Drawer' +--- diff --git a/apps/svelte.dev/content/examples/20-7guis/index.md b/apps/svelte.dev/content/examples/20-7guis/index.md new file mode 100644 index 000000000..c2bbd849a --- /dev/null +++ b/apps/svelte.dev/content/examples/20-7guis/index.md @@ -0,0 +1,3 @@ +--- +title: '7GUIs' +--- diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/App.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/App.svelte new file mode 100644 index 000000000..52c6daf61 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/App.svelte @@ -0,0 +1,39 @@ + + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/File.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/File.svelte new file mode 100644 index 000000000..8101784a3 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/File.svelte @@ -0,0 +1,14 @@ + + +{name} + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/Folder.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/Folder.svelte new file mode 100644 index 000000000..2fcb518aa --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/+assets/Folder.svelte @@ -0,0 +1,54 @@ + + + + +{#if expanded} +
    + {#each files as file} +
  • + {#if file.type === 'folder'} + + {:else} + + {/if} +
    • + {/each} +
+{/if} + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/index.md b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/index.md new file mode 100644 index 000000000..747685912 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/00-recursive-components/index.md @@ -0,0 +1,3 @@ +--- +title: 'Recursive components' +--- diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/App.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/App.svelte new file mode 100644 index 000000000..130fa0b9f --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/App.svelte @@ -0,0 +1,21 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/BlueThing.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/BlueThing.svelte new file mode 100644 index 000000000..551f1afbb --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/BlueThing.svelte @@ -0,0 +1,7 @@ +Blue thing + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/GreenThing.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/GreenThing.svelte new file mode 100644 index 000000000..a224720e6 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/GreenThing.svelte @@ -0,0 +1,7 @@ +Green thing + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/RedThing.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/RedThing.svelte new file mode 100644 index 000000000..9774363c1 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/+assets/RedThing.svelte @@ -0,0 +1,7 @@ +Red thing + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/index.md b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/index.md new file mode 100644 index 000000000..5145ad4c9 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/01-dynamic-components/index.md @@ -0,0 +1,3 @@ +--- +title: 'Dynamic components' +--- diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/App.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/App.svelte new file mode 100644 index 000000000..3de08e6b1 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/App.svelte @@ -0,0 +1,53 @@ + + + + +
+ {#if item} + + {:else if page} + + {/if} +
+ + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Comment.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Comment.svelte new file mode 100644 index 000000000..5ff476459 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Comment.svelte @@ -0,0 +1,33 @@ + + +
+

{comment.user} {comment.time_ago}

+ + {@html comment.content} + +
+ {#each comment.comments as child} + + {/each} +
+
+ + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Item.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Item.svelte new file mode 100644 index 000000000..c42c9a5e4 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Item.svelte @@ -0,0 +1,42 @@ + + +« back + + + +
+ {#each item.comments as comment} + + {/each} +
+ + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/List.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/List.svelte new file mode 100644 index 000000000..421d404a3 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/List.svelte @@ -0,0 +1,52 @@ + + +{#if items} + {#each items as item, i} + + {/each} + + page {page + 1} +{:else} +

loading...

+{/if} + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Summary.svelte b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Summary.svelte new file mode 100644 index 000000000..0754e3a0b --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/+assets/Summary.svelte @@ -0,0 +1,34 @@ + + + + + diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/index.md b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/index.md new file mode 100644 index 000000000..3a6a25130 --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/02-hacker-news/index.md @@ -0,0 +1,3 @@ +--- +title: 'Hacker News' +--- diff --git a/apps/svelte.dev/content/examples/21-miscellaneous/index.md b/apps/svelte.dev/content/examples/21-miscellaneous/index.md new file mode 100644 index 000000000..b05fc8a0c --- /dev/null +++ b/apps/svelte.dev/content/examples/21-miscellaneous/index.md @@ -0,0 +1,3 @@ +--- +title: 'Miscellaneous' +--- diff --git a/apps/svelte.dev/content/examples/99-embeds/00-untitled/+assets/App.svelte b/apps/svelte.dev/content/examples/99-embeds/00-untitled/+assets/App.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/apps/svelte.dev/content/examples/99-embeds/00-untitled/index.md b/apps/svelte.dev/content/examples/99-embeds/00-untitled/index.md new file mode 100644 index 000000000..865764d9f --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/00-untitled/index.md @@ -0,0 +1,3 @@ +--- +title: 'Untitled' +--- diff --git a/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/App.svelte b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/App.svelte new file mode 100644 index 000000000..a2046d039 --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/App.svelte @@ -0,0 +1,17 @@ + + + + +
+

+ 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. I think you'll be surprised at some of your phrasing. +

+
diff --git a/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/Hero.svelte b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/Hero.svelte new file mode 100644 index 000000000..b59a11871 --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/Hero.svelte @@ -0,0 +1,15 @@ + + +
+

+
+
+
CSS
+ in JS +
+ in HTML +
+

+
diff --git a/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/styles.js b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/styles.js new file mode 100644 index 000000000..b54fa9276 --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/+assets/styles.js @@ -0,0 +1,35 @@ +import emotion from '@emotion/css@11.1.3/dist/emotion-css.umd.min.js'; + +const { css } = emotion; + +const brand = '#74D900'; + +export const title = css` + color: ${brand}; + font-size: 1em; + white-space: nowrap; +`; + +export const comicSans = css` + font-family: 'Comic Sans MS', cursive; +`; + +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}; + } +`; diff --git a/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/index.md b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/index.md new file mode 100644 index 000000000..f51787b6d --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20181225-blog-svelte-css-in-js/index.md @@ -0,0 +1,3 @@ +--- +title: - +--- diff --git a/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/+assets/App.svelte b/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/+assets/App.svelte new file mode 100644 index 000000000..5de0c15ac --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/+assets/App.svelte @@ -0,0 +1,9 @@ + + + + + +

{a} + {b} = {a + b}

diff --git a/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/index.md b/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/index.md new file mode 100644 index 000000000..f51787b6d --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/20190420-blog-write-less-code/index.md @@ -0,0 +1,3 @@ +--- +title: - +--- diff --git a/apps/svelte.dev/content/examples/99-embeds/index.md b/apps/svelte.dev/content/examples/99-embeds/index.md new file mode 100644 index 000000000..7e8d5444f --- /dev/null +++ b/apps/svelte.dev/content/examples/99-embeds/index.md @@ -0,0 +1,3 @@ +--- +title: Embeds (invisible in the examples selection) +--- diff --git a/apps/svelte.dev/content/examples/index.md b/apps/svelte.dev/content/examples/index.md new file mode 100644 index 000000000..42f7ed417 --- /dev/null +++ b/apps/svelte.dev/content/examples/index.md @@ -0,0 +1,3 @@ +--- +title: Examples +--- diff --git a/apps/svelte.dev/src/constants.js b/apps/svelte.dev/src/constants.js deleted file mode 100644 index 14cbd17a1..000000000 --- a/apps/svelte.dev/src/constants.js +++ /dev/null @@ -1,9 +0,0 @@ -export const CONTENT_BASE = '../../content'; - -/** All the paths are relative to the project root when being run on server or built */ -export const CONTENT_BASE_PATHS = { - BLOG: `${CONTENT_BASE}/blog`, - TUTORIAL: `${CONTENT_BASE}/tutorial`, - DOCS: `${CONTENT_BASE}/docs`, - EXAMPLES: `${CONTENT_BASE}/examples` -}; diff --git a/apps/svelte.dev/src/lib/generated/examples-data.js b/apps/svelte.dev/src/lib/generated/examples-data.js deleted file mode 100644 index 1027cba88..000000000 --- a/apps/svelte.dev/src/lib/generated/examples-data.js +++ /dev/null @@ -1 +0,0 @@ -export default [{"title":"Introduction","slug":"introduction","examples":[{"title":"Hello world","slug":"hello-world","files":[{"name":"App.svelte","type":"svelte","content":"\n\n

Hello {name}!

\n"}]},{"title":"Dynamic attributes","slug":"dynamic-attributes","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\"{name}\n"}]},{"title":"Styling","slug":"styling","files":[{"name":"App.svelte","type":"svelte","content":"

Styled!

\n\n\n"}]},{"title":"Nested components","slug":"nested-components","files":[{"name":"App.svelte","type":"svelte","content":"\n\n

These styles...

\n\n\n\n"},{"name":"Nested.svelte","type":"svelte","content":"

...don't affect this element

\n"}]},{"title":"HTML tags","slug":"html-tags","files":[{"name":"App.svelte","type":"svelte","content":"\n\n

{@html string}

\n"}]}]},{"title":"Reactivity","slug":"reactivity","examples":[{"title":"Reactive assignments","slug":"reactive-assignments","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"}]},{"title":"Reactive declarations","slug":"reactive-declarations","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n

{count} * 2 = {doubled}

\n

{doubled} * 2 = {quadrupled}

\n"}]},{"title":"Reactive statements","slug":"reactive-statements","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"}]}]},{"title":"Props","slug":"props","examples":[{"title":"Declaring props","slug":"declaring-props","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"},{"name":"Nested.svelte","type":"svelte","content":"\n\n

The answer is {answer}

\n"}]},{"title":"Default values","slug":"default-values","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n"},{"name":"Nested.svelte","type":"svelte","content":"\n\n

The answer is {answer}

\n"}]},{"title":"Spread props","slug":"spread-props","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"},{"name":"Info.svelte","type":"svelte","content":"\n\n

\n\tThe {name} package is {speed} fast. Download version {version} from\n\tnpm\n\tand learn more here\n

\n"}]}]},{"title":"Logic","slug":"logic","examples":[{"title":"If blocks","slug":"if-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n{#if user.loggedIn}\n\t\n{/if}\n\n{#if !user.loggedIn}\n\t\n{/if}\n"}]},{"title":"Else blocks","slug":"else-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n{#if user.loggedIn}\n\t\n{:else}\n\t\n{/if}\n"}]},{"title":"Else-if blocks","slug":"else-if-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n{#if x > 10}\n\t

{x} is greater than 10

\n{:else if 5 > x}\n\t

{x} is less than 5

\n{:else}\n\t

{x} is between 5 and 10

\n{/if}\n"}]},{"title":"Each blocks","slug":"each-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n

The Famous Cats of YouTube

\n\n\n"}]},{"title":"Keyed each blocks","slug":"keyed-each-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n
\n\t
\n\t\t

Keyed

\n\t\t{#each things as thing (thing.id)}\n\t\t\t\n\t\t{/each}\n\t
\n\n\t
\n\t\t

Unkeyed

\n\t\t{#each things as thing}\n\t\t\t\n\t\t{/each}\n\t
\n
\n"},{"name":"Thing.svelte","type":"svelte","content":"\n\n

\n\tinitial\n\tcurrent\n

\n\n\n"}]},{"title":"Await blocks","slug":"await-blocks","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n{#await promise}\n\t

...waiting

\n{:then number}\n\t

The number is {number}

\n{:catch error}\n\t

{error.message}

\n{/await}\n"}]}]},{"title":"Events","slug":"events","examples":[{"title":"DOM events","slug":"dom-events","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n
\n\tThe mouse position is {m.x} x {m.y}\n
\n\n\n"}]},{"title":"Inline handlers","slug":"inline-handlers","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n
(m = { x: e.clientX, y: e.clientY })}>\n\tThe mouse position is {m.x} x {m.y}\n
\n\n\n"}]},{"title":"Event modifiers","slug":"event-modifiers","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"}]},{"title":"Component events","slug":"component-events","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"},{"name":"Inner.svelte","type":"svelte","content":"\n\n\n"}]},{"title":"Event forwarding","slug":"event-forwarding","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"},{"name":"Inner.svelte","type":"svelte","content":"\n\n\n"},{"name":"Outer.svelte","type":"svelte","content":"\n\n\n"}]},{"title":"DOM event forwarding","slug":"dom-event-forwarding","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n"},{"name":"CustomButton.svelte","type":"svelte","content":"\n\n\n"}]}]},{"title":"Bindings","slug":"bindings","examples":[{"title":"Text inputs","slug":"text-inputs","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n

Hello {name || 'stranger'}!

\n"}]},{"title":"Numeric inputs","slug":"numeric-inputs","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n\n\n

{a} + {b} = {a + b}

\n"}]},{"title":"Checkbox inputs","slug":"checkbox-inputs","files":[{"name":"App.svelte","type":"svelte","content":"\n\n\n\n{#if yes}\n\t

Thank you. We will bombard your inbox and sell your personal details.

\n{:else}\n\t

You must opt-in to continue. If you're not paying, you're the product.

\n{/if}\n\n\n"}]},{"title":"Group inputs","slug":"group-inputs","files":[{"name":"App.svelte","type":"svelte","content":"\n\n

Size

\n\n\n\n\n\n\n\n

Flavours

\n\n{#each menu as flavour}\n\t\n{/each}\n\n{#if flavours.length === 0}\n\t

Please select at least one flavour

\n{:else if flavours.length > scoops}\n\t

Can't order more flavours than scoops!

\n{:else}\n\t

\n\t\tYou ordered {scoops}\n\t\t{scoops === 1 ? 'scoop' : 'scoops'}\n\t\tof {join(flavours)}\n\t

\n{/if}\n"}]},{"title":"Textarea inputs","slug":"textarea-inputs","files":[{"name":"App.svelte","type":"svelte","content":"\n\n