Skip to content

Commit e964254

Browse files
Rich-HarrisRich HarrisPuruVJ
authored
simplify nav (#8736)
* simplify nav * updates * fix link * Dont need this anymore * bump --------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Puru Vijay <[email protected]>
1 parent aa8cc5d commit e964254

File tree

5 files changed

+56
-75
lines changed

5 files changed

+56
-75
lines changed

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sites/svelte.dev/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@resvg/resvg-js": "^2.4.1",
3030
"@sveltejs/adapter-vercel": "^3.0.0",
3131
"@sveltejs/kit": "^1.20.0",
32-
"@sveltejs/site-kit": "6.0.0-next.3",
32+
"@sveltejs/site-kit": "6.0.0-next.4",
3333
"@sveltejs/vite-plugin-svelte": "^2.4.1",
3434
"@types/marked": "^5.0.0",
3535
"@types/node": "^20.2.6",

‎sites/svelte.dev/src/global.d.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎sites/svelte.dev/src/routes/+layout.server.js‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ function get_nav_title(url) {
2424
return '';
2525
}
2626

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

61-
return {
62-
docs: processed_docs_list,
63-
blog: processed_blog_list,
64-
tutorial: processed_tutorial_list,
65-
examples: processed_examples_list
66-
};
64+
return [
65+
{
66+
title: 'Tutorial',
67+
prefix: 'tutorial',
68+
pathname: '/tutorial',
69+
sections: processed_tutorial_list
70+
},
71+
{
72+
title: 'Docs',
73+
prefix: 'docs',
74+
pathname: '/docs/introduction',
75+
sections: processed_docs_list
76+
},
77+
{
78+
title: 'Examples',
79+
prefix: 'examples',
80+
pathname: '/examples',
81+
sections: processed_examples_list
82+
},
83+
{
84+
title: 'REPL',
85+
prefix: 'repl',
86+
pathname: '/repl'
87+
},
88+
{
89+
title: 'Blog',
90+
prefix: 'blog',
91+
pathname: '/blog',
92+
sections: processed_blog_list
93+
}
94+
];
6795
}
6896

6997
export const load = async ({ url }) => {
7098
return {
7199
nav_title: get_nav_title(url),
72-
nav_context_list: get_nav_context_list()
100+
nav_links: get_nav_context_list()
73101
};
74102
};

‎sites/svelte.dev/src/routes/+layout.svelte‎

Lines changed: 16 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
import { browser } from '$app/environment';
33
import { page } from '$app/stores';
44
import { Icon, Shell } from '@sveltejs/site-kit/components';
5-
import { Nav, NavItem, Separator } from '@sveltejs/site-kit/nav';
5+
import { Nav, Separator } from '@sveltejs/site-kit/nav';
66
import { Search, SearchBox } from '@sveltejs/site-kit/search';
77
import '@sveltejs/site-kit/styles/index.css';
8+
9+
export let data;
810
</script>
911

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

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

29-
<svelte:fragment slot="nav-center">
31+
<svelte:fragment slot="search">
3032
{#if $page.url.pathname !== '/search'}
31-
<li><Search /></li>
33+
<Search />
3234
{/if}
3335
</svelte:fragment>
3436

35-
<svelte:fragment slot="nav-right">
36-
<NavItem
37-
href="/tutorial"
38-
selected={$page.url.pathname.startsWith('/tutorial') || null}
39-
relatedMenuName="tutorial"
40-
>
41-
Tutorial
42-
</NavItem>
43-
44-
<NavItem
45-
href="/docs/introduction"
46-
selected={$page.url.pathname.startsWith('/docs') || null}
47-
relatedMenuName="docs"
48-
>
49-
Docs
50-
</NavItem>
51-
52-
<NavItem
53-
href="/examples"
54-
selected={$page.url.pathname.startsWith('/examples') || null}
55-
relatedMenuName="examples"
56-
>
57-
Examples
58-
</NavItem>
59-
60-
<NavItem href="/repl" selected={$page.url.pathname.startsWith('/repl') || null}>
61-
REPL
62-
</NavItem>
63-
64-
<NavItem
65-
href="/blog"
66-
selected={$page.url.pathname.startsWith('/blog') || null}
67-
relatedMenuName="blog"
68-
>
69-
Blog
70-
</NavItem>
71-
72-
<Separator />
73-
74-
<NavItem href="https://kit.svelte.dev" external>SvelteKit</NavItem>
37+
<svelte:fragment slot="external-links">
38+
<a href="https://kit.svelte.dev">SvelteKit</a>
7539

76-
<NavItem href="/chat" external title="Discord Chat">
77-
<span slot="small">Discord</span>
78-
<Icon name="discord" />
79-
</NavItem>
40+
<a href="/chat" title="Discord Chat">
41+
<span class="small">Discord</span>
42+
<span class="large"><Icon name="discord" /></span>
43+
</a>
8044

81-
<NavItem href="https://github.com/sveltejs/svelte" external title="GitHub Repo">
82-
<span slot="small">GitHub</span>
83-
<Icon name="github" />
84-
</NavItem>
45+
<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
46+
<span class="small">GitHub</span>
47+
<span class="large"><Icon name="github" /></span>
48+
</a>
8549
</svelte:fragment>
8650
</Nav>
8751

0 commit comments

Comments
 (0)