Skip to content

Commit 6f8b759

Browse files
DylanBPYDylanBPY
committed
Doc setup
1 parent 7f818be commit 6f8b759

10 files changed

Lines changed: 316 additions & 21 deletions

File tree

‎app/docs/page.tsx‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,55 @@
1-
import { Construction } from "lucide-react"
1+
import { AppSidebar } from "@/app/docs/sidebar/sidebar"
2+
import {
3+
Breadcrumb,
4+
BreadcrumbItem,
5+
BreadcrumbLink,
6+
BreadcrumbList,
7+
BreadcrumbPage,
8+
BreadcrumbSeparator,
9+
} from "@/components/ui/breadcrumb"
10+
import { Separator } from "@/components/ui/separator"
11+
import {
12+
SidebarInset,
13+
SidebarProvider,
14+
SidebarTrigger,
15+
} from "@/components/ui/sidebar"
216

3-
export default function Docs() {
4-
return (
5-
<div className="flex flex-col items-center justify-center flex-1 gap-4">
6-
<Construction className="size-20 text-muted-foreground" />
7-
<h1 className="text-3xl font-bold">Documentation</h1>
8-
<p className="text-md text-muted-foreground">Javabee documentation is currently under construction.</p>
17+
export default function Page() {
18+
return (
19+
<SidebarProvider>
20+
<AppSidebar />
21+
<SidebarInset>
22+
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
23+
<div className="flex items-center gap-2 px-4">
24+
<SidebarTrigger className="-ml-1" />
25+
<Separator
26+
orientation="vertical"
27+
className="mr-2 data-[orientation=vertical]:h-4"
28+
/>
29+
<Breadcrumb>
30+
<BreadcrumbList>
31+
<BreadcrumbItem className="hidden md:block">
32+
<BreadcrumbLink href="#">
33+
Build Your Application
34+
</BreadcrumbLink>
35+
</BreadcrumbItem>
36+
<BreadcrumbSeparator className="hidden md:block" />
37+
<BreadcrumbItem>
38+
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
39+
</BreadcrumbItem>
40+
</BreadcrumbList>
41+
</Breadcrumb>
42+
</div>
43+
</header>
44+
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
45+
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
46+
<div className="aspect-video rounded-xl bg-muted/50" />
47+
<div className="aspect-video rounded-xl bg-muted/50" />
48+
<div className="aspect-video rounded-xl bg-muted/50" />
49+
</div>
50+
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
951
</div>
10-
)
11-
}
52+
</SidebarInset>
53+
</SidebarProvider>
54+
)
55+
}

‎app/docs/sidebar/nav-main.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
"use client"
2+
3+
import { ChevronRight, type LucideIcon } from "lucide-react"
4+
5+
import {
6+
Collapsible,
7+
CollapsibleContent,
8+
CollapsibleTrigger,
9+
} from "@/components/ui/collapsible"
10+
import {
11+
SidebarGroup,
12+
SidebarGroupLabel,
13+
SidebarMenu,
14+
SidebarMenuButton,
15+
SidebarMenuItem,
16+
SidebarMenuSub,
17+
SidebarMenuSubButton,
18+
SidebarMenuSubItem,
19+
} from "@/components/ui/sidebar"
20+
21+
export function NavMain({
22+
groups,
23+
}: {
24+
groups: {
25+
title: string
26+
items: {
27+
title: string
28+
url: string
29+
isActive?: boolean
30+
items?: {
31+
title: string
32+
url: string
33+
}[]
34+
}[]
35+
}[]
36+
}) {
37+
return (
38+
<>
39+
{groups.map((group) => (
40+
<SidebarGroup key={group.title}>
41+
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
42+
<SidebarMenu>
43+
{group.items.map((item) => {
44+
if (item.items && item.items.length > 0) {
45+
return (
46+
<Collapsible
47+
key={item.title}
48+
asChild
49+
defaultOpen={item.isActive}
50+
className="group/collapsible"
51+
>
52+
<SidebarMenuItem>
53+
<CollapsibleTrigger asChild>
54+
<SidebarMenuButton tooltip={item.title}>
55+
<span>{item.title}</span>
56+
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
57+
</SidebarMenuButton>
58+
</CollapsibleTrigger>
59+
<CollapsibleContent>
60+
<SidebarMenuSub>
61+
{item.items?.map((subItem) => (
62+
<SidebarMenuSubItem key={subItem.title}>
63+
<SidebarMenuSubButton asChild>
64+
<a href={subItem.url}>
65+
<span>{subItem.title}</span>
66+
</a>
67+
</SidebarMenuSubButton>
68+
</SidebarMenuSubItem>
69+
))}
70+
</SidebarMenuSub>
71+
</CollapsibleContent>
72+
</SidebarMenuItem>
73+
</Collapsible>
74+
)
75+
}
76+
return (
77+
<SidebarMenuItem key={item.title}>
78+
<SidebarMenuButton asChild tooltip={item.title}>
79+
<a href={item.url}>
80+
<span>{item.title}</span>
81+
</a>
82+
</SidebarMenuButton>
83+
</SidebarMenuItem>
84+
)
85+
})}
86+
</SidebarMenu>
87+
</SidebarGroup>
88+
))}
89+
</>
90+
)
91+
}

