avoid invalidating root layout on every navigation

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
+		nav_links
+		// banner
 	};
 };

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()}

packages/site-kit/src/global.d.ts

@@ -2,9 +2,7 @@
 
 declare global {
 	namespace App {
-		interface PageData {
-			nav_title: string;
-		}
+		interface PageData {}
 	}
 }