diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 6d5777aacd..dfd734b3c9 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -740,7 +740,23 @@ You can see a full example on the [animations tutorial](tutorial/animate) ### `svelte/easing` -* TODO could have nice little interactive widgets showing the different functions, maybe +Easing functions specificy the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`. + +You can explore the various eases using the [ease visualiser](examples#easing) in the [examples section](examples). + + +| ease | in | out | inOut | +| --- | --- | --- | --- | +| **back** | `backIn` | `backOut` | `backInOut` | +| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` | +| **circ** | `circIn` | `circOut` | `circInOut` | +| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` | +| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` | +| **expo** | `expoIn` | `expoOut` | `expoInOut` | +| **quad** | `quadIn` | `quadOut` | `quadInOut` | +| **quart** | `quartIn` | `quartOut` | `quartInOut` | +| **quint** | `quintIn` | `quintOut` | `quintInOut` | +| **sine** | `sineIn` | `sineOut` | `sineInOut` | ### `svelte/register` diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte new file mode 100644 index 0000000000..c33e73518e --- /dev/null +++ b/site/content/examples/11-easing/00-easing/App.svelte @@ -0,0 +1,106 @@ + + + + +
+ + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte new file mode 100644 index 0000000000..66a297323f --- /dev/null +++ b/site/content/examples/11-easing/00-easing/Controls.svelte @@ -0,0 +1,186 @@ + + + + +
+
+

Ease

