doc-link parser / links for non-kit sections

Author: braebo

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

@@ -2,7 +2,7 @@
 title: Your first component
 ---
 
-In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component.
+In Svelte, an application is composed from one or more [_components_]($docs#component-format). A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component.
 
 ## Adding data
 

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/app-a/static/image.gif

@@ -2,7 +2,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:
+Just like in HTML, you can add a [`<style>`]($docs#component-format-style) tag to your component. Let's add some styles to the `<p>` element:
 
 ```svelte
 <p>This is a paragraph.</p>

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

@@ -6,7 +6,7 @@ Ordinarily, strings are inserted as plain text, meaning that characters like `<`
 
 But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
 
-In Svelte, you do this with the special `{@html ...}` tag:
+In Svelte, you do this with the special [`{@html ...}`]($docs#template-syntax-html) tag:
 
 ```svelte
 <p>{+++@html+++ string}</p>

content/tutorial/01-svelte/01-introduction/06-html-tags/README.md

@@ -2,7 +2,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.
+At the heart of Svelte is a powerful system of [_reactivity_]($docs#component-format-script-2-assignments-are-reactive) 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)):
 

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

@@ -4,7 +4,7 @@ title: Declarations
 
 Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from _other_ parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
 
-For these, we have _reactive declarations_. They look like this:
+For these, we have [_reactive declarations_]($docs#component-format-script-3-$-marks-a-statement-as-reactive). They look like this:
 
 ```js
 let count = 0;

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

@@ -2,7 +2,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:
+We're not limited to declaring reactive _values_ — we can also run arbitrary [_statements_ reactively]($docs#component-format-script-3-$-marks-a-statement-as-reactive). For example, we can log the value of `count` whenever it changes:
 
 ```js
 let count = 0;

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

@@ -4,7 +4,7 @@ title: Declaring props
 
 So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.
 
-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:
+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_]($docs#component-format-script-1-export-creates-a-component-prop), generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
 
 ```svelte
 <script>

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

@@ -4,7 +4,7 @@ title: If blocks
 
 HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
 
-To conditionally render some markup, we wrap it in an `if` block:
+To conditionally render some markup, we wrap it in an [`if` block]($docs#template-syntax-if):
 
 ```svelte
 +++{#if user.loggedIn}+++

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

@@ -2,7 +2,7 @@
 title: Each blocks
 ---
 
-If you need to loop over lists of data, use an `each` block:
+If you need to loop over lists of data, use an [`each` block]($docs#template-syntax-each):
 
 ```svelte
 <ul>

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

@@ -2,7 +2,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:
+Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to [_await_]($docs#template-syntax-await) the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
 
 ```svelte
 {#await promise}

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

@@ -2,7 +2,7 @@
 title: DOM events
 ---
 
-As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
+As we've briefly seen already, you can listen to any event on an element with the `on:` [directive]($docs#template-syntax-element-directives):
 
 ```svelte
 <div on:mousemove={handleMousemove}>

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

@@ -2,7 +2,7 @@
 title: Inline handlers
 ---
 
-You can also declare event handlers inline:
+You can also declare [event handlers]($docs#template-syntax-element-directives) inline:
 
 ```svelte
 <div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">

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

@@ -2,7 +2,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:
+DOM [event handlers]($docs#template-syntax-element-directives) can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
 
 ```svelte
 <script>

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

@@ -2,7 +2,7 @@
 title: Component events
 ---
 
-Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
+Components can also dispatch events. To do so, they must create an [event dispatcher]($docs#run-time-svelte-createeventdispatcher). Update `Inner.svelte`:
 
 ```svelte
 <script>

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

@@ -2,11 +2,11 @@
 title: Event forwarding
 ---
 
-Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
+Unlike DOM events, [component events]($docs#template-syntax-component-directives-on-eventname) don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
 
 In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
 
-One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+One way we could solve the problem is adding [`createEventDispatcher`]($docs#run-time-svelte-createeventdispatcher) to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 
 ```svelte
 <script>

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

@@ -6,7 +6,7 @@ As a general rule, data flow in Svelte is _top down_ — a parent component can
 
 Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
 
-Instead, we can use the `bind:value` directive:
+Instead, we can use the [`bind:value` directive](docs#template-syntax-element-directives-bind-property):
 
 ```svelte
 <input bind:value={name}>

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

@@ -2,9 +2,9 @@
 title: Group inputs
 ---
 
-If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+If you have multiple inputs relating to the same value, you can use [`bind:group`](docs#template-syntax-element-directives-bind-group) along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
 
-Add `bind:group` to each input:
+Add [`bind:group`](docs#template-syntax-element-directives-bind-group) to each input:
 
 ```svelte
 <input type=radio bind:group={scoops} name="scoops" value={1}>

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

@@ -2,7 +2,7 @@
 title: Select bindings
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 20:
+We can also use [`bind:value` with `<select>`]($docs#template-syntax-element-directives-bind-property-binding-select-value) elements. Update line 20:
 
 ```svelte
 <select bind:value={selected} on:change="{() => answer = ''}">

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

@@ -4,7 +4,7 @@ title: onMount
 
 Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
+The one you'll use most frequently is [`onMount`]($docs#run-time-svelte-onmount), which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
 
 We'll add an `onMount` handler that loads some data over the network:
 

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

@@ -2,7 +2,7 @@
 title: onDestroy
 ---
 
-To run code when your component is destroyed, use `onDestroy`.
+To run code when your component is destroyed, use [`onDestroy`]($docs#run-time-svelte-ondestroy).
 
 For example, we can add a `setInterval` function when our component initialises, and clean it up when it's no longer relevant. Doing so prevents memory leaks.
 

content/tutorial/01-svelte/07-lifecycle/02-ondestroy/README.md

@@ -2,7 +2,7 @@
 title: beforeUpdate and afterUpdate
 ---
 
-The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
+The [`beforeUpdate`]($docs#run-time-svelte-beforeupdate) function schedules work to happen immediately before the DOM is updated. [`afterUpdate`]($docs#run-time-svelte-afterupdate) is its counterpart, used for running code once the DOM is in sync with your data.
 
 Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
 

content/tutorial/01-svelte/07-lifecycle/03-update/README.md

@@ -2,7 +2,7 @@
 title: tick
 ---
 
-The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
+The [`tick`]($docs#run-time-svelte-tick) function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
 
 When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
 

content/tutorial/01-svelte/07-lifecycle/04-tick/README.md

@@ -4,9 +4,9 @@ title: Writable stores
 
 Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
 
-In Svelte, we do this with _stores_. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback.
+In Svelte, we do this with [_stores_]($docs#run-time-svelte-store). A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback.
 
-Click the `stores.js` tab to see the definition of `count`. It's a _writable_ store, which means it has `set` and `update` methods in addition to `subscribe`.
+Click the `stores.js` tab to see the definition of `count`. It's a [_writable_]($docs#run-time-svelte-store-writable) store, which means it has `set` and `update` methods in addition to `subscribe`.
 
 Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
 

content/tutorial/01-svelte/08-stores/01-writable-stores/README.md

@@ -14,7 +14,7 @@ const unsubscribe = count.subscribe((value) => {
 
 > Calling a `subscribe` method returns an `unsubscribe` function.
 
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
+You now declared `unsubscribe`, but it still needs to be called, for example through the [`onDestroy`]($docs#run-time-svelte-ondestroy) [lifecycle hook](/tutorial/ondestroy):
 
 ```svelte
 <script>
@@ -36,7 +36,7 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr
 <h1>The count is {count_value}</h1>
 ```
 
-It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:
+It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by [prefixing the store name with `$`]($docs#component-format-script-4-prefix-stores-with-$-to-access-their-values):
 
 ```svelte
 <script>

content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md

@@ -2,7 +2,7 @@
 title: Readable stores
 ---
 
-Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have _readable_ stores.
+Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have [_readable_  stores]($docs#run-time-svelte-store-readable).
 
 Click over to the `stores.js` tab. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes.
 

content/tutorial/01-svelte/08-stores/03-readable-stores/README.md

@@ -2,7 +2,7 @@
 title: Derived stores
 ---
 
-You can create a store whose value is based on the value of one or more _other_ stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open:
+You can create a store whose value is based on the value of one or more _other_ stores with [`derived`]($docs#run-time-svelte-store-derived). Building on our previous example, we can create a store that derives the time the page has been open:
 
 ```js
 export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));

content/tutorial/01-svelte/08-stores/04-derived-stores/README.md

@@ -2,7 +2,7 @@
 title: Custom stores
 ---
 
-As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic.
+As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create [custom stores]($docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) with domain-specific logic.
 
 For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`:
 

content/tutorial/01-svelte/08-stores/05-custom-stores/README.md

@@ -2,11 +2,11 @@
 title: Tweens
 ---
 
-Now that we've covered the basics of SvelteKit, it's time to learn some advanced Svelte techniques, starting with _motion_.
+Now that we've covered the basics of SvelteKit, it's time to learn some advanced Svelte techniques, starting with [_motion_]($docs#run-time-svelte-motion).
 
 Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
 
-Let's start by changing the `progress` store to a `tweened` value:
+Let's start by changing the `progress` store to a [`tweened`]($docs#run-time-svelte-motion-tweened) value:
 
 ```svelte
 <script>
@@ -16,7 +16,7 @@ Let's start by changing the `progress` store to a `tweened` value:
 </script>
 ```
 
-Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
+Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an [easing]($docs#run-time-svelte-easing) function:
 
 ```svelte
 <script>
@@ -30,9 +30,9 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 </script>
 ```
 
-> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
+> The [`svelte/easing`]($docs#run-time-svelte-easing) module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
 
-The full set of options available to `tweened`:
+The full set of options available to [`tweened`]($docs#run-time-svelte-motion-tweened):
 
 - `delay` — milliseconds before the tween starts
 - `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value

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

@@ -2,7 +2,7 @@
 title: Springs
 ---
 
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+The [`spring`]($docs#run-time-svelte-motion-spring) function is an alternative to [`tweened`]($docs#run-time-svelte-motion-tweened) that often works better for values that are frequently changing.
 
 In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
 

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

@@ -2,9 +2,9 @@
 title: The transition directive
 ---
 
-We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
+We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the [`transition`]($docs#template-syntax-element-directives-transition-fn) directive.
 
-First, import the `fade` function from `svelte/transition`...
+First, import the [`fade`]($docs#run-time-svelte-transition-fade) function from [`svelte/transition`]($docs#run-time-svelte-transition)...
 
 ```svelte
 <script>

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

@@ -2,7 +2,7 @@
 title: Adding parameters
 ---
 
-Transition functions can accept parameters. Replace the `fade` transition with `fly`...
+Transition functions can accept [parameters]($docs#template-syntax-element-directives-transition-fn-transition-parameters). Replace the [`fade`]($docs#run-time-svelte-transition-fade) transition with [`fly`]($docs#run-time-svelte-transition-fly)...
 
 ```svelte
 <script>