refactor(website): adjust typography (#8503)

packages/website/src/components/CodeListing.tsx

@@ -28,7 +28,7 @@ export function CodeListing({
 	comment?: AnyDocNodeJSON | null;
 }) {
 	return (
-		<Stack key={name}>
+		<Stack spacing="xs" key={name}>
 			<Group>
 				<Title order={4} className="font-mono">
 					{name}
@@ -38,9 +38,11 @@ export function CodeListing({
 					<HyperlinkedText tokens={typeTokens} />
 				</Title>
 			</Group>
-			{summary && <TSDoc node={summary} />}
-			{comment && <TSDoc node={comment} />}
-			{children}
+			<Group>
+				{summary && <TSDoc node={summary} />}
+				{comment && <TSDoc node={comment} />}
+				{children}
+			</Group>
 		</Stack>
 	);
 }

packages/website/src/components/DocContainer.tsx

@@ -4,7 +4,6 @@ import type { ReactNode } from 'react';
 import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { CodeListingSeparatorType } from './CodeListing';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TypeParamTable } from './TypeParamTable';
@@ -67,9 +66,6 @@ export function DocContainer({
 					<Title order={3} ml="xs">
 						Extends
 					</Title>
-					<Title order={3} ml="xs">
-						{CodeListingSeparatorType.Type}
-					</Title>
 					<Text className="font-mono break-all">
 						<HyperlinkedText tokens={extendsTokens} />
 					</Text>
@@ -81,9 +77,6 @@ export function DocContainer({
 					<Title order={3} ml="xs">
 						Implements
 					</Title>
-					<Title order={3} ml="xs">
-						{CodeListingSeparatorType.Type}
-					</Title>
 					<Text className="font-mono break-all">
 						{implementsTokens.map((token, idx) => (
 							<>

packages/website/src/components/MethodItem.tsx

@@ -19,13 +19,13 @@ function getShorthandName(data: MethodResolvable) {
 
 export function MethodItem({ data }: { data: MethodResolvable }) {
 	return (
-		<Stack>
+		<Stack spacing="xs">
 			<Group>
 				<Stack>
 					<Group>
-						<Title order={5} className="font-mono break-all">{`${getShorthandName(data)}`}</Title>
-						<Title order={5}>:</Title>
-						<Title order={5} className="font-mono break-all">
+						<Title order={4} className="font-mono break-all">{`${getShorthandName(data)}`}</Title>
+						<Title order={4}>:</Title>
+						<Title order={4} className="font-mono break-all">
 							<HyperlinkedText tokens={data.returnTypeTokens} />
 						</Title>
 					</Group>

packages/website/src/components/MethodList.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@mantine/core';
+import { Divider, Stack } from '@mantine/core';
 import { MethodItem } from './MethodItem';
 import type { DocMethod } from '~/DocModel/DocMethod';
 import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
@@ -11,7 +11,10 @@ export function MethodList({
 	return (
 		<Stack>
 			{data.map((method) => (
-				<MethodItem key={method.name} data={method} />
+				<>
+					<MethodItem key={method.name} data={method} />
+					<Divider className="bg-gray-100" size="md" />
+				</>
 			))}
 		</Stack>
 	);

packages/website/src/components/SidebarItems.tsx

@@ -103,7 +103,7 @@ export function SidebarItems({
 							<Link key={i} href={member.path} passHref>
 								<UnstyledButton className={classes.link} component="a" onClick={() => setOpened((o) => !o)}>
 									<Group>
-										<Text>{member.name}</Text>
+										<Text className="line-clamp-1 text-ellipsis overflow-hidden">{member.name}</Text>
 										{member.overloadIndex && member.overloadIndex > 1 ? (
 											<Text size="xs" color="dimmed">
 												{member.overloadIndex}

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

@@ -21,13 +21,13 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 		switch (node.kind) {
 			case DocNodeKind.PlainText:
 				return (
-					<Text key={idx} span>
+					<Text key={idx} span style={{ wordBreak: 'break-word' }}>
 						{(node as DocPlainTextJSON).text}
 					</Text>
 				);
 			case DocNodeKind.Paragraph:
 				return (
-					<Text key={idx} inline>
+					<Text key={idx} inline style={{ wordBreak: 'break-word' }}>
 						{(node as DocNodeContainerJSON).nodes.map((node, idx) => createNode(node, idx))}
 					</Text>
 				);