add a path option to each exercise (#133)

Author: Rich-Harris

content/tutorial/02-sveltekit/02-routing/03-params/README.md

@@ -1,5 +1,6 @@
 ---
 title: Route parameters
+path: /blog
 ---
 
 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.

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

@@ -1,5 +1,6 @@
 ---
 title: Page data
+path: /blog
 ---
 
 At its core, SvelteKit's job boils down to three things:

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

@@ -1,5 +1,6 @@
 ---
 title: Layout data
+path: /blog
 ---
 
 Just as `+layout.svelte` files create UI for every child route, `+layout.server.js` files load data for every child route.

content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md

@@ -1,5 +1,6 @@
 ---
 title: Param matchers
+path: /colors/ff3e00
 ---
 
 To prevent the router from matching on invalid input, you can specify a _matcher_. For example, you might want a route like `/colors/[value]` to match hex values like `/colors/ff3e00` but not named colors like `/colors/octarine` or any other arbitrary input.

content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md

@@ -1,5 +1,6 @@
 ---
 title: Invalidation
+path: /Europe/London
 ---
 
 When the user navigates from one page to another, SvelteKit calls your `load` functions, but only if it thinks something has changed.

content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/app-a/src/routes/+page.js

@@ -59,7 +59,7 @@ export function get_index() {
 
 				const text = fs.readFileSync(`${dir}/README.md`, 'utf-8');
 				const { frontmatter, markdown } = extract_frontmatter(text, dir);
-				const { title } = frontmatter;
+				const { title, path = '/', focus } = frontmatter;
 				const slug = exercise.slice(3);
 				const meta = fs.existsSync(`${dir}/meta.json`) ? json(`${dir}/meta.json`) : {};
 
@@ -78,7 +78,9 @@ export function get_index() {
 				exercises.push(
 					(last_exercise = {
 						slug: exercise.slice(3),
-						title: frontmatter.title,
+						title,
+						path,
+						focus,
 						markdown,
 						dir,
 						prev: last_exercise ? { slug: last_exercise.slug } : null,
@@ -164,8 +166,9 @@ export function get_exercise(slug) {
 							title: chapter.meta.title
 						},
 						scope,
-						focus: chapter.meta.focus ?? part.meta.focus,
+						focus: exercise.focus ?? chapter.meta.focus ?? part.meta.focus,
 						title: exercise.title,
+						path: exercise.path,
 						slug: exercise.slug,
 						prev: exercise.prev,
 						next: exercise.next,

src/lib/server/content.js

@@ -43,6 +43,8 @@ export interface Exercise {
 	scope: Scope;
 	focus: string;
 	title: string;
+	/** the initial path to navigate to */
+	path: string;
 	slug: string;
 	prev: { slug: string } | null;
 	next: { slug: string; title: string } | null;
@@ -58,6 +60,8 @@ export interface Exercise {
 
 export interface ExerciseRaw {
 	title: string;
+	path: string;
+	focus: string;
 	slug: string;
 	prev: { slug: string } | null;
 	next: { slug: string; title: string } | null;

src/lib/types/index.d.ts

@@ -11,7 +11,6 @@
 	import Chrome from './Chrome.svelte';
 	import Icon from '@sveltejs/site-kit/components/Icon.svelte';
 	import Loading from './Loading.svelte';
-	import { PUBLIC_USE_FILESYSTEM } from '$env/static/public';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Filetree from '$lib/components/filetree/Filetree.svelte';
 
@@ -45,7 +44,7 @@
 	$: completed =
 		Object.keys(complete_states).length > 0 && Object.values(complete_states).every(Boolean);
 
-	let path = '/';
+	let path = data.exercise.path;
 
 	let width = browser ? window.innerWidth : 1000;
 	let selected_view = 0;
@@ -116,12 +115,10 @@
 		if (adapter) {
 			reload_iframe = await adapter.reset(stubs);
 		} else {
-			const module = PUBLIC_USE_FILESYSTEM
-				? await import('$lib/client/adapters/filesystem/index.js')
-				: await import('$lib/client/adapters/webcontainer/index.js');
+			const module = await import('$lib/client/adapters/webcontainer/index.js');
 
 			adapter = await module.create(stubs);
-			set_iframe_src(adapter.base);
+			set_iframe_src(adapter.base + path);
 		}
 
 		await new Promise((fulfil, reject) => {
@@ -140,7 +137,7 @@
 				if (!called && adapter) {
 					// Updating the iframe too soon sometimes results in a blank screen,
 					// so we try again after a short delay if we haven't heard back
-					set_iframe_src(adapter.base);
+					set_iframe_src(adapter.base + path);
 				}
 			}, 5000);
 
@@ -151,9 +148,9 @@
 			}, 10000);
 		});
 
-		if (reload_iframe) {
+		if (reload_iframe || iframe.src !== adapter.base + data.exercise.path) {
 			await new Promise((fulfil) => setTimeout(fulfil, 200));
-			set_iframe_src(adapter.base);
+			set_iframe_src(adapter.base + data.exercise.path);
 		}
 
 		return adapter;
@@ -214,7 +211,7 @@
 		clearTimeout(reload_timeout);
 		reload_timeout = setTimeout(() => {
 			if (adapter) {
-				set_iframe_src(adapter.base);
+				set_iframe_src(adapter.base + path);
 			}
 		}, 1000);
 	}

src/routes/tutorial/[slug]/+page.svelte

@@ -2,7 +2,6 @@
 	import { createEventDispatcher } from 'svelte';
 	import { tweened } from 'svelte/motion';
 	import { quadInOut } from 'svelte/easing';
-	import { PUBLIC_USE_FILESYSTEM } from '$env/static/public';
 
 	/** @type {boolean} */
 	export let initial;
@@ -58,7 +57,7 @@
 		{/if}
 
 		<div style="display: flex; align-items: center;">
-			{#if !PUBLIC_USE_FILESYSTEM && initial}
+			{#if initial}
 				<ul>
 					<li>Booting WebContainer</li>
 					{#if $grayscale < 0.65}