refactor(website): extract layouts and use more server components (#9027)

Closes https://github.com/discordjs/discord.js/issues/8920
Closes https://github.com/discordjs/discord.js/issues/8997

apps/website/src/components/documentation/section/ConstructorSection.tsx

@@ -0,0 +1,30 @@
+import type { ApiConstructor } from '@microsoft/api-extractor-model';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { useCallback } from 'react';
+import { TSDoc } from '../tsdoc/TSDoc';
+import { ResponsiveSection } from './ResponsiveSection';
+import { ParameterTable } from '~/components/ParameterTable';
+
+export function ConstructorSection({ item }: { item: ApiConstructor }) {
+	const getShorthandName = useCallback(
+		(ctor: ApiConstructor) =>
+			`constructor(${ctor.parameters.reduce((prev, cur, index) => {
+				if (index === 0) {
+					return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
+				}
+
+				return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
+			}, '')})`,
+		[],
+	);
+
+	return (
+		<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
+			<div className="flex flex-col gap-2">
+				<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(item)}</h4>
+				{item.tsdocComment ? <TSDoc item={item} tsdoc={item.tsdocComment} /> : null}
+				<ParameterTable item={item} />
+			</div>
+		</ResponsiveSection>
+	);
+}

apps/website/src/components/documentation/section/MethodsSection.tsx

@@ -0,0 +1,45 @@
+import type {
+	ApiDeclaredItem,
+	ApiItem,
+	ApiItemContainerMixin,
+	ApiMethod,
+	ApiMethodSignature,
+} from '@microsoft/api-extractor-model';
+import { ApiItemKind } from '@microsoft/api-extractor-model';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { useMemo, Fragment } from 'react';
+import { ResponsiveSection } from './ResponsiveSection';
+import { Method } from '~/components/model/method/Method';
+import { resolveMembers } from '~/util/members';
+
+function isMethodLike(item: ApiItem): item is ApiMethod | ApiMethodSignature {
+	return (
+		item.kind === ApiItemKind.Method ||
+		(item.kind === ApiItemKind.MethodSignature && (item as ApiMethod).overloadIndex <= 1)
+	);
+}
+
+export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
+	const members = resolveMembers(item, isMethodLike);
+
+	const methodItems = useMemo(
+		() =>
+			members.map(({ item: method, inherited }) => (
+				<Fragment
+					key={`${method.displayName}${
+						method.overloadIndex && method.overloadIndex > 1 ? `:${(method as ApiMethod).overloadIndex}` : ''
+					}`}
+				>
+					<Method inheritedFrom={inherited as ApiDeclaredItem & ApiItemContainerMixin} method={method} />
+					<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+				</Fragment>
+			)),
+		[members],
+	);
+
+	return (
+		<ResponsiveSection icon={<VscSymbolMethod size={20} />} padded title="Methods">
+			<div className="flex flex-col gap-4">{methodItems}</div>
+		</ResponsiveSection>
+	);
+}

apps/website/src/components/documentation/section/ParametersSection.tsx

@@ -0,0 +1,12 @@
+import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
+import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { ResponsiveSection } from './ResponsiveSection';
+import { ParameterTable } from '~/components/ParameterTable';
+
+export function ParameterSection({ item }: { item: ApiParameterListMixin }) {
+	return (
+		<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
+			<ParameterTable item={item} />
+		</ResponsiveSection>
+	);
+}

apps/website/src/components/documentation/section/PropertiesSection.tsx

@@ -0,0 +1,12 @@
+import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model';
+import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
+import { ResponsiveSection } from './ResponsiveSection';
+import { PropertyList } from '~/components/PropertyList';
+
+export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
+	return (
+		<ResponsiveSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
+			<PropertyList item={item} />
+		</ResponsiveSection>
+	);
+}

apps/website/src/components/documentation/section/ResponsiveSection.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { SectionOptions } from '@discordjs/ui';
+import { Section } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+import { useMedia } from 'react-use';
+
+export function ResponsiveSection(opts: PropsWithChildren<SectionOptions & { separator?: boolean }>) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	const { children, separator, ...rest } = opts;
+
+	const props = {
+		...rest,
+		dense: matches,
+	};
+
+	return (
+		<Section {...props}>
+			{children}
+			{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
+		</Section>
+	);
+}

apps/website/src/components/documentation/section/SummarySection.tsx

@@ -0,0 +1,16 @@
+import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
+import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
+import { TSDoc } from '../tsdoc/TSDoc';
+import { ResponsiveSection } from './ResponsiveSection';
+
+export function SummarySection({ item }: { item: ApiDeclaredItem }) {
+	return (
+		<ResponsiveSection icon={<VscListSelection size={20} />} padded separator title="Summary">
+			{item.tsdocComment?.summarySection ? (
+				<TSDoc item={item} tsdoc={item.tsdocComment} />
+			) : (
+				<p>No summary provided.</p>
+			)}
+		</ResponsiveSection>
+	);
+}

apps/website/src/components/documentation/section/TypeParametersSection.tsx

@@ -0,0 +1,12 @@
+import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
+import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { ResponsiveSection } from './ResponsiveSection';
+import { TypeParamTable } from '~/components/TypeParamTable';
+
+export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
+	return (
+		<ResponsiveSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
+			<TypeParamTable item={item} />
+		</ResponsiveSection>
+	);
+}