sveltejs · Rich-Harris · Dec 6, 2022 · Dec 5, 2022 · Dec 5, 2022 · Dec 5, 2022
diff --git a/README.md b/README.md
@@ -21,3 +21,7 @@ The next steps depend on whether you want to run this locally in filesystem mode
 
 1. if an `.env` file exists, modify it so there's `PUBLIC_USE_FILESYSTEM=` in it
 2. Run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.
+
+## Creating new tutorials
+
+Tutorials live inside `content`. Each tutorial consists of a `README.md`, which is the text to the left, and `app-a` and `app-b` folders, which represent the initial and solved state. Files that stay the same can be omitted from `app-b`. Files are marked as deleted in `app-b` if they start with `__delete`. Folders that are marked as deleted in `app-b` if they contain a file named `__delete`. Folders that contain a file named `__hidden` are not visible in the file tree.
diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/README.md b/content/tutorial/02-sveltekit/02-routing/01-pages/README.md
@@ -10,22 +10,27 @@ In this app we currently have one route — `src/routes/+page.svelte`, which map
 
 Let's add a second route, `src/routes/about/+page.svelte`, which maps to `/about`:
 
-```diff
-src/routes/
-+├ about/
-+│ └ +page.svelte
-└ +page.svelte
-```
-
-Clicking the `about` link on the home page will now take you to the about page (which is empty right now).
-
-Let's add some content (including a link back to the homepage) to `src/routes/about/+page.svelte` :
-
 ```svelte
-+++<h1>About</h1>
+/// file: src/routes/about/+page.svelte
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<h1>About</h1>
 
 <p>This is the about page.</p>
-<p>Go to the <a href="/">home</a> page</p>+++
+
+<style>
+	nav {
+		display: flex;
+		gap: 1em;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>
 ```
 
+We can now navigate between `/` and `/about`.
+
 > Unlike traditional multi-page apps, navigating to `/about` and back updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation.
diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/app-a/src/routes/+page.svelte b/content/tutorial/02-sveltekit/02-routing/01-pages/app-a/src/routes/+page.svelte
@@ -1,4 +1,17 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
 <h1>Home</h1>
 
 <p>This is the home page.</p>
-<p>Go to the <a href="/about">about</a> page.</p>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1em;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>
diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/app-b/src/routes/+page.svelte b/content/tutorial/02-sveltekit/02-routing/01-pages/app-b/src/routes/+page.svelte
@@ -0,0 +1,17 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<h1>Home</h1>
+
+<p>This is the home page.</p>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1em;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>
diff --git a/content/tutorial/02-sveltekit/02-routing/01-pages/app-b/src/routes/about/+page.svelte b/content/tutorial/02-sveltekit/02-routing/01-pages/app-b/src/routes/about/+page.svelte
@@ -1,4 +1,17 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
 <h1>About</h1>
 
 <p>This is the about page.</p>
-<p>Go to the <a href="/">home</a> page</p>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1em;
+		padding: 1em;
+		background-color: #eee;
+	}
+</style>
diff --git a/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md
@@ -17,7 +17,8 @@ src/routes/
 ...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `<slot />` element is where the page content will be rendered:
 
 ```svelte
-+++<nav>
+/// file: src/routes/about/+page.svelte
+<nav>
 	<a href="/">Home</a>
 	<a href="/about">About</a>
 </nav>
@@ -31,7 +32,7 @@ src/routes/
 		padding: 1em;
 		background-color: #eee;
 	}
-</style>+++
+</style>
 ```
 