‎app/docs/sidebar/sidebar.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
5+
import { ChevronRight, type LucideIcon } from "lucide-react"
6+
import {
7+
Collapsible,
8+
CollapsibleContent,
9+
CollapsibleTrigger,
10+
} from "@/components/ui/collapsible"
11+
import {
12+
Sidebar,
13+
SidebarContent,
14+
SidebarFooter,
15+
SidebarHeader,
16+
SidebarRail,
17+
SidebarGroup,
18+
SidebarGroupLabel,
19+
SidebarMenu,
20+
SidebarMenuButton,
21+
SidebarMenuItem,
22+
SidebarMenuSub,
23+
SidebarMenuSubButton,
24+
SidebarMenuSubItem,
25+
} from "@/components/ui/sidebar"
26+
27+
// Here is where you can add pages to the sidebar. The structure is as follows:
28+
// - A sidebar is made up of groups, which have a title and contain items.
29+
// - An item can be:
30+
// - a page (with a title and target page)
31+
// - a collapsible item (with a title, url, and sub-pages).
32+
const data = {
33+
navGroups: [
34+
35+
{
36+
title: "About",
37+
items: [
38+
{
39+
title: "What is JavaBee?",
40+
url: "#",
41+
},
42+
{
43+
title: "Resources",
44+
url: "#",
45+
},
46+
{
47+
title: "Branding",
48+
url: "#",
49+
},
50+
],
51+
},
52+
53+
{
54+
title: "Programming",
55+
items: [
56+
{
57+
title: "Robot",
58+
url: "#",
59+
},
60+
{
61+
title: "Hardware",
62+
url: "#",
63+
items: [
64+
{
65+
title: "Motor",
66+
url: "#",
67+
},
68+
{
69+
title: "Servo",
70+
url: "#",
71+
},
72+
],
73+
},
74+
],
75+
},
76+
77+
{
78+
title: "Examples",
79+
items: [
80+
{
81+
title: "Example Pedro Autonomous",
82+
url: "#",
83+
},
84+
{
85+
title: "Example Teleop",
86+
url: "#",
87+
},
88+
],
89+
},
90+
91+
],
92+
}
93+
94+
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
95+
return (
96+
<Sidebar {...props}>
97+
<SidebarHeader/>
98+
<SidebarContent>
99+
{data.navGroups.map((group) => (
100+
<SidebarGroup key={group.title}>
101+
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
102+
<SidebarMenu>
103+
{group.items.map((item) => {
104+
if (item.items && item.items.length > 0) {
105+
return (
106+
<Collapsible
107+
key={item.title}
108+
asChild
109+
className="group/collapsible"
110+
>
111+
<SidebarMenuItem>
112+
<CollapsibleTrigger asChild>
113+
<SidebarMenuButton tooltip={item.title}>
114+
<span>{item.title}</span>
115+
<ChevronRight
116+
className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
117+
/>
118+
</SidebarMenuButton>
119+
</CollapsibleTrigger>
120+
<CollapsibleContent>
121+
<SidebarMenuSub>
122+
{item.items?.map((subItem) => (
123+
<SidebarMenuSubItem key={subItem.title}>
124+
<SidebarMenuSubButton asChild>
125+
<a href={subItem.url}>
126+
<span>{subItem.title}</span>
127+
</a>
128+
</SidebarMenuSubButton>
129+
</SidebarMenuSubItem>
130+
))}
131+
</SidebarMenuSub>
132+
</CollapsibleContent>
133+
</SidebarMenuItem>
134+
</Collapsible>
135+
)
136+
}
137+
return (
138+
<SidebarMenuItem key={item.title}>
139+
<SidebarMenuButton asChild tooltip={item.title}>
140+
<a href={item.url}>
141+
<span>{item.title}</span>
142+
</a>
143+
</SidebarMenuButton>
144+
</SidebarMenuItem>
145+
)
146+
})}
147+
</SidebarMenu>
148+
</SidebarGroup>
149+
))}
150+
</SidebarContent>
151+
<SidebarFooter/>
152+
<SidebarRail />
153+
</Sidebar>
154+
)
155+
}

