From 1e5b7f67ed685cb780a9e06f5c80130f9b73718e Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Sat, 1 Apr 2023 01:28:16 +0530
Subject: [PATCH] Modernize docs links

---
 .../01-getting-started/03-component-format.md | 12 +++++------
 .../04-element-directives.md                  |  6 +++---
 .../05-component-directives.md                |  2 +-
 .../02-template-syntax/06-special-elements.md |  8 ++++----
 site/content/docs/03-runtime/01-svelte.md     |  4 ++--
 .../docs/03-runtime/02-svelte-store.md        |  6 +++---
 .../docs/03-runtime/03-svelte-motion.md       |  4 ++--
 .../docs/03-runtime/04-svelte-transition.md   | 20 +++++++++----------
 .../docs/03-runtime/05-svelte-animate.md      |  4 ++--
 .../02-client-side-component-api.md           |  2 +-
 .../03-server-side-component-api.md           |  2 +-
 .../04-custom-elements-api.md                 |  4 ++--
 .../01-introduction/01-basics/text.md         |  2 +-
 .../01-introduction/06-making-an-app/text.md  |  2 +-
 .../08-stores/04-derived-stores/text.md       |  2 +-
 .../tutorial/09-motion/02-spring/text.md      |  2 +-
 .../19-next-steps/01-congratulations/text.md  |  2 +-
 17 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/site/content/docs/01-getting-started/03-component-format.md b/site/content/docs/01-getting-started/03-component-format.md
index 7e678495ff..7a3b409550 100644
--- a/site/content/docs/01-getting-started/03-component-format.md
+++ b/site/content/docs/01-getting-started/03-component-format.md
@@ -24,7 +24,7 @@ A `<script>` block contains JavaScript that runs when a component instance is cr
 
 ### 1. `export` creates a component prop
 
-Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs/template-syntax#attributes-and-props) for more information).
+Svelte uses the `export` keyword to mark a variable declaration as a _property_ or _prop_, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs/template-syntax-basics#attributes-and-props) for more information).
 
 ```svelte
 <script>
@@ -38,7 +38,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a _property_
 
 You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
 
-In development mode (see the [compiler options](/docs/compile-time#svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+In development mode (see the [compiler options](/docs/svelte-compiler#svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 
 ```svelte
 <script>
@@ -63,7 +63,7 @@ If you export a `const`, `class` or `function`, it is readonly from outside the
 </script>
 ```
 
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/template-syntax#component-directives-bind-this).
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
 
 You can use reserved words as prop names.
 
@@ -203,7 +203,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 
 ### 4. Prefix stores with `$` to access their values
 
-A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/run-time#svelte-store) contains minimal store implementations which fulfil this contract.
+A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/svelte-store) contains minimal store implementations which fulfil this contract.
 
 Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
 
@@ -234,7 +234,7 @@ Local variables (that do not represent store values) must _not_ have a `$` prefi
 store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
 ```
 
-You can create your own stores without relying on [`svelte/store`](/docs/run-time#svelte-store), by implementing the _store contract_:
+You can create your own stores without relying on [`svelte/store`](/docs/svelte-store), by implementing the _store contract_:
 
 1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
 2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
@@ -250,7 +250,7 @@ You can `export` bindings from this block, and they will become exports of the c
 
 You cannot `export default`, since the default export is the component itself.
 
-> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs/run-time#svelte-store).
+> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs/svelte-store).
 
 ```svelte
 <script context="module">
diff --git a/site/content/docs/02-template-syntax/04-element-directives.md b/site/content/docs/02-template-syntax/04-element-directives.md
index 9b1b1b3841..1e56f88290 100644
--- a/site/content/docs/02-template-syntax/04-element-directives.md
+++ b/site/content/docs/02-template-syntax/04-element-directives.md
@@ -479,7 +479,7 @@ The `transition:` directive indicates a _bidirectional_ transition, which means
 {/if}
 ```
 
-> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/run-time#client-side-component-api).
+> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/client-side-component-api).
 
 ## Transition parameters
 
