Skip to content

Commit f004caf

Browse files
ctatectate
authored
combine docs nav (#61)
1 parent 72d6468 commit f004caf

File tree

3 files changed

+125
-127
lines changed

3 files changed

+125
-127
lines changed

‎apps/web/components/docs-mobile-nav.tsx‎

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -10,55 +10,15 @@ import {
1010
SheetContent,
1111
SheetTitle,
1212
} from "@/components/ui/sheet";
13-
14-
const navigation = [
15-
{
16-
title: "Getting Started",
17-
items: [
18-
{ title: "Introduction", href: "/docs" },
19-
{ title: "Installation", href: "/docs/installation" },
20-
{ title: "Quick Start", href: "/docs/quick-start" },
21-
],
22-
},
23-
{
24-
title: "Core Concepts",
25-
items: [
26-
{ title: "Catalog", href: "/docs/catalog" },
27-
{ title: "Registry", href: "/docs/registry" },
28-
{ title: "Data Binding", href: "/docs/data-binding" },
29-
{ title: "Actions", href: "/docs/actions" },
30-
{ title: "Visibility", href: "/docs/visibility" },
31-
{ title: "Validation", href: "/docs/validation" },
32-
],
33-
},
34-
{
35-
title: "Guides",
36-
items: [
37-
{ title: "AI SDK Integration", href: "/docs/ai-sdk" },
38-
{ title: "Streaming", href: "/docs/streaming" },
39-
{ title: "Code Export", href: "/docs/code-export" },
40-
],
41-
},
42-
{
43-
title: "API Reference",
44-
items: [
45-
{ title: "@json-render/core", href: "/docs/api/core" },
46-
{ title: "@json-render/react", href: "/docs/api/react" },
47-
{ title: "@json-render/codegen", href: "/docs/api/codegen" },
48-
],
49-
},
50-
];
51-
52-
// Flatten all pages for current page lookup
53-
const allPages = navigation.flatMap((section) => section.items);
13+
import { docsNavigation, allDocsPages } from "@/lib/docs-navigation";
5414

5515
export function DocsMobileNav() {
5616
const [open, setOpen] = useState(false);
5717
const pathname = usePathname();
5818

5919
const currentPage = useMemo(() => {
60-
const page = allPages.find((page) => page.href === pathname);
61-
return page ?? allPages[0];
20+
const page = allDocsPages.find((page) => page.href === pathname);
21+
return page ?? allDocsPages[0];
6222
}, [pathname]);
6323

6424
return (
@@ -72,27 +32,49 @@ export function DocsMobileNav() {
7232
<SheetContent className="overflow-y-auto p-6">
7333
<SheetTitle className="mb-6">Table of Contents</SheetTitle>
7434
<nav className="space-y-6">
75-
{navigation.map((section) => (
35+
{docsNavigation.map((section) => (
7636
<div key={section.title}>
7737
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
7838
{section.title}
7939
</h4>
8040
<ul className="space-y-1">
81-
{section.items.map((item) => (
82-
<li key={item.href}>
83-
<Link
84-
href={item.href}
85-
onClick={() => setOpen(false)}
86-
className={`text-sm block py-2 transition-colors ${
87-
pathname === item.href
88-
? "text-primary font-medium"
89-
: "text-muted-foreground hover:text-foreground"
90-
}`}
91-
>
92-
{item.title}
93-
</Link>
94-
</li>
95-
))}
41+
{section.items.map((item) => {
42+
const isExternal = item.external;
43+
return (
44+
<li key={item.href}>
45+
<Link
46+
href={item.href}
47+
onClick={() => setOpen(false)}
48+
{...(isExternal && {
49+
target: "_blank",
50+
rel: "noopener noreferrer",
51+
})}
52+
className={`text-sm block py-2 transition-colors ${
53+
pathname === item.href
54+
? "text-primary font-medium"
55+
: "text-muted-foreground hover:text-foreground"
56+
} ${isExternal ? "inline-flex items-center gap-1" : ""}`}
57+
>
58+
{item.title}
59+
{isExternal && (
60+
<svg
61+
className="w-3 h-3"
62+
fill="none"
63+
stroke="currentColor"
64+
viewBox="0 0 24 24"
65+
>
66+
<path
67+
strokeLinecap="round"
68+
strokeLinejoin="round"
69+
strokeWidth={2}
70+
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
71+
/>
72+
</svg>
73+
)}
74+
</Link>
75+
</li>
76+
);
77+
})}
9678
</ul>
9779
</div>
9880
))}

‎apps/web/components/docs-sidebar.tsx‎

Lines changed: 3 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,87 +3,22 @@
33
import Link from "next/link";
44
import { usePathname } from "next/navigation";
55
import { cn } from "@/lib/utils";
6-
7-
const navigation = [
8-
{
9-
title: "Getting Started",
10-
items: [
11-
{ title: "Introduction", href: "/docs" },
12-
{ title: "Installation", href: "/docs/installation" },
13-
{ title: "Quick Start", href: "/docs/quick-start" },
14-
{ title: "Changelog", href: "/docs/changelog" },
15-
],
16-
},
17-
{
18-
title: "Core Concepts",
19-
items: [
20-
{ title: "Specs", href: "/docs/specs" },
21-
{ title: "Schemas", href: "/docs/schemas" },
22-
{ title: "Catalog", href: "/docs/catalog" },
23-
{ title: "Registry", href: "/docs/registry" },
24-
{ title: "Data Binding", href: "/docs/data-binding" },
25-
{ title: "Visibility", href: "/docs/visibility" },
26-
{ title: "Validation", href: "/docs/validation" },
27-
],
28-
},
29-
{
30-
title: "Examples",
31-
items: [
32-
{
33-
title: "Dashboard",
34-
href: "https://github.com/vercel-labs/json-render/tree/main/examples/dashboard",
35-
external: true,
36-
},
37-
{
38-
title: "Remotion",
39-
href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
40-
external: true,
41-
},
42-
],
43-
},
44-
{
45-
title: "Guides",
46-
items: [
47-
{ title: "Custom Schema", href: "/docs/custom-schema" },
48-
{ title: "Streaming", href: "/docs/streaming" },
49-
{ title: "Code Export", href: "/docs/code-export" },
50-
],
51-
},
52-
{
53-
title: "Integrations",
54-
items: [
55-
{ title: "AI SDK", href: "/docs/ai-sdk" },
56-
{ title: "A2UI", href: "/docs/a2ui" },
57-
{ title: "Adaptive Cards", href: "/docs/adaptive-cards" },
58-
{ title: "AG-UI", href: "/docs/ag-ui" },
59-
{ title: "OpenAPI", href: "/docs/openapi" },
60-
],
61-
},
62-
{
63-
title: "API Reference",
64-
items: [
65-
{ title: "@json-render/core", href: "/docs/api/core" },
66-
{ title: "@json-render/react", href: "/docs/api/react" },
67-
{ title: "@json-render/remotion", href: "/docs/api/remotion" },
68-
{ title: "@json-render/codegen", href: "/docs/api/codegen" },
69-
],
70-
},
71-
];
6+
import { docsNavigation } from "@/lib/docs-navigation";
727

738
export function DocsSidebar() {
749
const pathname = usePathname();
7510

7611
return (
7712
<nav className="space-y-6 pb-8">
78-
{navigation.map((section) => (
13+
{docsNavigation.map((section) => (
7914
<div key={section.title}>
8015
<h4 className="text-xs font-normal text-muted-foreground/50 uppercase tracking-wider mb-2">
8116
{section.title}
8217
</h4>
8318
<ul className="space-y-1">
8419
{section.items.map((item) => {
8520
const isActive = pathname === item.href;
86-
const isExternal = "external" in item && item.external;
21+
const isExternal = item.external;
8722
return (
8823
<li key={item.href}>
8924
<Link

‎apps/web/lib/docs-navigation.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
export type NavItem = {
2+
title: string;
3+
href: string;
4+
external?: boolean;
5+
};
6+
7+
export type NavSection = {
8+
title: string;
9+
items: NavItem[];
10+
};
11+
12+
export const docsNavigation: NavSection[] = [
13+
{
14+
title: "Getting Started",
15+
items: [
16+
{ title: "Introduction", href: "/docs" },
17+
{ title: "Installation", href: "/docs/installation" },
18+
{ title: "Quick Start", href: "/docs/quick-start" },
19+
{ title: "Changelog", href: "/docs/changelog" },
20+
],
21+
},
22+
{
23+
title: "Core Concepts",
24+
items: [
25+
{ title: "Specs", href: "/docs/specs" },
26+
{ title: "Schemas", href: "/docs/schemas" },
27+
{ title: "Catalog", href: "/docs/catalog" },
28+
{ title: "Registry", href: "/docs/registry" },
29+
{ title: "Data Binding", href: "/docs/data-binding" },
30+
{ title: "Visibility", href: "/docs/visibility" },
31+
{ title: "Validation", href: "/docs/validation" },
32+
],
33+
},
34+
{
35+
title: "Examples",
36+
items: [
37+
{
38+
title: "Dashboard",
39+
href: "https://github.com/vercel-labs/json-render/tree/main/examples/dashboard",
40+
external: true,
41+
},
42+
{
43+
title: "Remotion",
44+
href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
45+
external: true,
46+
},
47+
],
48+
},
49+
{
50+
title: "Guides",
51+
items: [
52+
{ title: "Custom Schema", href: "/docs/custom-schema" },
53+
{ title: "Streaming", href: "/docs/streaming" },
54+
{ title: "Code Export", href: "/docs/code-export" },
55+
],
56+
},
57+
{
58+
title: "Integrations",
59+
items: [
60+
{ title: "AI SDK", href: "/docs/ai-sdk" },
61+
{ title: "A2UI", href: "/docs/a2ui" },
62+
{ title: "Adaptive Cards", href: "/docs/adaptive-cards" },
63+
{ title: "AG-UI", href: "/docs/ag-ui" },
64+
{ title: "OpenAPI", href: "/docs/openapi" },
65+
],
66+
},
67+
{
68+
title: "API Reference",
69+
items: [
70+
{ title: "@json-render/core", href: "/docs/api/core" },
71+
{ title: "@json-render/react", href: "/docs/api/react" },
72+
{ title: "@json-render/remotion", href: "/docs/api/remotion" },
73+
{ title: "@json-render/codegen", href: "/docs/api/codegen" },
74+
],
75+
},
76+
];
77+
78+
// Flatten all pages for current page lookup (excludes external links)
79+
export const allDocsPages = docsNavigation.flatMap((section) =>
80+
section.items.filter((item) => !item.external),
81+
);

0 commit comments

Comments
 (0)