sync docs from kit and svelte repos (#550)

Co-authored-by: Ben McCann <[email protected]>

Author: Rich-Harris

apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md

@@ -4,19 +4,19 @@ title: Introduction
 
 ## Before we begin
 
-> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](https://learn.svelte.dev).
+> [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](/tutorial/kit).
 >
 > If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
 
 ## What is SvelteKit?
 
-SvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](https://svelte.dev/). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
+SvelteKit is a framework for rapidly developing robust, performant web applications using [Svelte](../svelte). If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
 
 To learn more about the kinds of applications you can build with SvelteKit, see the [FAQ](faq#What-can-I-make-with-SvelteKit).
 
 ## What is Svelte?
 
-In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](https://svelte.dev/tutorial).
+In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page. You don't need to know Svelte to understand the rest of this guide, but it will help. If you'd like to learn more, check out [the Svelte tutorial](/tutorial).
 
 ## SvelteKit vs Svelte
 

apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md

@@ -15,7 +15,7 @@ The first command will scaffold a new project in the `my-app` directory asking y
 
 There are two basic concepts:
 
-- Each page of your app is a [Svelte](https://svelte.dev) component
+- Each page of your app is a [Svelte](../svelte) component
 - You create pages by adding files to the `src/routes` directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over
 
 Try editing the files to get a feel for how everything works.

apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md

@@ -384,7 +384,7 @@ In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `Layo
 
 If you're using VS Code or any IDE that supports the language server protocol and TypeScript plugins then you can omit these types _entirely_! Svelte's IDE tooling will insert the correct types for you, so you'll get type checking without writing them yourself. It also works with our command line tool `svelte-check`.
 
-You can read more about omitting `$types` in our [blog post](https://svelte.dev/blog/zero-config-type-safety) about it.
+You can read more about omitting `$types` in our [blog post](/blog/zero-config-type-safety) about it.
 
 ## Other files
 
@@ -394,6 +394,6 @@ If components and modules are needed by multiple routes, it's a good idea to put
 
 ## Further reading
 
-- [Tutorial: Routing](https://learn.svelte.dev/tutorial/pages)
-- [Tutorial: API routes](https://learn.svelte.dev/tutorial/get-handlers)
+- [Tutorial: Routing](/tutorial/kit/pages)
+- [Tutorial: API routes](/tutorial/kit/get-handlers)
 - [Docs: Advanced routing](advanced-routing)

apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md

@@ -34,7 +34,7 @@ export function load({ params }) {
 
 Thanks to the generated `$types` module, we get full type safety.
 
-A `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](https://kit.svelte.dev/docs/page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.
+A `load` function in a `+page.js` file runs both on the server and in the browser (unless combined with `export const ssr = false`, in which case it will [only run in the browser](page-options#ssr)). If your `load` function should _always_ run on the server (because it uses private environment variables, for example, or accesses a database) then it would go in a `+page.server.js` instead.
 
 A more realistic version of your blog post's `load` function, that only runs on the server and pulls data from a database, might look like this:
 
@@ -120,8 +120,8 @@ Data returned from layout `load` functions is available to child `+layout.svelte
 
 +++	// we can access `data.posts` because it's returned from
 	// the parent layout `load` function
-	$: index = data.posts.findIndex(post => post.slug === $page.params.slug);
-	$: next = data.posts[index - 1];+++
+	let index = $derived(data.posts.findIndex(post => post.slug === $page.params.slug));
+	let next = $derived(data.posts[index - 1];)+++
 </script>
 
 <h1>{data.post.title}</h1>
@@ -675,7 +675,7 @@ To summarize, a `load` function will rerun in the following situations:
 
 `params` and `url` can change in response to a `<a href="..">` link click, a [`<form>` interaction](form-actions#GET-vs-POST), a [`goto`]($app-navigation#goto) invocation, or a [`redirect`](@sveltejs-kit#redirect).
 
-Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block.
+Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`]($app-navigation#afterNavigate) callback, and/or wrap your component in a [`{#key ...}`](../svelte/key) block.
 
 ## Implications for authentication
 
@@ -693,6 +693,6 @@ Putting an auth guard in `+layout.server.js` requires all child pages to call `a
 
 ## Further reading
 
-- [Tutorial: Loading data](https://learn.svelte.dev/tutorial/page-data)
-- [Tutorial: Errors and redirects](https://learn.svelte.dev/tutorial/error-basics)
-- [Tutorial: Advanced loading](https://learn.svelte.dev/tutorial/await-parent)
+- [Tutorial: Loading data](/tutorial/kit/page-data)
+- [Tutorial: Errors and redirects](/tutorial/kit/error-basics)
+- [Tutorial: Advanced loading](/tutorial/kit/await-parent)

apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

@@ -518,4 +518,4 @@ Submitting this form will navigate to `/search?q=...` and invoke your load funct
 
 ## Further reading
 
-- [Tutorial: Forms](https://learn.svelte.dev/tutorial/the-form-element)
+- [Tutorial: Forms](/tutorial/kit/the-form-element)

apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md

@@ -219,4 +219,4 @@ export const config = {
 
 ## Further reading
 
-- [Tutorial: Page options](https://learn.svelte.dev/tutorial/page-options)
+- [Tutorial: Page options](/tutorial/kit/page-options)

apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md

@@ -82,7 +82,7 @@ If you're not using SSR, then there's no risk of accidentally exposing one user'
 
 ## Using stores with context
 
-You might wonder how we're able to use `$page.data` and other [app stores]($app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](https://learn.svelte.dev/tutorial/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
+You might wonder how we're able to use `$page.data` and other [app stores]($app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](/tutorial/svelte/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
 
 ```svelte
 <!--- file: src/routes/+layout.svelte --->
@@ -143,16 +143,16 @@ When you navigate around your application, SvelteKit reuses existing layout and
 
 ...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the layout, page and any other components within to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will update (as it would with any other Svelte component) and, because the code isn't rerunning, lifecycle methods like `onMount` and `onDestroy` won't rerun and `estimatedReadingTime` won't be recalculated.
 
-Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):
+Instead, we need to make the value [_reactive_](/tutorial/svelte/state):
 
 ```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-+++	$: wordCount = data.content.split(' ').length;
-	$: estimatedReadingTime = wordCount / 250;+++
++++	let wordCount = $state(data.content.split(' ').length);
+	let estimatedReadingTime = $derived(wordCount / 250);+++
 </script>
 ```
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/30-adapter-auto.md

@@ -9,7 +9,7 @@ When you create a new SvelteKit project with `npx sv create`, it installs [`adap
 - [`@sveltejs/adapter-vercel`](adapter-vercel) for [Vercel](https://vercel.com/)
 - [`svelte-adapter-azure-swa`](https://github.com/geoffrich/svelte-adapter-azure-swa) for [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
 - [`svelte-kit-sst`](https://github.com/sst/sst/tree/master/packages/svelte-kit-sst) for [AWS via SST](https://sst.dev/docs/start/aws/svelte)
-- [`@sveltejs/adapter-node`](https://kit.svelte.dev/docs/adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
+- [`@sveltejs/adapter-node`](adapter-node) for [Google Cloud Run](https://cloud.google.com/run)
 
 It's recommended to install the appropriate adapter to your `devDependencies` once you've settled on a target environment, since this will add the adapter to your lockfile and slightly improve install times on CI.
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

@@ -108,11 +108,11 @@ For testing the build, you should use [wrangler](https://developers.cloudflare.c
 
 ## Notes
 
-Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](https://kit.svelte.dev/docs/routing#server) in your SvelteKit app.
+Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](routing#server) in your SvelteKit app.
 
 The `_headers` and `_redirects` files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
 
-However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](https://kit.svelte.dev/docs/routing#server) or with the [`handle`](https://kit.svelte.dev/docs/hooks#Server-hooks-handle) hook.
+However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
 
 ## Troubleshooting
 
@@ -122,4 +122,4 @@ You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit s
 
 ### Accessing the file system
 
-You can't use `fs` in Cloudflare Workers — you must [prerender](https://kit.svelte.dev/docs/page-options#prerender) the routes in question.
+You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

@@ -135,4 +135,4 @@ When deploying to workers, the server generated by SvelteKit is bundled into a s
 
 ### Accessing the file system
 
-You can't use `fs` in Cloudflare Workers — you must [prerender](https://kit.svelte.dev/docs/page-options#prerender) the routes in question.
+You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.