Skip to content

Commit 6faae56

Browse files
huntabytehuntabyte
committed
docs: add pager
1 parent 583d113 commit 6faae56

4 files changed

Lines changed: 124 additions & 69 deletions

File tree

‎docs/src/lib/components/doc-page-header.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</span>
4040
<div class="mb-9 mt-3 flex items-center">
4141
<button
42-
class="hover:bg-muted/50 text-foreground-alt hover:text-foreground flex h-8 items-center gap-1.5 rounded-md rounded-r-none border border-r-0 px-2 py-1.5 text-xs font-semibold leading-none no-underline group-hover:no-underline"
42+
class="hover:bg-muted/50 text-foreground-alt hover:text-foreground flex h-8 select-none items-center gap-1.5 rounded-md rounded-r-none border border-r-0 px-2 py-1.5 text-xs font-semibold leading-none no-underline group-hover:no-underline"
4343
onclick={async () => {
4444
await copyMarkdown();
4545
}}

‎docs/src/lib/components/doc-page.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import type { DocMetadata } from "$lib/utils/docs.js";
1010
import DocPageHeader from "./doc-page-header.svelte";
1111
import SidebarSponsor from "./sidebar-sponsor.svelte";
12+
import DocsPager from "./docs-pager.svelte";
1213
1314
let {
1415
component,
@@ -62,6 +63,7 @@
6263
<main class="markdown pb-24" id="main-content">
6364
<DocPageHeader {metadata} />
6465
<PageComponent {schemas} />
66+
<DocsPager />
6567
</main>
6668
</div>
6769
</div>

‎docs/src/lib/components/docs-pager.svelte‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { flatNavigation } from "$lib/config/navigation.js";
3+
import { page } from "$app/state";
4+
import { cn } from "$lib/utils/styles.js";
5+
import { Separator } from "bits-ui";
6+
7+
const previous = $derived(
8+
flatNavigation[flatNavigation.findIndex((item) => item.href === page.url.pathname) - 1]
9+
);
10+
const next = $derived(
11+
flatNavigation[flatNavigation.findIndex((item) => item.href === page.url.pathname) + 1]
12+
);
13+
</script>
14+
15+
<Separator.Root class="bg-border my-6 h-px" />
16+
<div class="flex flex-col gap-4 pt-1">
17+
<div class="grid grid-cols-2 gap-4">
18+
{#if previous}
19+
<a
20+
href={previous.href}
21+
class={cn(
22+
"hover:bg-muted/50 focus-visible:ring-foreground focus-visible:ring-offset-background focus-visible:outline-hidden group flex flex-col gap-2 rounded-[7px] border p-4 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2"
23+
)}
24+
>
25+
<span class="text-muted-foreground flex items-center gap-1 text-xs font-medium">
26+
Previous
27+
</span>
28+
<span class="text-foreground font-medium">{previous.title}</span>
29+
</a>
30+
{/if}
31+
{#if next}
32+
<a
33+
href={next.href}
34+
class={cn(
35+
"hover:bg-muted/50 focus-visible:ring-foreground focus-visible:ring-offset-background focus-visible:outline-hidden group col-start-2 flex flex-col gap-2 rounded-[7px] border p-4 text-right transition-colors focus-visible:ring-2 focus-visible:ring-offset-2"
36+
)}
37+
>
38+
<span
39+
class="text-muted-foreground flex items-center justify-end gap-1 text-xs font-medium"
40+
>
41+
Next
42+
</span>
43+
<span class="text-foreground font-medium">{next.title}</span>
44+
</a>
45+
{/if}
46+
</div>
47+
</div>

‎docs/src/lib/config/navigation.ts‎

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,77 @@ function generateTypeHelpersNav(): SidebarNavItem[] {
9191
return utilityNavItems;
9292
}
9393

94+
function generateOverviewNav(): SidebarNavItem[] {
95+
return [
96+
{
97+
title: "Introduction",
98+
href: "/docs/introduction",
99+
items: [],
100+
icon: Sticker,
101+
},
102+
{
103+
title: "Getting Started",
104+
href: "/docs/getting-started",
105+
items: [],
106+
icon: Compass,
107+
},
108+
{
109+
title: "Child Snippet",
110+
href: "/docs/child-snippet",
111+
items: [],
112+
icon: CodeBlock,
113+
},
114+
{
115+
title: "Ref",
116+
href: "/docs/ref",
117+
items: [],
118+
icon: Link,
119+
},
120+
{
121+
title: "Transitions",
122+
href: "/docs/transitions",
123+
items: [],
124+
icon: Resize,
125+
},
126+
{
127+
title: "Styling",
128+
href: "/docs/styling",
129+
items: [],
130+
icon: Palette,
131+
},
132+
{
133+
title: "Dates",
134+
href: "/docs/dates",
135+
items: [],
136+
icon: CalendarBlank,
137+
},
138+
{
139+
title: "State Management",
140+
href: "/docs/state-management",
141+
items: [],
142+
icon: CirclesThreePlus,
143+
},
144+
{
145+
title: "Figma",
146+
href: "/docs/figma-file",
147+
items: [],
148+
icon: FigmaLogo,
149+
},
150+
{
151+
title: "Migration Guide",
152+
href: "/docs/migration-guide",
153+
items: [],
154+
icon: Swap,
155+
},
156+
{
157+
title: "LLMs",
158+
href: "/docs/llms",
159+
items: [],
160+
icon: Robot,
161+
},
162+
];
163+
}
164+
94165
export const navigation: Navigation = {
95166
main: [
96167
{
@@ -101,74 +172,7 @@ export const navigation: Navigation = {
101172
sidebar: [
102173
{
103174
title: "Overview",
104-
items: [
105-
{
106-
title: "Introduction",
107-
href: "/docs/introduction",
108-
items: [],
109-
icon: Sticker,
110-
},
111-
{
112-
title: "Getting Started",
113-
href: "/docs/getting-started",
114-
items: [],
115-
icon: Compass,
116-
},
117-
{
118-
title: "Child Snippet",
119-
href: "/docs/child-snippet",
120-
items: [],
121-
icon: CodeBlock,
122-
},
123-
{
124-
title: "Ref",
125-
href: "/docs/ref",
126-
items: [],
127-
icon: Link,
128-
},
129-
{
130-
title: "Transitions",
131-
href: "/docs/transitions",
132-
items: [],
133-
icon: Resize,
134-
},
135-
{
136-
title: "Styling",
137-
href: "/docs/styling",
138-
items: [],
139-
icon: Palette,
140-
},
141-
{
142-
title: "Dates",
143-
href: "/docs/dates",
144-
items: [],
145-
icon: CalendarBlank,
146-
},
147-
{
148-
title: "State Management",
149-
href: "/docs/state-management",
150-
items: [],
151-
icon: CirclesThreePlus,
152-
},
153-
{
154-
title: "Figma",
155-
href: "/docs/figma-file",
156-
items: [],
157-
icon: FigmaLogo,
158-
},
159-
{
160-
title: "Migration Guide",
161-
href: "/docs/migration-guide",
162-
items: [],
163-
icon: Swap,
164-
},
165-
{
166-
title: "LLMs",
167-
href: "/docs/llms",
168-
items: [],
169-
icon: Robot,
170-
},
171-
],
175+
items: generateOverviewNav(),
172176
},
173177
{
174178
title: "Components",
@@ -184,3 +188,5 @@ export const navigation: Navigation = {
184188
},
185189
],
186190
};
191+
192+
export const flatNavigation = navigation.sidebar.flatMap((item) => item.items);

0 commit comments

Comments
 (0)