feat(website): show parameter descriptions (#8519)

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

packages/website/src/components/DocContainer.tsx

@@ -43,7 +43,7 @@ export function DocContainer({
 
 	return (
 		<Group>
-			<Stack sx={{ flexGrow: 1 }}>
+			<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
 				<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
 					<Group>
 						{generateIcon(kind)}

packages/website/src/components/ParameterTable.tsx

@@ -1,6 +1,7 @@
-import { Box } from '@mantine/core';
+import { Box, ScrollArea } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
+import { TSDoc } from './tsdoc/TSDoc';
 import type { ParameterDocumentation } from '~/util/parse.server';
 
 export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
@@ -8,17 +9,19 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 		Name: param.name,
 		Type: <HyperlinkedText tokens={param.tokens} />,
 		Optional: param.isOptional ? 'Yes' : 'No',
-		Description: 'None',
+		Description: param.paramCommentBlock ? <TSDoc node={param.paramCommentBlock} /> : 'None',
 	}));
 
 	const columnStyles = {
-		Name: 'font-mono',
-		Type: 'font-mono',
+		Name: 'font-mono whitespace-nowrap',
+		Type: 'font-mono whitespace-pre-wrap break-normal',
 	};
 
 	return (
-		<Box sx={{ overflowX: 'auto' }}>
-			<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
+		<Box>
+			<ScrollArea type="auto">
+				<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
+			</ScrollArea>
 		</Box>
 	);
 }

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -1,4 +1,4 @@
-import { Alert, Box, Title } from '@mantine/core';
+import { Alert, Box, Title, Text } from '@mantine/core';
 import { StandardTags } from '@microsoft/tsdoc';
 import type { ReactNode } from 'react';
 import { VscWarning } from 'react-icons/vsc';
@@ -11,7 +11,7 @@ export interface BlockProps {
 export function Block({ children, title }: BlockProps) {
 	return (
 		<Box>
-			<Title order={3}>{title}</Title>
+			<Title order={5}>{title}</Title>
 			{children}
 		</Box>
 	);
@@ -52,7 +52,9 @@ export function BlockComment({ children, tagName, index }: BlockCommentProps): J
 			return <DeprecatedBlock>{children}</DeprecatedBlock>;
 		case StandardTags.remarks.tagNameWithUpperCase:
 			return <RemarksBlock>{children}</RemarksBlock>;
+		case StandardTags.param.tagNameWithUpperCase:
+			return <Text>{children}</Text>;
 		default: // TODO: Support more blocks in the future.
-			return <></>;
+			return <>{children}</>;
 	}
 }

packages/website/src/components/tsdoc/TSDoc.tsx

@@ -81,6 +81,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 					</SyntaxHighlighter>
 				);
 			}
+			case DocNodeKind.ParamBlock:
 			case DocNodeKind.Block: {
 				const { tag } = node as DocBlockJSON;
 
@@ -103,9 +104,10 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 					(block) => block.tag.tagName.toUpperCase() === StandardTags.example.tagNameWithUpperCase,
 				).length;
 
-				return <div>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</div>;
+				return <div key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</div>;
 			}
 			default:
+				console.log(`Captured unknown node kind: ${node.kind}`);
 				break;
 		}