Skip to content

Commit 97c0d67

Browse files
authored
add a path option to each exercise (#133)
1 parent f855a9f commit 97c0d67

File tree

10 files changed

+23
-20
lines changed

10 files changed

+23
-20
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Route parameters
3+
path: /blog
34
---
45

56
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Page data
3+
path: /blog
34
---
45

56
At its core, SvelteKit's job boils down to three things:

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Layout data
3+
path: /blog
34
---
45

56
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Param matchers
3+
path: /colors/ff3e00
34
---
45

56
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Invalidation
3+
path: /Europe/London
34
---
45

56
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

Lines changed: 0 additions & 5 deletions
This file was deleted.

src/lib/server/content.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function get_index() {
5959

6060
const text = fs.readFileSync(`${dir}/README.md`, 'utf-8');
6161
const { frontmatter, markdown } = extract_frontmatter(text, dir);
62-
const { title } = frontmatter;
62+
const { title, path = '/', focus } = frontmatter;
6363
const slug = exercise.slice(3);
6464
const meta = fs.existsSync(`${dir}/meta.json`) ? json(`${dir}/meta.json`) : {};
6565

@@ -78,7 +78,9 @@ export function get_index() {
7878
exercises.push(
7979
(last_exercise = {
8080
slug: exercise.slice(3),
81-
title: frontmatter.title,
81+
title,
82+
path,
83+
focus,
8284
markdown,
8385
dir,
8486
prev: last_exercise ? { slug: last_exercise.slug } : null,
@@ -164,8 +166,9 @@ export function get_exercise(slug) {
164166
title: chapter.meta.title
165167
},
166168
scope,
167-
focus: chapter.meta.focus ?? part.meta.focus,
169+
focus: exercise.focus ?? chapter.meta.focus ?? part.meta.focus,
168170
title: exercise.title,
171+
path: exercise.path,
169172
slug: exercise.slug,
170173
prev: exercise.prev,
171174
next: exercise.next,

src/lib/types/index.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export interface Exercise {
4343
scope: Scope;
4444
focus: string;
4545
title: string;
46+
/** the initial path to navigate to */
47+
path: string;
4648
slug: string;
4749
prev: { slug: string } | null;
4850
next: { slug: string; title: string } | null;
@@ -58,6 +60,8 @@ export interface Exercise {
5860

5961
export interface ExerciseRaw {
6062
title: string;
63+
path: string;
64+
focus: string;
6165
slug: string;
6266
prev: { slug: string } | null;
6367
next: { slug: string; title: string } | null;

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
import Chrome from './Chrome.svelte';
1212
import Icon from '@sveltejs/site-kit/components/Icon.svelte';
1313
import Loading from './Loading.svelte';
14-
import { PUBLIC_USE_FILESYSTEM } from '$env/static/public';
1514
import ScreenToggle from './ScreenToggle.svelte';
1615
import Filetree from '$lib/components/filetree/Filetree.svelte';
1716
@@ -45,7 +44,7 @@
4544
$: completed =
4645
Object.keys(complete_states).length > 0 && Object.values(complete_states).every(Boolean);
4746
48-
let path = '/';
47+
let path = data.exercise.path;
4948
5049
let width = browser ? window.innerWidth : 1000;
5150
let selected_view = 0;
@@ -116,12 +115,10 @@
116115
if (adapter) {
117116
reload_iframe = await adapter.reset(stubs);
118117
} else {
119-
const module = PUBLIC_USE_FILESYSTEM
120-
? await import('$lib/client/adapters/filesystem/index.js')
121-
: await import('$lib/client/adapters/webcontainer/index.js');
118+
const module = await import('$lib/client/adapters/webcontainer/index.js');
122119
123120
adapter = await module.create(stubs);
124-
set_iframe_src(adapter.base);
121+
set_iframe_src(adapter.base + path);
125122
}
126123
127124
await new Promise((fulfil, reject) => {
@@ -140,7 +137,7 @@
140137
if (!called && adapter) {
141138
// Updating the iframe too soon sometimes results in a blank screen,
142139
// so we try again after a short delay if we haven't heard back
143-
set_iframe_src(adapter.base);
140+
set_iframe_src(adapter.base + path);
144141
}
145142
}, 5000);
146143
@@ -151,9 +148,9 @@
151148
}, 10000);
152149
});
153150
154-
if (reload_iframe) {
151+
if (reload_iframe || iframe.src !== adapter.base + data.exercise.path) {
155152
await new Promise((fulfil) => setTimeout(fulfil, 200));
156-
set_iframe_src(adapter.base);
153+
set_iframe_src(adapter.base + data.exercise.path);
157154
}
158155
159156
return adapter;
@@ -214,7 +211,7 @@
214211
clearTimeout(reload_timeout);
215212
reload_timeout = setTimeout(() => {
216213
if (adapter) {
217-
set_iframe_src(adapter.base);
214+
set_iframe_src(adapter.base + path);
218215
}
219216
}, 1000);
220217
}

src/routes/tutorial/[slug]/Loading.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { createEventDispatcher } from 'svelte';
33
import { tweened } from 'svelte/motion';
44
import { quadInOut } from 'svelte/easing';
5-
import { PUBLIC_USE_FILESYSTEM } from '$env/static/public';
65
76
/** @type {boolean} */
87
export let initial;
@@ -58,7 +57,7 @@
5857
{/if}
5958

6059
<div style="display: flex; align-items: center;">
61-
{#if !PUBLIC_USE_FILESYSTEM && initial}
60+
{#if initial}
6261
<ul>
6362
<li>Booting WebContainer</li>
6463
{#if $grayscale < 0.65}

0 commit comments

Comments
 (0)