Merge pull request #2 from tomoam/sync-fork

2024-10-24 迄の更新に追従

Author: tomoam

.github/workflows/release.yml

@@ -5,4 +5,5 @@ dist
 pnpm-lock.yaml
 .vercel
 _generated.md
-land-110m.json
+land-110m.json
+/apps/svelte.dev/content/docs

.prettierignore

@@ -8,12 +8,15 @@
 		},
 		{
 			"source": "/docs/modules",
-			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit",
-			"permanent": true
+			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit"
 		},
 		{
 			"source": "/docs/types",
-			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit",
+			"destination": "https://svelte.dev/docs/kit/@sveltejs-kit"
+		},
+		{
+			"source": "/docs",
+			"destination": "https://svelte.dev/docs/kit",
 			"permanent": true
 		},
 		{

apps/kit.svelte.dev/vercel.json

@@ -4,19 +4,19 @@ title: イントロダクション
 
 ## Before we begin
 
-> [!NOTE] Svelte や SvelteKit が初めてなら、こちらの[インタラクティブなチュートリアル](/tutorial)をチェックしてみることをおすすめします。
+> [!NOTE] Svelte や SvelteKit が初めてなら、こちらの[インタラクティブなチュートリアル](/tutorial/kit)をチェックしてみることをおすすめします。
 >
 > 行き詰まったら、[Discord chatroom](https://svelte.dev/chat) でヘルプを求めてください。
 
 ## What is SvelteKit?
 
-SvelteKit は、[Svelte](https://svelte.dev/) を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです。もしあなたが React 界隈から来たのであれば、SvelteKit は Next に似ているものです。Vue 界隈から来たのであれば、Nuxt に似ています。
+SvelteKit は、[Svelte](../svelte) を使用して堅牢でハイパフォーマンスな web アプリケーションを迅速に開発するためのフレームワークです。もしあなたが React 界隈から来たのであれば、SvelteKit は Next に似ているものです。Vue 界隈から来たのであれば、Nuxt に似ています。
 
 SvelteKit で構築することのできるアプリケーションの種類については、[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/10-introduction.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/10-getting-started/20-creating-a-project.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/10-routing.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/20-load.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/30-form-actions.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/40-page-options.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>
 ```