feat: list properties and method in table of content

packages/website/src/components/CodeListing.tsx

@@ -36,7 +36,7 @@ export function CodeListing({
 	inheritanceData?: InheritanceData | null;
 }) {
 	return (
-		<Stack spacing="xs" key={name}>
+		<Stack id={name} className="scroll-mt-30" spacing="xs">
 			<Group>
 				{deprecation ? (
 					<Badge variant="filled" color="red">

packages/website/src/components/DocContainer.tsx

@@ -6,7 +6,7 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
-import { TableOfContentsItems } from './TableOfContentsItems';
+import { TableOfContentItems } from './TableOfContentItems';
 import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { ApiClassJSON, ApiItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
@@ -26,6 +26,7 @@ export interface DocContainerProps {
 	typeParams?: TypeParameterData[];
 	comment?: AnyDocNodeJSON | null;
 	methods?: ApiClassJSON['methods'] | null;
+	properties?: ApiClassJSON['properties'] | null;
 }
 
 export function DocContainer({
@@ -38,6 +39,7 @@ export function DocContainer({
 	extendsTokens,
 	implementsTokens,
 	methods,
+	properties,
 }: DocContainerProps) {
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
@@ -102,7 +104,7 @@ export function DocContainer({
 					<Stack>{children}</Stack>
 				</Stack>
 			</Stack>
-			{kind === 'Class' && methods ? (
+			{kind === 'Class' && methods && properties ? (
 				<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
 					<Aside
 						sx={{ backgroundColor: 'transparent' }}
@@ -111,7 +113,7 @@ export function DocContainer({
 						withBorder={false}
 					>
 						<ScrollArea p="xs">
-							<TableOfContentsItems members={methods}></TableOfContentsItems>
+							<TableOfContentItems properties={properties} methods={methods}></TableOfContentItems>
 						</ScrollArea>
 					</Aside>
 				</MediaQuery>

packages/website/src/components/TableOfContentItems.tsx

@@ -24,10 +24,26 @@ const useStyles = createStyles((theme) => ({
 	},
 }));
 
-export function TableOfContentsItems({ members }: { members: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] }) {
+export function TableOfContentItems({
+	methods,
+	properties,
+}: {
+	methods: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'];
+	properties: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'];
+}) {
 	const { classes } = useStyles();
 
-	const items = members.map((member) => {
+	const propertyItems = properties.map((prop) => (
+		<Box<'a'> key={prop.name} href={`#${prop.name}`} component="a" className={classes.link}>
+			<Group>
+				<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
+					{prop.name}
+				</Text>
+			</Group>
+		</Box>
+	));
+
+	const methodItems = methods.map((member) => {
 		const key = `${member.name}${member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''}`;
 
 		return (
@@ -50,9 +66,12 @@ export function TableOfContentsItems({ members }: { members: ApiClassJSON['metho
 		<Box>
 			<Group mb="md">
 				<VscListSelection size={20} />
-				<Text>Table of contents</Text>
+				<Text>Table of content</Text>
 			</Group>
-			{items}
+			<Text>Properties</Text>
+			{propertyItems}
+			<Text>Methods</Text>
+			{methodItems}
 		</Box>
 	);
 }

packages/website/src/components/model/Class.tsx

@@ -14,6 +14,7 @@ export function Class({ data }: { data: ApiClassJSON }) {
 			implementsTokens={data.implementsTokens}
 			comment={data.comment}
 			methods={data.methods}
+			properties={data.properties}
 		>
 			{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
 			<PropertiesSection data={data.properties} />