tutorial

.gitignore

@@ -6,8 +6,8 @@
 .env
 .env.*
 !.env.example
+!/content/tutorial/04-advanced-sveltekit/06-environment-variables/**/.env
 .apps
 .vercel
 /content/tutorial/common/.svelte-kit
-/content/tutorial/common/node_modules
-/content/tutorial/common/package-lock.json
+/content/tutorial/common/node_modules

.prettierrc

@@ -7,9 +7,15 @@
 		{
 			"files": ["content/**/*.svelte"],
 			"options": {
-				"printWidth": 50,
+				"printWidth": 70,
 				"requirePragma": true
 			}
+		},
+		{
+			"files": ["content/**/*.js"],
+			"options": {
+				"printWidth": 70
+			}
 		}
 	]
 }

README.md

@@ -24,4 +24,4 @@ The next steps depend on whether you want to run this locally in filesystem mode
 
 ## 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.
+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`.

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

@@ -2,8 +2,6 @@
 title: Welcome to Svelte
 ---
 
-> WARNING: this content is a work in progress and may be out of date. If you are learning Svelte, please refer to the [tutorial on svelte.dev](https://svelte.dev/tutorial) for now. If you are learning SvelteKit, refer to the [SvelteKit docs](https://kit.svelte.dev/docs).
-
 Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build fast, small web applications.
 
 You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`.
@@ -25,8 +23,8 @@ This tutorial is split into four main parts:
 - [Welcome to Svelte](/tutorial/welcome-to-svelte) (you are here)
 - [Introduction to SvelteKit](/tutorial/introducing-sveltekit)
 - [Advanced Svelte](/tutorial/tweens)
-- [Advanced SvelteKit](/tutorial/sandbox)
+- [Advanced SvelteKit](/tutorial/optional-params)
 
-Each section will present an exercise designed to illustrate a feature. Later sections build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
+Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
 If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.

content/tutorial/02-sveltekit/01-concepts/01-introducing-sveltekit/README.md

@@ -2,8 +2,6 @@
 title: What is SvelteKit?
 ---
 
