refactor: docs design (#8487)

packages/website/src/pages/docs/[...slug].tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-throw-literal */
+import { Box } from '@mantine/core';
 import { ApiFunction } from '@microsoft/api-extractor-model';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import type { DocClass } from '~/DocModel/DocClass';
@@ -7,8 +8,7 @@ import type { DocFunction } from '~/DocModel/DocFunction';
 import type { DocInterface } from '~/DocModel/DocInterface';
 import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
 import type { DocVariable } from '~/DocModel/DocVariable';
-import type { ItemListProps } from '~/components/ItemSidebar';
-import { SidebarLayout } from '~/components/SidebarLayout';
+import { SidebarLayout, type SidebarLayoutProps } from '~/components/SidebarLayout';
 import { Class } from '~/components/model/Class';
 import { Enum } from '~/components/model/Enum';
 import { Function } from '~/components/model/Function';
@@ -26,10 +26,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
 	const pkgs = (
 		await Promise.all(
 			packages.map(async (packageName) => {
-				if (packageName === 'rest') {
-					return { params: { slug: ['main', 'packages', packageName] } };
-				}
-
 				try {
 					const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/main.api.json`);
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -40,16 +36,21 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 					return [
 						{ params: { slug: ['main', 'packages', packageName] } },
-						...getMembers(pkg!).map((member) => {
-							if (member.kind === 'Function' && member.overloadIndex) {
-								return {
-									params: {
-										slug: ['main', 'packages', packageName, `${member.name}:${member.overloadIndex}`],
-									},
-								};
-							}
-							return { params: { slug: ['main', 'packages', packageName, member.name] } };
-						}),
+						...getMembers(pkg!)
+							// Filtering out enum `RESTEvents` because of interface with similar name `RestEvents`
+							// causing next.js export to error
+							.filter((member) => member.name !== 'RESTEvents')
+							.map((member) => {
+								if (member.kind === 'Function' && member.overloadIndex) {
+									return {
+										params: {
+											slug: ['main', 'packages', packageName, `${member.name}:${member.overloadIndex}`],
+										},
+									};
+								}
+
+								return { params: { slug: ['main', 'packages', packageName, member.name] } };
+							}),
 					];
 				} catch {
 					return { params: { slug: ['', '', '', ''] } };
@@ -77,8 +78,8 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 		const model = createApiModel(data);
 		const pkg = findPackage(model, packageName);
 
-		let { containerKey, name } = findMember(model, packageName, memberName)!;
-		if (overloadIndex) {
+		let { containerKey, name } = findMember(model, packageName, memberName) ?? {};
+		if (name && overloadIndex) {
 			containerKey = ApiFunction.getContainerKey(name, parseInt(overloadIndex, 10));
 		}
 
@@ -87,7 +88,8 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 				packageName,
 				data: {
 					members: pkg ? getMembers(pkg) : [],
-					member: memberName ? findMemberByKey(model, packageName, containerKey)?.toJSON() ?? null : null,
+					member:
+						memberName && containerKey ? findMemberByKey(model, packageName, containerKey)?.toJSON() ?? null : null,
 				},
 			},
 		};
@@ -116,13 +118,11 @@ const member = (props: any) => {
 		case 'Enum':
 			return <Enum data={props as ReturnType<DocEnum['toJSON']>} />;
 		default:
-			return <div>Cannot render that item type</div>;
+			return <Box>Cannot render that item type</Box>;
 	}
 };
 
-export default function Slug(
-	props: Partial<ItemListProps & { error?: string; data: { member: ReturnType<typeof findMember> } }>,
-) {
+export default function Slug(props: Partial<SidebarLayoutProps & { error?: string }>) {
 	return props.error ? (
 		<div className="flex max-w-full h-full bg-white dark:bg-dark">{props.error}</div>
 	) : (

packages/website/src/pages/docs/index.tsx

@@ -1,3 +0,0 @@
-export default function DocsLanding() {
-	return <div>Documentation</div>;
-}