diff --git a/content/tutorial/02-sveltekit/02-routing/03-params/README.md b/content/tutorial/02-sveltekit/02-routing/03-params/README.md index 891e04570..bd0cf0c91 100644 --- a/content/tutorial/02-sveltekit/02-routing/03-params/README.md +++ b/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. diff --git a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md b/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md index 2143a9a50..6ad948141 100644 --- a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md +++ b/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: diff --git a/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md index 9c757656d..15335b82c 100644 --- a/content/tutorial/02-sveltekit/03-loading-data/02-layout-data/README.md +++ b/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. diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md index e39f0efb5..9a9313d52 100644 --- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/03-param-matchers/README.md +++ b/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. diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md index 9925141c4..d3078f9d8 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/README.md +++ b/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. diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/app-a/src/routes/+page.js b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/app-a/src/routes/+page.js deleted file mode 100644 index 714ceb10d..000000000 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/03-invalidation/app-a/src/routes/+page.js +++ /dev/null @@ -1,5 +0,0 @@ -import { redirect } from '@sveltejs/kit'; - -export async function load() { - throw redirect(307, '/Europe/London'); -} diff --git a/src/lib/server/content.js b/src/lib/server/content.js index 66ea120a8..e16e58c21 100644 --- a/src/lib/server/content.js +++ b/src/lib/server/content.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, diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts index 81504b7a3..388c38553 100644 --- a/src/lib/types/index.d.ts +++ b/src/lib/types/index.d.ts @@ -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; diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index dd1f4dc56..b8f12a776 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -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); } diff --git a/src/routes/tutorial/[slug]/Loading.svelte b/src/routes/tutorial/[slug]/Loading.svelte index cbe5bd7bb..2efca6dc1 100644 --- a/src/routes/tutorial/[slug]/Loading.svelte +++ b/src/routes/tutorial/[slug]/Loading.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}
- {#if !PUBLIC_USE_FILESYSTEM && initial} + {#if initial}