‎app/ftc-utils/page.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import { Construction } from 'lucide-react';
22

33
export default function FTCUtilities() {
44
return (
5-
<div className="flex flex-col flex-1 p-6 h-full">
6-
<div className="flex flex-col items-center justify-center gap-2">
7-
<h1 className="text-2xl font-bold">General FTC Utilities</h1>
8-
<p className="text-md text-muted-foreground text-center">Search for or select a utility from below</p>
9-
</div>
5+
<div className="flex flex-col items-center justify-center flex-1 gap-4">
6+
<Construction className="size-20 text-muted-foreground" />
7+
<h1 className="text-3xl font-bold">General FTC Utilities</h1>
8+
<p className="text-md text-muted-foreground">This page will hold useful utilities like pulley/belt calculators, CAD libraries, resources, etc.</p>
109
</div>
1110
)
1211
}

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
--chart-3: oklch(0.681 0.162 75.834);
107107
--chart-4: oklch(0.554 0.135 66.442);
108108
--chart-5: oklch(0.476 0.114 61.907);
109-
--sidebar: oklch(0.205 0 0);
109+
--sidebar: oklch(0.1736 0 0);
110110
--sidebar-foreground: oklch(0.985 0 0);
111111
--sidebar-primary: oklch(0.795 0.184 86.047);
112112
--sidebar-primary-foreground: oklch(0.987 0.026 102.212);

‎app/layout.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Instrument_Sans } from 'next/font/google';
22
import { ThemeProvider } from "@/components/theme-provider"
3-
import "./globals.css"
3+
import { TooltipProvider } from '@/components/ui/tooltip';
4+
import "@/app/globals.css"
45

56
const instrumentSans = Instrument_Sans({
67
subsets: ['latin'],
@@ -11,7 +12,11 @@ export default function RootLayout({children}: Readonly<{children: React.ReactNo
1112
return (
1213
<html lang="en" suppressHydrationWarning className={instrumentSans.className}>
1314
<body>
14-
<ThemeProvider>{children}</ThemeProvider>
15+
<ThemeProvider>
16+
<TooltipProvider>
17+
{children}
18+
</TooltipProvider>
19+
</ThemeProvider>
1520
</body>
1621
</html>
1722
)

‎app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function Home() {
2121
<div className="flex-1 flex flex-col w-full h-full">
2222
<Content setCurrentTab={setCurrentTab} />
2323
</div>
24-
<Footer className="w-full mt-auto shrink-0" />
24+
{!(currentTab === 'docs') && <Footer className="w-full mt-auto shrink-0" />}
2525
</div>
2626
);
2727
}

‎components/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export function Footer({ className }: { className?: string }) {
22
return (
3-
<footer className={`mt-auto border-t border-fd-border py-6 px-6 text-center text-sm text-muted-foreground ${className ?? ''}`}>
3+
<footer className={`mt-auto border-t border-fd-border py-4 px-6 text-center text-sm text-muted-foreground ${className ?? ''}`}>
44
&copy; 2026 JavaBee. JavaBee is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html" className="text-fd-foreground hover:underline">GNU General Public License v3.0</a>. The JavaBee name and logo are trademarks of JavaBee.
55
</footer>
66
);

‎components/ui/sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function SidebarProvider({
137137
} as React.CSSProperties
138138
}
139139
className={cn(
140-
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
140+
"group/sidebar-wrapper relative flex min-h-0 flex-1 w-full has-data-[variant=inset]:bg-sidebar",
141141
className
142142
)}
143143
{...props}
@@ -229,7 +229,7 @@ function Sidebar({
229229
data-slot="sidebar-container"
230230
data-side={side}
231231
className={cn(
232-
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
232+
"absolute inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
233233
// Adjust the padding for floating and inset variants.
234234
variant === "floating" || variant === "inset"
235235
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"

0 commit comments

Comments
 (0)