diff --git a/site/content/examples/7guis-circles/App.svelte b/site/content/OLD.examples/7guis-circles/App.svelte similarity index 100% rename from site/content/examples/7guis-circles/App.svelte rename to site/content/OLD.examples/7guis-circles/App.svelte diff --git a/site/content/examples/7guis-counter/App.svelte b/site/content/OLD.examples/7guis-counter/App.svelte similarity index 100% rename from site/content/examples/7guis-counter/App.svelte rename to site/content/OLD.examples/7guis-counter/App.svelte diff --git a/site/content/examples/7guis-crud/App.svelte b/site/content/OLD.examples/7guis-crud/App.svelte similarity index 100% rename from site/content/examples/7guis-crud/App.svelte rename to site/content/OLD.examples/7guis-crud/App.svelte diff --git a/site/content/examples/7guis-flight-booker/App.svelte b/site/content/OLD.examples/7guis-flight-booker/App.svelte similarity index 100% rename from site/content/examples/7guis-flight-booker/App.svelte rename to site/content/OLD.examples/7guis-flight-booker/App.svelte diff --git a/site/content/examples/7guis-temperature/App.svelte b/site/content/OLD.examples/7guis-temperature/App.svelte similarity index 100% rename from site/content/examples/7guis-temperature/App.svelte rename to site/content/OLD.examples/7guis-temperature/App.svelte diff --git a/site/content/examples/7guis-timer/App.svelte b/site/content/OLD.examples/7guis-timer/App.svelte similarity index 100% rename from site/content/examples/7guis-timer/App.svelte rename to site/content/OLD.examples/7guis-timer/App.svelte diff --git a/site/content/examples/await-block/App.svelte b/site/content/OLD.examples/await-block/App.svelte similarity index 100% rename from site/content/examples/await-block/App.svelte rename to site/content/OLD.examples/await-block/App.svelte diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/OLD.examples/bar-chart/App.svelte similarity index 100% rename from site/content/examples/bar-chart/App.svelte rename to site/content/OLD.examples/bar-chart/App.svelte diff --git a/site/content/examples/binding-input-checkbox-group/App.svelte b/site/content/OLD.examples/binding-input-checkbox-group/App.svelte similarity index 100% rename from site/content/examples/binding-input-checkbox-group/App.svelte rename to site/content/OLD.examples/binding-input-checkbox-group/App.svelte diff --git a/site/content/examples/binding-input-checkbox/App.svelte b/site/content/OLD.examples/binding-input-checkbox/App.svelte similarity index 100% rename from site/content/examples/binding-input-checkbox/App.svelte rename to site/content/OLD.examples/binding-input-checkbox/App.svelte diff --git a/site/content/examples/binding-input-numeric/App.svelte b/site/content/OLD.examples/binding-input-numeric/App.svelte similarity index 100% rename from site/content/examples/binding-input-numeric/App.svelte rename to site/content/OLD.examples/binding-input-numeric/App.svelte diff --git a/site/content/examples/binding-input-radio/App.svelte b/site/content/OLD.examples/binding-input-radio/App.svelte similarity index 100% rename from site/content/examples/binding-input-radio/App.svelte rename to site/content/OLD.examples/binding-input-radio/App.svelte diff --git a/site/content/examples/binding-input-text/App.svelte b/site/content/OLD.examples/binding-input-text/App.svelte similarity index 100% rename from site/content/examples/binding-input-text/App.svelte rename to site/content/OLD.examples/binding-input-text/App.svelte diff --git a/site/content/examples/binding-media-elements/App.svelte b/site/content/OLD.examples/binding-media-elements/App.svelte similarity index 100% rename from site/content/examples/binding-media-elements/App.svelte rename to site/content/OLD.examples/binding-media-elements/App.svelte diff --git a/site/content/examples/binding-textarea/App.svelte b/site/content/OLD.examples/binding-textarea/App.svelte similarity index 100% rename from site/content/examples/binding-textarea/App.svelte rename to site/content/OLD.examples/binding-textarea/App.svelte diff --git a/site/content/examples/each-blocks/App.svelte b/site/content/OLD.examples/each-blocks/App.svelte similarity index 100% rename from site/content/examples/each-blocks/App.svelte rename to site/content/OLD.examples/each-blocks/App.svelte diff --git a/site/content/examples/hacker-news/App.svelte b/site/content/OLD.examples/hacker-news/App.svelte similarity index 100% rename from site/content/examples/hacker-news/App.svelte rename to site/content/OLD.examples/hacker-news/App.svelte diff --git a/site/content/examples/hacker-news/Comment.svelte b/site/content/OLD.examples/hacker-news/Comment.svelte similarity index 100% rename from site/content/examples/hacker-news/Comment.svelte rename to site/content/OLD.examples/hacker-news/Comment.svelte diff --git a/site/content/examples/hacker-news/Item.svelte b/site/content/OLD.examples/hacker-news/Item.svelte similarity index 100% rename from site/content/examples/hacker-news/Item.svelte rename to site/content/OLD.examples/hacker-news/Item.svelte diff --git a/site/content/examples/hacker-news/List.svelte b/site/content/OLD.examples/hacker-news/List.svelte similarity index 100% rename from site/content/examples/hacker-news/List.svelte rename to site/content/OLD.examples/hacker-news/List.svelte diff --git a/site/content/examples/hacker-news/Summary.svelte b/site/content/OLD.examples/hacker-news/Summary.svelte similarity index 100% rename from site/content/examples/hacker-news/Summary.svelte rename to site/content/OLD.examples/hacker-news/Summary.svelte diff --git a/site/content/examples/hello-world/App.svelte b/site/content/OLD.examples/hello-world/App.svelte similarity index 100% rename from site/content/examples/hello-world/App.svelte rename to site/content/OLD.examples/hello-world/App.svelte diff --git a/site/content/examples/homepage-demo-hello-world/App.svelte b/site/content/OLD.examples/homepage-demo-hello-world/App.svelte similarity index 100% rename from site/content/examples/homepage-demo-hello-world/App.svelte rename to site/content/OLD.examples/homepage-demo-hello-world/App.svelte diff --git a/site/content/examples/homepage-demo-reactivity/App.svelte b/site/content/OLD.examples/homepage-demo-reactivity/App.svelte similarity index 100% rename from site/content/examples/homepage-demo-reactivity/App.svelte rename to site/content/OLD.examples/homepage-demo-reactivity/App.svelte diff --git a/site/content/examples/homepage-demo-scoped-styles/App.svelte b/site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte similarity index 100% rename from site/content/examples/homepage-demo-scoped-styles/App.svelte rename to site/content/OLD.examples/homepage-demo-scoped-styles/App.svelte diff --git a/site/content/examples/homepage-demo-scoped-styles/Foo.svelte b/site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte similarity index 100% rename from site/content/examples/homepage-demo-scoped-styles/Foo.svelte rename to site/content/OLD.examples/homepage-demo-scoped-styles/Foo.svelte diff --git a/site/content/examples/homepage-demo-transitions/App.svelte b/site/content/OLD.examples/homepage-demo-transitions/App.svelte similarity index 100% rename from site/content/examples/homepage-demo-transitions/App.svelte rename to site/content/OLD.examples/homepage-demo-transitions/App.svelte diff --git a/site/content/examples/homepage-demo-transitions/custom-transitions.js b/site/content/OLD.examples/homepage-demo-transitions/custom-transitions.js similarity index 100% rename from site/content/examples/homepage-demo-transitions/custom-transitions.js rename to site/content/OLD.examples/homepage-demo-transitions/custom-transitions.js diff --git a/site/content/examples/homepage-demo-transitions/shape.js b/site/content/OLD.examples/homepage-demo-transitions/shape.js similarity index 100% rename from site/content/examples/homepage-demo-transitions/shape.js rename to site/content/OLD.examples/homepage-demo-transitions/shape.js diff --git a/site/content/examples/if-blocks/App.svelte b/site/content/OLD.examples/if-blocks/App.svelte similarity index 100% rename from site/content/examples/if-blocks/App.svelte rename to site/content/OLD.examples/if-blocks/App.svelte diff --git a/site/content/examples/immutable/App.svelte b/site/content/OLD.examples/immutable/App.svelte similarity index 100% rename from site/content/examples/immutable/App.svelte rename to site/content/OLD.examples/immutable/App.svelte diff --git a/site/content/examples/immutable/ImmutableTodo.svelte b/site/content/OLD.examples/immutable/ImmutableTodo.svelte similarity index 100% rename from site/content/examples/immutable/ImmutableTodo.svelte rename to site/content/OLD.examples/immutable/ImmutableTodo.svelte diff --git a/site/content/examples/immutable/MutableTodo.svelte b/site/content/OLD.examples/immutable/MutableTodo.svelte similarity index 100% rename from site/content/examples/immutable/MutableTodo.svelte rename to site/content/OLD.examples/immutable/MutableTodo.svelte diff --git a/site/content/examples/immutable/flash.js b/site/content/OLD.examples/immutable/flash.js similarity index 100% rename from site/content/examples/immutable/flash.js rename to site/content/OLD.examples/immutable/flash.js diff --git a/site/content/examples/line-chart/App.svelte b/site/content/OLD.examples/line-chart/App.svelte similarity index 100% rename from site/content/examples/line-chart/App.svelte rename to site/content/OLD.examples/line-chart/App.svelte diff --git a/site/content/examples/line-chart/data.js b/site/content/OLD.examples/line-chart/data.js similarity index 100% rename from site/content/examples/line-chart/data.js rename to site/content/OLD.examples/line-chart/data.js diff --git a/site/content/examples/manifest.json b/site/content/OLD.examples/manifest.json similarity index 100% rename from site/content/examples/manifest.json rename to site/content/OLD.examples/manifest.json diff --git a/site/content/examples/modal-with-slot/App.svelte b/site/content/OLD.examples/modal-with-slot/App.svelte similarity index 100% rename from site/content/examples/modal-with-slot/App.svelte rename to site/content/OLD.examples/modal-with-slot/App.svelte diff --git a/site/content/examples/modal-with-slot/Modal.svelte b/site/content/OLD.examples/modal-with-slot/Modal.svelte similarity index 100% rename from site/content/examples/modal-with-slot/Modal.svelte rename to site/content/OLD.examples/modal-with-slot/Modal.svelte diff --git a/site/content/examples/motion-spring/App.svelte b/site/content/OLD.examples/motion-spring/App.svelte similarity index 100% rename from site/content/examples/motion-spring/App.svelte rename to site/content/OLD.examples/motion-spring/App.svelte diff --git a/site/content/examples/nested-components/App.svelte b/site/content/OLD.examples/nested-components/App.svelte similarity index 100% rename from site/content/examples/nested-components/App.svelte rename to site/content/OLD.examples/nested-components/App.svelte diff --git a/site/content/examples/nested-components/Nested.svelte b/site/content/OLD.examples/nested-components/Nested.svelte similarity index 100% rename from site/content/examples/nested-components/Nested.svelte rename to site/content/OLD.examples/nested-components/Nested.svelte diff --git a/site/content/examples/parallax/App.svelte b/site/content/OLD.examples/parallax/App.svelte similarity index 100% rename from site/content/examples/parallax/App.svelte rename to site/content/OLD.examples/parallax/App.svelte diff --git a/site/content/examples/scatterplot/App.svelte b/site/content/OLD.examples/scatterplot/App.svelte similarity index 100% rename from site/content/examples/scatterplot/App.svelte rename to site/content/OLD.examples/scatterplot/App.svelte diff --git a/site/content/examples/scatterplot/Scatterplot.svelte b/site/content/OLD.examples/scatterplot/Scatterplot.svelte similarity index 100% rename from site/content/examples/scatterplot/Scatterplot.svelte rename to site/content/OLD.examples/scatterplot/Scatterplot.svelte diff --git a/site/content/examples/scatterplot/data.js b/site/content/OLD.examples/scatterplot/data.js similarity index 100% rename from site/content/examples/scatterplot/data.js rename to site/content/OLD.examples/scatterplot/data.js diff --git a/site/content/examples/scoped-styles/App.svelte b/site/content/OLD.examples/scoped-styles/App.svelte similarity index 100% rename from site/content/examples/scoped-styles/App.svelte rename to site/content/OLD.examples/scoped-styles/App.svelte diff --git a/site/content/examples/self-references/App.svelte b/site/content/OLD.examples/self-references/App.svelte similarity index 100% rename from site/content/examples/self-references/App.svelte rename to site/content/OLD.examples/self-references/App.svelte diff --git a/site/content/examples/svg-clock/App.svelte b/site/content/OLD.examples/svg-clock/App.svelte similarity index 100% rename from site/content/examples/svg-clock/App.svelte rename to site/content/OLD.examples/svg-clock/App.svelte diff --git a/site/content/examples/transitions-custom/App.svelte b/site/content/OLD.examples/transitions-custom/App.svelte similarity index 100% rename from site/content/examples/transitions-custom/App.svelte rename to site/content/OLD.examples/transitions-custom/App.svelte diff --git a/site/content/examples/transitions-fade/App.svelte b/site/content/OLD.examples/transitions-fade/App.svelte similarity index 100% rename from site/content/examples/transitions-fade/App.svelte rename to site/content/OLD.examples/transitions-fade/App.svelte diff --git a/site/content/examples/transitions-fly/App.svelte b/site/content/OLD.examples/transitions-fly/App.svelte similarity index 100% rename from site/content/examples/transitions-fly/App.svelte rename to site/content/OLD.examples/transitions-fly/App.svelte diff --git a/site/content/examples/transitions-in-out/App.svelte b/site/content/OLD.examples/transitions-in-out/App.svelte similarity index 100% rename from site/content/examples/transitions-in-out/App.svelte rename to site/content/OLD.examples/transitions-in-out/App.svelte diff --git a/site/content/examples/00-introduction/00-adding-data/App.svelte b/site/content/examples/00-introduction/00-adding-data/App.svelte new file mode 100644 index 0000000000..2ab60ba0ac --- /dev/null +++ b/site/content/examples/00-introduction/00-adding-data/App.svelte @@ -0,0 +1,5 @@ + + +

