simplify nav (#8736)

* simplify nav * updates * fix link * Dont need this anymore * bump --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: Puru Vijay <devpuruvj@gmail.com>
2 years ago · e964254f6d
parent aa8cc5d26f
commit e964254f6d
5 changed files with 56 additions and 75 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -182,8 +182,8 @@ importers:
        specifier: ^1.20.0
        version: 1.20.0(svelte@packages+svelte)(vite@4.3.9)
      '@sveltejs/site-kit':
-        specifier: 6.0.0-next.3
-        version: 6.0.0-next.3(@sveltejs/kit@1.20.0)(svelte@packages+svelte)
+        specifier: 6.0.0-next.4
+        version: 6.0.0-next.4(@sveltejs/kit@1.20.0)(svelte@packages+svelte)
      '@sveltejs/vite-plugin-svelte':
        specifier: ^2.4.1
        version: 2.4.1(svelte@packages+svelte)(vite@4.3.9)
@ -1797,8 +1797,8 @@ packages:
      svelte-local-storage-store: 0.4.0(svelte@packages+svelte)
    dev: false

-  /@sveltejs/site-kit@6.0.0-next.3(@sveltejs/kit@1.20.0)(svelte@packages+svelte):
-    resolution: {integrity: sha512-qcCv/Qkn5mylmlG11R7AX/vrT0zc2q/WOxn7id/uci+AtwVt8QrIJn3DJyOdsSRZu0i+V1p2gxyNPFfqqB0amQ==}
+  /@sveltejs/site-kit@6.0.0-next.4(@sveltejs/kit@1.20.0)(svelte@packages+svelte):
+    resolution: {integrity: sha512-8TF43iHjGrn9ozq0oiDoP9ZCQPtTY9DOE164kXrIeShr0pDRVpwXNeDLhJM8GGvrIEUa+nqIWDxWojSRAArl9w==}
    peerDependencies:
      '@sveltejs/kit': ^1.0.0
      svelte: ^3.54.0 || ^4.0.0-next.0 || ^4.0.0
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@ -29,7 +29,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.0",
 		"@sveltejs/kit": "^1.20.0",
-		"@sveltejs/site-kit": "6.0.0-next.3",
+		"@sveltejs/site-kit": "6.0.0-next.4",
 		"@sveltejs/vite-plugin-svelte": "^2.4.1",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.2.6",
--- a/sites/svelte.dev/src/global.d.ts
+++ b/sites/svelte.dev/src/global.d.ts
@ -1,11 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-
-declare global {
-	namespace App {
-		interface PageData {
-			nav_title: string;
-		}
-	}
-}
-
-export {};
--- a/sites/svelte.dev/src/routes/+layout.server.js
+++ b/sites/svelte.dev/src/routes/+layout.server.js
@ -24,6 +24,9 @@ function get_nav_title(url) {
 	return '';
 }

+/**
+ * @returns {Promise<import('@sveltejs/site-kit').NavigationLink[]>}
+ */
 async function get_nav_context_list() {
 	const docs_list = get_docs_list(get_docs_data());
 	const processed_docs_list = docs_list.map(({ title, pages }) => ({
@ -58,17 +61,42 @@ async function get_nav_context_list() {
 		}))
 		.filter(({ title }) => title !== 'Embeds');

-	return {
-		docs: processed_docs_list,
-		blog: processed_blog_list,
-		tutorial: processed_tutorial_list,
-		examples: processed_examples_list
-	};
+	return [
+		{
+			title: 'Tutorial',
+			prefix: 'tutorial',
+			pathname: '/tutorial',
+			sections: processed_tutorial_list
+		},
+		{
+			title: 'Docs',
+			prefix: 'docs',
+			pathname: '/docs/introduction',
+			sections: processed_docs_list
+		},
+		{
+			title: 'Examples',
+			prefix: 'examples',
+			pathname: '/examples',
+			sections: processed_examples_list
+		},
+		{
+			title: 'REPL',
+			prefix: 'repl',
+			pathname: '/repl'
+		},
+		{
+			title: 'Blog',
+			prefix: 'blog',
+			pathname: '/blog',
+			sections: processed_blog_list
+		}
+	];
 }

 export const load = async ({ url }) => {
 	return {
 		nav_title: get_nav_title(url),
-		nav_context_list: get_nav_context_list()
+		nav_links: get_nav_context_list()
 	};
 };
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@ -2,9 +2,11 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { Icon, Shell } from '@sveltejs/site-kit/components';
-	import { Nav, NavItem, Separator } from '@sveltejs/site-kit/nav';
+	import { Nav, Separator } from '@sveltejs/site-kit/nav';
 	import { Search, SearchBox } from '@sveltejs/site-kit/search';
 	import '@sveltejs/site-kit/styles/index.css';
+
+	export let data;
 </script>

 <svelte:head>
@ -17,7 +19,7 @@

 <div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
 	<Shell nav_visible={$page.url.pathname !== '/repl/embed'}>
-		<Nav slot="top-nav">
+		<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
 			<svelte:fragment slot="home-large">
 				<strong>svelte</strong>.dev
 			</svelte:fragment>
@ -26,62 +28,24 @@
 				<strong>svelte</strong>
 			</svelte:fragment>

-			<svelte:fragment slot="nav-center">
+			<svelte:fragment slot="search">
 				{#if $page.url.pathname !== '/search'}
-					<li><Search /></li>
+					<Search />
 				{/if}
 			</svelte:fragment>

-			<svelte:fragment slot="nav-right">
-				<NavItem
-					href="/tutorial"
-					selected={$page.url.pathname.startsWith('/tutorial') || null}
-					relatedMenuName="tutorial"
-				>
-					Tutorial
-				</NavItem>
-
-				<NavItem
-					href="/docs/introduction"
-					selected={$page.url.pathname.startsWith('/docs') || null}
-					relatedMenuName="docs"
-				>
-					Docs
-				</NavItem>
-
-				<NavItem
-					href="/examples"
-					selected={$page.url.pathname.startsWith('/examples') || null}
-					relatedMenuName="examples"
-				>
-					Examples
-				</NavItem>
-
-				<NavItem href="/repl" selected={$page.url.pathname.startsWith('/repl') || null}>
-					REPL
-				</NavItem>
-
-				<NavItem
-					href="/blog"
-					selected={$page.url.pathname.startsWith('/blog') || null}
-					relatedMenuName="blog"
-				>
-					Blog
-				</NavItem>
-
-				<Separator />
-
-				<NavItem href="https://kit.svelte.dev" external>SvelteKit</NavItem>
+			<svelte:fragment slot="external-links">
+				<a href="https://kit.svelte.dev">SvelteKit</a>

-				<NavItem href="/chat" external title="Discord Chat">
-					<span slot="small">Discord</span>
-					<Icon name="discord" />
-				</NavItem>
+				<a href="/chat" title="Discord Chat">
+					<span class="small">Discord</span>
+					<span class="large"><Icon name="discord" /></span>
+				</a>

-				<NavItem href="https://github.com/sveltejs/svelte" external title="GitHub Repo">
-					<span slot="small">GitHub</span>
-					<Icon name="github" />
-				</NavItem>
+				<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
+					<span class="small">GitHub</span>
+					<span class="large"><Icon name="github" /></span>
+				</a>
 			</svelte:fragment>
 		</Nav>