-> Layouts can also be nested
+A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth.
diff --git a/content/tutorial/02-sveltekit/02-routing/03-loading-data/README.md b/content/tutorial/02-sveltekit/02-routing/03-loading-data/README.md
diff --git a/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/+page.svelte b/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/+page.svelte
diff --git a/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/api/+server.js b/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-a/src/routes/api/+server.js
diff --git a/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.js b/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.js
diff --git a/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.svelte b/content/tutorial/02-sveltekit/02-routing/03-loading-data/app-b/src/routes/+page.svelte
diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/README.md b/content/tutorial/02-sveltekit/02-routing/03-params/README.md
@@ -0,0 +1,16 @@
+---
+title: Route parameters
+---
+
+To create routes with dynamic parameters, use square brackets around a valid variable name. For example, a file like `src/routes/blog/[slug]/+page.svelte` will create a route that matches `/blog/one`, `/blog/two`, `/blog/three` and so on.
+
+Let's create that file:
+
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
+<h1>Blog post</h1>
+```
+
+We can now navigate from the `/blog` page to individual blog posts. In the next section, we'll see how to load their content.
+
+> Multiple route parameters can appear _within_ one URL segment, as long as they are separated by at least one static character: `foo/[bar]x[baz]` is a valid route where `[bar]` and `[bar]` are dynamic parameters.
diff --git a/...rver-data/app-a/src/routes/+layout.svelte → ...03-params/app-a/src/routes/+layout.svelte b/...rver-data/app-a/src/routes/+layout.svelte → ...03-params/app-a/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
-<h1>TODO</h1>
-
 <nav>
 	<a href="/">Home</a>
-	<a href="/about">About</a>
+	<a href="/blog">Blog</a>
 </nav>
 
 <slot />
diff --git a/...layout-data/app-a/src/routes/+page.svelte → ...g/03-params/app-a/src/routes/+page.svelte b/...layout-data/app-a/src/routes/+page.svelte → ...g/03-params/app-a/src/routes/+page.svelte
diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/app-a/src/routes/blog/+page.svelte b/content/tutorial/02-sveltekit/02-routing/03-params/app-a/src/routes/blog/+page.svelte
@@ -0,0 +1,7 @@
+<h1>Blog</h1>
+
+<ul>
+	<li><a href="/blog/one">one</a></li>
+	<li><a href="/blog/two">two</a></li>
+	<li><a href="/blog/three">three</a></li>
+</ul>
diff --git a/...yout-data/app-a/src/routes/+layout.svelte → ...03-params/app-b/src/routes/+layout.svelte b/...yout-data/app-a/src/routes/+layout.svelte → ...03-params/app-b/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
-<h1>TODO</h1>
-
 <nav>
 	<a href="/">Home</a>
-	<a href="/about">About</a>
+	<a href="/blog">Blog</a>
 </nav>
 
 <slot />
diff --git a/...g/07-params/app-a/src/routes/+page.svelte → ...g/03-params/app-b/src/routes/+page.svelte b/...g/07-params/app-a/src/routes/+page.svelte → ...g/03-params/app-b/src/routes/+page.svelte
diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/app-b/src/routes/blog/+page.svelte b/content/tutorial/02-sveltekit/02-routing/03-params/app-b/src/routes/blog/+page.svelte
@@ -0,0 +1,7 @@
+<h1>Blog</h1>
+
+<ul>
+	<li><a href="/blog/one">one</a></li>
+	<li><a href="/blog/two">two</a></li>
+	<li><a href="/blog/three">three</a></li>
+</ul>
diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/app-b/src/routes/blog/[slug]/+page.svelte b/content/tutorial/02-sveltekit/02-routing/03-params/app-b/src/routes/blog/[slug]/+page.svelte
@@ -0,0 +1 @@
+<h1>Blog post</h1>
diff --git a/content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/README.md b/content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/README.md
diff --git a/...torial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/about/+page.svelte b/...torial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/about/+page.svelte
diff --git a/...t/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/api/+server.js b/...t/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-a/src/routes/api/+server.js
diff --git a/content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.js b/content/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.js
diff --git a/...t/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.svelte b/...t/tutorial/02-sveltekit/02-routing/04-loading-layout-data/app-b/src/routes/+layout.svelte