Better docs invalidation (#1286)

* make invalidation more granular

* avoid invalidating root layout on every navigation

* fix

* lint

Author: Rich-Harris

apps/svelte.dev/src/routes/+layout.server.ts

@@ -51,32 +51,21 @@ const nav_links: NavigationLink[] = [
 	}
 ];
 
-const sections: Record<string, string> = {
-	docs: 'Docs',
-	playground: 'Playground',
-	blog: 'Blog',
-	tutorial: 'Tutorial',
-	search: 'Search'
-};
-
-const banner: BannerData = {
-	id: 'adventofsvelte2024',
-	start: new Date('1 December, 2024 00:00:00 UTC'),
-	end: new Date('25 December, 2024 23:59:59 UTC'),
-	arrow: true,
-	content: {
-		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
-		sm: 'Advent of Svelte 2024'
-	},
-	href: '/blog/advent-of-svelte'
-};
-
-export const load = async ({ url }) => {
-	const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
+// const banner: BannerData = {
+// 	id: 'adventofsvelte2024',
+// 	start: new Date('1 December, 2024 00:00:00 UTC'),
+// 	end: new Date('25 December, 2024 23:59:59 UTC'),
+// 	arrow: true,
+// 	content: {
+// 		lg: 'Twenty-four days, twenty-four features: Advent of Svelte 2024',
+// 		sm: 'Advent of Svelte 2024'
+// 	},
+// 	href: '/blog/advent-of-svelte'
+// };
 
+export const load = async () => {
 	return {
-		nav_title,
 		nav_links,
-		banner
+		banner: undefined
 	};
 };

apps/svelte.dev/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '@sveltejs/site-kit/styles/index.css';
 	import { browser, dev } from '$app/environment';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { Shell, Banner } from '@sveltejs/site-kit/components';
 	import { Nav } from '@sveltejs/site-kit/nav';
 	import { SearchBox } from '@sveltejs/site-kit/search';
@@ -28,19 +28,27 @@
 	});
 
 	let { data, children: layout_children } = $props();
+
+	const sections: Record<string, string> = {
+		docs: 'Docs',
+		playground: 'Playground',
+		blog: 'Blog',
+		tutorial: 'Tutorial',
+		search: 'Search'
+	};
 </script>
 
 <svelte:head>
-	{#if !$page.route.id?.startsWith('/blog/')}
+	{#if !page.route.id?.startsWith('/blog/')}
 		<meta name="twitter:card" content="summary" />
 		<meta name="twitter:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 		<meta name="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
 	{/if}
 </svelte:head>
 
-<Shell nav_visible={$page.route.id !== '/(authed)/playground/[id]/embed'}>
+<Shell nav_visible={page.route.id !== '/(authed)/playground/[id]/embed'}>
 	{#snippet top_nav()}
-		<Nav title={data.nav_title} links={data.nav_links} />
+		<Nav title={sections[page.url.pathname.split('/')[1]!] ?? ''} links={data.nav_links} />
 	{/snippet}
 
 	{#snippet children()}

apps/svelte.dev/src/routes/docs/[topic]/+page.server.ts

@@ -0,0 +1,8 @@
+import { docs } from '$lib/server/content';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ params }) {
+	const document = docs.topics[`docs/${params.topic}`];
+
+	redirect(307, `/${document.children[0].children[0].slug}`);
+}

apps/svelte.dev/src/routes/docs/[...path]/+layout.server.ts renamed to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.server.ts

@@ -3,8 +3,7 @@ import { redirect } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	const topic = params.path.split('/')[0];
-	const document = docs.topics[`docs/${topic}`];
+	const document = docs.topics[`docs/${params.topic}`];
 
 	if (!document) {
 		// in many cases, https://svelte.dev/docs/foo is now https://svelte.dev/docs/svelte/foo
@@ -15,10 +14,6 @@ export async function load({ params }) {
 		error(404, 'Not found');
 	}
 
-	if (params.path === topic) {
-		redirect(307, `/${document.children[0].children[0].slug}`);
-	}
-
 	return {
 		sections: document.children.map(create_summary)
 	};

apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte renamed to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+layout.svelte

@@ -3,7 +3,7 @@ import { render_content } from '$lib/server/renderer';
 import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	const document = docs.pages[`docs/${params.path}`];
+	const document = docs.pages[`docs/${params.topic}/${params.path}`];
 
 	if (!document) {
 		error(404);

apps/svelte.dev/src/routes/docs/[...path]/+page.server.js renamed to apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.server.js

@@ -4,11 +4,14 @@ import { generate_llm_content, get_documentation_title, sections } from '$lib/se
 export const prerender = true;
 
 export function entries() {
-	return sections.map((section) => ({ path: section.slug }));
+	return sections.map((section) => {
+		const [topic, ...rest] = section.slug.split('/');
+		return { topic, path: rest.join('/') };
+	});
 }
 
 export function GET({ params }) {
-	const pkg = params.path;
+	const pkg = params.path ? `${params.topic}/${params.path}` : params.topic;
 
 	const section = sections.find((s) => s.slug === pkg);