Hello {name.toUpperCase()}!

\ No newline at end of file diff --git a/site/content/examples/00-introduction/00-adding-data/meta.json b/site/content/examples/00-introduction/00-adding-data/meta.json new file mode 100644 index 0000000000..2f47184710 --- /dev/null +++ b/site/content/examples/00-introduction/00-adding-data/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Adding data" +} \ No newline at end of file diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte new file mode 100644 index 0000000000..6a12752e1a --- /dev/null +++ b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte @@ -0,0 +1,6 @@ + + +{name} dancing \ No newline at end of file diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/meta.json b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json new file mode 100644 index 0000000000..89614e0aa6 --- /dev/null +++ b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Dynamic attributes" +} \ No newline at end of file diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte new file mode 100644 index 0000000000..ab87af83d8 --- /dev/null +++ b/site/content/examples/00-introduction/02-styling/App.svelte @@ -0,0 +1,9 @@ + + +

This is a paragraph.

\ No newline at end of file diff --git a/site/content/examples/00-introduction/02-styling/meta.json b/site/content/examples/00-introduction/02-styling/meta.json new file mode 100644 index 0000000000..dcdf2bff01 --- /dev/null +++ b/site/content/examples/00-introduction/02-styling/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Styling" +} \ No newline at end of file diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte new file mode 100644 index 0000000000..9ba76665bf --- /dev/null +++ b/site/content/examples/00-introduction/03-nested-components/App.svelte @@ -0,0 +1,14 @@ + + + + +

This is a paragraph.

+ \ No newline at end of file diff --git a/site/content/examples/00-introduction/03-nested-components/Nested.svelte b/site/content/examples/00-introduction/03-nested-components/Nested.svelte new file mode 100644 index 0000000000..5297ab1044 --- /dev/null +++ b/site/content/examples/00-introduction/03-nested-components/Nested.svelte @@ -0,0 +1 @@ +

This is another paragraph.

\ No newline at end of file diff --git a/site/content/examples/00-introduction/03-nested-components/meta.json b/site/content/examples/00-introduction/03-nested-components/meta.json new file mode 100644 index 0000000000..5848360a40 --- /dev/null +++ b/site/content/examples/00-introduction/03-nested-components/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Nested components" +} \ No newline at end of file diff --git a/site/content/examples/00-introduction/04-html-tags/App.svelte b/site/content/examples/00-introduction/04-html-tags/App.svelte new file mode 100644 index 0000000000..527e9a4830 --- /dev/null +++ b/site/content/examples/00-introduction/04-html-tags/App.svelte @@ -0,0 +1,5 @@ + + +

{@html string}

\ No newline at end of file diff --git a/site/content/examples/00-introduction/04-html-tags/meta.json b/site/content/examples/00-introduction/04-html-tags/meta.json new file mode 100644 index 0000000000..01af59ac84 --- /dev/null +++ b/site/content/examples/00-introduction/04-html-tags/meta.json @@ -0,0 +1,3 @@ +{ + "title": "HTML tags" +} \ No newline at end of file diff --git a/site/content/examples/00-introduction/meta.json b/site/content/examples/00-introduction/meta.json new file mode 100644 index 0000000000..5c8f7bc10b --- /dev/null +++ b/site/content/examples/00-introduction/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Introduction" +} \ No newline at end of file diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte new file mode 100644 index 0000000000..bc50d74cfc --- /dev/null +++ b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/meta.json b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json new file mode 100644 index 0000000000..ab1554aae4 --- /dev/null +++ b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Assignments" +} \ No newline at end of file diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte new file mode 100644 index 0000000000..a9fc207851 --- /dev/null +++ b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte @@ -0,0 +1,14 @@ + + + + +

{count} doubled is {doubled}

\ No newline at end of file diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/meta.json b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json new file mode 100644 index 0000000000..d90a3844a9 --- /dev/null +++ b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Declarations" +} \ No newline at end of file diff --git a/site/content/examples/01-reactivity/02-reactive-statements/App.svelte b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte new file mode 100644 index 0000000000..f757be6f51 --- /dev/null +++ b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/site/content/examples/01-reactivity/02-reactive-statements/meta.json b/site/content/examples/01-reactivity/02-reactive-statements/meta.json new file mode 100644 index 0000000000..b4fe04850a --- /dev/null +++ b/site/content/examples/01-reactivity/02-reactive-statements/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Statements" +} \ No newline at end of file diff --git a/site/content/examples/01-reactivity/meta.json b/site/content/examples/01-reactivity/meta.json new file mode 100644 index 0000000000..c908815e04 --- /dev/null +++ b/site/content/examples/01-reactivity/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Reactivity" +} \ No newline at end of file diff --git a/site/content/examples/02-props/00-declaring-props/App.svelte b/site/content/examples/02-props/00-declaring-props/App.svelte new file mode 100644 index 0000000000..79d7e6b789 --- /dev/null +++ b/site/content/examples/02-props/00-declaring-props/App.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/examples/02-props/00-declaring-props/Nested.svelte b/site/content/examples/02-props/00-declaring-props/Nested.svelte new file mode 100644 index 0000000000..ecd3cb6254 --- /dev/null +++ b/site/content/examples/02-props/00-declaring-props/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/examples/02-props/00-declaring-props/meta.json b/site/content/examples/02-props/00-declaring-props/meta.json new file mode 100644 index 0000000000..485c2708bd --- /dev/null +++ b/site/content/examples/02-props/00-declaring-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Declaring props" +} \ No newline at end of file diff --git a/site/content/examples/02-props/01-default-values/App.svelte b/site/content/examples/02-props/01-default-values/App.svelte new file mode 100644 index 0000000000..f9d63b30d6 --- /dev/null +++ b/site/content/examples/02-props/01-default-values/App.svelte @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/site/content/examples/02-props/01-default-values/Nested.svelte b/site/content/examples/02-props/01-default-values/Nested.svelte new file mode 100644 index 0000000000..35ee5c9f88 --- /dev/null +++ b/site/content/examples/02-props/01-default-values/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/examples/02-props/01-default-values/meta.json b/site/content/examples/02-props/01-default-values/meta.json new file mode 100644 index 0000000000..f690d64349 --- /dev/null +++ b/site/content/examples/02-props/01-default-values/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Default values" +} \ No newline at end of file diff --git a/site/content/examples/02-props/02-spread-props/App.svelte b/site/content/examples/02-props/02-spread-props/App.svelte new file mode 100644 index 0000000000..f40d3b89c8 --- /dev/null +++ b/site/content/examples/02-props/02-spread-props/App.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/site/content/examples/02-props/02-spread-props/Info.svelte b/site/content/examples/02-props/02-spread-props/Info.svelte new file mode 100644 index 0000000000..7412398244 --- /dev/null +++ b/site/content/examples/02-props/02-spread-props/Info.svelte @@ -0,0 +1,12 @@ + + +

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

