From ac38ae4de888778a508f6c4ce9472272ee81bb21 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 11:57:33 -0400 Subject: [PATCH 1/8] remove nav.json --- apps/svelte.dev/src/routes/+layout.server.js | 35 ------------------- .../+server.ts => +layout.server.ts} | 32 ++++++++++++++--- 2 files changed, 28 insertions(+), 39 deletions(-) delete mode 100644 apps/svelte.dev/src/routes/+layout.server.js rename apps/svelte.dev/src/routes/{nav.json/+server.ts => +layout.server.ts} (66%) diff --git a/apps/svelte.dev/src/routes/+layout.server.js b/apps/svelte.dev/src/routes/+layout.server.js deleted file mode 100644 index b3f70a0c59..0000000000 --- a/apps/svelte.dev/src/routes/+layout.server.js +++ /dev/null @@ -1,35 +0,0 @@ -import { fetchBanner } from '@sveltejs/site-kit/components'; - -export const load = async ({ url, fetch }) => { - const [nav_links, banner] = await Promise.all([ - fetch('/nav.json').then((r) => r.json()), - fetchBanner('svelte.dev', fetch) - ]); - - return { - nav_title: get_nav_title(url), - nav_links, - banner - }; -}; - -/** @param {URL} url */ -function get_nav_title(url) { - const list = new Map([ - [/^docs/, 'Docs'], - [/^playground/, 'Playground'], - [/^blog/, 'Blog'], - [/^faq/, 'FAQ'], - [/^tutorial/, 'Tutorial'], - [/^search/, 'Search'], - [/^examples/, 'Examples'] - ]); - - for (const [regex, title] of list) { - if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) { - return title; - } - } - - return ''; -} diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/+layout.server.ts similarity index 66% rename from apps/svelte.dev/src/routes/nav.json/+server.ts rename to apps/svelte.dev/src/routes/+layout.server.ts index 3fc74d5645..61e0424b08 100644 --- a/apps/svelte.dev/src/routes/nav.json/+server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -1,13 +1,37 @@ -import { json } from '@sveltejs/kit'; import { docs as _docs, index } from '$lib/server/content'; +import { fetchBanner } from '@sveltejs/site-kit/components'; import type { NavigationLink } from '@sveltejs/site-kit'; -export const prerender = true; +export const load = async ({ url, fetch }) => { + const [nav_links, banner] = await Promise.all([get_nav_list(), fetchBanner('svelte.dev', fetch)]); -export const GET = async () => { - return json(await get_nav_list()); + return { + nav_title: get_nav_title(url), + nav_links, + banner + }; }; +function get_nav_title(url: URL) { + const list = new Map([ + [/^docs/, 'Docs'], + [/^playground/, 'Playground'], + [/^blog/, 'Blog'], + [/^faq/, 'FAQ'], + [/^tutorial/, 'Tutorial'], + [/^search/, 'Search'], + [/^examples/, 'Examples'] + ]); + + for (const [regex, title] of list) { + if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) { + return title; + } + } + + return ''; +} + async function get_nav_list(): Promise { const docs = Object.values(_docs.topics) .map((topic) => ({ From 0358ab968840e465e8f742533882a7daaebf1e3b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:01:01 -0400 Subject: [PATCH 2/8] simplify --- apps/svelte.dev/src/routes/+layout.server.ts | 100 +++++++++---------- 1 file changed, 47 insertions(+), 53 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index 61e0424b08..b5a2e706fe 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -2,8 +2,54 @@ import { docs as _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', + prefix: 'docs', + pathname: '/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', + prefix: 'tutorial', + pathname: '/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', + prefix: 'playground', + pathname: '/playground' + }, + { + title: 'Blog', + prefix: 'blog', + pathname: '/blog' + } +]; + export const load = async ({ url, fetch }) => { - const [nav_links, banner] = await Promise.all([get_nav_list(), fetchBanner('svelte.dev', fetch)]); + const banner = await fetchBanner('svelte.dev', fetch); return { nav_title: get_nav_title(url), @@ -31,55 +77,3 @@ function get_nav_title(url: URL) { return ''; } - -async function get_nav_list(): Promise { - const docs = 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 - - const tutorial = 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() - })) - })) - })); - - return [ - { - title: 'Docs', - prefix: 'docs', - pathname: '/docs', - sections: docs - }, - { - title: 'Tutorial', - prefix: 'tutorial', - pathname: '/tutorial', - sections: tutorial - }, - { - title: 'Playground', - prefix: 'playground', - pathname: '/playground' - }, - { - title: 'Blog', - prefix: 'blog', - pathname: '/blog' - } - ]; -} From b8f30731007414b4f4a283e2601e0e4fbb396c3c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:01:31 -0400 Subject: [PATCH 3/8] simplify --- apps/svelte.dev/src/routes/+layout.server.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index b5a2e706fe..e1b64e8b08 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -1,4 +1,4 @@ -import { docs as _docs, index } from '$lib/server/content'; +import { docs, index } from '$lib/server/content'; import { fetchBanner } from '@sveltejs/site-kit/components'; import type { NavigationLink } from '@sveltejs/site-kit'; @@ -7,7 +7,7 @@ const nav_links: NavigationLink[] = [ title: 'Docs', prefix: 'docs', pathname: '/docs', - sections: Object.values(_docs.topics) + 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 From 76d1839288eb4b29c678b9a4c8bdf4ee9425a062 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:05:02 -0400 Subject: [PATCH 4/8] simplify --- apps/svelte.dev/src/routes/+layout.server.ts | 41 ++++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index e1b64e8b08..f99664ceca 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -48,32 +48,31 @@ const nav_links: NavigationLink[] = [ } ]; +const sections = new Map([ + [/^docs/, 'Docs'], + [/^playground/, 'Playground'], + [/^blog/, 'Blog'], + [/^faq/, 'FAQ'], + [/^tutorial/, 'Tutorial'], + [/^search/, 'Search'], + [/^examples/, 'Examples'] +]); + export const load = async ({ url, fetch }) => { const banner = await fetchBanner('svelte.dev', fetch); - return { - nav_title: get_nav_title(url), - nav_links, - banner - }; -}; - -function get_nav_title(url: URL) { - const list = new Map([ - [/^docs/, 'Docs'], - [/^playground/, 'Playground'], - [/^blog/, 'Blog'], - [/^faq/, 'FAQ'], - [/^tutorial/, 'Tutorial'], - [/^search/, 'Search'], - [/^examples/, 'Examples'] - ]); + let nav_title = ''; - for (const [regex, title] of list) { + for (const [regex, title] of sections) { if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) { - return title; + nav_title = title; + break; } } - return ''; -} + return { + nav_title, + nav_links, + banner + }; +}; From c4d65ffdcd19d42b37df9266fa8515b7a8538b3d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:07:18 -0400 Subject: [PATCH 5/8] simplify --- apps/svelte.dev/src/routes/+layout.server.ts | 28 +++++++------------- 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index f99664ceca..4800b097d1 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -48,27 +48,19 @@ const nav_links: NavigationLink[] = [ } ]; -const sections = new Map([ - [/^docs/, 'Docs'], - [/^playground/, 'Playground'], - [/^blog/, 'Blog'], - [/^faq/, 'FAQ'], - [/^tutorial/, 'Tutorial'], - [/^search/, 'Search'], - [/^examples/, 'Examples'] -]); +const sections: Record = { + docs: 'Docs', + playground: 'Playground', + blog: 'Blog', + faq: 'FAQ', + tutorial: 'Tutorial', + search: 'Search', + examples: 'Examples' +}; export const load = async ({ url, fetch }) => { const banner = await fetchBanner('svelte.dev', fetch); - - let nav_title = ''; - - for (const [regex, title] of sections) { - if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) { - nav_title = title; - break; - } - } + const nav_title = sections[url.pathname.split('/')[1]!] ?? ''; return { nav_title, From 584668815ab52c23b8fc7c456dbb29361bdd82b8 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:07:36 -0400 Subject: [PATCH 6/8] unused --- apps/svelte.dev/src/routes/+layout.server.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index 4800b097d1..ff77a7551c 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -52,10 +52,8 @@ const sections: Record = { docs: 'Docs', playground: 'Playground', blog: 'Blog', - faq: 'FAQ', tutorial: 'Tutorial', - search: 'Search', - examples: 'Examples' + search: 'Search' }; export const load = async ({ url, fetch }) => { From 419f3c60dd62ee6c34fd566ddeb598e53573af95 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:24:58 -0400 Subject: [PATCH 7/8] simplify --- apps/svelte.dev/src/routes/+layout.server.ts | 12 ++-- .../svelte.dev/src/routes/nav.json/+server.ts | 61 +++++++++++++++++++ .../src/lib/components/LinksDropdown.svelte | 4 +- packages/site-kit/src/lib/nav/Menu.svelte | 4 +- packages/site-kit/src/lib/nav/Nav.svelte | 4 +- packages/site-kit/src/lib/types.d.ts | 3 +- 6 files changed, 72 insertions(+), 16 deletions(-) create mode 100644 apps/svelte.dev/src/routes/nav.json/+server.ts diff --git a/apps/svelte.dev/src/routes/+layout.server.ts b/apps/svelte.dev/src/routes/+layout.server.ts index ff77a7551c..7c8f9cf344 100644 --- a/apps/svelte.dev/src/routes/+layout.server.ts +++ b/apps/svelte.dev/src/routes/+layout.server.ts @@ -5,8 +5,7 @@ import type { NavigationLink } from '@sveltejs/site-kit'; const nav_links: NavigationLink[] = [ { title: 'Docs', - prefix: 'docs', - pathname: '/docs', + slug: 'docs', sections: Object.values(docs.topics) .map((topic) => ({ title: topic.metadata.title, @@ -23,8 +22,7 @@ const nav_links: NavigationLink[] = [ }, { title: 'Tutorial', - prefix: 'tutorial', - pathname: '/tutorial', + slug: 'tutorial', sections: index.tutorial.children.map((topic) => ({ title: topic.metadata.title, sections: topic.children.map((section) => ({ @@ -38,13 +36,11 @@ const nav_links: NavigationLink[] = [ }, { title: 'Playground', - prefix: 'playground', - pathname: '/playground' + slug: 'playground' }, { title: 'Blog', - prefix: 'blog', - pathname: '/blog' + slug: 'blog' } ]; diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts new file mode 100644 index 0000000000..f80515d4a7 --- /dev/null +++ b/apps/svelte.dev/src/routes/nav.json/+server.ts @@ -0,0 +1,61 @@ +import { json } from '@sveltejs/kit'; +import { docs as _docs, index } from '$lib/server/content'; +import type { NavigationLink } from '@sveltejs/site-kit'; + +export const prerender = true; + +export const GET = async () => { + return json(await get_nav_list()); +}; + +async function get_nav_list(): Promise { + const docs = 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 + + const tutorial = 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() + })) + })) + })); + + return [ + { + title: 'Docs', + slug: 'docs', + pathname: '/docs', + sections: docs + }, + { + title: 'Tutorial', + slug: 'tutorial', + pathname: '/tutorial', + sections: tutorial + }, + { + title: 'Playground', + slug: 'playground', + pathname: '/playground' + }, + { + title: 'Blog', + slug: 'blog', + pathname: '/blog' + } + ]; +} diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte index 0fe4290a52..755967fdcd 100644 --- a/packages/site-kit/src/lib/components/LinksDropdown.svelte +++ b/packages/site-kit/src/lib/components/LinksDropdown.svelte @@ -8,8 +8,8 @@ {link.title} diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 99ec67c5a4..16bea444d1 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/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 @@
{#each links as link}
- + {link.title} diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 4135fd12e4..09b240d533 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/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 {:else} {link.title} diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts index c20ec5ab54..73bf62bbd7 100644 --- a/packages/site-kit/src/lib/types.d.ts +++ b/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; From 1d3359bc2cfa4dbb84537d18be63290428768df6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 12:25:27 -0400 Subject: [PATCH 8/8] begone --- .../svelte.dev/src/routes/nav.json/+server.ts | 61 ------------------- 1 file changed, 61 deletions(-) delete mode 100644 apps/svelte.dev/src/routes/nav.json/+server.ts diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts deleted file mode 100644 index f80515d4a7..0000000000 --- a/apps/svelte.dev/src/routes/nav.json/+server.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { json } from '@sveltejs/kit'; -import { docs as _docs, index } from '$lib/server/content'; -import type { NavigationLink } from '@sveltejs/site-kit'; - -export const prerender = true; - -export const GET = async () => { - return json(await get_nav_list()); -}; - -async function get_nav_list(): Promise { - const docs = 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 - - const tutorial = 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() - })) - })) - })); - - return [ - { - title: 'Docs', - slug: 'docs', - pathname: '/docs', - sections: docs - }, - { - title: 'Tutorial', - slug: 'tutorial', - pathname: '/tutorial', - sections: tutorial - }, - { - title: 'Playground', - slug: 'playground', - pathname: '/playground' - }, - { - title: 'Blog', - slug: 'blog', - pathname: '/blog' - } - ]; -}