-> WARNING: this content is a work in progress and is not up to date with breaking changes in the latest version of SvelteKit. For the latest information, refer to the [SvelteKit docs](https://kit.svelte.dev/docs).
-
 So far, we've been working on individual components, or groups of components, in isolation. But to build a complete app, you need more than just components.
 
 That's where SvelteKit comes in. Whereas Svelte is a _component framework_, SvelteKit is an _app framework_ (or 'metaframework', depending on who you ask) that solves the tricky problems of building something production-ready:
@@ -20,6 +18,6 @@ That's where SvelteKit comes in. Whereas Svelte is a _component framework_, Svel
 - Deploying to different hosting providers
 - ...and so on
 
-It also provides a world-class development experience powered by [Vite](https://vitejs.dev). SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all.
+SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all.
 
 If that sounds complicated, worry not: you've been using SvelteKit this whole time!

content/tutorial/02-sveltekit/01-concepts/03-server-and-client/README.md

@@ -8,4 +8,6 @@ A SvelteKit app can be thought of as two distinct entities working in tandem —
 
 'Client' refers to the JavaScript that loads in the browser.
 
-TODO
+SvelteKit makes the two communicate with each other seamlessly. On the initial page load, the server renders the HTML, meaning content is visible as quickly as possible. The client then takes over in a process called 'hydration', so that subsequent navigations happen without full page reloads. It will request additional code and data from the server as needed.
+
+> You can [adjust this behavior](https://kit.svelte.dev/docs/page-options) as needed. SvelteKit is very versatile!

content/tutorial/02-sveltekit/02-routing/01-pages/README.md

@@ -4,13 +4,23 @@ title: Pages
 
 SvelteKit uses filesystem-based routing, which means that the _routes_ of your app — in other words, what the app should do when a user navigates to a particular URL — are defined by the directories in your codebase.
 
-In this app we have two routes — `src/routes/+page.svelte`, which maps to `/`, and `src/routes/about/+page.svelte`, which maps to `/about`. Clicking the `about` link will take you from the home page to the about page.
+The routes are located within `src/routes`. Every directory within which contains a `+page.svelte` file creates a route in your app.
 
-> Unlike traditional multi-page apps, navigating to `/about` 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.
+In this app we currently have one route — `src/routes/+page.svelte`, which maps to `/`.
 
-Let's add a link in `src/routes/about/+page.svelte` back to the homepage:
+Let's add a second route, `src/routes/about/+page.svelte`, which maps to `/about`:
 
 ```svelte
+/// 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>
 ```
+
+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. (This behaviour can be [configured](https://kit.svelte.dev/docs/page-options).)

content/tutorial/02-sveltekit/02-routing/01-pages/app-a/src/routes/+page.svelte

@@ -1,4 +1,7 @@
-<h1>Home</h1>
+<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>

content/tutorial/02-sveltekit/02-routing/01-pages/app-b/src/routes/about/+page.svelte

@@ -1,4 +1,7 @@
-<h1>About</h1>
+<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>

content/tutorial/02-sveltekit/02-routing/02-layouts/README.md

@@ -0,0 +1,29 @@
+---
+title: Layouts
+---
+
+Different routes of your app will often share common UI. Instead of repeating it in each `+page.svelte` component, we can use a `+layout.svelte` component that applies to all routes in the same directory.
+
+In this app we have two routes, `src/routes/+page.svelte` and `src/routes/about/+page.svelte`, that contain the same navigation UI. Let's create a new file, `src/routes/+layout.svelte`...
+
+```diff
+src/routes/
+├ about/
+│ └ +page.svelte
++├ +layout.svelte
+└ +page.svelte
+```
+
+...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
+/// file: src/routes/about/+page.svelte
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />
+```
+
+A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth.

content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<p>This is the home page.</p>

content/tutorial/02-sveltekit/02-routing/01-pages/app-a/src/routes/about/+page.svelte → content/tutorial/02-sveltekit/02-routing/02-layouts/app-b/src/routes/about/+page.svelte

@@ -1,4 +1,2 @@
 <h1>About</h1>
-
 <p>This is the about page.</p>
-<p>Go to the home page</p>

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 chapter, 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.

content/tutorial/02-sveltekit/02-routing/03-params/app-a/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/blog">Blog</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/02-routing/03-params/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<p>Home Page</p>

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>

content/tutorial/02-sveltekit/02-routing/03-params/app-b/src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1 @@
+<h1>Blog post</h1>

content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md

@@ -0,0 +1,94 @@
+---
+title: Page data
+---
+
+At its core, SvelteKit's job boils down to three things:
+
+1. **Routing** — figure out which route matches an incoming request
+2. **Loading** — get the data needed by the route
+3. **Rendering** - generate some HTML (on the server) or update the DOM (in the browser)
+
+We've seen how routing and rendering work. Let's talk about the middle part — loading.
+
+Every page of your app can declare a `load` function in a `+page.server.js` file alongside the `+page.svelte` file. As the file name suggests, this module only ever runs on the server, including for client-side navigations. Let's add a `src/routes/blog/+page.server.js` file so that we can replace the hard-coded links in `src/routes/blog/+page.svelte` with actual blog post data:
+
+```js
+/// file: src/routes/blog/+page.server.js
+import { posts } from './data.js';
+
+export function load() {
+	return {
+		summaries: posts.map((post) => ({
+			slug: post.slug,
+			title: post.title
+		}))
+	};
+}
+```
+
+> For the sake of the tutorial, we're importing data from `src/routes/blog/data.js`. In a real app, you'd be more likely to load the data from a database or a CMS, but for now we'll do it like this.
+
+We can access this data in `src/routes/blog/+page.svelte` via the `data` prop:
+
+```svelte
++++<script>
+	export let data;
+</script>+++
+
+<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>---
++++	{#each data.summaries as { slug, title }}
+		<li><a href="/blog/{slug}">{title}</a></li>
+	{/each}+++
+</ul>
+```
+
+Now, let's do the same for the post page:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+import { posts } from '../data.js';
+
+export function load({ params }) {
+	const post = posts.find((post) => post.slug === params.slug);
+
+	return {
+		post
+	};
+}
+```
+
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
++++<script>
+	export let data;
+</script>+++
+
+---<h1>Blog post</h1>---
++++<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>+++
+```
+
+There's one last detail we need to take care of — the user might visit an invalid pathname like `/blog/nope`, in which case we'd like to respond with a 404 page:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
++++import { error } from '@sveltejs/kit';+++
+import { posts } from '../data.js';
+
+export function load({ params }) {
+	const post = posts.find((post) => post.slug === params.slug);
+
+	+++if (!post) throw error(404);+++
+
+	return {
+		post
+	};
+}
+```
+
+We'll learn more about error handling in later chapters.

content/tutorial/02-sveltekit/03-loading-data/01-page-data/app-a/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">Home</a>
+	<a href="/blog">Blog</a>
+</nav>
+
+<slot />

content/tutorial/02-sveltekit/03-loading-data/01-page-data/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<p>Home Page</p>

content/tutorial/02-sveltekit/03-loading-data/01-page-data/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>

content/tutorial/02-sveltekit/03-loading-data/01-page-data/app-a/src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1 @@
+<h1>Blog post</h1>

content/tutorial/02-sveltekit/03-loading-data/01-page-data/app-a/src/routes/blog/data.js

@@ -0,0 +1,21 @@
+export const posts = [
+	{
+		slug: 'welcome',
+		title: 'Welcome to the Aperture Science computer-aided enrichment center',
+		content:
+			'<p>We hope your brief detention in the relaxation vault has been a pleasant one.</p><p>Your specimen has been processed and we are now ready to begin the test proper.</p>'
+	},
+
+	{
+		slug: 'safety',
+		title: 'Safety notice',
+		content:
+			'<p>While safety is one of many Enrichment Center Goals, the Aperture Science High Energy Pellet, seen to the left of the chamber, can and has caused permanent disabilities, such as vaporization. Please be careful.</p>'
+	},
+
+	{
+		slug: 'cake',
+		title: 'This was a triumph',
+		content: "<p>I'm making a note here: HUGE SUCCESS.</p>"
+	}
+];

content/tutorial/02-sveltekit/03-loading-data/01-page-data/app-b/src/routes/blog/+page.server.js

@@ -0,0 +1,10 @@
+import { posts } from './data.js';
+
+export function load() {
+	return {
+		summaries: posts.map((post) => ({
+			slug: post.slug,
+			title: post.title
+		}))
+	};
+}