From cb9b12849488ab57b20f3d115c1134bb0b35b27a Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 9 Oct 2024 18:03:21 +0200 Subject: [PATCH 1/3] chore: separate tutorial URLs into svelte and kit - gives us more leeway with duplicated slugs if needed later on - makes URL a bit more organized - will make it easier to set dedicated headers for the SvelteKit tutorial (#301) - fixes a bug with redirects not being picked up due to prerendering not coming across old slugs --- .../src/routes/content.json/+server.ts | 12 ++--- apps/svelte.dev/src/routes/tutorial/+page.js | 7 --- .../{[slug] => [...slug]}/+layout.server.ts | 0 .../routes/tutorial/[...slug]/+page.server.ts | 46 +++++++++++++++++++ .../{[slug] => [...slug]}/+page.svelte | 0 .../{[slug] => [...slug]}/Chrome.svelte | 0 .../{[slug] => [...slug]}/Editor.svelte | 0 .../{[slug] => [...slug]}/ImageViewer.svelte | 0 .../{[slug] => [...slug]}/Loading.svelte | 0 .../{[slug] => [...slug]}/Menu.svelte | 0 .../{[slug] => [...slug]}/Output.svelte | 0 .../{[slug] => [...slug]}/OutputRollup.svelte | 0 .../{[slug] => [...slug]}/ScreenToggle.svelte | 0 .../{[slug] => [...slug]}/Sidebar.svelte | 0 .../{[slug] => [...slug]}/ToggleButton.svelte | 0 .../{[slug] => [...slug]}/adapter.svelte.ts | 0 .../{[slug] => [...slug]}/autocompletion.js | 0 .../autocompletionDataProvider.js | 0 .../{[slug] => [...slug]}/codemirror.css | 0 .../{[slug] => [...slug]}/content.server.ts | 8 +++- .../filetree/ContextMenu.svelte | 0 .../filetree/File.svelte | 0 .../filetree/Filetree.svelte | 0 .../filetree/Folder.svelte | 0 .../filetree/Item.svelte | 0 .../{[slug] => [...slug]}/filetree/context.js | 0 .../tutorial/{[slug] => [...slug]}/shared.ts | 0 .../tutorial/{[slug] => [...slug]}/state.js | 0 .../routes/tutorial/[slug]/+page.server.js | 22 --------- 29 files changed, 59 insertions(+), 36 deletions(-) delete mode 100644 apps/svelte.dev/src/routes/tutorial/+page.js rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/+layout.server.ts (100%) create mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/+page.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Chrome.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Editor.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/ImageViewer.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Loading.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Menu.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Output.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/OutputRollup.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/ScreenToggle.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/Sidebar.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/ToggleButton.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/adapter.svelte.ts (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/autocompletion.js (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/autocompletionDataProvider.js (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/codemirror.css (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/content.server.ts (95%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/ContextMenu.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/File.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/Filetree.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/Folder.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/Item.svelte (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/filetree/context.js (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/shared.ts (100%) rename apps/svelte.dev/src/routes/tutorial/{[slug] => [...slug]}/state.js (100%) delete mode 100644 apps/svelte.dev/src/routes/tutorial/[slug]/+page.server.js diff --git a/apps/svelte.dev/src/routes/content.json/+server.ts b/apps/svelte.dev/src/routes/content.json/+server.ts index e2d7e9b2cb..ef461e838d 100644 --- a/apps/svelte.dev/src/routes/content.json/+server.ts +++ b/apps/svelte.dev/src/routes/content.json/+server.ts @@ -2,6 +2,7 @@ import { index, docs as _docs } from '$lib/server/content'; import { json } from '@sveltejs/kit'; import { markedTransform, normalizeSlugify, removeMarkdown } from '@sveltejs/site-kit/markdown'; import type { Block } from '@sveltejs/site-kit/search'; +import { get_slug } from '../tutorial/[...slug]/content.server'; export const prerender = true; @@ -17,13 +18,12 @@ function get_href(parts: string[]) { async function content() { const blocks: Block[] = []; - const breadcrumbs: string[] = []; const docs = Object.values(_docs.pages).concat( - index.tutorial.children.flatMap((topic) => - topic.children.flatMap((section) => - section.children.map((entry) => ({ - ...entry, - slug: `tutorial/${entry.slug.split('/').pop()}` + index.tutorial.children.flatMap((part) => + part.children.flatMap((chapter) => + chapter.children.map((exercise) => ({ + ...exercise, + slug: get_slug(part, exercise) })) ) ) diff --git a/apps/svelte.dev/src/routes/tutorial/+page.js b/apps/svelte.dev/src/routes/tutorial/+page.js deleted file mode 100644 index d75bef991a..0000000000 --- a/apps/svelte.dev/src/routes/tutorial/+page.js +++ /dev/null @@ -1,7 +0,0 @@ -import { redirect } from '@sveltejs/kit'; - -export const prerender = true; - -export function load() { - redirect(307, '/tutorial/welcome-to-svelte'); -} diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/+layout.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+layout.server.ts similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/+layout.server.ts rename to apps/svelte.dev/src/routes/tutorial/[...slug]/+layout.server.ts diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts new file mode 100644 index 0000000000..c7e8d589d1 --- /dev/null +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts @@ -0,0 +1,46 @@ +import { redirect } from '@sveltejs/kit'; +import { load_exercise, parts } from './content.server'; + +export const prerender = true; + +const redirects = new Map([ + ['reactive-assignments', 'svelte/state'], + ['reactive-declarations', 'svelte/derived-state'], + ['reactive-statements', 'svelte/effects'], + ['updating-arrays-and-objects', 'svelte/deep-state'], + ['event-modifiers', 'svelte/capturing'], + ['dom-event-forwarding', 'svelte/spreading-events'] +]); + +export async function load({ params }) { + if (!params.slug || params.slug === 'svelte') redirect(307, '/tutorial/svelte/welcome-to-svelte'); + if (params.slug === 'kit') redirect(307, '/tutorial/introducing-sveltekit'); + + const r = redirects.get(params.slug); + if (r) redirect(307, r); + if (!params.slug.includes('/')) redirect(307, `/tutorial/svelte/${params.slug}`); + + return { + exercise: await load_exercise(params.slug) + }; +} + +export function entries() { + // These are not findable by the router, but we need to know about them for redirects + + // Old tutorial/... to new tutorial/svelte/... + const entries = parts + .filter((part) => !part.slug.includes('sveltekit')) + .flatMap((part) => part.chapters) + .flatMap((chapter) => { + return chapter.exercises.map((exercise) => { + const slug = exercise.slug.split('/').pop()!; + return { slug: redirects.get(slug) || slug }; + }); + }); + + // So that redirects from these URLs to /tutorial//... work + entries.push({ slug: 'svelte' }, { slug: 'kit' }); + + return entries; +} diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Editor.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Editor.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/ImageViewer.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/ImageViewer.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/OutputRollup.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/ScreenToggle.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/ScreenToggle.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/adapter.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/adapter.svelte.ts rename to apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/autocompletion.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/autocompletion.js similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/autocompletion.js rename to apps/svelte.dev/src/routes/tutorial/[...slug]/autocompletion.js diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/autocompletionDataProvider.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/autocompletionDataProvider.js similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/autocompletionDataProvider.js rename to apps/svelte.dev/src/routes/tutorial/[...slug]/autocompletionDataProvider.js diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css rename to apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts similarity index 95% rename from apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts rename to apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts index b883f62265..1412c691c1 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/content.server.ts +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts @@ -33,6 +33,11 @@ let prev: null | { slug: string; title: string } = null; let files: Record = {}; +export function get_slug(part: Document, exercise: Document) { + const topic = part.slug.split('/').pop()!.includes('sveltekit') ? 'kit' : 'svelte'; + return `tutorial/${topic}/${exercise.slug.split('/').pop()}`; +} + export const parts: PartStub[] = index.tutorial.children.map((part) => { return { slug: part.slug, @@ -42,7 +47,7 @@ export const parts: PartStub[] = index.tutorial.children.map((part) => { slug: chapter.slug.split('/').pop()!, title: chapter.metadata.title, exercises: chapter.children.map((exercise) => { - const slug = exercise.slug.split('/').pop()!; + const slug = get_slug(part, exercise).slice('tutorial/'.length); const stub: ExerciseStub = { slug, @@ -200,6 +205,7 @@ const default_renderer: Partial = { export async function load_exercise(slug: string): Promise { if (!(slug in lookup)) { + console.log(slug, Object.keys(lookup)); error(404, 'No such tutorial found'); } diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/File.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Folder.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/context.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/filetree/context.js rename to apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/shared.ts rename to apps/svelte.dev/src/routes/tutorial/[...slug]/shared.ts diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/state.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.js similarity index 100% rename from apps/svelte.dev/src/routes/tutorial/[slug]/state.js rename to apps/svelte.dev/src/routes/tutorial/[...slug]/state.js diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.server.js b/apps/svelte.dev/src/routes/tutorial/[slug]/+page.server.js deleted file mode 100644 index 2f28b0fe4e..0000000000 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.server.js +++ /dev/null @@ -1,22 +0,0 @@ -import { redirect } from '@sveltejs/kit'; -import { load_exercise } from './content.server'; - -export const prerender = true; - -const redirects = new Map([ - ['reactive-assignments', 'state'], - ['reactive-declarations', 'derived-state'], - ['reactive-statements', 'effects'], - ['updating-arrays-and-objects', 'deep-state'], - ['event-modifiers', 'capturing'], - ['dom-event-forwarding', 'spreading-events'] -]); - -export async function load({ params }) { - const r = redirects.get(params.slug); - if (r) redirect(307, r); - - return { - exercise: await load_exercise(params.slug) - }; -} From d89bb9175f48a3429b4bf6495f91febd8c4df866 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 9 Oct 2024 20:14:30 +0200 Subject: [PATCH 2/3] fix logic --- .../src/routes/tutorial/[...slug]/+page.server.ts | 13 +++++-------- .../src/routes/tutorial/[...slug]/content.server.ts | 1 - 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts index c7e8d589d1..dc417b0af9 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts @@ -14,7 +14,7 @@ const redirects = new Map([ export async function load({ params }) { if (!params.slug || params.slug === 'svelte') redirect(307, '/tutorial/svelte/welcome-to-svelte'); - if (params.slug === 'kit') redirect(307, '/tutorial/introducing-sveltekit'); + if (params.slug === 'kit') redirect(307, '/tutorial/kit/introducing-sveltekit'); const r = redirects.get(params.slug); if (r) redirect(307, r); @@ -28,16 +28,13 @@ export async function load({ params }) { export function entries() { // These are not findable by the router, but we need to know about them for redirects - // Old tutorial/... to new tutorial/svelte/... + // So that old tutorial/... routes can redirect to new tutorial/svelte/... const entries = parts .filter((part) => !part.slug.includes('sveltekit')) .flatMap((part) => part.chapters) - .flatMap((chapter) => { - return chapter.exercises.map((exercise) => { - const slug = exercise.slug.split('/').pop()!; - return { slug: redirects.get(slug) || slug }; - }); - }); + .flatMap((chapter) => + chapter.exercises.map((exercise) => ({ slug: exercise.slug.split('/').pop()! })) + ); // So that redirects from these URLs to /tutorial//... work entries.push({ slug: 'svelte' }, { slug: 'kit' }); diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts index 1412c691c1..5e8e9f3983 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts @@ -205,7 +205,6 @@ const default_renderer: Partial = { export async function load_exercise(slug: string): Promise { if (!(slug in lookup)) { - console.log(slug, Object.keys(lookup)); error(404, 'No such tutorial found'); } From 3f9ea65786f6de53329ed1c508a3ba9b707599c8 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 9 Oct 2024 20:15:21 +0200 Subject: [PATCH 3/3] fix a bunch of links or remove obsolete ones that have no replacement --- .../svelte.dev/content/blog/2019-04-20-write-less-code.md | 2 +- .../blog/2021-04-01-whats-new-in-svelte-april-2021.md | 2 +- .../blog/2022-05-01-whats-new-in-svelte-may-2022.md | 2 +- apps/svelte.dev/content/blog/2023-09-20-runes.md | 2 +- .../01-introduction/01-welcome-to-svelte/index.md | 8 ++++---- .../02-transitions/04-custom-css-transitions/index.md | 2 +- .../02-advanced-svelte/03-animations/01-animate/index.md | 2 +- .../09-special-elements/04-svelte-window/index.md | 4 +--- .../01-concepts/01-introducing-sveltekit/index.md | 2 +- .../02-page-options/01-page-options/index.md | 2 +- .../04-advanced-routing/01-optional-params/index.md | 2 +- .../04-advanced-routing/04-route-groups/index.md | 2 +- .../05-advanced-loading/03-await-parent/index.md | 4 ++-- .../01-env-static-private/index.md | 2 +- .../04-env-dynamic-public/index.md | 2 +- 15 files changed, 19 insertions(+), 21 deletions(-) diff --git a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md index 88be4d0e31..27a8e88c8c 100644 --- a/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md +++ b/apps/svelte.dev/content/blog/2019-04-20-write-less-code.md @@ -158,6 +158,6 @@ In Vue, meanwhile, we have a default export with a `data` function that returns ## Death to boilerplate -These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). +These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, reactive declarations (`$:` statements) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). How? By choosing a different set of constraints. Because [Svelte is a compiler](/blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can _design_ a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in _more_ idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. diff --git a/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md index c6d9b044d5..66a1a8f7ec 100644 --- a/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md +++ b/apps/svelte.dev/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md @@ -15,7 +15,7 @@ Want to learn more about how to get started, what's different compared to Sapper ## New in Svelte & Language Tools -- Slotted components, including `` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#template-syntax-svelte-fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment)) +- Slotted components, including `` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**) - Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**) - Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**) - [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin. diff --git a/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md b/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md index 5dcb694843..0408f526dd 100644 --- a/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md +++ b/apps/svelte.dev/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md @@ -9,7 +9,7 @@ With yesterday's Svelte Summit behind us, we've got a lot of news to share! Chec ## What's new in Svelte -- The `` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](https://svelte.dev/tutorial/svelte-element) for more info (**3.47.0**)! +- The `` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](/tutorial/svelte/svelte-element) for more info (**3.47.0**)! ## Language Tools updates diff --git a/apps/svelte.dev/content/blog/2023-09-20-runes.md b/apps/svelte.dev/content/blog/2023-09-20-runes.md index 76e303093f..36f1060344 100644 --- a/apps/svelte.dev/content/blog/2023-09-20-runes.md +++ b/apps/svelte.dev/content/blog/2023-09-20-runes.md @@ -50,7 +50,7 @@ We don't yet have a release date for Svelte 5. What we're showing you here is a > > A letter or mark used as a mystical or magic symbol. -Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses `let`, `=`, the [`export`](https://learn.svelte.dev/tutorial/declaring-props) keyword and the [`$:`](https://learn.svelte.dev/tutorial/reactive-declarations) label to mean specific things, runes use _function syntax_ to achieve the same things and more. +Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses `let`, `=`, the `export` keyword and the `$:` label to mean specific things, runes use _function syntax_ to achieve the same things and more. For example, to declare a piece of reactive state, we can use the `$state` rune: diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md index 5ece7b41e5..eebd464dcb 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md @@ -20,10 +20,10 @@ You can build your entire app with Svelte (for example, using an application fra This tutorial is split into four main parts: -- [Basic Svelte](/tutorial/welcome-to-svelte) (you are here) -- [Advanced Svelte](/tutorial/tweens) -- [Basic SvelteKit](/tutorial/introducing-sveltekit) -- [Advanced SvelteKit](/tutorial/optional-params) +- [Basic Svelte](/tutorial/svelte/welcome-to-svelte) (you are here) +- [Advanced Svelte](/tutorial/svelte/tweens) +- [Basic SvelteKit](/tutorial/kit/introducing-sveltekit) +- [Advanced SvelteKit](/tutorial/kit/optional-params) 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. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md index 693b33eac7..66f3b57547 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md @@ -21,7 +21,7 @@ The function takes two arguments — the node to which the transition is applied - `delay` — milliseconds before the transition begins - `duration` — length of the transition in milliseconds -- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweens)) +- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/svelte/tweens)) - `css` — a `(t, u) => css` function, where `u === 1 - t` - `tick` — a `(t, u) => {...}` function that has some effect on the node diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md index 53f0221a11..3fc7417edb 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md @@ -2,7 +2,7 @@ title: The animate directive --- -In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other. +In the [previous chapter](/tutorial/svelte/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other. To complete the illusion, we also need to apply motion to the elements that _aren't_ transitioning. For this, we use the `animate` directive. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md index 4305e2465d..6f80878e53 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md @@ -8,7 +8,5 @@ We've already got a `handleKeydown` function declared — now all we need to do ```svelte /// file: App.svelte - + ``` - -> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`. diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md index e2441f5ecd..0c43d72f01 100644 --- a/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md +++ b/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md @@ -32,6 +32,6 @@ On the right, in the file tree viewer, you'll see a handful of files that Svelte `vite.config.js` contains the [Vite](https://vitejs.dev/) configuration. Because SvelteKit uses Vite, you can use [Vite features](https://vitejs.dev/guide/features.html) like hot module replacement, TypeScript support, static asset handling and so on. -`src` is where your app's source code goes. `src/app.html` is your page template (SvelteKit replaces the `%sveltekit.head%` and `%sveltekit.body%` as appropriate), and `src/routes` defines the [routes](/tutorial/pages) of your app. +`src` is where your app's source code goes. `src/app.html` is your page template (SvelteKit replaces the `%sveltekit.head%` and `%sveltekit.body%` as appropriate), and `src/routes` defines the [routes](/tutorial/kit/pages) of your app. Finally, `static` contains any assets (like a `favicon.png` or a `robots.txt`) that should be included when your app is deployed. diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/index.md index 0c8e182c7d..79bac4f8e7 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/01-page-options/index.md @@ -2,7 +2,7 @@ title: Basics --- -In the chapter on [loading data](/tutorial/page-data), we saw how you can export `load` functions from `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` files. We can also export various **page options** from these modules: +In the chapter on [loading data](/tutorial/kit/page-data), we saw how you can export `load` functions from `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` files. We can also export various **page options** from these modules: - `ssr` — whether or not pages should be server-rendered - `csr` — whether to load the SvelteKit client diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/index.md index e822b7f4ff..9528430254 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/index.md @@ -2,7 +2,7 @@ title: Optional parameters --- -In the first chapter on [routing](/tutorial/pages), we learned how to create routes with [dynamic parameters](/tutorial/params). +In the first chapter on [routing](/tutorial/kit/pages), we learned how to create routes with [dynamic parameters](/tutorial/kit/params). Sometimes it's helpful to make a parameter optional. A classic example is when you use the pathname to determine the locale — `/fr/...`, `/de/...` and so on — but you also want to have a default locale. diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md index 27ea258d8b..9f8644de81 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/index.md @@ -2,7 +2,7 @@ title: Route groups --- -As we saw in the [routing introduction](/tutorial/layouts), layouts are a way to share UI and data loading logic between different routes. +As we saw in the [routing introduction](/tutorial/kit/layouts), layouts are a way to share UI and data loading logic between different routes. Sometimes it's useful to use layouts without affecting the route — for example, you might need your `/app` and `/account` routes to be behind authentication, while your `/about` page is open to the world. We can do this with a _route group_, which is a directory in parentheses. diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md index d1b7e39f0e..1938c78465 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md @@ -2,7 +2,7 @@ title: Using parent data --- -As we saw in the introduction to [layout data](/tutorial/layout-data), `+page.svelte` and `+layout.svelte` components have access to everything returned from their parent `load` functions. +As we saw in the introduction to [layout data](/tutorial/kit/layout-data), `+page.svelte` and `+layout.svelte` components have access to everything returned from their parent `load` functions. Occasionally it's useful for the `load` functions themselves to access data from their parents. This can be done with `await parent()`. @@ -25,7 +25,7 @@ export async function load(+++{ parent }+++) { } ``` -> Notice that a [universal](/tutorial/universal-load-functions) `load` function can get data from a parent _server_ `load` function. The reverse is not true — a server load function can only get parent data from another server load function. +> Notice that a [universal](/tutorial/kit/universal-load-functions) `load` function can get data from a parent _server_ `load` function. The reverse is not true — a server load function can only get parent data from another server load function. Finally, in `src/routes/sum/+page.js`, get parent data from both `load` functions: diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md index 15d472e275..2a3a7370de 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md @@ -17,7 +17,7 @@ First, in `.env`, add a new environment variable: PASSPHRASE=+++"open sesame"+++ ``` -Open `src/routes/+page.server.js`. Import `PASSPHRASE` from `$env/static/private` and use it inside the [form action](/tutorial/the-form-element): +Open `src/routes/+page.server.js`. Import `PASSPHRASE` from `$env/static/private` and use it inside the [form action](/tutorial/kit/the-form-element): ```js /// file: src/routes/+page.server.js diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/04-env-dynamic-public/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/04-env-dynamic-public/index.md index 53c1baba31..5b37ae468b 100644 --- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/04-env-dynamic-public/index.md +++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/04-env-dynamic-public/index.md @@ -2,7 +2,7 @@ title: $env/dynamic/public --- -As with [private environment variables](/tutorial/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead: +As with [private environment variables](/tutorial/kit/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead: ```svelte /// file: src/routes/+page.svelte