@@ -677,9 +677,9 @@ DOMRect {
 }
 ```
 
-An animation is triggered when the contents of a [keyed each block](/docs/template-syntax#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
+An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
 
-Animations can be used with Svelte's [built-in animation functions](/docs/run-time#svelte-animate) or [custom animation functions](/docs/template-syntax#element-directives-animate-fn-custom-animation-functions).
+Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-transition-functions).
 
 ```svelte
 <!-- When `list` is reordered the animation will run-->
diff --git a/site/content/docs/02-template-syntax/05-component-directives.md b/site/content/docs/02-template-syntax/05-component-directives.md
index ba976ce877..757076deb6 100644
--- a/site/content/docs/02-template-syntax/05-component-directives.md
+++ b/site/content/docs/02-template-syntax/05-component-directives.md
@@ -8,7 +8,7 @@ title: Component Directives
 on:eventname={handler}
 ```
 
-Components can emit events using [createEventDispatcher](/docs/run-time#svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+Components can emit events using [createEventDispatcher](/docs/svelte#createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
 
 ```svelte
 <SomeComponent on:whatever={handler} />
diff --git a/site/content/docs/02-template-syntax/06-special-elements.md b/site/content/docs/02-template-syntax/06-special-elements.md
index 688495f1ad..5bf215a778 100644
--- a/site/content/docs/02-template-syntax/06-special-elements.md
+++ b/site/content/docs/02-template-syntax/06-special-elements.md
@@ -252,7 +252,7 @@ All except `scrollX` and `scrollY` are readonly.
 <svelte:document on:event={handler}/>
 ```
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/template-syntax#element-directives-use-action) on `document`.
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`.
 
 As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
 
@@ -269,7 +269,7 @@ As with `<svelte:window>`, this element may only appear the top level of your co
 <svelte:body on:event={handler} />
 ```
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/template-syntax#element-directives-use-action) on the `<body>` element.
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
 
 As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
 
@@ -299,7 +299,7 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
 <svelte:options option={value} />
 ```
 
-The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/compile-time#svelte-compile). The possible options are:
+The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#svelte-compile). The possible options are:
 
 - `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
 - `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
@@ -314,7 +314,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ## `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/template-syntax#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a [named slot](/docs/special-elements#slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
 ```svelte
 <!-- Widget.svelte -->
diff --git a/site/content/docs/03-runtime/01-svelte.md b/site/content/docs/03-runtime/01-svelte.md
index ae6728c246..b62bdfeed8 100644
--- a/site/content/docs/03-runtime/01-svelte.md
+++ b/site/content/docs/03-runtime/01-svelte.md
@@ -16,7 +16,7 @@ onMount(callback: () => () => void)
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
 
-`onMount` does not run inside a [server-side component](/docs/run-time#server-side-component-api).
+`onMount` does not run inside a [server-side component](/docs/server-side-component-api).
 
 ```svelte
 <script>
@@ -202,7 +202,7 @@ Retrieves the whole context map that belongs to the closest parent component. Mu
 dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) = createEventDispatcher();
 ```
 
-Creates an event dispatcher that can be used to dispatch [component events](/docs/template-syntax#component-directives-on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+Creates an event dispatcher that can be used to dispatch [component events](/docs/component-directives#on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
 Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
 
diff --git a/site/content/docs/03-runtime/02-svelte-store.md b/site/content/docs/03-runtime/02-svelte-store.md
index 9c38dcbd3f..32a1e98b0f 100644
--- a/site/content/docs/03-runtime/02-svelte-store.md
+++ b/site/content/docs/03-runtime/02-svelte-store.md
@@ -2,11 +2,11 @@
 title: 'svelte/store'
 ---
 
-The `svelte/store` module exports functions for creating [readable](/docs/run-time#svelte-store-readable), [writable](/docs/run-time#svelte-store-writable) and [derived](/docs/run-time#svelte-store-derived) stores.
+The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
 
-Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/component-format#script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/run-time#svelte-store-derived).
+Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/component-format#4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
 
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/component-format#script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/component-format#4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
 
 ## `writable`
 
diff --git a/site/content/docs/03-runtime/03-svelte-motion.md b/site/content/docs/03-runtime/03-svelte-motion.md
index 6b25442ade..4cab7725cc 100644
--- a/site/content/docs/03-runtime/03-svelte-motion.md
+++ b/site/content/docs/03-runtime/03-svelte-motion.md
@@ -14,7 +14,7 @@ Tweened stores update their values over a fixed duration. The following options
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
-- `easing` (`function`, default `t => t`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `t => t`) — an [easing function](/docs/svelte-easing)
 - `interpolate` (`function`) — see below
 
 `store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
