& { icon?: string }) {
+ return (
+
+ {icon && {icon}}
+ {title && {title} }
+ {children}
+
+ );
+}
diff --git a/packages/website/src/components/code-block-wrapper.tsx b/packages/website/src/components/code-block-wrapper.tsx
new file mode 100644
index 000000000..4954df669
--- /dev/null
+++ b/packages/website/src/components/code-block-wrapper.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+
+interface CodeBlockProps extends React.HTMLAttributes {
+ expandButtonTitle?: string;
+}
+
+export function CodeBlockWrapper({
+ expandButtonTitle = 'View Code',
+ className,
+ children,
+ ...props
+}: CodeBlockProps) {
+ const [isOpened, setIsOpened] = React.useState(false);
+
+ return (
+
+
+ );
+}
diff --git a/packages/website/src/components/docs.tsx b/packages/website/src/components/docs.tsx
new file mode 100644
index 000000000..0512ffafa
--- /dev/null
+++ b/packages/website/src/components/docs.tsx
@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import { type Guides } from 'contentlayer/generated';
+import {
+ Card,
+ CardTitle,
+ CardDescription,
+ CardHeader,
+} from '@/components/ui/card';
+import { ArrowRightIcon, ArrowLeftIcon } from '@radix-ui/react-icons';
+import { cn } from '@/lib/utils';
+
+export const NavDocsCard = ({
+ title,
+ description,
+ type,
+ href,
+ className,
+}: {
+ title: string;
+ type: 'next' | 'prev';
+ description: string;
+ href: string;
+ className: string;
+}) => {
+ const icon = {
+ next:
+
+ {icon[type]}
+ {title}
+ {description}
+
+
+
+ );
+};
+
+export const DocsNav = ({ guide }: { guide: Guides }) => (
+ ) => (
+ ) => (
+
+ ),
+ h2: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ h3: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ h4: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ h5: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ h6: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ a: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ p: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ ul: ({ className, ...props }: React.HTMLAttributes) => (
+ ) => (
+ ) => (
+
+ ),
+ blockquote: ({ className, ...props }: React.HTMLAttributes) => (
+
+ ),
+ img: ({
+ className,
+ alt,
+ ...props
+ }: React.ImgHTMLAttributes) => (
+ // eslint-disable-next-line @next/next/no-img-element
+ ![{alt}]()
+ ),
+ hr: ({ ...props }: React.HTMLAttributes) => (
+
+ ), + Table: ({ className, ...props }: React.HTMLAttributes) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+ ) => (
+
+ ),
+ LinkedCard: ({ className, ...props }: React.ComponentProps) => (
+
+ ),
+ FilesBlock,
+};
+
+interface MdxProps {
+ code: string;
+}
+
+export function Mdx({ code }: MdxProps) {
+ const Component = useMDXComponent(code, {
+ style: {
+ name: 'default',
+ label: 'Default',
+ },
+ });
+
+ return (
+ ) => {
+ const [hasCopied, setHasCopied] = React.useState(false);
+ const [html, setHtml] = React.useState('');
+ const command = (props.children as any).props.children as string;
+
+ // Handle the async code highlighting
+ React.useEffect(() => {
+ const highlightCode = async () => {
+ if (!command) return;
+
+ const highlighted = await codeToHtml(command, {
+ lang: 'bash',
+ theme: 'github-dark-default',
+ transformers: [
+ {
+ code(node) {
+ node.properties['data-line-numbers'] = '';
+ },
+ },
+ ],
+ });
+
+ setHtml(highlighted);
+ };
+
+ void highlightCode();
+ }, [command]);
+
+ async function copyToClipboard() {
+ if (!command) return;
+ await navigator.clipboard.writeText(command);
+ setHasCopied(true);
+ setTimeout(() => setHasCopied(false), 2000);
+ }
+
+ return (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ svg]:size-4 [&>svg]:shrink-0',
+ inset && 'pl-8',
+ className
+ )}
+ {...props}
+ />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+};
diff --git a/packages/website/src/components/ui/file-tree.tsx b/packages/website/src/components/ui/file-tree.tsx
new file mode 100644
index 000000000..d8787d450
--- /dev/null
+++ b/packages/website/src/components/ui/file-tree.tsx
@@ -0,0 +1,393 @@
+'use client';
+
+import React, {
+ createContext,
+ forwardRef,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+type TreeViewElement = {
+ id: string;
+ name: string;
+ isSelectable?: boolean;
+ children?: TreeViewElement[];
+};
+
+type TreeContextProps = {
+ selectedId: string | undefined;
+ expandedItems: string[] | undefined;
+ indicator: boolean;
+ handleExpand: (id: string) => void;
+ selectItem: (id: string) => void;
+ setExpandedItems?: React.Dispatch>;
+ openIcon?: React.ReactNode;
+ closeIcon?: React.ReactNode;
+ direction: 'rtl' | 'ltr';
+};
+
+const TreeContext = createContext(null);
+
+const useTree = () => {
+ const context = useContext(TreeContext);
+ if (!context) {
+ throw new Error('useTree must be used within a TreeProvider');
+ }
+ return context;
+};
+
+type TreeViewComponentProps = React.HTMLAttributes;
+
+type Direction = 'rtl' | 'ltr' | undefined;
+
+type TreeViewProps = {
+ initialSelectedId?: string;
+ indicator?: boolean;
+ elements?: TreeViewElement[];
+ initialExpandedItems?: string[];
+ openIcon?: React.ReactNode;
+ closeIcon?: React.ReactNode;
+} & TreeViewComponentProps;
+
+const Tree = forwardRef(
+ (
+ {
+ className,
+ elements,
+ initialSelectedId,
+ initialExpandedItems,
+ children,
+ indicator = true,
+ openIcon,
+ closeIcon,
+ dir,
+ ...props
+ },
+ ref
+ ) => {
+ const [selectedId, setSelectedId] = useState(
+ initialSelectedId
+ );
+ const [expandedItems, setExpandedItems] = useState(
+ initialExpandedItems
+ );
+
+ const selectItem = useCallback((id: string) => {
+ setSelectedId(id);
+ }, []);
+
+ const handleExpand = useCallback((id: string) => {
+ setExpandedItems((prev) => {
+ if (prev?.includes(id)) {
+ return prev.filter((item) => item !== id);
+ }
+ return [...(prev ?? []), id];
+ });
+ }, []);
+
+ const expandSpecificTargetedElements = useCallback(
+ (elements?: TreeViewElement[], selectId?: string) => {
+ if (!elements || !selectId) return;
+ const findParent = (
+ currentElement: TreeViewElement,
+ currentPath: string[] = []
+ ) => {
+ const isSelectable = currentElement.isSelectable ?? true;
+ const newPath = [...currentPath, currentElement.id];
+ if (currentElement.id === selectId) {
+ if (isSelectable) {
+ setExpandedItems((prev) => [...(prev ?? []), ...newPath]);
+ } else {
+ if (newPath.includes(currentElement.id)) {
+ newPath.pop();
+ setExpandedItems((prev) => [...(prev ?? []), ...newPath]);
+ }
+ }
+ return;
+ }
+ if (
+ isSelectable &&
+ currentElement.children &&
+ currentElement.children.length > 0
+ ) {
+ currentElement.children.forEach((child) => {
+ findParent(child, newPath);
+ });
+ }
+ };
+ elements.forEach((element) => {
+ findParent(element);
+ });
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ []
+ );
+
+ useEffect(() => {
+ if (initialSelectedId) {
+ expandSpecificTargetedElements(elements, initialSelectedId);
+ }
+ }, [initialSelectedId, elements]);
+
+ const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+
+ return (
+
+
+ );
+ }
+);
+
+Tree.displayName = 'Tree';
+
+const TreeIndicator = forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { direction } = useTree();
+
+ return (
+
+ );
+});
+
+TreeIndicator.displayName = 'TreeIndicator';
+
+type FolderComponentProps = React.ComponentPropsWithoutRef<
+ typeof AccordionPrimitive.Item
+>;
+
+type FolderProps = {
+ expandedItems?: string[];
+ element: string;
+ isSelectable?: boolean;
+ isSelect?: boolean;
+} & FolderComponentProps;
+
+const Folder = forwardRef<
+ HTMLDivElement,
+ FolderProps & React.HTMLAttributes
+>(
+ (
+ {
+ className,
+ element,
+ value,
+ isSelectable = true,
+ isSelect,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const {
+ direction,
+ handleExpand,
+ expandedItems,
+ indicator,
+ setExpandedItems,
+ openIcon,
+ closeIcon,
+ } = useTree();
+
+ return (
+
+ handleExpand(value)}
+ >
+ {expandedItems?.includes(value)
+ ? openIcon ??
+
+ {element && indicator && }
+ {
+ setExpandedItems?.((prev) => [...(prev ?? []), value[0]]);
+ }}
+ >
+ {children}
+
+
+
+ );
+ }
+);
+
+Folder.displayName = 'Folder';
+
+const File = forwardRef<
+ HTMLButtonElement,
+ {
+ value: string;
+ isSelectable?: boolean;
+ isSelect?: boolean;
+ fileIcon?: React.ReactNode;
+ } & React.ComponentPropsWithoutRef
+>(
+ (
+ {
+ value,
+ className,
+ isSelectable = true,
+ isSelect,
+ fileIcon,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const { direction, selectedId, selectItem } = useTree();
+ const isSelected = isSelect ?? selectedId === value;
+ return (
+
+ selectItem(value)}
+ >
+ {fileIcon ??
+
+ );
+ }
+);
+
+File.displayName = 'File';
+
+const CollapseButton = forwardRef<
+ HTMLButtonElement,
+ {
+ elements: TreeViewElement[];
+ expandAll?: boolean;
+ } & React.HTMLAttributes
+>(({ elements, expandAll = false, children, ...props }, ref) => {
+ const { expandedItems, setExpandedItems } = useTree();
+
+ const expendAllTree = useCallback((elements: TreeViewElement[]) => {
+ const expandTree = (element: TreeViewElement) => {
+ const isSelectable = element.isSelectable ?? true;
+ if (isSelectable && element.children && element.children.length > 0) {
+ setExpandedItems?.((prev) => [...(prev ?? []), element.id]);
+ element.children.forEach(expandTree);
+ }
+ };
+
+ elements.forEach(expandTree);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const closeAll = useCallback(() => {
+ setExpandedItems?.([]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ if (expandAll) {
+ expendAllTree(elements);
+ }
+ }, [expandAll]);
+
+ return (
+
+ );
+});
+
+CollapseButton.displayName = 'CollapseButton';
+
+export { CollapseButton, File, Folder, Tree, type TreeViewElement };
diff --git a/packages/website/src/components/ui/scroll-area.tsx b/packages/website/src/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..6b9cf489c
--- /dev/null
+++ b/packages/website/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+
+
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/packages/website/src/features/Debug/DebugPage.tsx b/packages/website/src/features/Debug/DebugPage.tsx
index 7d4f54174..7bbd77e47 100644
--- a/packages/website/src/features/Debug/DebugPage.tsx
+++ b/packages/website/src/features/Debug/DebugPage.tsx
@@ -6,11 +6,11 @@ import Link from 'next/link';
export const DebugPage = () => {
return (
<>
-
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ {guide.before && (
+
+);
diff --git a/packages/website/src/components/files-block.tsx b/packages/website/src/components/files-block.tsx
new file mode 100644
index 000000000..f8b6b265d
--- /dev/null
+++ b/packages/website/src/components/files-block.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import React from 'react';
+import { File, Folder, Tree } from '@/components/ui/file-tree';
+
+export const FilesBlock = ({
+ quantity,
+ elements,
+}: {
+ quantity: number;
+ elements: any[];
+}) => {
+ const initiaExpanded = Array.from({ length: quantity }, (_, i) =>
+ (i + 1).toString()
+ );
+
+ const ITEM_TYPE: { [key: string]: React.ElementType } = {
+ folder: (props) =>
+
+ {elements.map((element) => {
+ const Component = ITEM_TYPE[
+ element.type as string
+ ] as React.ElementType;
+
+ return (
+
+ {element.children ? (
+ element.children.map((first: any) => {
+ const Component = ITEM_TYPE[first.type] as React.ElementType;
+
+ return (
+ <>
+
+ {first.children
+ ? first.children.map((second: any) => {
+ const Component = ITEM_TYPE[
+ second.type
+ ] as React.ElementType;
+
+ return (
+ <>
+
+ {second.children
+ ? second.children.map((third: any) => {
+ const Component = ITEM_TYPE[
+ third.type
+ ] as React.ElementType;
+
+ return (
+ <>
+
+ {third.type === 'file' && (
+
+
+ );
+ })
+ : second.type === 'file' && (
+
+
+ );
+ })
+ : first.type === 'file' &&
+
+ );
+ })
+ ) : (
+
+ );
+ })}
+
+
+ );
+};
diff --git a/packages/website/src/components/mdx-components.tsx b/packages/website/src/components/mdx-components.tsx
new file mode 100644
index 000000000..fcbdceafa
--- /dev/null
+++ b/packages/website/src/components/mdx-components.tsx
@@ -0,0 +1,254 @@
+'use client';
+
+import * as React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+import { cn } from '@/lib/utils';
+import { Callout } from '@/components/callout';
+import { CodeBlockWrapper } from '@/components/code-block-wrapper';
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Snippet } from '@/components/snippet';
+import { FilesBlock } from '@/components/files-block';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+
+const components = {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Alert: ({
+ className,
+ ...props
+ }: { className?: string } & React.ComponentProps{third.name}
+ )} +{second.name}
+ )} +{first.name}
} +{element.name}
+ )} +
+
+ ),
+ AlertTitle,
+ AlertDescription,
+ InfoCircledIcon,
+ h1: ({ className, ...props }: React.HTMLAttributes+ ), + Table: ({ className, ...props }: React.HTMLAttributes
+
+
+ ),
+ Tr: ({ className, ...props }: React.HTMLAttributes
+
+ ),
+ TabsList: ({
+ className,
+ ...props
+ }: React.ComponentProps
+
+ ),
+ Link: ({ className, ...props }: React.ComponentProps
+
+ );
+}
diff --git a/packages/website/src/components/snippet.tsx b/packages/website/src/components/snippet.tsx
new file mode 100644
index 000000000..cb155f18d
--- /dev/null
+++ b/packages/website/src/components/snippet.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { codeToHtml } from 'shiki';
+import { Check, Copy } from 'react-feather';
+import { Button } from '@/components/ui/button';
+
+export const Snippet = ({ ...props }: React.HTMLAttributes
+
+ {command && (
+
+ )}
+
+ );
+};
diff --git a/packages/website/src/components/style-wrapper.tsx b/packages/website/src/components/style-wrapper.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/website/src/components/ui/alert.tsx b/packages/website/src/components/ui/alert.tsx
index ee693cb84..ebc47f916 100644
--- a/packages/website/src/components/ui/alert.tsx
+++ b/packages/website/src/components/ui/alert.tsx
@@ -9,8 +9,11 @@ const alertVariants = cva(
variants: {
variant: {
default: 'bg-background text-foreground border-border',
+ info: 'bg-teal-100/10 text-teal-100 border-border border-teal-100/20',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+ warning:
+ 'bg-yellow-100/10 text-yellow-100 border-border border-yellow-100/20',
},
},
defaultVariants: {
diff --git a/packages/website/src/components/ui/aspect-ratio.tsx b/packages/website/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 000000000..5dfdf1e67
--- /dev/null
+++ b/packages/website/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
diff --git a/packages/website/src/components/ui/dropdown-menu.tsx b/packages/website/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..7d724b308
--- /dev/null
+++ b/packages/website/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
+import {
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from '@radix-ui/react-icons';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ setExpandedItems((prev) => [...(prev ?? []), value[0]])
+ }
+ dir={dir as Direction}
+ >
+ {children}
+
+
+
+
+
Debugging Tips
-
+
Troubleshoot issues with your protocol during development and testing.
diff --git a/packages/website/src/features/Docs/DocsLandingPage.tsx b/packages/website/src/features/Docs/DocsLandingPage.tsx index f352e8c5b..93fe1d259 100644 --- a/packages/website/src/features/Docs/DocsLandingPage.tsx +++ b/packages/website/src/features/Docs/DocsLandingPage.tsx @@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button'; const DocsLandingPage = () => { return ( -
+
- Introducing Cannon
@@ -198,7 +198,7 @@ const DocsLandingPage = () => {
-
+
+
diff --git a/packages/website/src/pages/learn/guides/index.tsx b/packages/website/src/pages/learn/guides/index.tsx
index 89facd060..925c98128 100644
--- a/packages/website/src/pages/learn/guides/index.tsx
+++ b/packages/website/src/pages/learn/guides/index.tsx
@@ -10,7 +10,7 @@ export default function Home() {
const router = useRouter();
useEffect(() => {
router
- .push(links.GETSTARTED)
+ .push(`${links.GETSTARTED}/introduction`)
.then(() => {
// do nothing
})
diff --git a/packages/website/src/pages/learn/guides/router/index.tsx b/packages/website/src/pages/learn/guides/router/index.tsx
index 04e85f406..b23bfb478 100644
--- a/packages/website/src/pages/learn/guides/router/index.tsx
+++ b/packages/website/src/pages/learn/guides/router/index.tsx
@@ -7,7 +7,7 @@ import defaultSEO from '@/constants/defaultSeo';
export default function Home() {
return (
- <>
+
{/* Sidebar */}
@@ -59,11 +91,34 @@ export default function GuideLayout({ children }: { children: ReactNode }) {
asChild
className={cn(
'w-full',
- pathname === item.href && 'bg-muted font-medium'
+ pathname === item.href &&
+ !item.nav &&
+ 'bg-muted font-medium'
)}
>
- {item.text}
+ {item.text}
+ {item.nav && (
+
+ {item.nav?.map((navItem) => (
+
+
+
+ {navItem.text}
+
+
+
+ ))}
+
+ )}
))}
@@ -75,7 +130,10 @@ export default function GuideLayout({ children }: { children: ReactNode }) {
-
+
Coming Soon
@@ -88,7 +146,7 @@ export default function GuideLayout({ children }: { children: ReactNode }) {
{/* Main content */}
- {children}
+ {children}