feat: deprecation badges

packages/website/src/components/CodeListing.tsx

@@ -35,6 +35,11 @@ export function CodeListing({
 	return (
 		<Stack spacing="xs" key={name}>
 			<Group>
+				{deprecation ? (
+					<Badge variant="filled" color="red">
+						Deprecated
+					</Badge>
+				) : null}
 				{readonly ? <Badge variant="filled">Readonly</Badge> : null}
 				{optional ? <Badge variant="filled">Optional</Badge> : null}
 				<Title order={4} className="font-mono">

packages/website/src/components/MethodItem.tsx

@@ -30,6 +30,11 @@ export function MethodItem({ data }: { data: MethodResolvable }) {
 			<Group>
 				<Stack>
 					<Group>
+						{data.deprecated ? (
+							<Badge variant="filled" color="red">
+								Deprecated
+							</Badge>
+						) : null}
 						{data.kind === 'Method' && method.visibility === Visibility.Protected ? (
 							<Badge variant="filled">Protected</Badge>
 						) : null}

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

@@ -34,7 +34,7 @@ export function ExampleBlock({ children, exampleIndex }: ExampleBlockProps): JSX
 
 export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element {
 	return (
-		<Alert icon={<VscWarning />} title="Deprecated" color="red" radius="xs">
+		<Alert icon={<VscWarning />} title="Deprecated" variant="filled" color="red" radius="xs">
 			{children}
 		</Alert>
 	);

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

@@ -104,7 +104,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 					(block) => block.tag.tagName.toUpperCase() === StandardTags.example.tagNameWithUpperCase,
 				).length;
 
-				return <div key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</div>;
+				return <Box key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</Box>;
 			}
 			default:
 				console.log(`Captured unknown node kind: ${node.kind}`);