feat(website): add support for function overloads (#8474)

Co-authored-by: Noel <buechler.noel@outlook.com>

packages/website/src/components/DocContainer.tsx

@@ -42,6 +42,13 @@ export function DocContainer({
 			</div>
 
 			<div className="min-h-full overflow-y-auto overflow-x-clip px-10 pt-5 pb-10">
+				<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
+					{summary ? (
+						<CommentSection textClassName="text-dark-100 dark:text-gray-300" node={summary} />
+					) : (
+						<p className="text-dark-100 dark:text-gray-300">No summary provided.</p>
+					)}
+				</Section>
 				<SyntaxHighlighter
 					wrapLines
 					wrapLongLines
@@ -75,13 +82,6 @@ export function DocContainer({
 					</div>
 				) : null}
 				<div className="space-y-10">
-					<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
-						{summary ? (
-							<CommentSection textClassName="text-dark-100 dark:text-gray-300" node={summary} />
-						) : (
-							<p className="text-dark-100 dark:text-gray-300">No summary provided.</p>
-						)}
-					</Section>
 					{typeParams?.length ? (
 						<Section
 							iconElement={<VscSymbolParameter />}

packages/website/src/components/ItemSidebar.tsx

@@ -1,6 +1,7 @@
 import { FiMenu } from 'react-icons/fi';
 import { VscPackage } from 'react-icons/vsc';
 import { ListSidebar } from './ListSidebar';
+import type { DocItem } from '~/DocModel/DocItem';
 import type { getMembers } from '~/util/parse.server';
 
 export interface ItemListProps {
@@ -9,7 +10,7 @@ export interface ItemListProps {
 		members: ReturnType<typeof getMembers>;
 	};
 
-	selectedMember?: string | undefined;
+	selectedMember?: ReturnType<DocItem['toJSON']> | undefined;
 }
 
 function onMenuClick() {

packages/website/src/components/ListSidebar.tsx

@@ -9,12 +9,13 @@ import {
 } from 'react-icons/vsc';
 import type { ItemListProps } from './ItemSidebar';
 import { Section } from './Section';
+import type { DocItem } from '~/DocModel/DocItem';
 
 export type Members = ItemListProps['data']['members'];
 
 export interface ListSidebarSectionProps {
 	members: Members;
-	selectedMember?: string | undefined;
+	selectedMember?: ReturnType<DocItem['toJSON']> | undefined;
 	title: string;
 }
 
@@ -93,12 +94,12 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
 							{groupItems[group].map((member, i) => (
 								<div
 									key={i}
-									className="flex gap-2 whitespace-pre-wrap no-underline break-all text-blue-500 dark:text-blue-300"
+									className="flex gap-2 whitespace-pre-wrap no-underline break-all justify-between text-blue-500 dark:text-blue-300"
 								>
 									<Link href={member.path}>
 										<a
 											className={`no-underline m-0 text-sm font-semibold ${
-												selectedMember === member.name
+												selectedMember?.containerKey === member.containerKey
 													? 'text-blue-500 dark:text-blue-300'
 													: 'text-gray-500 dark:text-gray-300 hover:text-dark-100 dark:hover:text-white'
 											}`}
@@ -106,6 +107,13 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
 											{member.name}
 										</a>
 									</Link>
+									<div>
+										{member.overloadIndex && member.overloadIndex > 1 ? (
+											<div className="flex font-mono w-[15px] h-[15px] items-center justify-center rounded-md border border-2 font-bold text-sm color-gray-500 dark:color-gray-300">
+												<p className="font-semibold">{`${member.overloadIndex}`}</p>
+											</div>
+										) : null}
+									</div>
 								</div>
 							))}
 						</div>

packages/website/src/components/SidebarLayout.tsx

@@ -15,13 +15,13 @@ export function SidebarLayout({
 			<div className="flex flex-col lg:flex-row overflow-hidden">
 				<div className="h-full w-full lg:max-w-[310px] lg:min-w-[310px]">
 					{packageName && data ? (
-						<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
+						<ItemSidebar packageName={packageName} data={data} selectedMember={data.member} />
 					) : null}
 				</div>
 				<div className="h-full grow">{children}</div>
 				<div className="h-full w-full lg:max-w-[310px] lg:min-w-[310px]">
 					{packageName && data?.member ? (
-						<ItemSidebar packageName={packageName} data={data} selectedMember={data.member.name} />
+						<ItemSidebar packageName={packageName} data={data} selectedMember={data.member} />
 					) : null}
 				</div>
 			</div>

packages/website/src/components/model/Function.tsx

@@ -9,7 +9,7 @@ export interface FunctionProps {
 export function Function({ data }: FunctionProps) {
 	return (
 		<DocContainer
-			name={data.name}
+			name={`${data.name}${data.overloadIndex ? ` (${data.overloadIndex})` : ''}`}
 			kind={data.kind}
 			excerpt={data.excerpt}
 			summary={data.summary}