feat(website): render @deprecated and @remarks blocks (#8511)

packages/website/src/components/CodeListing.tsx

@@ -18,8 +18,9 @@ export function CodeListing({
 	readonly = false,
 	optional = false,
 	summary,
-	comment,
 	children,
+	comment,
+	deprecation,
 }: {
 	name: string;
 	separator?: CodeListingSeparatorType;
@@ -29,6 +30,7 @@ export function CodeListing({
 	summary?: ReturnType<DocItem['toJSON']>['summary'];
 	comment?: AnyDocNodeJSON | null;
 	children?: ReactNode;
+	deprecation?: AnyDocNodeJSON | null;
 }) {
 	return (
 		<Stack spacing="xs" key={name}>
@@ -44,9 +46,12 @@ export function CodeListing({
 				</Title>
 			</Group>
 			<Group>
-				{summary && <TSDoc node={summary} />}
-				{comment && <TSDoc node={comment} />}
-				{children}
+				<Stack>
+					{deprecation ? <TSDoc node={deprecation} /> : null}
+					{summary && <TSDoc node={summary} />}
+					{comment && <TSDoc node={comment} />}
+					{children}
+				</Stack>
 			</Group>
 		</Stack>
 	);

packages/website/src/components/MethodItem.tsx

@@ -43,9 +43,13 @@ export function MethodItem({ data }: { data: MethodResolvable }) {
 				</Stack>
 			</Group>
 			<Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg">
-				{data.summary ? <TSDoc node={data.summary} /> : null}
-				{data.comment ? <TSDoc node={data.comment} /> : null}
-				{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
+				<Stack>
+					{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
+					{data.summary ? <TSDoc node={data.summary} /> : null}
+					{data.remarks ? <TSDoc node={data.remarks} /> : null}
+					{data.comment ? <TSDoc node={data.comment} /> : null}
+					{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
+				</Stack>
 			</Group>
 		</Stack>
 	);

packages/website/src/components/PropertyList.tsx

@@ -14,6 +14,7 @@ export function PropertyList({ data }: { data: ReturnType<DocProperty['toJSON']>
 					optional={prop.optional}
 					summary={prop.summary}
 					comment={prop.comment}
+					deprecation={prop.deprecated}
 				/>
 			))}
 		</Stack>

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

@@ -1,5 +1,7 @@
+import { Alert } from '@mantine/core';
 import { StandardTags } from '@microsoft/tsdoc';
 import type { ReactNode } from 'react';
+import { VscWarning } from 'react-icons/vsc';
 
 export interface BlockProps {
 	children: ReactNode;
@@ -30,10 +32,26 @@ export function ExampleBlock({ children, exampleIndex }: ExampleBlockProps): JSX
 	return <Block title={`Example ${exampleIndex ? exampleIndex : ''}`}>{children}</Block>;
 }
 
+export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element {
+	return (
+		<Alert icon={<VscWarning />} title="Deprecated" color="red" radius="xs">
+			{children}
+		</Alert>
+	);
+}
+
+export function RemarksBlock({ children }: { children: ReactNode }): JSX.Element {
+	return <Block title="Remarks">{children}</Block>;
+}
+
 export function BlockComment({ children, tagName, index }: BlockCommentProps): JSX.Element {
 	switch (tagName.toUpperCase()) {
 		case StandardTags.example.tagNameWithUpperCase:
 			return <ExampleBlock exampleIndex={index}>{children}</ExampleBlock>;
+		case StandardTags.deprecated.tagNameWithUpperCase:
+			return <DeprecatedBlock>{children}</DeprecatedBlock>;
+		case StandardTags.remarks.tagNameWithUpperCase:
+			return <RemarksBlock>{children}</RemarksBlock>;
 		default: // TODO: Support more blocks in the future.
 			return <></>;
 	}

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

@@ -32,7 +32,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 					</Text>
 				);
 			case DocNodeKind.SoftBreak:
-				return <br key={idx} />;
+				return <></>;
 			case DocNodeKind.LinkTag: {
 				const { codeDestination, urlDestination, text } = node as DocLinkTagJSON;