Update some content (sveltejs#70)

* add some more inline diffs

* update more content

* update more content

* simplify deferred transitions tutorial

* make filenames clickable in sidebar

* replace key block tutorial

* tweak styles

* update animate example

Author: Rich-Harris

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -4,7 +4,7 @@ title: Assignments
 
 At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM in sync with your application state — for example, in response to an event.
 
-To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)). Replace line 9 with this:
+To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)):
 
 ```svelte
 <button +++on:click={increment}+++>

content/tutorial/03-advanced-svelte/01-motion/01-tweens/README.md

@@ -10,9 +10,9 @@ Let's start by changing the `progress` store to a `tweened` value:
 
 ```svelte
 <script>
-	import { tweened } from 'svelte/motion';
+	import { +++tweened+++ } from 'svelte/+++motion+++';
 
-	const progress = tweened(0);
+	const progress = +++tweened+++(0);
 </script>
 ```
 
@@ -21,12 +21,12 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 ```svelte
 <script>
 	import { tweened } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
+	+++import { cubicOut } from 'svelte/easing';+++
 
-	const progress = tweened(0, {
+	const progress = tweened(0, +++{
 		duration: 400,
 		easing: cubicOut
-	});
+	}+++);
 </script>
 ```
 

content/tutorial/03-advanced-svelte/01-motion/02-springs/README.md

@@ -8,23 +8,20 @@ In this example we have two stores — one representing the circle's coordinates
 
 ```svelte
 <script>
-	import { spring } from 'svelte/motion';
+	import { +++spring+++ } from 'svelte/+++motion+++';
 
-	let coords = spring({ x: 50, y: 50 });
-	let size = spring(10);
+	let coords = +++spring+++({ x: 50, y: 50 });
+	let size = +++spring+++(10);
 </script>
 ```
 
 Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
 
 ```js
-let coords = spring(
-	{ x: 50, y: 50 },
-	{
-		stiffness: 0.1,
-		damping: 0.25
-	}
-);
+let coords = spring({ x: 50, y: 50 }, +++{
+	stiffness: 0.1,
+	damping: 0.25
+}+++);
 ```
 
 Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.

content/tutorial/03-advanced-svelte/01-motion/02-springs/app-b/src/lib/App.svelte

@@ -1,13 +1,10 @@
 <script>
 	import { spring } from 'svelte/motion';
 
-	let coords = spring(
-		{ x: 50, y: 50 },
-		{
-			stiffness: 0.1,
-			damping: 0.25
-		}
-	);
+	let coords = spring({ x: 50, y: 50 }, {
+		stiffness: 0.1,
+		damping: 0.25
+	});
 
 	let size = spring(10);
 </script>

content/tutorial/03-advanced-svelte/02-transitions/01-transition/README.md

@@ -8,13 +8,13 @@ First, import the `fade` function from `svelte/transition`...
 
 ```svelte
 <script>
-	import { fade } from 'svelte/transition';
+	+++import { fade } from 'svelte/transition';+++
 	let visible = true;
 </script>
 ```
 
 ...then add it to the `<p>` element:
 
 ```svelte
-<p transition:fade>Fades in and out</p>
+<p +++transition:fade+++>Fades in and out</p>
 ```

content/tutorial/03-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md

@@ -6,16 +6,16 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 
 ```svelte
 <script>
-	import { fly } from 'svelte/transition';
+	import { +++fly+++ } from 'svelte/transition';
 	let visible = true;
 </script>
 ```
 
 ...and apply it to the `<p>` along with some options:
 
 ```svelte
-<p transition:fly="{{ y: 200, duration: 2000 }}">
-	Flies in and out
+<p transition:+++fly={{ y: 200, duration: 2000 }}+++>
+	+++Flies+++ in and out
 </p>
 ```
 

content/tutorial/03-advanced-svelte/02-transitions/03-in-and-out/README.md

@@ -5,14 +5,14 @@ title: In and out
 Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
 
 ```js
-import { fade, fly } from 'svelte/transition';
+import { +++fade+++, fly } from 'svelte/transition';
 ```
 
 ...then replace the `transition` directive with separate `in` and `out` directives:
 
 ```svelte
-<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
-	Flies in, fades out
+<p +++in+++:fly={{ y: 200, duration: 2000 }} +++out:fade+++>
+	Flies in, +++fades out+++
 </p>
 ```
 

content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md

@@ -51,14 +51,14 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 ```svelte
 <script>
 	import { fade } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
+	+++import { elasticOut } from 'svelte/easing';+++
 
 	let visible = true;
 
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => {
+			css: t => +++{
 				const eased = elasticOut(t);
 
 				return `
@@ -68,7 +68,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 						${Math.min(100, 1000 - 1000 * t)}%,
 						${Math.min(50, 500 - 500 * t)}%
 					);`
-			}
+			}+++
 		};
 	}
 </script>

content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/app-b/src/lib/App.svelte

@@ -11,9 +11,7 @@
 				const eased = elasticOut(t);
 
 				return `
-					transform: scale(${eased}) rotate(${
-					eased * 1080
-				}deg);
+					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
 						${Math.min(100, 1000 - 1000 * t)}%,

content/tutorial/03-advanced-svelte/02-transitions/05-custom-js-transitions/README.md

@@ -12,7 +12,7 @@ function typewriter(node, { speed = 1 }) {
 		throw new Error(`This transition only works on elements with a single text node child`);
 	}
 
-	const text = node.textContent;
+	+++const text = node.textContent;
 	const duration = text.length / (speed * 0.01);
 
 	return {
@@ -21,6 +21,6 @@ function typewriter(node, { speed = 1 }) {
 			const i = Math.trunc(text.length * t);
 			node.textContent = text.slice(0, i);
 		}
-	};
+	};+++
 }
 ```