From d8ad118a2e924e04f50743ed9d648444e3c33eca Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 3 Sep 2024 17:49:42 +0200 Subject: [PATCH 1/5] feat: docs flyout menu Adds a dropdown menu that has one main a tag and flyout sub a tags on hover. The menu is used for the docs entry Related to #3 / #61 --- .../svelte.dev/src/routes/nav.json/+server.ts | 1 + .../src/lib/components/LinksDropdown.svelte | 72 +++++++++++++++++++ packages/site-kit/src/lib/components/index.ts | 1 + packages/site-kit/src/lib/nav/Nav.svelte | 17 +++-- packages/site-kit/src/lib/types.d.ts | 2 + 5 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 packages/site-kit/src/lib/components/LinksDropdown.svelte diff --git a/apps/svelte.dev/src/routes/nav.json/+server.ts b/apps/svelte.dev/src/routes/nav.json/+server.ts index e71856e111..86328aaa0e 100644 --- a/apps/svelte.dev/src/routes/nav.json/+server.ts +++ b/apps/svelte.dev/src/routes/nav.json/+server.ts @@ -11,6 +11,7 @@ export const GET = async () => { async function get_nav_list(): Promise { const docs = index.docs.children.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) => ({ diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte new file mode 100644 index 0000000000..766429a024 --- /dev/null +++ b/packages/site-kit/src/lib/components/LinksDropdown.svelte @@ -0,0 +1,72 @@ + + +
+ {links[0].title} + +
+ + diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts index 02f0f45543..50b1eed77a 100644 --- a/packages/site-kit/src/lib/components/index.ts +++ b/packages/site-kit/src/lib/components/index.ts @@ -4,3 +4,4 @@ export { default as Icons } from './Icons.svelte'; export { default as Section } from './Section.svelte'; export { default as Shell } from './Shell.svelte'; export { default as ThemeToggle } from './ThemeToggle.svelte'; +export { default as LinksDropdown } from './LinksDropdown.svelte'; diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index d07cae5c09..f681fa670d 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th import Separator from './Separator.svelte'; import type { NavigationLink } from '../types'; import type { Snippet } from 'svelte'; + import LinksDropdown from '../components/LinksDropdown.svelte'; interface Props { home_title?: string; @@ -103,12 +104,16 @@ Top navigation bar for the application. It provides a slot for the left side, th
{#each links as link} - - {link.title} - + {#if link.sections?.[0].path} + + {:else} + + {link.title} + + {/if} {/each} diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts index 422b72bb2d..67d05281c7 100644 --- a/packages/site-kit/src/lib/types.d.ts +++ b/packages/site-kit/src/lib/types.d.ts @@ -4,8 +4,10 @@ export interface NavigationLink { pathname: string; sections?: { title: string; + path?: string; sections: { title: string; + path?: string; sections: { title: string; path: string; From 6d99a21e1de548dbe3b6cf6ac5759127d02fd4e8 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 3 Sep 2024 17:55:44 +0200 Subject: [PATCH 2/5] sigh --- apps/svelte.dev/vercel.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/vercel.json b/apps/svelte.dev/vercel.json index fb63409540..5096359e52 100644 --- a/apps/svelte.dev/vercel.json +++ b/apps/svelte.dev/vercel.json @@ -18,5 +18,6 @@ } ] } - ] + ], + "buildCommand": "cd ../../packages/repl && pnpm package && cd ../site-kit && pnpm package && cd ../../apps/svelte.dev && pnpm build" } From af0777d5dd53182b474a1587eb85b19947387e42 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 3 Sep 2024 18:00:02 +0200 Subject: [PATCH 3/5] revert --- apps/svelte.dev/vercel.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/svelte.dev/vercel.json b/apps/svelte.dev/vercel.json index 5096359e52..fb63409540 100644 --- a/apps/svelte.dev/vercel.json +++ b/apps/svelte.dev/vercel.json @@ -18,6 +18,5 @@ } ] } - ], - "buildCommand": "cd ../../packages/repl && pnpm package && cd ../site-kit && pnpm package && cd ../../apps/svelte.dev && pnpm build" + ] } From 3cbb8bc06e274f6671b0f1c11043b85587d29f8d Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 4 Sep 2024 11:54:29 +0200 Subject: [PATCH 4/5] tweak UI, shadow var --- .../src/routes/tutorial/[slug]/Menu.svelte | 13 +++---------- .../src/lib/components/LinksDropdown.svelte | 16 ++++++++++------ .../site-kit/src/lib/docs/DocsOnThisPage.svelte | 12 +++--------- packages/site-kit/src/lib/styles/tokens.css | 4 ++++ 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte index 25afe011ea..0662c0f591 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte @@ -3,7 +3,7 @@ import { click_outside, focus_outside } from '@sveltejs/site-kit/actions'; import { Icon } from '@sveltejs/site-kit/components'; import { open_nav } from '@sveltejs/site-kit/nav'; - import { mql, reduced_motion, theme } from '@sveltejs/site-kit/stores'; + import { mql, reduced_motion } from '@sveltejs/site-kit/stores'; import { expoOut } from 'svelte/easing'; import { slide } from 'svelte/transition'; @@ -27,7 +27,6 @@
(is_open = false)} use:click_outside={() => (is_open = false)} > @@ -155,8 +154,6 @@