\ No newline at end of file diff --git a/site/content/examples/02-props/02-spread-props/meta.json b/site/content/examples/02-props/02-spread-props/meta.json new file mode 100644 index 0000000000..3f4b5128bf --- /dev/null +++ b/site/content/examples/02-props/02-spread-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Spread props" +} \ No newline at end of file diff --git a/site/content/examples/02-props/meta.json b/site/content/examples/02-props/meta.json new file mode 100644 index 0000000000..7b9e0a2783 --- /dev/null +++ b/site/content/examples/02-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Props" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/00-if-blocks/App.svelte b/site/content/examples/03-logic/00-if-blocks/App.svelte new file mode 100644 index 0000000000..01b8867ade --- /dev/null +++ b/site/content/examples/03-logic/00-if-blocks/App.svelte @@ -0,0 +1,19 @@ + + +{#if user.loggedIn} + +{/if} + +{#if !user.loggedIn} + +{/if} \ No newline at end of file diff --git a/site/content/examples/03-logic/00-if-blocks/meta.json b/site/content/examples/03-logic/00-if-blocks/meta.json new file mode 100644 index 0000000000..21598b878e --- /dev/null +++ b/site/content/examples/03-logic/00-if-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "If blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/01-else-blocks/App.svelte b/site/content/examples/03-logic/01-else-blocks/App.svelte new file mode 100644 index 0000000000..c82565c2f7 --- /dev/null +++ b/site/content/examples/03-logic/01-else-blocks/App.svelte @@ -0,0 +1,17 @@ + + +{#if user.loggedIn} + +{:else} + +{/if} \ No newline at end of file diff --git a/site/content/examples/03-logic/01-else-blocks/meta.json b/site/content/examples/03-logic/01-else-blocks/meta.json new file mode 100644 index 0000000000..5703b7ea92 --- /dev/null +++ b/site/content/examples/03-logic/01-else-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Else blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/02-else-if-blocks/App.svelte b/site/content/examples/03-logic/02-else-if-blocks/App.svelte new file mode 100644 index 0000000000..9102618ff4 --- /dev/null +++ b/site/content/examples/03-logic/02-else-if-blocks/App.svelte @@ -0,0 +1,11 @@ + + +{#if x > 10} +

{x} is greater than 10

+{:else if 5 > x} +

{x} is less than 5

+{:else} +

{x} is between 5 and 10

+{/if} \ No newline at end of file diff --git a/site/content/examples/03-logic/02-else-if-blocks/meta.json b/site/content/examples/03-logic/02-else-if-blocks/meta.json new file mode 100644 index 0000000000..c778d9f48b --- /dev/null +++ b/site/content/examples/03-logic/02-else-if-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Else-if blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte new file mode 100644 index 0000000000..6ea5097be2 --- /dev/null +++ b/site/content/examples/03-logic/03-each-blocks/App.svelte @@ -0,0 +1,17 @@ + + +

The Famous Cats of YouTube

+ + \ No newline at end of file diff --git a/site/content/examples/03-logic/03-each-blocks/meta.json b/site/content/examples/03-logic/03-each-blocks/meta.json new file mode 100644 index 0000000000..d829b3cc53 --- /dev/null +++ b/site/content/examples/03-logic/03-each-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Each blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte new file mode 100644 index 0000000000..73a2dcc609 --- /dev/null +++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte @@ -0,0 +1,23 @@ + + + + +{#each things as thing (thing.id)} + +{/each} \ No newline at end of file diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte new file mode 100644 index 0000000000..4e86d32109 --- /dev/null +++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte @@ -0,0 +1,9 @@ + + +

{valueAtStart} / {value}

\ No newline at end of file diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/meta.json b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json new file mode 100644 index 0000000000..faee8bff8d --- /dev/null +++ b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Keyed each blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte new file mode 100644 index 0000000000..8c8036c0f1 --- /dev/null +++ b/site/content/examples/03-logic/05-await-blocks/App.svelte @@ -0,0 +1,30 @@ + + + + +{#await promise} +

...waiting

+{:then number} +

The number is {number}

+{:catch error} +

{error.message}

+{/await} \ No newline at end of file diff --git a/site/content/examples/03-logic/05-await-blocks/meta.json b/site/content/examples/03-logic/05-await-blocks/meta.json new file mode 100644 index 0000000000..c7a809f5ed --- /dev/null +++ b/site/content/examples/03-logic/05-await-blocks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Await blocks" +} \ No newline at end of file diff --git a/site/content/examples/03-logic/meta.json b/site/content/examples/03-logic/meta.json new file mode 100644 index 0000000000..3ecf1ccee2 --- /dev/null +++ b/site/content/examples/03-logic/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Logic" +} \ No newline at end of file diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte new file mode 100644 index 0000000000..f26112f06c --- /dev/null +++ b/site/content/examples/04-events/00-dom-events/App.svelte @@ -0,0 +1,16 @@ + + + + +
+ The mouse position is {m.x} x {m.y} +
\ No newline at end of file diff --git a/site/content/examples/04-events/00-dom-events/meta.json b/site/content/examples/04-events/00-dom-events/meta.json new file mode 100644 index 0000000000..5b3e37e41f --- /dev/null +++ b/site/content/examples/04-events/00-dom-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "DOM events" +} \ No newline at end of file diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte new file mode 100644 index 0000000000..f0fd6ff17a --- /dev/null +++ b/site/content/examples/04-events/01-inline-handlers/App.svelte @@ -0,0 +1,11 @@ + + + + +
+ The mouse position is {m.x} x {m.y} +
\ No newline at end of file diff --git a/site/content/examples/04-events/01-inline-handlers/meta.json b/site/content/examples/04-events/01-inline-handlers/meta.json new file mode 100644 index 0000000000..575b9ab2b6 --- /dev/null +++ b/site/content/examples/04-events/01-inline-handlers/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Inline handlers" +} \ No newline at end of file diff --git a/site/content/examples/04-events/02-event-modifiers/App.svelte b/site/content/examples/04-events/02-event-modifiers/App.svelte new file mode 100644 index 0000000000..94df49cb2d --- /dev/null +++ b/site/content/examples/04-events/02-event-modifiers/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/02-event-modifiers/meta.json b/site/content/examples/04-events/02-event-modifiers/meta.json new file mode 100644 index 0000000000..322bb5ba5e --- /dev/null +++ b/site/content/examples/04-events/02-event-modifiers/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Event modifiers" +} \ No newline at end of file diff --git a/site/content/examples/04-events/03-component-events/App.svelte b/site/content/examples/04-events/03-component-events/App.svelte new file mode 100644 index 0000000000..a8d14a368a --- /dev/null +++ b/site/content/examples/04-events/03-component-events/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/03-component-events/Inner.svelte b/site/content/examples/04-events/03-component-events/Inner.svelte new file mode 100644 index 0000000000..6ac8301f24 --- /dev/null +++ b/site/content/examples/04-events/03-component-events/Inner.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/03-component-events/meta.json b/site/content/examples/04-events/03-component-events/meta.json new file mode 100644 index 0000000000..2a777d4d00 --- /dev/null +++ b/site/content/examples/04-events/03-component-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Component events" +} \ No newline at end of file diff --git a/site/content/examples/04-events/04-event-forwarding/App.svelte b/site/content/examples/04-events/04-event-forwarding/App.svelte new file mode 100644 index 0000000000..973df50f0a --- /dev/null +++ b/site/content/examples/04-events/04-event-forwarding/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/04-event-forwarding/Inner.svelte b/site/content/examples/04-events/04-event-forwarding/Inner.svelte new file mode 100644 index 0000000000..6ac8301f24 --- /dev/null +++ b/site/content/examples/04-events/04-event-forwarding/Inner.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/04-event-forwarding/Outer.svelte b/site/content/examples/04-events/04-event-forwarding/Outer.svelte new file mode 100644 index 0000000000..10c28f298a --- /dev/null +++ b/site/content/examples/04-events/04-event-forwarding/Outer.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/04-event-forwarding/meta.json b/site/content/examples/04-events/04-event-forwarding/meta.json new file mode 100644 index 0000000000..3a8aa674b7 --- /dev/null +++ b/site/content/examples/04-events/04-event-forwarding/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Event forwarding" +} \ No newline at end of file diff --git a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte new file mode 100644 index 0000000000..1429cae207 --- /dev/null +++ b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte new file mode 100644 index 0000000000..75630ea99c --- /dev/null +++ b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/examples/04-events/05-dom-event-forwarding/meta.json b/site/content/examples/04-events/05-dom-event-forwarding/meta.json new file mode 100644 index 0000000000..9aa593808f --- /dev/null +++ b/site/content/examples/04-events/05-dom-event-forwarding/meta.json @@ -0,0 +1,3 @@ +{ + "title": "DOM event forwarding" +} \ No newline at end of file diff --git a/site/content/examples/04-events/meta.json b/site/content/examples/04-events/meta.json new file mode 100644 index 0000000000..c5f088e208 --- /dev/null +++ b/site/content/examples/04-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Events" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/00-text-inputs/App.svelte b/site/content/examples/05-bindings/00-text-inputs/App.svelte new file mode 100644 index 0000000000..662785bfce --- /dev/null +++ b/site/content/examples/05-bindings/00-text-inputs/App.svelte @@ -0,0 +1,9 @@ + + + + +

Hello {name}!

\ No newline at end of file diff --git a/site/content/examples/05-bindings/00-text-inputs/meta.json b/site/content/examples/05-bindings/00-text-inputs/meta.json new file mode 100644 index 0000000000..45577af5be --- /dev/null +++ b/site/content/examples/05-bindings/00-text-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Text inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/01-numeric-inputs/App.svelte b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte new file mode 100644 index 0000000000..798d57e021 --- /dev/null +++ b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte @@ -0,0 +1,16 @@ + + + + + + +

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

