Add /// file annotations (sveltejs#285)

* add clickable file annotations to code blocks

* add more file annotations

* add no-file

* toggle mobile view when clicking annotations

* create files from annotations

* make all inline file annotations interactive

* dont exempt exercises with only one file, its weird

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md

@@ -11,6 +11,7 @@ A component that just renders some static markup isn't very interesting. Let's a
 First, add a script tag to your component and declare a `name` variable:
 
 ```svelte
+/// file: App.svelte
 +++<script>
 	let name = 'Svelte';
 </script>+++
@@ -21,11 +22,13 @@ First, add a script tag to your component and declare a `name` variable:
 Then, we can refer to `name` in the markup:
 
 ```svelte
+/// file: App.svelte
 <h1>Hello +++{name}+++!</h1>
 ```
 
 Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
 
 ```svelte
+/// file: App.svelte
 <h1>Hello {name+++.toUpperCase()+++}!</h1>
 ```

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md

@@ -7,6 +7,7 @@ Just like you can use curly braces to control text, you can use them to control
 Our image is missing a `src` — let's add one:
 
 ```svelte
+/// file: App.svelte
 <img +++src={src}+++ />
 ```
 
@@ -19,6 +20,7 @@ When building web apps, it's important to make sure that they're _accessible_ to
 In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
 
 ```svelte
+/// file: App.svelte
 <img src={src} +++alt="A man dances."+++ />
 ```
 
@@ -29,5 +31,6 @@ We can use curly braces _inside_ attributes. Try changing it to `"{name} dances.
 It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
 
 ```svelte
+/// file: App.svelte
 <img +++{src}+++ alt="A man dances." />
 ```

content/tutorial/01-svelte/01-introduction/04-styling/README.md

@@ -5,6 +5,7 @@ title: Styling
 Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
 
 ```svelte
+/// file: App.svelte
 <p>This is a paragraph.</p>
 
 <style>

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -7,6 +7,7 @@ It would be impractical to put your entire app in a single component. Instead, w
 Add a `<script>` tag that imports `Nested.svelte`...
 
 ```svelte
+/// file: App.svelte
 +++<script>
 	import Nested from './Nested.svelte';
 </script>+++
@@ -15,6 +16,7 @@ Add a `<script>` tag that imports `Nested.svelte`...
 ...and include a `<Nested />` component:
 
 ```svelte
+/// file: App.svelte
 <p>This is a paragraph.</p>
 +++<Nested />+++
 ```

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

@@ -7,12 +7,14 @@ At the heart of Svelte is a powerful system of _reactivity_ for keeping the DOM
 To demonstrate it, we first need to wire up an event handler (we'll learn more about these [later](/tutorial/dom-events)):
 
 ```svelte
+/// file: App.svelte
 <button +++on:click={increment}+++>
 ```
 
 Inside the `increment` function, all we need to do is change the value of `count`:
 
 ```js
+/// file: App.svelte
 function increment() {
 	+++count += 1;+++
 }

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

@@ -7,6 +7,7 @@ Svelte automatically updates the DOM when your component's state changes. Often,
 For these, we have _reactive declarations_. They look like this:
 
 ```js
+/// file: App.svelte
 let count = 0;
 +++$: doubled = count * 2;+++
 ```
@@ -16,6 +17,7 @@ let count = 0;
 Let's use `doubled` in our markup:
 
 ```svelte
+/// file: App.svelte
 <button>...</button>
 
 +++<p>{count} doubled is {doubled}</p>+++

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

@@ -5,6 +5,7 @@ title: Statements
 We're not limited to declaring reactive _values_ — we can also run arbitrary _statements_ reactively. For example, we can log the value of `count` whenever it changes:
 
 ```js
+/// file: App.svelte
 let count = 0;
 
 +++$: console.log(`the count is ${count}`);+++
@@ -13,6 +14,7 @@ let count = 0;
 You can easily group statements together with a block:
 
 ```js
+/// file: App.svelte
 $: +++{+++
 	console.log(`the count is ${count}`);
 	alert(`I SAID THE COUNT IS ${count}`);
@@ -22,6 +24,7 @@ $: +++{+++
 You can even put the `$:` in front of things like `if` blocks:
 
 ```js
+/// file: App.svelte
 $: +++if (count >= 10)+++ {
 	alert('count is dangerously high!');
 	count = 0;

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md

@@ -7,6 +7,7 @@ Because Svelte's reactivity is triggered by assignments, using array methods lik
 One way to fix that is to add an assignment that would otherwise be redundant:
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers.push(numbers.length + 1);
 	+++numbers = numbers;+++
@@ -16,6 +17,7 @@ function addNumber() {
 But there's a more idiomatic solution:
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers = +++[...numbers, numbers.length + 1];+++
 }
@@ -26,6 +28,7 @@ You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`.
 Assignments to _properties_ of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves.
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers[numbers.length] = numbers.length + 1;
 }
@@ -34,6 +37,7 @@ function addNumber() {
 A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this...
 
 ```js
+/// no-file
 const foo = obj.foo;
 foo.bar = 'baz';
 ```

content/tutorial/01-svelte/03-props/01-declaring-props/README.md

@@ -7,6 +7,7 @@ So far, we've dealt exclusively with internal state — that is to say, the valu
 In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare _properties_, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
 
 ```svelte
+/// file: Nested.svelte
 <script>
 	+++export+++ let answer;
 </script>

content/tutorial/01-svelte/03-props/02-default-values/README.md

@@ -5,6 +5,7 @@ title: Default values
 We can easily specify default values for props in `Nested.svelte`:
 
 ```svelte
+/// file: Nested.svelte
 <script>
 	export let answer +++= 'a mystery'+++;
 </script>
@@ -13,6 +14,7 @@ We can easily specify default values for props in `Nested.svelte`:
 If we now add a second component _without_ an `answer` prop, it will fall back to the default:
 
 ```svelte
+/// file: App.svelte
 <Nested answer={42}/>
 +++<Nested />+++
 ```