+ {#if mobile} + + {:else} + + {/if} +

Type

+ {#if mobile } + + {:else} + + {/if} +
+

+ Duration +

+
+ + + + + + +
+
\ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte new file mode 100644 index 0000000000..e704f46cf7 --- /dev/null +++ b/site/content/examples/11-easing/00-easing/Grid.svelte @@ -0,0 +1,62 @@ + + + + + + + + +{#each { length: 8 } as _, i} + {#if i < 6} + + {/if} + +{/each} + + + + \ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/eases.js b/site/content/examples/11-easing/00-easing/eases.js new file mode 100644 index 0000000000..a24246005a --- /dev/null +++ b/site/content/examples/11-easing/00-easing/eases.js @@ -0,0 +1,43 @@ +import * as eases from 'svelte/easing'; + +const processed_eases = {}; + +for (const ease in eases) { + if (ease === "linear") { + processed_eases.linear = eases.linear; + } else { + const name = ease.replace(/In$|InOut$|Out$/, ''); + const type = ease.match(/In$|InOut$|Out$/)[0]; + + if (!(name in processed_eases)) processed_eases[name] = {}; + processed_eases[name][type] = {}; + processed_eases[name][type].fn = eases[ease]; + + let shape = 'M0 1000'; + for (let i = 1; i <= 1000; i++) { + shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `; + processed_eases[name][type].shape = shape; + } + } +} + +const sorted_eases = new Map([ + ['sine', processed_eases.sine], + ['quad', processed_eases.quad], + ['cubic', processed_eases.cubic], + ['quart', processed_eases.quart], + ['quint', processed_eases.quint], + ['expo', processed_eases.expo], + ['circ', processed_eases.circ], + ['back', processed_eases.back], + ['elastic', processed_eases.elastic], + ['bounce', processed_eases.bounce], +]); + +export const types = [ + ['Ease In', 'In'], + ['Ease Out', 'Out'], + ['Ease In Out', 'InOut'] +]; + +export { sorted_eases as eases }; \ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/meta.json b/site/content/examples/11-easing/00-easing/meta.json new file mode 100644 index 0000000000..59ad604b26 --- /dev/null +++ b/site/content/examples/11-easing/00-easing/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Ease Visualiser" +} \ No newline at end of file diff --git a/site/content/examples/11-easing/meta.json b/site/content/examples/11-easing/meta.json new file mode 100644 index 0000000000..78341a522d --- /dev/null +++ b/site/content/examples/11-easing/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Easing" +} \ No newline at end of file diff --git a/site/content/examples/11-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte similarity index 100% rename from site/content/examples/11-svg/01-clock/App.svelte rename to site/content/examples/12-svg/01-clock/App.svelte diff --git a/site/content/examples/11-svg/01-clock/meta.json b/site/content/examples/12-svg/01-clock/meta.json similarity index 100% rename from site/content/examples/11-svg/01-clock/meta.json rename to site/content/examples/12-svg/01-clock/meta.json diff --git a/site/content/examples/11-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte similarity index 100% rename from site/content/examples/11-svg/02-bar-chart/App.svelte rename to site/content/examples/12-svg/02-bar-chart/App.svelte diff --git a/site/content/examples/11-svg/02-bar-chart/meta.json b/site/content/examples/12-svg/02-bar-chart/meta.json similarity index 100% rename from site/content/examples/11-svg/02-bar-chart/meta.json rename to site/content/examples/12-svg/02-bar-chart/meta.json diff --git a/site/content/examples/11-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte similarity index 100% rename from site/content/examples/11-svg/03-area-chart/App.svelte rename to site/content/examples/12-svg/03-area-chart/App.svelte diff --git a/site/content/examples/11-svg/03-area-chart/data.js b/site/content/examples/12-svg/03-area-chart/data.js similarity index 100% rename from site/content/examples/11-svg/03-area-chart/data.js rename to site/content/examples/12-svg/03-area-chart/data.js diff --git a/site/content/examples/11-svg/03-area-chart/meta.json b/site/content/examples/12-svg/03-area-chart/meta.json similarity index 100% rename from site/content/examples/11-svg/03-area-chart/meta.json rename to site/content/examples/12-svg/03-area-chart/meta.json diff --git a/site/content/examples/11-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte similarity index 100% rename from site/content/examples/11-svg/04-scatterplot/App.svelte rename to site/content/examples/12-svg/04-scatterplot/App.svelte diff --git a/site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte similarity index 100% rename from site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte rename to site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte diff --git a/site/content/examples/11-svg/04-scatterplot/data.js b/site/content/examples/12-svg/04-scatterplot/data.js similarity index 100% rename from site/content/examples/11-svg/04-scatterplot/data.js rename to site/content/examples/12-svg/04-scatterplot/data.js diff --git a/site/content/examples/11-svg/04-scatterplot/meta.json b/site/content/examples/12-svg/04-scatterplot/meta.json similarity index 100% rename from site/content/examples/11-svg/04-scatterplot/meta.json rename to site/content/examples/12-svg/04-scatterplot/meta.json diff --git a/site/content/examples/11-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte similarity index 100% rename from site/content/examples/11-svg/05-svg-transitions/App.svelte rename to site/content/examples/12-svg/05-svg-transitions/App.svelte diff --git a/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js b/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js similarity index 100% rename from site/content/examples/11-svg/05-svg-transitions/custom-transitions.js rename to site/content/examples/12-svg/05-svg-transitions/custom-transitions.js diff --git a/site/content/examples/11-svg/05-svg-transitions/meta.json b/site/content/examples/12-svg/05-svg-transitions/meta.json similarity index 100% rename from site/content/examples/11-svg/05-svg-transitions/meta.json rename to site/content/examples/12-svg/05-svg-transitions/meta.json diff --git a/site/content/examples/11-svg/05-svg-transitions/shape.js b/site/content/examples/12-svg/05-svg-transitions/shape.js similarity index 100% rename from site/content/examples/11-svg/05-svg-transitions/shape.js rename to site/content/examples/12-svg/05-svg-transitions/shape.js diff --git a/site/content/examples/11-svg/meta.json b/site/content/examples/12-svg/meta.json similarity index 100% rename from site/content/examples/11-svg/meta.json rename to site/content/examples/12-svg/meta.json diff --git a/site/content/examples/12-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte similarity index 100% rename from site/content/examples/12-actions/00-actions/App.svelte rename to site/content/examples/13-actions/00-actions/App.svelte diff --git a/site/content/examples/12-actions/00-actions/meta.json b/site/content/examples/13-actions/00-actions/meta.json similarity index 100% rename from site/content/examples/12-actions/00-actions/meta.json rename to site/content/examples/13-actions/00-actions/meta.json diff --git a/site/content/examples/12-actions/00-actions/pannable.js b/site/content/examples/13-actions/00-actions/pannable.js similarity index 100% rename from site/content/examples/12-actions/00-actions/pannable.js rename to site/content/examples/13-actions/00-actions/pannable.js diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte similarity index 100% rename from site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte rename to site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json b/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json similarity index 100% rename from site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json rename to site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json diff --git a/site/content/examples/12-actions/meta.json b/site/content/examples/13-actions/meta.json similarity index 100% rename from site/content/examples/12-actions/meta.json rename to site/content/examples/13-actions/meta.json diff --git a/site/content/examples/13-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte similarity index 100% rename from site/content/examples/13-classes/00-classes/App.svelte rename to site/content/examples/14-classes/00-classes/App.svelte diff --git a/site/content/examples/13-classes/00-classes/meta.json b/site/content/examples/14-classes/00-classes/meta.json similarity index 100% rename from site/content/examples/13-classes/00-classes/meta.json rename to site/content/examples/14-classes/00-classes/meta.json diff --git a/site/content/examples/13-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte similarity index 100% rename from site/content/examples/13-classes/01-class-shorthand/App.svelte rename to site/content/examples/14-classes/01-class-shorthand/App.svelte diff --git a/site/content/examples/13-classes/01-class-shorthand/meta.json b/site/content/examples/14-classes/01-class-shorthand/meta.json similarity index 100% rename from site/content/examples/13-classes/01-class-shorthand/meta.json rename to site/content/examples/14-classes/01-class-shorthand/meta.json diff --git a/site/content/examples/13-classes/meta.json b/site/content/examples/14-classes/meta.json similarity index 100% rename from site/content/examples/13-classes/meta.json rename to site/content/examples/14-classes/meta.json diff --git a/site/content/examples/14-composition/00-slots/App.svelte b/site/content/examples/15-composition/00-slots/App.svelte similarity index 100% rename from site/content/examples/14-composition/00-slots/App.svelte rename to site/content/examples/15-composition/00-slots/App.svelte diff --git a/site/content/examples/14-composition/00-slots/Box.svelte b/site/content/examples/15-composition/00-slots/Box.svelte similarity index 100% rename from site/content/examples/14-composition/00-slots/Box.svelte rename to site/content/examples/15-composition/00-slots/Box.svelte diff --git a/site/content/examples/14-composition/00-slots/meta.json b/site/content/examples/15-composition/00-slots/meta.json similarity index 100% rename from site/content/examples/14-composition/00-slots/meta.json rename to site/content/examples/15-composition/00-slots/meta.json diff --git a/site/content/examples/14-composition/01-slot-fallbacks/App.svelte b/site/content/examples/15-composition/01-slot-fallbacks/App.svelte similarity index 100% rename from site/content/examples/14-composition/01-slot-fallbacks/App.svelte rename to site/content/examples/15-composition/01-slot-fallbacks/App.svelte diff --git a/site/content/examples/14-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte similarity index 100% rename from site/content/examples/14-composition/01-slot-fallbacks/Box.svelte rename to site/content/examples/15-composition/01-slot-fallbacks/Box.svelte diff --git a/site/content/examples/14-composition/01-slot-fallbacks/meta.json b/site/content/examples/15-composition/01-slot-fallbacks/meta.json similarity index 100% rename from site/content/examples/14-composition/01-slot-fallbacks/meta.json rename to site/content/examples/15-composition/01-slot-fallbacks/meta.json diff --git a/site/content/examples/14-composition/02-named-slots/App.svelte b/site/content/examples/15-composition/02-named-slots/App.svelte similarity index 100% rename from site/content/examples/14-composition/02-named-slots/App.svelte rename to site/content/examples/15-composition/02-named-slots/App.svelte diff --git a/site/content/examples/14-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte similarity index 100% rename from site/content/examples/14-composition/02-named-slots/ContactCard.svelte rename to site/content/examples/15-composition/02-named-slots/ContactCard.svelte diff --git a/site/content/examples/14-composition/02-named-slots/meta.json b/site/content/examples/15-composition/02-named-slots/meta.json similarity index 100% rename from site/content/examples/14-composition/02-named-slots/meta.json rename to site/content/examples/15-composition/02-named-slots/meta.json diff --git a/site/content/examples/14-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte similarity index 100% rename from site/content/examples/14-composition/03-slot-props/App.svelte rename to site/content/examples/15-composition/03-slot-props/App.svelte diff --git a/site/content/examples/14-composition/03-slot-props/Hoverable.svelte b/site/content/examples/15-composition/03-slot-props/Hoverable.svelte similarity index 100% rename from site/content/examples/14-composition/03-slot-props/Hoverable.svelte rename to site/content/examples/15-composition/03-slot-props/Hoverable.svelte diff --git a/site/content/examples/14-composition/03-slot-props/meta.json b/site/content/examples/15-composition/03-slot-props/meta.json similarity index 100% rename from site/content/examples/14-composition/03-slot-props/meta.json rename to site/content/examples/15-composition/03-slot-props/meta.json diff --git a/site/content/examples/14-composition/04-modal/App.svelte b/site/content/examples/15-composition/04-modal/App.svelte similarity index 100% rename from site/content/examples/14-composition/04-modal/App.svelte rename to site/content/examples/15-composition/04-modal/App.svelte diff --git a/site/content/examples/14-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/04-modal/Modal.svelte similarity index 100% rename from site/content/examples/14-composition/04-modal/Modal.svelte rename to site/content/examples/15-composition/04-modal/Modal.svelte diff --git a/site/content/examples/14-composition/04-modal/meta.json b/site/content/examples/15-composition/04-modal/meta.json similarity index 100% rename from site/content/examples/14-composition/04-modal/meta.json rename to site/content/examples/15-composition/04-modal/meta.json diff --git a/site/content/examples/14-composition/meta.json b/site/content/examples/15-composition/meta.json similarity index 100% rename from site/content/examples/14-composition/meta.json rename to site/content/examples/15-composition/meta.json diff --git a/site/content/examples/15-context/00-context-api/App.svelte b/site/content/examples/16-context/00-context-api/App.svelte similarity index 100% rename from site/content/examples/15-context/00-context-api/App.svelte rename to site/content/examples/16-context/00-context-api/App.svelte diff --git a/site/content/examples/15-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte similarity index 100% rename from site/content/examples/15-context/00-context-api/Map.svelte rename to site/content/examples/16-context/00-context-api/Map.svelte diff --git a/site/content/examples/15-context/00-context-api/MapMarker.svelte b/site/content/examples/16-context/00-context-api/MapMarker.svelte similarity index 100% rename from site/content/examples/15-context/00-context-api/MapMarker.svelte rename to site/content/examples/16-context/00-context-api/MapMarker.svelte diff --git a/site/content/examples/15-context/00-context-api/mapbox.js b/site/content/examples/16-context/00-context-api/mapbox.js similarity index 100% rename from site/content/examples/15-context/00-context-api/mapbox.js rename to site/content/examples/16-context/00-context-api/mapbox.js diff --git a/site/content/examples/15-context/00-context-api/meta.json b/site/content/examples/16-context/00-context-api/meta.json similarity index 100% rename from site/content/examples/15-context/00-context-api/meta.json rename to site/content/examples/16-context/00-context-api/meta.json diff --git a/site/content/examples/15-context/meta.json b/site/content/examples/16-context/meta.json similarity index 100% rename from site/content/examples/15-context/meta.json rename to site/content/examples/16-context/meta.json diff --git a/site/content/examples/16-special-elements/00-svelte-self/App.svelte b/site/content/examples/17-special-elements/00-svelte-self/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/00-svelte-self/App.svelte rename to site/content/examples/17-special-elements/00-svelte-self/App.svelte diff --git a/site/content/examples/16-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte similarity index 100% rename from site/content/examples/16-special-elements/00-svelte-self/File.svelte rename to site/content/examples/17-special-elements/00-svelte-self/File.svelte diff --git a/site/content/examples/16-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte similarity index 100% rename from site/content/examples/16-special-elements/00-svelte-self/Folder.svelte rename to site/content/examples/17-special-elements/00-svelte-self/Folder.svelte diff --git a/site/content/examples/16-special-elements/00-svelte-self/meta.json b/site/content/examples/17-special-elements/00-svelte-self/meta.json similarity index 100% rename from site/content/examples/16-special-elements/00-svelte-self/meta.json rename to site/content/examples/17-special-elements/00-svelte-self/meta.json diff --git a/site/content/examples/16-special-elements/01-svelte-component/App.svelte b/site/content/examples/17-special-elements/01-svelte-component/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/01-svelte-component/App.svelte rename to site/content/examples/17-special-elements/01-svelte-component/App.svelte diff --git a/site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte similarity index 100% rename from site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte rename to site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte diff --git a/site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte similarity index 100% rename from site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte rename to site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte diff --git a/site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte similarity index 100% rename from site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte rename to site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte diff --git a/site/content/examples/16-special-elements/01-svelte-component/meta.json b/site/content/examples/17-special-elements/01-svelte-component/meta.json similarity index 100% rename from site/content/examples/16-special-elements/01-svelte-component/meta.json rename to site/content/examples/17-special-elements/01-svelte-component/meta.json diff --git a/site/content/examples/16-special-elements/02-svelte-window/App.svelte b/site/content/examples/17-special-elements/02-svelte-window/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/02-svelte-window/App.svelte rename to site/content/examples/17-special-elements/02-svelte-window/App.svelte diff --git a/site/content/examples/16-special-elements/02-svelte-window/meta.json b/site/content/examples/17-special-elements/02-svelte-window/meta.json similarity index 100% rename from site/content/examples/16-special-elements/02-svelte-window/meta.json rename to site/content/examples/17-special-elements/02-svelte-window/meta.json diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte rename to site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json b/site/content/examples/17-special-elements/03-svelte-window-bindings/meta.json similarity index 100% rename from site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json rename to site/content/examples/17-special-elements/03-svelte-window-bindings/meta.json diff --git a/site/content/examples/16-special-elements/04-svelte-body/App.svelte b/site/content/examples/17-special-elements/04-svelte-body/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/04-svelte-body/App.svelte rename to site/content/examples/17-special-elements/04-svelte-body/App.svelte diff --git a/site/content/examples/16-special-elements/04-svelte-body/meta.json b/site/content/examples/17-special-elements/04-svelte-body/meta.json similarity index 100% rename from site/content/examples/16-special-elements/04-svelte-body/meta.json rename to site/content/examples/17-special-elements/04-svelte-body/meta.json diff --git a/site/content/examples/16-special-elements/05-svelte-head/App.svelte b/site/content/examples/17-special-elements/05-svelte-head/App.svelte similarity index 100% rename from site/content/examples/16-special-elements/05-svelte-head/App.svelte rename to site/content/examples/17-special-elements/05-svelte-head/App.svelte diff --git a/site/content/examples/16-special-elements/05-svelte-head/meta.json b/site/content/examples/17-special-elements/05-svelte-head/meta.json similarity index 100% rename from site/content/examples/16-special-elements/05-svelte-head/meta.json rename to site/content/examples/17-special-elements/05-svelte-head/meta.json diff --git a/site/content/examples/16-special-elements/meta.json b/site/content/examples/17-special-elements/meta.json similarity index 100% rename from site/content/examples/16-special-elements/meta.json rename to site/content/examples/17-special-elements/meta.json diff --git a/site/content/examples/17-module-context/01-module-exports/App.svelte b/site/content/examples/18-module-context/01-module-exports/App.svelte similarity index 100% rename from site/content/examples/17-module-context/01-module-exports/App.svelte rename to site/content/examples/18-module-context/01-module-exports/App.svelte diff --git a/site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte similarity index 100% rename from site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte rename to site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte diff --git a/site/content/examples/17-module-context/01-module-exports/meta.json b/site/content/examples/18-module-context/01-module-exports/meta.json similarity index 100% rename from site/content/examples/17-module-context/01-module-exports/meta.json rename to site/content/examples/18-module-context/01-module-exports/meta.json diff --git a/site/content/examples/17-module-context/meta.json b/site/content/examples/18-module-context/meta.json similarity index 100% rename from site/content/examples/17-module-context/meta.json rename to site/content/examples/18-module-context/meta.json diff --git a/site/content/examples/18-debugging/00-debug/App.svelte b/site/content/examples/19-debugging/00-debug/App.svelte similarity index 100% rename from site/content/examples/18-debugging/00-debug/App.svelte rename to site/content/examples/19-debugging/00-debug/App.svelte diff --git a/site/content/examples/18-debugging/00-debug/meta.json b/site/content/examples/19-debugging/00-debug/meta.json similarity index 100% rename from site/content/examples/18-debugging/00-debug/meta.json rename to site/content/examples/19-debugging/00-debug/meta.json diff --git a/site/content/examples/18-debugging/meta.json b/site/content/examples/19-debugging/meta.json similarity index 100% rename from site/content/examples/18-debugging/meta.json rename to site/content/examples/19-debugging/meta.json diff --git a/site/content/examples/19-7guis/01-7guis-counter/App.svelte b/site/content/examples/20-7guis/01-7guis-counter/App.svelte similarity index 100% rename from site/content/examples/19-7guis/01-7guis-counter/App.svelte rename to site/content/examples/20-7guis/01-7guis-counter/App.svelte diff --git a/site/content/examples/19-7guis/01-7guis-counter/meta.json b/site/content/examples/20-7guis/01-7guis-counter/meta.json similarity index 100% rename from site/content/examples/19-7guis/01-7guis-counter/meta.json rename to site/content/examples/20-7guis/01-7guis-counter/meta.json diff --git a/site/content/examples/19-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte similarity index 100% rename from site/content/examples/19-7guis/02-7guis-temperature/App.svelte rename to site/content/examples/20-7guis/02-7guis-temperature/App.svelte diff --git a/site/content/examples/19-7guis/02-7guis-temperature/meta.json b/site/content/examples/20-7guis/02-7guis-temperature/meta.json similarity index 100% rename from site/content/examples/19-7guis/02-7guis-temperature/meta.json rename to site/content/examples/20-7guis/02-7guis-temperature/meta.json diff --git a/site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte similarity index 100% rename from site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte rename to site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte diff --git a/site/content/examples/19-7guis/03-7guis-flight-booker/meta.json b/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json similarity index 100% rename from site/content/examples/19-7guis/03-7guis-flight-booker/meta.json rename to site/content/examples/20-7guis/03-7guis-flight-booker/meta.json diff --git a/site/content/examples/19-7guis/04-7guis-timer/App.svelte b/site/content/examples/20-7guis/04-7guis-timer/App.svelte similarity index 100% rename from site/content/examples/19-7guis/04-7guis-timer/App.svelte rename to site/content/examples/20-7guis/04-7guis-timer/App.svelte diff --git a/site/content/examples/19-7guis/04-7guis-timer/meta.json b/site/content/examples/20-7guis/04-7guis-timer/meta.json similarity index 100% rename from site/content/examples/19-7guis/04-7guis-timer/meta.json rename to site/content/examples/20-7guis/04-7guis-timer/meta.json diff --git a/site/content/examples/19-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte similarity index 100% rename from site/content/examples/19-7guis/05-7guis-crud/App.svelte rename to site/content/examples/20-7guis/05-7guis-crud/App.svelte diff --git a/site/content/examples/19-7guis/05-7guis-crud/meta.json b/site/content/examples/20-7guis/05-7guis-crud/meta.json similarity index 100% rename from site/content/examples/19-7guis/05-7guis-crud/meta.json rename to site/content/examples/20-7guis/05-7guis-crud/meta.json diff --git a/site/content/examples/19-7guis/06-7guis-circles/App.svelte b/site/content/examples/20-7guis/06-7guis-circles/App.svelte similarity index 100% rename from site/content/examples/19-7guis/06-7guis-circles/App.svelte rename to site/content/examples/20-7guis/06-7guis-circles/App.svelte diff --git a/site/content/examples/19-7guis/06-7guis-circles/meta.json b/site/content/examples/20-7guis/06-7guis-circles/meta.json similarity index 100% rename from site/content/examples/19-7guis/06-7guis-circles/meta.json rename to site/content/examples/20-7guis/06-7guis-circles/meta.json diff --git a/site/content/examples/19-7guis/meta.json b/site/content/examples/20-7guis/meta.json similarity index 100% rename from site/content/examples/19-7guis/meta.json rename to site/content/examples/20-7guis/meta.json diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/App.svelte rename to site/content/examples/21-miscellaneous/01-hacker-news/App.svelte diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte rename to site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte rename to site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/List.svelte rename to site/content/examples/21-miscellaneous/01-hacker-news/List.svelte diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte rename to site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/meta.json b/site/content/examples/21-miscellaneous/01-hacker-news/meta.json similarity index 100% rename from site/content/examples/20-miscellaneous/01-hacker-news/meta.json rename to site/content/examples/21-miscellaneous/01-hacker-news/meta.json diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/App.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/02-immutable-data/App.svelte rename to site/content/examples/21-miscellaneous/02-immutable-data/App.svelte diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte rename to site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte similarity index 100% rename from site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte rename to site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/flash.js b/site/content/examples/21-miscellaneous/02-immutable-data/flash.js similarity index 100% rename from site/content/examples/20-miscellaneous/02-immutable-data/flash.js rename to site/content/examples/21-miscellaneous/02-immutable-data/flash.js diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/meta.json b/site/content/examples/21-miscellaneous/02-immutable-data/meta.json similarity index 100% rename from site/content/examples/20-miscellaneous/02-immutable-data/meta.json rename to site/content/examples/21-miscellaneous/02-immutable-data/meta.json diff --git a/site/content/examples/20-miscellaneous/meta.json b/site/content/examples/21-miscellaneous/meta.json similarity index 100% rename from site/content/examples/20-miscellaneous/meta.json rename to site/content/examples/21-miscellaneous/meta.json diff --git a/site/static/examples/thumbnails/easing.jpg b/site/static/examples/thumbnails/easing.jpg new file mode 100644 index 0000000000..11c4871c2a Binary files /dev/null and b/site/static/examples/thumbnails/easing.jpg differ