\ No newline at end of file diff --git a/site/content/examples/05-bindings/01-numeric-inputs/meta.json b/site/content/examples/05-bindings/01-numeric-inputs/meta.json new file mode 100644 index 0000000000..72f8579704 --- /dev/null +++ b/site/content/examples/05-bindings/01-numeric-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Numeric inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte new file mode 100644 index 0000000000..b82d31e783 --- /dev/null +++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte @@ -0,0 +1,18 @@ + + + + +{#if yes} +

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

+{:else} +

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

+{/if} + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/meta.json b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json new file mode 100644 index 0000000000..723312a3d9 --- /dev/null +++ b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Checkbox inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/03-group-inputs/App.svelte b/site/content/examples/05-bindings/03-group-inputs/App.svelte new file mode 100644 index 0000000000..a46c61c7e7 --- /dev/null +++ b/site/content/examples/05-bindings/03-group-inputs/App.svelte @@ -0,0 +1,52 @@ + + +

Size

+ + + + + + + +

Flavours

+ +{#each menu as flavour} + +{/each} + +{#if flavours.length === 0} +

Please select at least one flavour

+{:else if flavours.length > scoops} +

Can't order more flavours than scoops!

+{:else} +

+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

+{/if} diff --git a/site/content/examples/05-bindings/03-group-inputs/meta.json b/site/content/examples/05-bindings/03-group-inputs/meta.json new file mode 100644 index 0000000000..2203d6e6fa --- /dev/null +++ b/site/content/examples/05-bindings/03-group-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Group inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte new file mode 100644 index 0000000000..be338bf47f --- /dev/null +++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte @@ -0,0 +1,12 @@ + + + + + + +{@html marked(value)} \ No newline at end of file diff --git a/site/content/examples/05-bindings/04-textarea-inputs/meta.json b/site/content/examples/05-bindings/04-textarea-inputs/meta.json new file mode 100644 index 0000000000..01adf6b5cf --- /dev/null +++ b/site/content/examples/05-bindings/04-textarea-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Textarea inputs" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/05-select-bindings/App.svelte b/site/content/examples/05-bindings/05-select-bindings/App.svelte new file mode 100644 index 0000000000..3f1e7fa7e1 --- /dev/null +++ b/site/content/examples/05-bindings/05-select-bindings/App.svelte @@ -0,0 +1,39 @@ + + + + +

Insecurity questions

+ +
+ + + + + +
+ +

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

\ No newline at end of file diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/05-select-bindings/meta.json new file mode 100644 index 0000000000..fe170eb0fc --- /dev/null +++ b/site/content/examples/05-bindings/05-select-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Select bindings" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte new file mode 100644 index 0000000000..d808850158 --- /dev/null +++ b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte @@ -0,0 +1,53 @@ + + +

Size

+ + + + + + + +

Flavours

+ + + +{#if flavours.length === 0} +

Please select at least one flavour

+{:else if flavours.length > scoops} +

Can't order more flavours than scoops!

+{:else} +

+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

+{/if} diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json new file mode 100644 index 0000000000..abf7635407 --- /dev/null +++ b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Select multiple" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte new file mode 100644 index 0000000000..92bdc7754f --- /dev/null +++ b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte @@ -0,0 +1,39 @@ + + +

Todos

+ +{#each todos as todo} +
+ + + +
+{/each} + + + + diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/07-each-block-bindings/meta.json new file mode 100644 index 0000000000..2d27051b49 --- /dev/null +++ b/site/content/examples/05-bindings/07-each-block-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Each block bindings" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte new file mode 100644 index 0000000000..2cf819fca0 --- /dev/null +++ b/site/content/examples/05-bindings/08-media-elements/App.svelte @@ -0,0 +1,130 @@ + + + + +

Caminandes: Llamigos

+

From Blender Open Projects. CC-BY

+ +
+ + +
+ + +
+ {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
+
+
\ No newline at end of file diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/08-media-elements/meta.json new file mode 100644 index 0000000000..4e40a6acee --- /dev/null +++ b/site/content/examples/05-bindings/08-media-elements/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Media elements" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/09-dimensions/App.svelte new file mode 100644 index 0000000000..ca992599c1 --- /dev/null +++ b/site/content/examples/05-bindings/09-dimensions/App.svelte @@ -0,0 +1,20 @@ + + + + + + + +

size: {w}px x {h}px

+ +
+ {text} +
\ No newline at end of file diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/09-dimensions/meta.json new file mode 100644 index 0000000000..9f8b6602c7 --- /dev/null +++ b/site/content/examples/05-bindings/09-dimensions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Dimensions" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/10-bind-this/App.svelte new file mode 100644 index 0000000000..eacd203629 --- /dev/null +++ b/site/content/examples/05-bindings/10-bind-this/App.svelte @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/10-bind-this/meta.json new file mode 100644 index 0000000000..86cb4af3d1 --- /dev/null +++ b/site/content/examples/05-bindings/10-bind-this/meta.json @@ -0,0 +1,3 @@ +{ + "title": "This" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/11-component-bindings/App.svelte new file mode 100644 index 0000000000..67fec4a5ad --- /dev/null +++ b/site/content/examples/05-bindings/11-component-bindings/App.svelte @@ -0,0 +1,14 @@ + + +

{view}

+ + \ No newline at end of file diff --git a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte new file mode 100644 index 0000000000..c457a15cb5 --- /dev/null +++ b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte @@ -0,0 +1,40 @@ + + + + +
+ + + + + + + + + + + + + +
\ No newline at end of file diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/11-component-bindings/meta.json new file mode 100644 index 0000000000..4c921d0e8a --- /dev/null +++ b/site/content/examples/05-bindings/11-component-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Component bindings" +} \ No newline at end of file diff --git a/site/content/examples/05-bindings/meta.json b/site/content/examples/05-bindings/meta.json new file mode 100644 index 0000000000..8bb0142ecc --- /dev/null +++ b/site/content/examples/05-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Bindings" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte new file mode 100644 index 0000000000..1b83727627 --- /dev/null +++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte @@ -0,0 +1,38 @@ + + + + +

Photo album

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

loading...

+ {/each} +
\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/00-onmount/meta.json b/site/content/examples/06-lifecycle/00-onmount/meta.json new file mode 100644 index 0000000000..3b2799c5bc --- /dev/null +++ b/site/content/examples/06-lifecycle/00-onmount/meta.json @@ -0,0 +1,3 @@ +{ + "title": "onMount" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/01-ondestroy/App.svelte b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte new file mode 100644 index 0000000000..93a721ef44 --- /dev/null +++ b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte @@ -0,0 +1,11 @@ + + +

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

\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/01-ondestroy/meta.json b/site/content/examples/06-lifecycle/01-ondestroy/meta.json new file mode 100644 index 0000000000..d87febd1a5 --- /dev/null +++ b/site/content/examples/06-lifecycle/01-ondestroy/meta.json @@ -0,0 +1,3 @@ +{ + "title": "onDestroy" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/01-ondestroy/utils.js b/site/content/examples/06-lifecycle/01-ondestroy/utils.js new file mode 100644 index 0000000000..0f75f29e2a --- /dev/null +++ b/site/content/examples/06-lifecycle/01-ondestroy/utils.js @@ -0,0 +1,9 @@ +import { onDestroy } from 'svelte'; + +export function onInterval(callback, milliseconds) { + const interval = setInterval(callback, milliseconds); + + onDestroy(() => { + clearInterval(interval); + }); +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte new file mode 100644 index 0000000000..373b6dcb6a --- /dev/null +++ b/site/content/examples/06-lifecycle/02-update/App.svelte @@ -0,0 +1,106 @@ + + + + +
+

Eliza

+ +
+ {#each comments as comment} +
+ {comment.text} +
+ {/each} +
+ + +
\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/02-update/meta.json b/site/content/examples/06-lifecycle/02-update/meta.json new file mode 100644 index 0000000000..c92a6db8dc --- /dev/null +++ b/site/content/examples/06-lifecycle/02-update/meta.json @@ -0,0 +1,3 @@ +{ + "title": "beforeUpdate and afterUpdate" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte new file mode 100644 index 0000000000..c9cb6de420 --- /dev/null +++ b/site/content/examples/06-lifecycle/03-tick/App.svelte @@ -0,0 +1,37 @@ + + + + + \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/03-tick/meta.json b/site/content/examples/06-lifecycle/03-tick/meta.json new file mode 100644 index 0000000000..0a406e13aa --- /dev/null +++ b/site/content/examples/06-lifecycle/03-tick/meta.json @@ -0,0 +1,3 @@ +{ + "title": "tick" +} \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/meta.json b/site/content/examples/06-lifecycle/meta.json new file mode 100644 index 0000000000..2f833e2a4a --- /dev/null +++ b/site/content/examples/06-lifecycle/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Lifecycle" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte new file mode 100644 index 0000000000..ee542f789d --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/App.svelte @@ -0,0 +1,18 @@ + + +

The count is {count_value}

+ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte new file mode 100644 index 0000000000..043b795047 --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte new file mode 100644 index 0000000000..2b5763012b --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/Resetter.svelte b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte new file mode 100644 index 0000000000..4183421e51 --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/meta.json b/site/content/examples/07-stores/00-writable-stores/meta.json new file mode 100644 index 0000000000..e0b2a6809d --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Writable stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/00-writable-stores/stores.js b/site/content/examples/07-stores/00-writable-stores/stores.js new file mode 100644 index 0000000000..143e0c99f0 --- /dev/null +++ b/site/content/examples/07-stores/00-writable-stores/stores.js @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const count = writable(0); \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/App.svelte b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte new file mode 100644 index 0000000000..10ebfb65bb --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte @@ -0,0 +1,12 @@ + + +

The count is {$count}

+ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte new file mode 100644 index 0000000000..043b795047 --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte new file mode 100644 index 0000000000..2b5763012b --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte new file mode 100644 index 0000000000..4183421e51 --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/meta.json b/site/content/examples/07-stores/01-auto-subscriptions/meta.json new file mode 100644 index 0000000000..a7e4c5fefc --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Auto-subscriptions" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/01-auto-subscriptions/stores.js b/site/content/examples/07-stores/01-auto-subscriptions/stores.js new file mode 100644 index 0000000000..143e0c99f0 --- /dev/null +++ b/site/content/examples/07-stores/01-auto-subscriptions/stores.js @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export const count = writable(0); \ No newline at end of file diff --git a/site/content/examples/07-stores/02-readable-stores/App.svelte b/site/content/examples/07-stores/02-readable-stores/App.svelte new file mode 100644 index 0000000000..3ff0b0362f --- /dev/null +++ b/site/content/examples/07-stores/02-readable-stores/App.svelte @@ -0,0 +1,12 @@ + + +

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

\ No newline at end of file diff --git a/site/content/examples/07-stores/02-readable-stores/meta.json b/site/content/examples/07-stores/02-readable-stores/meta.json new file mode 100644 index 0000000000..3f420cafd8 --- /dev/null +++ b/site/content/examples/07-stores/02-readable-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Readable stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/02-readable-stores/stores.js b/site/content/examples/07-stores/02-readable-stores/stores.js new file mode 100644 index 0000000000..015de5ad45 --- /dev/null +++ b/site/content/examples/07-stores/02-readable-stores/stores.js @@ -0,0 +1,11 @@ +import { readable } from 'svelte/store'; + +export const time = readable(function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}, new Date()); \ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/App.svelte b/site/content/examples/07-stores/03-derived-stores/App.svelte new file mode 100644 index 0000000000..8182ecd671 --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/App.svelte @@ -0,0 +1,17 @@ + + +

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

+ +

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

\ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/meta.json b/site/content/examples/07-stores/03-derived-stores/meta.json new file mode 100644 index 0000000000..23105b0bfa --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Derived stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js new file mode 100644 index 0000000000..2f3af1247a --- /dev/null +++ b/site/content/examples/07-stores/03-derived-stores/stores.js @@ -0,0 +1,18 @@ +import { readable, derive } from 'svelte/store'; + +export const time = readable(function start(set) { + const interval = setInterval(() => { + set(new Date()); + }, 1000); + + return function stop() { + clearInterval(interval); + }; +}, new Date()); + +const start = new Date(); + +export const elapsed = derive( + time, + $time => Math.round(($time - start) / 1000) +); \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/App.svelte b/site/content/examples/07-stores/04-custom-stores/App.svelte new file mode 100644 index 0000000000..a320cc052f --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/App.svelte @@ -0,0 +1,9 @@ + + +

The count is {$count}

+ + + + \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/meta.json b/site/content/examples/07-stores/04-custom-stores/meta.json new file mode 100644 index 0000000000..7394c55f28 --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Custom stores" +} \ No newline at end of file diff --git a/site/content/examples/07-stores/04-custom-stores/stores.js b/site/content/examples/07-stores/04-custom-stores/stores.js new file mode 100644 index 0000000000..5a26025b03 --- /dev/null +++ b/site/content/examples/07-stores/04-custom-stores/stores.js @@ -0,0 +1,14 @@ +import { writable } from 'svelte/store'; + +function createCount() { + const { subscribe, set, update } = writable(0); + + return { + subscribe, + increment: () => update(n => n + 1), + decrement: () => update(n => n - 1), + reset: () => set(0) + }; +} + +export const count = createCount(); \ No newline at end of file diff --git a/site/content/examples/07-stores/meta.json b/site/content/examples/07-stores/meta.json new file mode 100644 index 0000000000..ad974de0d9 --- /dev/null +++ b/site/content/examples/07-stores/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Stores" +} \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte new file mode 100644 index 0000000000..83f3b50a04 --- /dev/null +++ b/site/content/examples/08-motion/00-tweened/App.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/meta.json b/site/content/examples/08-motion/00-tweened/meta.json new file mode 100644 index 0000000000..39d3af7f38 --- /dev/null +++ b/site/content/examples/08-motion/00-tweened/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Tweened" +} \ No newline at end of file diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte new file mode 100644 index 0000000000..2cb0fd1eb7 --- /dev/null +++ b/site/content/examples/08-motion/01-spring/App.svelte @@ -0,0 +1,35 @@ + + + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/site/content/examples/08-motion/01-spring/meta.json b/site/content/examples/08-motion/01-spring/meta.json new file mode 100644 index 0000000000..f871fea53e --- /dev/null +++ b/site/content/examples/08-motion/01-spring/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Spring" +} \ No newline at end of file diff --git a/site/content/examples/08-motion/meta.json b/site/content/examples/08-motion/meta.json new file mode 100644 index 0000000000..e6fa83cd7f --- /dev/null +++ b/site/content/examples/08-motion/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Motion" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/00-transition/App.svelte b/site/content/examples/09-transitions/00-transition/App.svelte new file mode 100644 index 0000000000..b7909fb86e --- /dev/null +++ b/site/content/examples/09-transitions/00-transition/App.svelte @@ -0,0 +1,15 @@ + + + + +{#if visible} +

+ Fades in and out +

+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/00-transition/meta.json b/site/content/examples/09-transitions/00-transition/meta.json new file mode 100644 index 0000000000..e07975554f --- /dev/null +++ b/site/content/examples/09-transitions/00-transition/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The transition directive" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte new file mode 100644 index 0000000000..01047f5e37 --- /dev/null +++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte @@ -0,0 +1,15 @@ + + + + +{#if visible} +

+ Flies in and out +

+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json new file mode 100644 index 0000000000..517bc54c3c --- /dev/null +++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Adding parameters" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/02-in-and-out/App.svelte b/site/content/examples/09-transitions/02-in-and-out/App.svelte new file mode 100644 index 0000000000..36d36664e6 --- /dev/null +++ b/site/content/examples/09-transitions/02-in-and-out/App.svelte @@ -0,0 +1,15 @@ + + + + +{#if visible} +

+ Flies in, fades out +

+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/02-in-and-out/meta.json b/site/content/examples/09-transitions/02-in-and-out/meta.json new file mode 100644 index 0000000000..627f409fa4 --- /dev/null +++ b/site/content/examples/09-transitions/02-in-and-out/meta.json @@ -0,0 +1,3 @@ +{ + "title": "In and out" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte new file mode 100644 index 0000000000..6e8dfcaf08 --- /dev/null +++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte @@ -0,0 +1,49 @@ + + + + + + +{#if visible} +
+ transitions! +
+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/meta.json b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json new file mode 100644 index 0000000000..8b70464ca8 --- /dev/null +++ b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Custom CSS transitions" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte new file mode 100644 index 0000000000..3b3fb94d1c --- /dev/null +++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte @@ -0,0 +1,36 @@ + + + + +{#if visible} +

+ The quick brown fox jumps over the lazy dog +

+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/meta.json b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json new file mode 100644 index 0000000000..1ec11d90f9 --- /dev/null +++ b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Custom JS transitions" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/05-transition-events/App.svelte b/site/content/examples/09-transitions/05-transition-events/App.svelte new file mode 100644 index 0000000000..da79897365 --- /dev/null +++ b/site/content/examples/09-transitions/05-transition-events/App.svelte @@ -0,0 +1,25 @@ + + +

status: {status}

+ + + +{#if visible} +

+ Flies in and out +

+{/if} \ No newline at end of file diff --git a/site/content/examples/09-transitions/05-transition-events/meta.json b/site/content/examples/09-transitions/05-transition-events/meta.json new file mode 100644 index 0000000000..b46e28feed --- /dev/null +++ b/site/content/examples/09-transitions/05-transition-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Transition events" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte new file mode 100644 index 0000000000..c46096c204 --- /dev/null +++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte @@ -0,0 +1,146 @@ + + + + +
+ + +
+

todo

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

done

+ {#each todos.filter(t => t.done) as todo (todo.id)} + + {/each} +
+
\ No newline at end of file diff --git a/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js new file mode 100644 index 0000000000..e11e18b60e --- /dev/null +++ b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js @@ -0,0 +1,65 @@ +import { quintOut } from 'svelte/easing'; + +export default function crossfade({ send, receive, fallback }) { + let requested = new Map(); + let provided = new Map(); + + function crossfade(from, node) { + const to = node.getBoundingClientRect(); + const dx = from.left - to.left; + const dy = from.top - to.top; + + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + return { + duration: 400, + easing: quintOut, + css: (t, u) => ` + opacity: ${t}; + transform: ${transform} translate(${u * dx}px,${u * dy}px); + ` + }; + } + + return { + send(node, params) { + provided.set(params.key, { + rect: node.getBoundingClientRect() + }); + + return () => { + if (requested.has(params.key)) { + const { rect } = requested.get(params.key); + requested.delete(params.key); + + return crossfade(rect, node); + } + + // if the node is disappearing altogether + // (i.e. wasn't claimed by the other list) + // then we need to supply an outro + provided.delete(params.key); + return fallback(node, params); + }; + }, + + receive(node, params) { + requested.set(params.key, { + rect: node.getBoundingClientRect() + }); + + return () => { + if (provided.has(params.key)) { + const { rect } = provided.get(params.key); + provided.delete(params.key); + + return crossfade(rect, node); + } + + requested.delete(params.key); + return fallback(node, params); + }; + } + }; +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/06-deferred-transitions/meta.json b/site/content/examples/09-transitions/06-deferred-transitions/meta.json new file mode 100644 index 0000000000..b9fc7da898 --- /dev/null +++ b/site/content/examples/09-transitions/06-deferred-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Deferred transitions" +} \ No newline at end of file diff --git a/site/content/examples/09-transitions/meta.json b/site/content/examples/09-transitions/meta.json new file mode 100644 index 0000000000..cb9291d73f --- /dev/null +++ b/site/content/examples/09-transitions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Transitions" +} \ No newline at end of file diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte new file mode 100644 index 0000000000..c46096c204 --- /dev/null +++ b/site/content/examples/10-animations/00-animate/App.svelte @@ -0,0 +1,146 @@ + + + + +
+ + +
+

todo

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

done

+ {#each todos.filter(t => t.done) as todo (todo.id)} + + {/each} +
+
\ No newline at end of file diff --git a/site/content/examples/10-animations/00-animate/crossfade.js b/site/content/examples/10-animations/00-animate/crossfade.js new file mode 100644 index 0000000000..e11e18b60e --- /dev/null +++ b/site/content/examples/10-animations/00-animate/crossfade.js @@ -0,0 +1,65 @@ +import { quintOut } from 'svelte/easing'; + +export default function crossfade({ send, receive, fallback }) { + let requested = new Map(); + let provided = new Map(); + + function crossfade(from, node) { + const to = node.getBoundingClientRect(); + const dx = from.left - to.left; + const dy = from.top - to.top; + + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + return { + duration: 400, + easing: quintOut, + css: (t, u) => ` + opacity: ${t}; + transform: ${transform} translate(${u * dx}px,${u * dy}px); + ` + }; + } + + return { + send(node, params) { + provided.set(params.key, { + rect: node.getBoundingClientRect() + }); + + return () => { + if (requested.has(params.key)) { + const { rect } = requested.get(params.key); + requested.delete(params.key); + + return crossfade(rect, node); + } + + // if the node is disappearing altogether + // (i.e. wasn't claimed by the other list) + // then we need to supply an outro + provided.delete(params.key); + return fallback(node, params); + }; + }, + + receive(node, params) { + requested.set(params.key, { + rect: node.getBoundingClientRect() + }); + + return () => { + if (provided.has(params.key)) { + const { rect } = provided.get(params.key); + provided.delete(params.key); + + return crossfade(rect, node); + } + + requested.delete(params.key); + return fallback(node, params); + }; + } + }; +} \ No newline at end of file diff --git a/site/content/examples/10-animations/00-animate/meta.json b/site/content/examples/10-animations/00-animate/meta.json new file mode 100644 index 0000000000..dd7e345443 --- /dev/null +++ b/site/content/examples/10-animations/00-animate/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The animate directive" +} \ No newline at end of file diff --git a/site/content/examples/10-animations/meta.json b/site/content/examples/10-animations/meta.json new file mode 100644 index 0000000000..c71301495e --- /dev/null +++ b/site/content/examples/10-animations/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Animations" +} \ No newline at end of file diff --git a/site/content/examples/11-actions/00-actions/App.svelte b/site/content/examples/11-actions/00-actions/App.svelte new file mode 100644 index 0000000000..1324277bac --- /dev/null +++ b/site/content/examples/11-actions/00-actions/App.svelte @@ -0,0 +1,49 @@ + + + + +
\ No newline at end of file diff --git a/site/content/examples/11-actions/00-actions/meta.json b/site/content/examples/11-actions/00-actions/meta.json new file mode 100644 index 0000000000..463fc963af --- /dev/null +++ b/site/content/examples/11-actions/00-actions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The use directive" +} \ No newline at end of file diff --git a/site/content/examples/11-actions/00-actions/pannable.js b/site/content/examples/11-actions/00-actions/pannable.js new file mode 100644 index 0000000000..f7d15328be --- /dev/null +++ b/site/content/examples/11-actions/00-actions/pannable.js @@ -0,0 +1,47 @@ +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); + } + }; +} \ No newline at end of file diff --git a/site/content/examples/11-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/11-actions/01-adding-parameters-to-actions/App.svelte new file mode 100644 index 0000000000..0bd9d56113 --- /dev/null +++ b/site/content/examples/11-actions/01-adding-parameters-to-actions/App.svelte @@ -0,0 +1,70 @@ + + + \ No newline at end of file diff --git a/site/content/examples/11-actions/01-adding-parameters-to-actions/meta.json b/site/content/examples/11-actions/01-adding-parameters-to-actions/meta.json new file mode 100644 index 0000000000..517bc54c3c --- /dev/null +++ b/site/content/examples/11-actions/01-adding-parameters-to-actions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Adding parameters" +} \ No newline at end of file diff --git a/site/content/examples/11-actions/meta.json b/site/content/examples/11-actions/meta.json new file mode 100644 index 0000000000..a154610283 --- /dev/null +++ b/site/content/examples/11-actions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Actions" +} \ No newline at end of file diff --git a/site/content/examples/12-classes/00-classes/App.svelte b/site/content/examples/12-classes/00-classes/App.svelte new file mode 100644 index 0000000000..4da386991d --- /dev/null +++ b/site/content/examples/12-classes/00-classes/App.svelte @@ -0,0 +1,29 @@ + + + + + + + + + \ No newline at end of file diff --git a/site/content/examples/12-classes/00-classes/meta.json b/site/content/examples/12-classes/00-classes/meta.json new file mode 100644 index 0000000000..7641cc6a5a --- /dev/null +++ b/site/content/examples/12-classes/00-classes/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The class directive" +} \ No newline at end of file diff --git a/site/content/examples/12-classes/01-class-shorthand/App.svelte b/site/content/examples/12-classes/01-class-shorthand/App.svelte new file mode 100644 index 0000000000..0f4e0d9f24 --- /dev/null +++ b/site/content/examples/12-classes/01-class-shorthand/App.svelte @@ -0,0 +1,18 @@ + + + + + + +
+ some {big ? 'big' : 'small'} text +
\ No newline at end of file diff --git a/site/content/examples/12-classes/01-class-shorthand/meta.json b/site/content/examples/12-classes/01-class-shorthand/meta.json new file mode 100644 index 0000000000..72c51bd387 --- /dev/null +++ b/site/content/examples/12-classes/01-class-shorthand/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Shorthand class directive" +} \ No newline at end of file diff --git a/site/content/examples/12-classes/meta.json b/site/content/examples/12-classes/meta.json new file mode 100644 index 0000000000..9c2b8a41f6 --- /dev/null +++ b/site/content/examples/12-classes/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Classes" +} \ No newline at end of file diff --git a/site/content/examples/13-composition/00-slots/App.svelte b/site/content/examples/13-composition/00-slots/App.svelte new file mode 100644 index 0000000000..cd0ebde935 --- /dev/null +++ b/site/content/examples/13-composition/00-slots/App.svelte @@ -0,0 +1,8 @@ + + + +

Hello!

+

This is a box. It can contain anything.

+ \ No newline at end of file diff --git a/site/content/examples/13-composition/00-slots/Box.svelte b/site/content/examples/13-composition/00-slots/Box.svelte new file mode 100644 index 0000000000..7ed13f386f --- /dev/null +++ b/site/content/examples/13-composition/00-slots/Box.svelte @@ -0,0 +1,14 @@ + + +
+ +
\ No newline at end of file diff --git a/site/content/examples/13-composition/00-slots/meta.json b/site/content/examples/13-composition/00-slots/meta.json new file mode 100644 index 0000000000..bd30c8935a --- /dev/null +++ b/site/content/examples/13-composition/00-slots/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Slots" +} \ No newline at end of file diff --git a/site/content/examples/13-composition/01-slot-fallbacks/App.svelte b/site/content/examples/13-composition/01-slot-fallbacks/App.svelte new file mode 100644 index 0000000000..e30be6d1fc --- /dev/null +++ b/site/content/examples/13-composition/01-slot-fallbacks/App.svelte @@ -0,0 +1,10 @@ + + + +

Hello!

+

This is a box. It can contain anything.

+ + + \ No newline at end of file diff --git a/site/content/examples/13-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/13-composition/01-slot-fallbacks/Box.svelte new file mode 100644 index 0000000000..66c580632c --- /dev/null +++ b/site/content/examples/13-composition/01-slot-fallbacks/Box.svelte @@ -0,0 +1,16 @@ + + +
+ + no content was provided + +
\ No newline at end of file diff --git a/site/content/examples/13-composition/01-slot-fallbacks/meta.json b/site/content/examples/13-composition/01-slot-fallbacks/meta.json new file mode 100644 index 0000000000..26e7fcfb92 --- /dev/null +++ b/site/content/examples/13-composition/01-slot-fallbacks/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Slot fallbacks" +} \ No newline at end of file diff --git a/site/content/examples/13-composition/02-named-slots/App.svelte b/site/content/examples/13-composition/02-named-slots/App.svelte new file mode 100644 index 0000000000..8047809359 --- /dev/null +++ b/site/content/examples/13-composition/02-named-slots/App.svelte @@ -0,0 +1,14 @@ + + + + + P. Sherman + + + + 42 Wallaby Way
+ Sydney + + \ No newline at end of file diff --git a/site/content/examples/13-composition/02-named-slots/ContactCard.svelte b/site/content/examples/13-composition/02-named-slots/ContactCard.svelte new file mode 100644 index 0000000000..1acf290943 --- /dev/null +++ b/site/content/examples/13-composition/02-named-slots/ContactCard.svelte @@ -0,0 +1,47 @@ + + +
+

+ + Unknown name + +

+ +
+ + Unknown address + +
+ + +
\ No newline at end of file diff --git a/site/content/examples/13-composition/02-named-slots/meta.json b/site/content/examples/13-composition/02-named-slots/meta.json new file mode 100644 index 0000000000..60b82e991c --- /dev/null +++ b/site/content/examples/13-composition/02-named-slots/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Named slots" +} \ No newline at end of file diff --git a/site/content/examples/13-composition/03-slot-props/App.svelte b/site/content/examples/13-composition/03-slot-props/App.svelte new file mode 100644 index 0000000000..36772a5077 --- /dev/null +++ b/site/content/examples/13-composition/03-slot-props/App.svelte @@ -0,0 +1,46 @@ + + + + + +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ + + +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ + + +
+ {#if active} +

I am being hovered upon.

+ {:else} +

Hover over me!

+ {/if} +
+ \ No newline at end of file diff --git a/site/content/examples/13-composition/03-slot-props/Hoverable.svelte b/site/content/examples/13-composition/03-slot-props/Hoverable.svelte new file mode 100644 index 0000000000..69f2fc8ef6 --- /dev/null +++ b/site/content/examples/13-composition/03-slot-props/Hoverable.svelte @@ -0,0 +1,15 @@ + + +
+ +
\ No newline at end of file diff --git a/site/content/examples/13-composition/03-slot-props/meta.json b/site/content/examples/13-composition/03-slot-props/meta.json new file mode 100644 index 0000000000..74e2ff197c --- /dev/null +++ b/site/content/examples/13-composition/03-slot-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Slot props" +} \ No newline at end of file diff --git a/site/content/examples/13-composition/meta.json b/site/content/examples/13-composition/meta.json new file mode 100644 index 0000000000..54cf2db82d --- /dev/null +++ b/site/content/examples/13-composition/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Component composition" +} \ No newline at end of file diff --git a/site/content/examples/14-context/00-context-api/App.svelte b/site/content/examples/14-context/00-context-api/App.svelte new file mode 100644 index 0000000000..ea1ba4c7ae --- /dev/null +++ b/site/content/examples/14-context/00-context-api/App.svelte @@ -0,0 +1,13 @@ + + + + + + + + + + \ No newline at end of file diff --git a/site/content/examples/14-context/00-context-api/Map.svelte b/site/content/examples/14-context/00-context-api/Map.svelte new file mode 100644 index 0000000000..0282cbc311 --- /dev/null +++ b/site/content/examples/14-context/00-context-api/Map.svelte @@ -0,0 +1,50 @@ + + + + +
+ {#if map} + + {/if} +
\ No newline at end of file diff --git a/site/content/examples/14-context/00-context-api/MapMarker.svelte b/site/content/examples/14-context/00-context-api/MapMarker.svelte new file mode 100644 index 0000000000..c936652507 --- /dev/null +++ b/site/content/examples/14-context/00-context-api/MapMarker.svelte @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/site/content/examples/14-context/00-context-api/mapbox.js b/site/content/examples/14-context/00-context-api/mapbox.js new file mode 100644 index 0000000000..55b4200038 --- /dev/null +++ b/site/content/examples/14-context/00-context-api/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 }; \ No newline at end of file diff --git a/site/content/examples/14-context/00-context-api/meta.json b/site/content/examples/14-context/00-context-api/meta.json new file mode 100644 index 0000000000..2601c87cae --- /dev/null +++ b/site/content/examples/14-context/00-context-api/meta.json @@ -0,0 +1,3 @@ +{ + "title": "setContext and getContext" +} \ No newline at end of file diff --git a/site/content/examples/14-context/meta.json b/site/content/examples/14-context/meta.json new file mode 100644 index 0000000000..d3bd862676 --- /dev/null +++ b/site/content/examples/14-context/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Context API" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/00-svelte-self/App.svelte b/site/content/examples/15-special-elements/00-svelte-self/App.svelte new file mode 100644 index 0000000000..ff02fa6a42 --- /dev/null +++ b/site/content/examples/15-special-elements/00-svelte-self/App.svelte @@ -0,0 +1,41 @@ + + + \ No newline at end of file diff --git a/site/content/examples/15-special-elements/00-svelte-self/File.svelte b/site/content/examples/15-special-elements/00-svelte-self/File.svelte new file mode 100644 index 0000000000..e34686101a --- /dev/null +++ b/site/content/examples/15-special-elements/00-svelte-self/File.svelte @@ -0,0 +1,14 @@ + + + + +{name} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/15-special-elements/00-svelte-self/Folder.svelte new file mode 100644 index 0000000000..c25bb2a93d --- /dev/null +++ b/site/content/examples/15-special-elements/00-svelte-self/Folder.svelte @@ -0,0 +1,52 @@ + + + + +{name} + +{#if expanded} +
    + {#each files as file} +
  • + {#if file.type === 'folder'} + + {:else} + + {/if} +
    • + {/each} +
+{/if} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/00-svelte-self/meta.json b/site/content/examples/15-special-elements/00-svelte-self/meta.json new file mode 100644 index 0000000000..14485d7cee --- /dev/null +++ b/site/content/examples/15-special-elements/00-svelte-self/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/01-svelte-component/App.svelte b/site/content/examples/15-special-elements/01-svelte-component/App.svelte new file mode 100644 index 0000000000..a510fa8ad8 --- /dev/null +++ b/site/content/examples/15-special-elements/01-svelte-component/App.svelte @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/site/content/examples/15-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/15-special-elements/01-svelte-component/BlueThing.svelte new file mode 100644 index 0000000000..f9130d9d65 --- /dev/null +++ b/site/content/examples/15-special-elements/01-svelte-component/BlueThing.svelte @@ -0,0 +1,5 @@ + + +blue thing \ No newline at end of file diff --git a/site/content/examples/15-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/15-special-elements/01-svelte-component/GreenThing.svelte new file mode 100644 index 0000000000..9cbee235d3 --- /dev/null +++ b/site/content/examples/15-special-elements/01-svelte-component/GreenThing.svelte @@ -0,0 +1,5 @@ + + +green thing \ No newline at end of file diff --git a/site/content/examples/15-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/15-special-elements/01-svelte-component/RedThing.svelte new file mode 100644 index 0000000000..42f5e4c672 --- /dev/null +++ b/site/content/examples/15-special-elements/01-svelte-component/RedThing.svelte @@ -0,0 +1,5 @@ + + +red thing \ No newline at end of file diff --git a/site/content/examples/15-special-elements/01-svelte-component/meta.json b/site/content/examples/15-special-elements/01-svelte-component/meta.json new file mode 100644 index 0000000000..bb3675d5e5 --- /dev/null +++ b/site/content/examples/15-special-elements/01-svelte-component/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/02-svelte-window/App.svelte b/site/content/examples/15-special-elements/02-svelte-window/App.svelte new file mode 100644 index 0000000000..845d666dff --- /dev/null +++ b/site/content/examples/15-special-elements/02-svelte-window/App.svelte @@ -0,0 +1,42 @@ + + + + + + +
+ {#if key} + {key === ' ' ? 'Space' : key} +

{keyCode}

+ {:else} +

Focus this window and press any key

+ {/if} +
\ No newline at end of file diff --git a/site/content/examples/15-special-elements/02-svelte-window/meta.json b/site/content/examples/15-special-elements/02-svelte-window/meta.json new file mode 100644 index 0000000000..18357e9ef9 --- /dev/null +++ b/site/content/examples/15-special-elements/02-svelte-window/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/15-special-elements/03-svelte-window-bindings/App.svelte new file mode 100644 index 0000000000..a4b6f927b7 --- /dev/null +++ b/site/content/examples/15-special-elements/03-svelte-window-bindings/App.svelte @@ -0,0 +1,84 @@ + + + + + + {#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer} + parallax layer {layer} + {/each} + + +
+ + scroll down + + +
+ You have scrolled {y} pixels +
+
+ + diff --git a/site/content/examples/15-special-elements/03-svelte-window-bindings/meta.json b/site/content/examples/15-special-elements/03-svelte-window-bindings/meta.json new file mode 100644 index 0000000000..9903a804bb --- /dev/null +++ b/site/content/examples/15-special-elements/03-svelte-window-bindings/meta.json @@ -0,0 +1,3 @@ +{ + "title": " bindings" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/04-svelte-body/App.svelte b/site/content/examples/15-special-elements/04-svelte-body/App.svelte new file mode 100644 index 0000000000..ac946962eb --- /dev/null +++ b/site/content/examples/15-special-elements/04-svelte-body/App.svelte @@ -0,0 +1,37 @@ + + + + + + + +Kitten wants to know what's going on \ No newline at end of file diff --git a/site/content/examples/15-special-elements/04-svelte-body/meta.json b/site/content/examples/15-special-elements/04-svelte-body/meta.json new file mode 100644 index 0000000000..a140d2c168 --- /dev/null +++ b/site/content/examples/15-special-elements/04-svelte-body/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/05-svelte-head/App.svelte b/site/content/examples/15-special-elements/05-svelte-head/App.svelte new file mode 100644 index 0000000000..38089c9fdd --- /dev/null +++ b/site/content/examples/15-special-elements/05-svelte-head/App.svelte @@ -0,0 +1,5 @@ + + + + +

Hello world!

\ No newline at end of file diff --git a/site/content/examples/15-special-elements/05-svelte-head/meta.json b/site/content/examples/15-special-elements/05-svelte-head/meta.json new file mode 100644 index 0000000000..d35a752d15 --- /dev/null +++ b/site/content/examples/15-special-elements/05-svelte-head/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/06-svelte-options/App.svelte b/site/content/examples/15-special-elements/06-svelte-options/App.svelte new file mode 100644 index 0000000000..e0051449ee --- /dev/null +++ b/site/content/examples/15-special-elements/06-svelte-options/App.svelte @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file diff --git a/site/content/examples/15-special-elements/06-svelte-options/Square.svelte b/site/content/examples/15-special-elements/06-svelte-options/Square.svelte new file mode 100644 index 0000000000..38f26d1dba --- /dev/null +++ b/site/content/examples/15-special-elements/06-svelte-options/Square.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/site/content/examples/15-special-elements/06-svelte-options/meta.json b/site/content/examples/15-special-elements/06-svelte-options/meta.json new file mode 100644 index 0000000000..242c006850 --- /dev/null +++ b/site/content/examples/15-special-elements/06-svelte-options/meta.json @@ -0,0 +1,3 @@ +{ + "title": "" +} \ No newline at end of file diff --git a/site/content/examples/15-special-elements/meta.json b/site/content/examples/15-special-elements/meta.json new file mode 100644 index 0000000000..2718c14b59 --- /dev/null +++ b/site/content/examples/15-special-elements/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Special elements" +} \ No newline at end of file diff --git a/site/content/examples/16-module-context/00-sharing-code/App.svelte b/site/content/examples/16-module-context/00-sharing-code/App.svelte new file mode 100644 index 0000000000..3c0133350a --- /dev/null +++ b/site/content/examples/16-module-context/00-sharing-code/App.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + diff --git a/site/content/examples/16-module-context/00-sharing-code/AudioPlayer.svelte b/site/content/examples/16-module-context/00-sharing-code/AudioPlayer.svelte new file mode 100644 index 0000000000..27dbe1993b --- /dev/null +++ b/site/content/examples/16-module-context/00-sharing-code/AudioPlayer.svelte @@ -0,0 +1,46 @@ + + + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/examples/16-module-context/00-sharing-code/meta.json b/site/content/examples/16-module-context/00-sharing-code/meta.json new file mode 100644 index 0000000000..15c3725377 --- /dev/null +++ b/site/content/examples/16-module-context/00-sharing-code/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Sharing code" +} \ No newline at end of file diff --git a/site/content/examples/16-module-context/01-module-exports/App.svelte b/site/content/examples/16-module-context/01-module-exports/App.svelte new file mode 100644 index 0000000000..cd5ab44b21 --- /dev/null +++ b/site/content/examples/16-module-context/01-module-exports/App.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + diff --git a/site/content/examples/16-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/16-module-context/01-module-exports/AudioPlayer.svelte new file mode 100644 index 0000000000..4e3d191dbf --- /dev/null +++ b/site/content/examples/16-module-context/01-module-exports/AudioPlayer.svelte @@ -0,0 +1,52 @@ + + + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/examples/16-module-context/01-module-exports/meta.json b/site/content/examples/16-module-context/01-module-exports/meta.json new file mode 100644 index 0000000000..82be49d1c7 --- /dev/null +++ b/site/content/examples/16-module-context/01-module-exports/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Exports" +} \ No newline at end of file diff --git a/site/content/examples/16-module-context/meta.json b/site/content/examples/16-module-context/meta.json new file mode 100644 index 0000000000..1a8720e2ce --- /dev/null +++ b/site/content/examples/16-module-context/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Module context" +} \ No newline at end of file diff --git a/site/content/examples/17-debugging/00-debug/App.svelte b/site/content/examples/17-debugging/00-debug/App.svelte new file mode 100644 index 0000000000..1b91ac740b --- /dev/null +++ b/site/content/examples/17-debugging/00-debug/App.svelte @@ -0,0 +1,13 @@ + + + + + +{@debug user} + +

Hello {user.firstname}!

\ No newline at end of file diff --git a/site/content/examples/17-debugging/00-debug/meta.json b/site/content/examples/17-debugging/00-debug/meta.json new file mode 100644 index 0000000000..44ad769024 --- /dev/null +++ b/site/content/examples/17-debugging/00-debug/meta.json @@ -0,0 +1,3 @@ +{ + "title": "The @debug tag" +} \ No newline at end of file diff --git a/site/content/examples/17-debugging/meta.json b/site/content/examples/17-debugging/meta.json new file mode 100644 index 0000000000..5eeed281d3 --- /dev/null +++ b/site/content/examples/17-debugging/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Debugging" +} \ No newline at end of file diff --git a/site/scripts/get-example-thumbnails/index.js b/site/scripts/get-example-thumbnails/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/site/scripts/get-example-thumbnails/package.json b/site/scripts/get-example-thumbnails/package.json new file mode 100644 index 0000000000..9e26dfeeb6 --- /dev/null +++ b/site/scripts/get-example-thumbnails/package.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/site/scripts/get-examples-from-tutorials/index.js b/site/scripts/get-examples-from-tutorials/index.js index e69de29bb2..736ef657e0 100644 --- a/site/scripts/get-examples-from-tutorials/index.js +++ b/site/scripts/get-examples-from-tutorials/index.js @@ -0,0 +1,76 @@ +const sander = require('sander'); + +process.chdir(`${__dirname}/../..`); + +function extract_frontmatter(markdown) { + const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown); + const frontMatter = match[1]; + const content = markdown.slice(match[0].length); + + const metadata = {}; + frontMatter.split('\n').forEach(pair => { + const colonIndex = pair.indexOf(':'); + metadata[pair.slice(0, colonIndex).trim()] = pair + .slice(colonIndex + 1) + .trim(); + }); + + return { metadata, content }; +} + +const tutorial_sections = sander.readdirSync(`content/tutorial`).map(section_dir => { + const section_slug = section_dir.replace(/^\d+-/, ''); + + const meta = JSON.parse(sander.readFileSync(`content/tutorial/${section_dir}/meta.json`, { encoding: 'utf-8' })); + + const chapters = sander.readdirSync(`content/tutorial/${section_dir}`).map(chapter_dir => { + const app_dir = `content/tutorial/${section_dir}/${chapter_dir}/app-b`; + if (!sander.existsSync(app_dir)) return; + + const markdown = sander.readFileSync(`content/tutorial/${section_dir}/${chapter_dir}/text.md`, { encoding: 'utf-8' }); + const { metadata } = extract_frontmatter(markdown); + + const chapter_slug = chapter_dir.replace(/^\d+-/, ''); + + return { + slug: chapter_slug, + title: metadata.title, + files: sander.readdirSync(app_dir).map(name => { + return { + name, + source: sander.readFileSync(`${app_dir}/${name}`, { encoding: 'utf-8' }) + }; + }) + }; + }).filter(Boolean); + + return { + slug: section_slug, + title: meta.title, + chapters + }; +}).filter(section => section.chapters.length > 0); + +const pad = i => i < 10 ? `0${i}` : i; + +tutorial_sections.forEach((section, i) => { + const section_dir = `${pad(i)}-${section.slug}`; + + sander.writeFileSync(`content/examples/${section_dir}/meta.json`, JSON.stringify({ + title: section.title + }, null, '\t')); + + section.chapters.forEach((chapter, i) => { + const chapter_dir = `${pad(i)}-${chapter.slug}`; + + sander.writeFileSync(`content/examples/${section_dir}/${chapter_dir}/meta.json`, JSON.stringify({ + title: chapter.title + }, null, '\t')); + + chapter.files.forEach(file => { + sander.writeFileSync(`content/examples/${section_dir}/${chapter_dir}/${file.name}`, file.source); + }); + }); +}); + +console.log(tutorial_sections); \ No newline at end of file diff --git a/site/src/routes/api/examples/[slug].js b/site/src/routes/api/examples/[slug].js deleted file mode 100644 index d6bdf5b3a5..0000000000 --- a/site/src/routes/api/examples/[slug].js +++ /dev/null @@ -1,68 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import manifest from '../../../../content/examples/manifest.json'; - -const lookup = new Map(); -const titles = new Map(); -const slugs = new Set(); - -manifest.forEach(group => { - group.examples.forEach(example => { - titles.set(example.slug, example.title); - slugs.add(example.slug); - }); -}); - -function createExample(slug) { - const files = fs.readdirSync(`content/examples/${slug}`); - - const components = files - .map(file => { - const ext = path.extname(file); - if (ext !== '.svelte' && ext !== '.js') return null; - - const source = fs.readFileSync(`content/examples/${slug}/${file}`, 'utf-8'); - - return { - name: file.replace(ext, ''), - type: ext.slice(1), - source - }; - }) - .filter(Boolean) - .sort((a, b) => { - if (a.name === 'App' && a.type === 'svelte') return -1; - if (b.name === 'App' && b.type === 'svelte') return 1; - - if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1; - - return a.name < b.name ? -1 : 1; - }); - - return JSON.stringify({ - title: titles.get(slug), - components - }); -} - -export function get(req, res) { - const { slug } = req.params; - - try { - if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') { - lookup.set(slug, createExample(slug)); - } - - res.writeHead(200, { - 'Content-Type': 'application/json' - }); - - res.end(lookup.get(slug)); - } catch (err) { - res.writeHead(404, { - 'Content-Type': 'application/json' - }); - - res.end(JSON.stringify({ error: 'not found' })); - } -} \ No newline at end of file diff --git a/site/src/routes/examples/[slug].json.js b/site/src/routes/examples/[slug].json.js new file mode 100644 index 0000000000..222da42bb1 --- /dev/null +++ b/site/src/routes/examples/[slug].json.js @@ -0,0 +1,25 @@ +import { get_example } from './_examples.js'; + +const cache = new Map(); + +export function get(req, res) { + const { slug } = req.params; + + try { + if (!cache.has(slug) || process.env.NODE_ENV !== 'production') { + cache.set(slug, JSON.stringify(get_example(slug))); + } + + res.writeHead(200, { + 'Content-Type': 'application/json' + }); + + res.end(cache.get(slug)); + } catch (err) { + res.writeHead(404, { + 'Content-Type': 'application/json' + }); + + res.end(JSON.stringify({ error: 'not found' })); + } +} \ No newline at end of file diff --git a/site/src/routes/examples/_examples.js b/site/src/routes/examples/_examples.js new file mode 100644 index 0000000000..75c0aab08f --- /dev/null +++ b/site/src/routes/examples/_examples.js @@ -0,0 +1,51 @@ +import fs from 'fs'; +import path from 'path'; + +let lookup; +const titles = new Map(); + +export function get_examples() { + lookup = new Map(); + + return fs.readdirSync(`content/examples`).map(group_dir => { + const metadata = JSON.parse(fs.readFileSync(`content/examples/${group_dir}/meta.json`, 'utf-8')); + + return { + title: metadata.title, + examples: fs.readdirSync(`content/examples/${group_dir}`).filter(file => file !== 'meta.json').map(example_dir => { + const slug = example_dir.replace(/^\d+-/, ''); + + if (lookup.has(slug)) throw new Error(`Duplicate example slug "${slug}"`); + lookup.set(slug, `${group_dir}/${example_dir}`); + + const metadata = JSON.parse(fs.readFileSync(`content/examples/${group_dir}/${example_dir}/meta.json`, 'utf-8')); + titles.set(slug, metadata.title); + + return { + slug, + title: metadata.title + }; + }) + }; + }); +} + +export function get_example(slug) { + if (!lookup || !lookup.has(slug)) get_examples(); + + const dir = lookup.get(slug); + const title = titles.get(slug); + + if (!dir || !title) throw { status: 404, message: 'not found' }; + + const files = fs.readdirSync(`content/examples/${dir}`) + .filter(name => name[0] !== '.' && name !== 'meta.json') + .map(name => { + return { + name, + source: fs.readFileSync(`content/examples/${dir}/${name}`, 'utf-8') + }; + }); + + return { title, files }; +} \ No newline at end of file diff --git a/site/src/routes/examples/index.json.js b/site/src/routes/examples/index.json.js new file mode 100644 index 0000000000..4cb4d9c554 --- /dev/null +++ b/site/src/routes/examples/index.json.js @@ -0,0 +1,23 @@ +import { get_examples } from './_examples.js'; + +let cached; + +export function get(req, res) { + try { + if (!cached || process.env.NODE_ENV !== 'production') { + cached = JSON.stringify(get_examples()); + } + + res.writeHead(200, { + 'Content-Type': 'application/json' + }); + + res.end(cached); + } catch (e) { + res.writeHead(e.status || 500, { + 'Content-Type': 'application/json' + }); + + res.end(JSON.stringify({ message: e.message })); + } +} \ No newline at end of file diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte index 27c43b8ecf..6358be9f12 100644 --- a/site/src/routes/examples/index.svelte +++ b/site/src/routes/examples/index.svelte @@ -1 +1,88 @@ -

TODO

\ No newline at end of file + + + + + + +
+

Examples

+ + {#each groups as group} +
+

{group.title}

+ +
+ {#each group.examples as example} + +
+
+ +
{example.title}
+
+ + {/each} +
+ +
+ {/each} +
\ No newline at end of file diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte index 427137ae45..f02cdc8fd2 100644 --- a/site/src/routes/repl/_components/AppControls/index.svelte +++ b/site/src/routes/repl/_components/AppControls/index.svelte @@ -10,7 +10,6 @@ const dispatch = createEventDispatcher(); export let repl; - export let examples; export let gist; export let name; export let zen_mode; @@ -195,32 +194,11 @@ export default app;` });
-
-
- - - -
- - -
+