feat(website): render syntax and mdx on the server (#9086)

apps/website/src/components/CmdK.tsx

@@ -48,10 +48,10 @@ export function CmdKDialog() {
 
 	const searchResultItems = useMemo(
 		() =>
-			searchResults?.map((item) => (
+			searchResults?.map((item, idx) => (
 				<Command.Item
 					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
-					key={item.id}
+					key={`${item.id}-${idx}`}
 					onSelect={() => {
 						router.push(item.path);
 						dialog!.setOpen(false);

apps/website/src/components/ExcerptText.tsx

@@ -1,7 +1,6 @@
 import type { ApiModel, Excerpt } from '@microsoft/api-extractor-model';
 import { ExcerptTokenKind } from '@microsoft/api-extractor-model';
 import { ItemLink } from './ItemLink';
-import { resolveItemURI } from './documentation/util';
 
 export interface ExcerptTextProps {
 	/**
@@ -29,7 +28,12 @@ export function ExcerptText({ model, excerpt }: ExcerptTextProps) {
 					}
 
 					return (
-						<ItemLink className="text-blurple" itemURI={resolveItemURI(item)} key={item.containerKey}>
+						<ItemLink
+							className="text-blurple"
+							itemURI={`${item.displayName}:${item.kind}`}
+							key={`${item.displayName}-${item.containerKey}`}
+							packageName={item.getAssociatedPackage()?.displayName.replace('@discordjs/', '')}
+						>
 							{token.text}
 						</ItemLink>
 					);

apps/website/src/components/Header.tsx

@@ -1,25 +1,21 @@
 'use client';
 
 import { FiCommand } from '@react-icons/all-files/fi/FiCommand';
-// import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
 import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
 import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
 import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
 import { Button } from 'ariakit/button';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-// import { useTheme } from 'next-themes';
 import { Fragment, useEffect, useMemo, useState } from 'react';
+import { ThemeSwitcher } from './ThemeSwitcher';
 import { useCmdK } from '~/contexts/cmdK';
 import { useNav } from '~/contexts/nav';
 
 export function Header() {
 	const pathname = usePathname();
-	// eslint-disable-next-line @typescript-eslint/unbound-method
 	const { setOpened } = useNav();
-	// const { resolvedTheme, setTheme } = useTheme();
 	const dialog = useCmdK();
-	// const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
 	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
 
 	useEffect(() => {
@@ -40,7 +36,7 @@ export function Header() {
 					<Link
 						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
 						href={`/${original.slice(0, idx + 1).join('/')}`}
-						key={idx}
+						key={`${path}-${idx}`}
 					>
 						{path}
 					</Link>
@@ -53,7 +49,7 @@ export function Header() {
 			pathElements.flatMap((el, idx, array) => {
 				if (idx === 0) {
 					return (
-						<Fragment key={idx}>
+						<Fragment key={`${el.key}-${idx}`}>
 							<div className="mx-2">/</div>
 							{el}
 							<div className="mx-2">/</div>
@@ -63,14 +59,14 @@ export function Header() {
 
 				if (idx !== array.length - 1) {
 					return (
-						<Fragment key={idx}>
+						<Fragment key={`${el.key}-${idx}`}>
 							{el}
 							<div className="mx-2">/</div>
 						</Fragment>
 					);
 				}
 
-				return <Fragment key={idx}>{el}</Fragment>;
+				return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>;
 			}),
 		[pathElements],
 	);
@@ -111,13 +107,7 @@ export function Header() {
 						>
 							<VscGithubInverted size={24} />
 						</Button>
-						{/* <Button
-							aria-label="Toggle theme"
-							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
-							onClick={() => toggleTheme()}
-						>
-							<VscColorMode size={24} />
-						</Button> */}
+						<ThemeSwitcher />
 					</div>
 				</div>
 			</div>

apps/website/src/components/ItemLink.tsx

@@ -4,6 +4,7 @@ import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type { PropsWithChildren } from 'react';
+import { useCurrentPathMeta } from '~/hooks/useCurrentPathMeta';
 
 export interface ItemLinkProps
 	extends Omit<LinkProps, 'href'>,
@@ -15,6 +16,11 @@ export interface ItemLinkProps
 	 * The URI of the api item to link to. (e.g. `/RestManager`)
 	 */
 	itemURI: string;
+
+	/**
+	 * The name of the package the item belongs to.
+	 */
+	packageName?: string | undefined;
 }
 
 /**
@@ -26,17 +32,13 @@ export interface ItemLinkProps
  */
 export function ItemLink(props: PropsWithChildren<ItemLinkProps>) {
 	const path = usePathname();
+	const { packageName, version } = useCurrentPathMeta();
 
 	if (!path) {
 		throw new Error('ItemLink must be used inside a Next.js page. (e.g. /docs/packages/foo/main)');
 	}
 
-	// Check if the item is already in the current path, if so keep the current path
-	const end = path?.split('/')?.length < 6 ? path?.length : -1;
+	const { itemURI, packageName: pkgName, ...linkProps } = props;
 
-	const pathPrefix = path?.split('/').slice(0, end).join('/');
-
-	const { itemURI, ...linkProps } = props;
-
-	return <Link href={`${pathPrefix}${itemURI}`} {...linkProps} />;
+	return <Link href={`/docs/packages/${pkgName ?? packageName}/${version}/${itemURI}`} {...linkProps} />;
 }

apps/website/src/components/MDXRemote.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { MDXRemote } from 'next-mdx-remote';

apps/website/src/components/Nav.tsx

@@ -8,7 +8,6 @@ import { VersionSelect } from './VersionSelect';
 import { useNav } from '~/contexts/nav';
 
 export function Nav({ members }: { members: SidebarSectionItemData[] }) {
-	// eslint-disable-next-line @typescript-eslint/unbound-method
 	const { opened } = useNav();
 
 	return (

apps/website/src/components/PackageSelect.tsx

@@ -24,8 +24,8 @@ export function PackageSelect() {
 					discord.js
 				</MenuItem>
 			</a>,
-			...PACKAGES.map((pkg) => (
-				<Link href={`/docs/packages/${pkg}/main`} key={pkg}>
+			...PACKAGES.map((pkg, idx) => (
+				<Link href={`/docs/packages/${pkg}/main`} key={`${pkg}-${idx}`}>
 					<MenuItem
 						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
 						id={pkg}

apps/website/src/components/PropertyList.tsx

@@ -20,9 +20,9 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
 
 	const propertyItems = useMemo(
 		() =>
-			members.map((prop) => {
+			members.map((prop, idx) => {
 				return (
-					<Fragment key={prop.item.displayName}>
+					<Fragment key={`${prop.item.displayName}-${idx}`}>
 						<Property
 							inheritedFrom={prop.inherited as ApiDeclaredItem & ApiItemContainerMixin}
 							item={prop.item as ApiPropertyItem}

apps/website/src/components/Sidebar.tsx

@@ -94,7 +94,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 			{(Object.keys(groupItems) as (keyof GroupedMembers)[])
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
-					<Section icon={resolveIcon(group)} key={idx} title={group}>
+					<Section icon={resolveIcon(group)} key={`${group}-${idx}`} title={group}>
 						{groupItems[group].map((member, index) => (
 							<ItemLink
 								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
@@ -103,7 +103,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 										: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 								}`}
 								itemURI={member.href}
-								key={index}
+								key={`${member.name}-${index}`}
 								onClick={() => setOpened(false)}
 								title={member.name}
 							>

apps/website/src/components/SyntaxHighlighter.tsx

@@ -1,32 +1,15 @@
-'use client';
+import { Code } from 'bright';
 
-import { PrismAsyncLight } from 'react-syntax-highlighter';
-import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-export function SyntaxHighlighter({ language = 'typescript', code }: { code: string; language?: string }) {
+export function SyntaxHighlighter(props: typeof Code) {
 	return (
 		<>
 			<div data-theme="dark">
-				<PrismAsyncLight
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					language={language}
-					style={vscDarkPlus}
-					wrapLines
-					wrapLongLines
-				>
-					{code}
-				</PrismAsyncLight>
+				{/* @ts-expect-error async component */}
+				<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="github-dark-dimmed" />
 			</div>
 			<div data-theme="light">
-				<PrismAsyncLight
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					language={language}
-					style={prism}
-					wrapLines
-					wrapLongLines
-				>
-					{code}
-				</PrismAsyncLight>
+				{/* @ts-expect-error async component */}
+				<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="min-light" />
 			</div>
 		</>
 	);

apps/website/src/components/Table.tsx

@@ -11,10 +11,10 @@ export function Table({
 }) {
 	const cols = useMemo(
 		() =>
-			columns.map((column) => (
+			columns.map((column, idx) => (
 				<th
 					className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
-					key={column}
+					key={`${column}-${idx}`}
 				>
 					{column}
 				</th>
@@ -26,12 +26,12 @@ export function Table({
 		() =>
 			rows.map((row, idx) => (
 				<tr className="[&>td]:last-of-type:border-0" key={idx}>
-					{Object.entries(row).map(([colName, val]) => (
+					{Object.entries(row).map(([colName, val], index) => (
 						<td
 							className={`border-light-900 dark:border-dark-100 border-b px-3 py-2 text-left text-sm ${
 								columnStyles?.[colName] ?? ''
 							}`}
-							key={colName}
+							key={`${colName}-${index}`}
 						>
 							{val}
 						</td>

apps/website/src/components/TableOfContentItems.tsx

@@ -27,7 +27,7 @@ export function TableOfContentsPropertyItem({ property }: { property: TableOfCon
 		<a
 			className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
 			href={`#${property.name}`}
-			key={property.name}
+			key={`${property.name}-${property.kind}`}
 			title={property.name}
 		>
 			<span className="line-clamp-1">{property.name}</span>
@@ -65,7 +65,7 @@ export function TableOfContentItems({ serializedMembers }: TableOfContentsItemPr
 					(member): member is TableOfContentsSerializedProperty =>
 						member.kind === 'Property' || member.kind === 'PropertySignature',
 				)
-				.map((prop) => <TableOfContentsPropertyItem key={prop.name} property={prop} />),
+				.map((prop) => <TableOfContentsPropertyItem key={`${prop.name}-${prop.kind}`} property={prop} />),
 		[serializedMembers],
 	);
 

apps/website/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { Button } from 'ariakit/button';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function ThemeSwitcher() {
+	const [mounted, setMounted] = useState(false);
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) {
+		return null;
+	}
+
+	return (
+		<Button
+			aria-label="Toggle theme"
+			className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+			onClick={() => toggleTheme()}
+		>
+			<VscColorMode size={24} />
+		</Button>
+	);
+}

apps/website/src/components/VersionSelect.tsx

@@ -18,8 +18,8 @@ export function VersionSelect() {
 	const versionMenuItems = useMemo(
 		() =>
 			versions
-				?.map((item) => (
-					<Link href={`/docs/packages/${packageName}/${item}`} key={item}>
+				?.map((item, idx) => (
+					<Link href={`/docs/packages/${packageName}/${item}`} key={`${item}-${idx}`}>
 						<MenuItem
 							className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
 							onClick={() => versionMenu.setOpen(false)}

apps/website/src/components/documentation/HierarchyText.tsx

@@ -42,8 +42,8 @@ export function HierarchyText({ item, type }: { item: ApiClass | ApiInterface; t
 		<div className="flex flex-row place-items-center gap-4">
 			<h3 className="text-xl font-bold">{type}</h3>
 			<span className="space-y-2 break-all font-mono">
-				{excerpts.map((excerpt, index) => (
-					<ExcerptText excerpt={excerpt} key={index} model={model} />
+				{excerpts.map((excerpt, idx) => (
+					<ExcerptText excerpt={excerpt} key={idx} model={model} />
 				))}
 			</span>
 		</div>

apps/website/src/components/documentation/MemberContainerDocumentation.tsx

@@ -11,15 +11,13 @@ import { hasProperties, hasMethods, serializeMembers } from './util';
 
 export function MemberContainerDocumentation({
 	item,
-	version,
 	subheading,
 }: {
 	item: ApiDeclaredItem & ApiItemContainerMixin & ApiTypeParameterListMixin;
 	subheading?: ReactNode;
-	version: string;
 }) {
 	return (
-		<Documentation item={item}>
+		<Documentation>
 			{subheading}
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />

apps/website/src/components/documentation/tsdoc/TSDoc.tsx

@@ -74,7 +74,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
 
 				case DocNodeKind.FencedCode: {
 					const { language, code } = tsdoc as DocFencedCode;
-					return <SyntaxHighlighter code={code} key={idx} language={language} />;
+					return <SyntaxHighlighter code={code} key={idx} lang={language ?? 'typescript'} />;
 				}
 
 				case DocNodeKind.Comment: {

apps/website/src/components/model/enum/Enum.tsx

@@ -14,8 +14,8 @@ export function Enum({ item }: { item: ApiEnum }) {
 			<SummarySection item={item} />
 			<DocumentationSection icon={<VscSymbolEnum size={20} />} padded title="Members">
 				<div className="flex flex-col gap-4">
-					{item.members.map((member) => (
-						<Panel key={member.containerKey}>
+					{item.members.map((member, idx) => (
+						<Panel key={`${member.displayName}-${idx}`}>
 							<EnumMember member={member} />
 						</Panel>
 					))}

apps/website/src/components/model/function/Function.tsx

@@ -9,7 +9,7 @@ export function Function({ item }: { item: ApiFunction }) {
 	if (item.getMergedSiblings().length > 1) {
 		const overloads = item
 			.getMergedSiblings()
-			.map((sibling, idx) => <FunctionBody item={sibling as ApiFunction} key={idx} />);
+			.map((sibling, idx) => <FunctionBody item={sibling as ApiFunction} key={`${sibling.displayName}-${idx}`} />);
 
 		return (
 			<div>

apps/website/src/components/model/function/FunctionBody.tsx

@@ -1,7 +1,6 @@
 import type { ApiFunction } from '@microsoft/api-extractor-model';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { Documentation } from '~/components/documentation/Documentation';
-import { Header } from '~/components/documentation/Header';
 import { ParameterSection } from '~/components/documentation/section/ParametersSection';
 import { SummarySection } from '~/components/documentation/section/SummarySection';
 import { TypeParameterSection } from '~/components/documentation/section/TypeParametersSection';
@@ -13,7 +12,7 @@ export interface FunctionBodyProps {
 
 export function FunctionBody({ item }: { item: ApiFunction }) {
 	return (
-		<Documentation item={item} showHeader={false}>
+		<Documentation>
 			<SyntaxHighlighter code={item.excerpt.text} />
 			<SummarySection item={item} />
 			{item.typeParameters.length ? <TypeParameterSection item={item} /> : null}

apps/website/src/components/model/method/Method.tsx

@@ -20,7 +20,9 @@ export function Method({
 		// each overload node on the server.
 		const overloads = method
 			.getMergedSiblings()
-			.map((sibling, idx) => <MethodDocumentation key={idx} method={sibling as ApiMethod | ApiMethodSignature} />);
+			.map((sibling, idx) => (
+				<MethodDocumentation key={`${sibling.displayName}-${idx}`} method={sibling as ApiMethod | ApiMethodSignature} />
+			));
 
 		return (
 			<OverloadSwitcher overloads={overloads}>