@@ -100,7 +100,7 @@ size.damping = 0.4;
 size.precision = 0.005;
 ```
 
-As with [`tweened`](/docs/run-time#svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
+As with [`tweened`](/docs/svelte-motion#tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
 
 Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
 
diff --git a/site/content/docs/03-runtime/04-svelte-transition.md b/site/content/docs/03-runtime/04-svelte-transition.md
index 8fd3389a94..bc33c6ee17 100644
--- a/site/content/docs/03-runtime/04-svelte-transition.md
+++ b/site/content/docs/03-runtime/04-svelte-transition.md
@@ -2,7 +2,7 @@
 title: 'svelte/transition'
 ---
 
-The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/template-syntax#element-directives-transition-fn).
+The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/element-directives#transition-fn).
 
 ## `fade`
 
@@ -24,7 +24,7 @@ Animates the opacity of an element from 0 to the current opacity for `in` transi
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `linear`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
 
 You can see the `fade` transition in action in the [transition tutorial](/tutorial/transition).
 
@@ -58,7 +58,7 @@ Animates a `blur` filter alongside an element's opacity.
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
 - `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 - `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
 
@@ -92,7 +92,7 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
 - `x` (`number | string`, default 0) - the x offset to animate out to and in from
 - `y` (`number | string`, default 0) - the y offset to animate out to and in from
 - `opacity` (`number`, default 0) - the opacity value to animate out to and in from
@@ -135,7 +135,7 @@ Slides an element in and out.
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
 
 * `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
 
@@ -172,7 +172,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
 - `start` (`number`, default 0) - the scale value to animate out to and in from
 - `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
@@ -210,7 +210,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions
 - `delay` (`number`, default 0) — milliseconds before starting
 - `speed` (`number`, default undefined) - the speed of the animation, see below.
 - `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
 
 The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
 
@@ -236,14 +236,14 @@ The `speed` parameter is a means of setting the duration of the transition relat
 
 ## `crossfade`
 
