remove nav.json

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

@@ -0,0 +1,64 @@
+import { docs, index } from '$lib/server/content';
+import { fetchBanner } from '@sveltejs/site-kit/components';
+import type { NavigationLink } from '@sveltejs/site-kit';
+
+const nav_links: NavigationLink[] = [
+	{
+		title: 'Docs',
+		slug: 'docs',
+		sections: Object.values(docs.topics)
+			.map((topic) => ({
+				title: topic.metadata.title,
+				path: '/' + topic.slug, // this will make the UI show a flyout menu for the docs nav entry
+				sections: topic.children.map((section) => ({
+					title: section.metadata.title,
+					sections: section.children.map((page) => ({
+						title: page.metadata.title,
+						path: '/' + page.slug
+					}))
+				}))
+			}))
+			.sort((a, b) => a.title.localeCompare(b.title)) // Svelte first
+	},
+	{
+		title: 'Tutorial',
+		slug: 'tutorial',
+		sections: index.tutorial.children.map((topic) => ({
+			title: topic.metadata.title,
+			sections: topic.children.map((section) => ({
+				title: section.metadata.title,
+				sections: section.children.map((page) => ({
+					title: page.metadata.title,
+					path: '/tutorial/' + page.slug.split('/').pop()
+				}))
+			}))
+		}))
+	},
+	{
+		title: 'Playground',
+		slug: 'playground'
+	},
+	{
+		title: 'Blog',
+		slug: 'blog'
+	}
+];
+
+const sections: Record<string, string> = {
+	docs: 'Docs',
+	playground: 'Playground',
+	blog: 'Blog',
+	tutorial: 'Tutorial',
+	search: 'Search'
+};
+
+export const load = async ({ url, fetch }) => {
+	const banner = await fetchBanner('svelte.dev', fetch);
+	const nav_title = sections[url.pathname.split('/')[1]!] ?? '';
+
+	return {
+		nav_title,
+		nav_links,
+		banner
+	};
+};

packages/site-kit/src/lib/components/LinksDropdown.svelte

@@ -8,8 +8,8 @@
 
 <Dropdown>
 	<a
-		href={link.pathname}
-		aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : undefined}
+		href="/{link.slug}"
+		aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : undefined}
 	>
 		{link.title}
 

packages/site-kit/src/lib/nav/Menu.svelte

@@ -14,7 +14,7 @@
 			open_store.set(true);
 
 			const segment = get(page).url.pathname.split('/')[1];
-			current_menu_view.set(get(links_store).find((link) => link.prefix === segment));
+			current_menu_view.set(get(links_store).find((link) => link.slug === segment));
 
 			show_context_menu.set(!!get(current_menu_view)?.sections && !!get(current_menu_view));
 		}
@@ -188,7 +188,7 @@
 							<div class="contents" bind:clientHeight={universal_menu_inner_height}>
 								{#each links as link}
 									<div class="link-item" style:--button-width={link.sections ? '4rem' : '0'}>
-										<a href={link.pathname}>
+										<a href="/{link.slug}">
 											{link.title}
 										</a>
 

packages/site-kit/src/lib/nav/Nav.svelte

@@ -84,8 +84,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 					<LinksDropdown {link} />
 				{:else}
 					<a
-						href={link.pathname}
-						aria-current={$page.url.pathname.startsWith(`/${link.prefix}`) ? 'page' : null}
+						href="/{link.slug}"
+						aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : null}
 					>
 						{link.title}
 					</a>

packages/site-kit/src/lib/types.d.ts

@@ -1,7 +1,6 @@
 export interface NavigationLink {
 	title: string;
-	prefix: string;
-	pathname: string;
+	slug: string;
 	sections?: {
 		title: string;
 		path?: string;