Add /// file annotations (#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 />+++
 ```

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

@@ -5,6 +5,7 @@ title: Spread props
 If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
 
 ```svelte
+/// file: App.svelte
 <PackageInfo +++{...pkg}+++/>
 ```
 

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

@@ -7,6 +7,7 @@ HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svel
 To conditionally render some markup, we wrap it in an `if` block:
 
 ```svelte
+/// file: App.svelte
 +++{#if user.loggedIn}+++
 	<button on:click={toggle}>
 		Log out

content/tutorial/01-svelte/04-logic/02-else-blocks/README.md

@@ -5,6 +5,7 @@ title: Else blocks
 Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
 
 ```svelte
+/// file: App.svelte
 {#if user.loggedIn}
 	<button on:click={toggle}>
 		Log out

content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md

@@ -5,6 +5,7 @@ title: Else-if blocks
 Multiple conditions can be 'chained' together with `else if`:
 
 ```svelte
+/// file: App.svelte
 {#if x > 10}
 	<p>{x} is greater than 10</p>
 {:+++else if+++ 5 > x}

content/tutorial/01-svelte/04-logic/04-each-blocks/README.md

@@ -5,6 +5,7 @@ title: Each blocks
 If you need to loop over lists of data, use an `each` block:
 
 ```svelte
+/// file: App.svelte
 <ul>
 	+++{#each cats as cat}+++
 		<li>
@@ -21,6 +22,7 @@ If you need to loop over lists of data, use an `each` block:
 You can get the current _index_ as a second argument, like so:
 
 ```svelte
+/// file: App.svelte
 {#each cats as cat+++, i}+++
 	<li>
 		<a href="https://www.youtube.com/watch?v={cat.id}">

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/README.md

@@ -11,6 +11,7 @@ Instead, we'd like to remove only the first `<Thing>` component and its DOM node
 To do that, we specify a unique identifier (or "key") for the `each` block:
 
 ```svelte
+/// file: App.svelte
 {#each things as thing (+++thing.id+++)}
 	<Thing name={thing.name}/>
 {/each}

content/tutorial/01-svelte/04-logic/06-await-blocks/README.md

@@ -5,6 +5,7 @@ title: Await blocks
 Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
 
 ```svelte
+/// file: App.svelte
 {#await promise}
 	<p>...waiting</p>
 {:then number}
@@ -19,6 +20,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
 
 ```svelte
+/// file: App.svelte
 {#await promise then number}
 	<p>The number is {number}</p>
 {/await}

content/tutorial/01-svelte/05-events/01-dom-events/README.md

@@ -5,6 +5,7 @@ title: DOM events
 As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
 
 ```svelte
+/// file: App.svelte
 <div +++on:mousemove={handleMousemove}+++>
 	The mouse position is {m.x} x {m.y}
 </div>

content/tutorial/01-svelte/05-events/02-inline-handlers/README.md

@@ -5,6 +5,7 @@ title: Inline handlers
 You can also declare event handlers inline:
 
 ```svelte
+/// file: App.svelte
 <script>
 	let m = { x: 0, y: 0 };
 

content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

@@ -5,6 +5,7 @@ title: Event modifiers
 DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
 
 ```svelte
+/// file: App.svelte
 <script>
 	function handleClick() {
 		alert(+++'no more alerts'+++)

content/tutorial/01-svelte/05-events/04-component-events/README.md

@@ -5,6 +5,7 @@ title: Component events
 Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
 
 ```svelte
+/// file: Inner.svelte
 <script>
 	+++import { createEventDispatcher } from 'svelte';+++
 
@@ -23,6 +24,7 @@ Components can also dispatch events. To do so, they must create an event dispatc
 Then, add an `on:message` handler in `App.svelte`:
 
 ```svelte
+/// file: App.svelte
 <Inner +++on:message={handleMessage}+++ />
 ```
 

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -9,6 +9,7 @@ In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previo
 One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 
 ```svelte
+/// file: Outer.svelte
 <script>
 	import Inner from './Inner.svelte';
 	import { createEventDispatcher } from 'svelte';
@@ -26,6 +27,7 @@ One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer
 But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
 
 ```svelte
+/// file: Outer.svelte
 <script>
 	import Inner from './Inner.svelte';
 </script>

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md

@@ -7,6 +7,7 @@ Event forwarding works for DOM events too.
 We want to get notified of clicks on our `<BigRedButton>` — to do that, we just need to forward `click` events on the `<button>` element in `BigRedButton.svelte`:
 
 ```svelte
+/// file: BigRedButton.svelte
 <button +++on:click+++>
 	Push
 </button>

content/tutorial/01-svelte/06-bindings/01-text-inputs/README.md

@@ -9,6 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
 Instead, we can use the `bind:value` directive:
 
 ```svelte
+/// file: App.svelte
 <input bind:value={name}>
 ```
 

content/tutorial/01-svelte/06-bindings/02-numeric-inputs/README.md

@@ -7,6 +7,7 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
 With `bind:value`, Svelte takes care of it for you:
 
 ```svelte
+/// file: App.svelte
 <input type=number bind:value={a} min=0 max=10>
 <input type=range bind:value={a} min=0 max=10>
 ```

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

@@ -5,5 +5,6 @@ title: Checkbox inputs
 Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
 
 ```svelte
+/// file: App.svelte
 <input type=checkbox bind:checked={yes}>
 ```

content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md

@@ -7,18 +7,21 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```svelte
+/// file: App.svelte
 <input type=radio bind:group={scoops} name="scoops" value={1}>
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
 
 ```js
+/// file: App.svelte
 let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 ```
 
 ...then replace the second section:
 
 ```svelte
+/// file: App.svelte
 <h2>Flavours</h2>
 
 {#each menu as flavour}

content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md

@@ -5,12 +5,14 @@ title: Textarea inputs
 The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
 
 ```svelte
+/// file: App.svelte
 <textarea bind:value={value}></textarea>
 ```
 
 In cases like these, where the names match, we can also use a shorthand form:
 
 ```svelte
+/// file: App.svelte
 <textarea bind:value></textarea>
 ```
 

content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md

@@ -5,6 +5,7 @@ title: Select bindings
 We can also use `bind:value` with `<select>` elements. Update line 32:
 
 ```svelte
+/// file: App.svelte
 <select bind:value={selected} on:change="{() => answer = ''}">
 ```
 

content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md

@@ -7,6 +7,7 @@ A select can have a `multiple` attribute, in which case it will populate an arra
 Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
 
 ```svelte
+/// file: App.svelte
 <h2>Flavours</h2>
 
 <select multiple bind:value={flavours}>

content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md

@@ -11,6 +11,7 @@ The one you'll use most frequently is `onMount`, which runs after the component
 We'll add an `onMount` handler that loads some data over the network:
 
 ```svelte
+/// file: App.svelte
 <script>
 	import { onMount } from 'svelte';