-The `crossfade` function creates a pair of [transitions](/docs/template-syntax#element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 `crossfade` accepts the following parameters:
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/run-time#svelte-easing)
-- `fallback` (`function`) — A fallback [transition](/docs/template-syntax#element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
 
 ```svelte
 <script>
diff --git a/site/content/docs/03-runtime/05-svelte-animate.md b/site/content/docs/03-runtime/05-svelte-animate.md
index 3968ec92fd..b9d71cee0b 100644
--- a/site/content/docs/03-runtime/05-svelte-animate.md
+++ b/site/content/docs/03-runtime/05-svelte-animate.md
@@ -2,7 +2,7 @@
 title: 'svelte/animate'
 ---
 
-The `svelte/animate` module exports one function for use with Svelte [animations](/docs/template-syntax#element-directives-animate-fn).
+The `svelte/animate` module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
 
 ## `flip`
 
@@ -16,7 +16,7 @@ The `flip` function calculates the start and end position of an element and anim
 
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
-- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/run-time#svelte-easing)
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
 
 `duration` can be provided as either:
 
diff --git a/site/content/docs/04-compiler-and-api/02-client-side-component-api.md b/site/content/docs/04-compiler-and-api/02-client-side-component-api.md
index a6584b48f6..24e38bda93 100644
--- a/site/content/docs/04-compiler-and-api/02-client-side-component-api.md
+++ b/site/content/docs/04-compiler-and-api/02-client-side-component-api.md
@@ -36,7 +36,7 @@ The following initialisation options can be provided:
 
 Existing children of `target` are left where they are.
 
-The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/compile-time#svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
+The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
 
 Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
 
diff --git a/site/content/docs/04-compiler-and-api/03-server-side-component-api.md b/site/content/docs/04-compiler-and-api/03-server-side-component-api.md
index fb8fefb49f..eb284b3714 100644
--- a/site/content/docs/04-compiler-and-api/03-server-side-component-api.md
+++ b/site/content/docs/04-compiler-and-api/03-server-side-component-api.md
@@ -10,7 +10,7 @@ Unlike client-side components, server-side components don't have a lifespan afte
 
 A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
 
-You can import a Svelte component directly into Node using [`svelte/register`](/docs/run-time#svelte-register).
+You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
 
 ```js
 require('svelte/register');
diff --git a/site/content/docs/04-compiler-and-api/04-custom-elements-api.md b/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
index d209b2591b..3a6d9093be 100644
--- a/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
+++ b/site/content/docs/04-compiler-and-api/04-custom-elements-api.md
@@ -2,7 +2,7 @@
 title: 'Custom Elements API'
 ---
 
-Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs/template-syntax#svelte-options).
+Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs/special-elements#svelte-options).
 
 ```svelte
 <svelte:options tag="my-element" />
@@ -33,7 +33,7 @@ document.body.innerHTML = `
 `;
 ```
 
-By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/template-syntax#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs/template-syntax-basics#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
 
 To prevent this, add `accessors={false}` to `<svelte:options>`.
 
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
index c14b3a0ec2..3846be53e4 100644
--- a/site/content/tutorial/01-introduction/01-basics/text.md
+++ b/site/content/tutorial/01-introduction/01-basics/text.md
@@ -4,7 +4,7 @@ title: Basics
 
 Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.
 
-You can also consult the [API docs](/docs) and the [examples](/examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](/docs/getting-started).
+You can also consult the [API docs](/docs) and the [examples](/examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](/docs/introduction).
 
 ## What is Svelte?
 
diff --git a/site/content/tutorial/01-introduction/06-making-an-app/text.md b/site/content/tutorial/01-introduction/06-making-an-app/text.md
index b2f4e36ea5..89788ea580 100644
--- a/site/content/tutorial/01-introduction/06-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/06-making-an-app/text.md
@@ -34,4 +34,4 @@ const app = new App({
 });
 ```
 
-You can then interact with `app` using the [component API](/docs/run-time#client-side-component-api) if you need to.
+You can then interact with `app` using the [component API](/docs/client-side-component-api) if you need to.
diff --git a/site/content/tutorial/08-stores/04-derived-stores/text.md b/site/content/tutorial/08-stores/04-derived-stores/text.md
index 33303e27de..45078abc5c 100644
--- a/site/content/tutorial/08-stores/04-derived-stores/text.md
+++ b/site/content/tutorial/08-stores/04-derived-stores/text.md
@@ -8,4 +8,4 @@ You can create a store whose value is based on the value of one or more _other_
 export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
 ```
 
-> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs/run-time#svelte-store-derived) for more information.
+> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs/svelte-store#derived) for more information.
diff --git a/site/content/tutorial/09-motion/02-spring/text.md b/site/content/tutorial/09-motion/02-spring/text.md
index c1fd7b0f04..188151e9fc 100644
--- a/site/content/tutorial/09-motion/02-spring/text.md
+++ b/site/content/tutorial/09-motion/02-spring/text.md
@@ -29,4 +29,4 @@ let coords = spring(
 
 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.
 
-Consult the [API reference](/docs/run-time#svelte-motion-spring) for more information.
+Consult the [API reference](/docs/svelte-motion#spring) for more information.
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/text.md b/site/content/tutorial/19-next-steps/01-congratulations/text.md
index 78cf9af568..5df63d9f6f 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/text.md
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -4,7 +4,7 @@ title: Congratulations!
 
 You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](/docs), [Examples](/examples) and [Blog](/blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
 
-To get set up in your local development environment, check out [the quickstart guide](/docs/getting-started).
+To get set up in your local development environment, check out [the quickstart guide](/docs/introduction).
 
 If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).