diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx index 17c6aa272..81cd50b46 100644 --- a/packages/website/src/components/CodeListing.tsx +++ b/packages/website/src/components/CodeListing.tsx @@ -42,7 +42,7 @@ export function CodeListing({ {optional ? '?' : ''} {separator} - + <Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono"> <HyperlinkedText tokens={typeTokens} /> diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index 7a868a893..5b4286417 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/packages/website/src/components/DocContainer.tsx @@ -1,4 +1,4 @@ -import { Group, Stack, Title, Text, Box } from '@mantine/core'; +import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; import type { ReactNode } from 'react'; import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc'; @@ -6,8 +6,10 @@ 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 { TypeParamTable } from './TypeParamTable'; import { TSDoc } from './tsdoc/TSDoc'; +import type { DocClass } from '~/DocModel/DocClass'; import type { DocItem } from '~/DocModel/DocItem'; import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode'; import { generateIcon } from '~/util/icon'; @@ -23,6 +25,7 @@ export interface DocContainerProps { implementsTokens?: TokenDocumentation[][]; typeParams?: TypeParameterData[]; comment?: AnyDocNodeJSON | null; + methods?: ReturnType['methods'] | null; } export function DocContainer({ @@ -34,68 +37,85 @@ export function DocContainer({ children, extendsTokens, implementsTokens, + methods, }: DocContainerProps) { const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); return ( - - - <Group> - {generateIcon(kind)} - {name} - </Group> - + + + + <Group> + {generateIcon(kind)} + {name} + </Group> + -
} padded dense={matches}> - {summary ? : No summary provided.} -
+
} padded dense={matches}> + {summary ? : No summary provided.} +
- - - {excerpt} - - + + + {excerpt} + + - {extendsTokens?.length ? ( - - - Extends - - - - - - ) : null} - - {implementsTokens?.length ? ( - - - Implements - - - {implementsTokens.map((token, idx) => ( - <> - - {idx < implementsTokens.length - 1 ? ', ' : ''} - - ))} - - - ) : null} - - - {typeParams?.length ? ( -
} padded dense={matches} defaultClosed> - -
+ {extendsTokens?.length ? ( + + + Extends + + + + + ) : null} - {children} + + {implementsTokens?.length ? ( + + + Implements + + + {implementsTokens.map((token, idx) => ( + <> + + {idx < implementsTokens.length - 1 ? ', ' : ''} + + ))} + + + ) : null} + + + {typeParams?.length ? ( +
} padded dense={matches} defaultClosed> + +
+ ) : null} + {children} + - + {kind === 'Class' && methods ? ( + + + + ) : null} + ); } diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx index 10747d19e..43a824340 100644 --- a/packages/website/src/components/MethodItem.tsx +++ b/packages/website/src/components/MethodItem.tsx @@ -34,9 +34,9 @@ export function MethodItem({ data }: { data: MethodResolvable }) { Protected ) : null} {data.kind === 'Method' && method.static ? Static : null} - {`${getShorthandName(data)}`} + {`${getShorthandName(data)}`} : - + <Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono"> <HyperlinkedText tokens={data.returnTypeTokens} /> diff --git a/packages/website/src/components/ParameterTable.tsx b/packages/website/src/components/ParameterTable.tsx index f8f011108..859396ffc 100644 --- a/packages/website/src/components/ParameterTable.tsx +++ b/packages/website/src/components/ParameterTable.tsx @@ -17,7 +17,7 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) { }; return ( - + ); diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx index a3fbd0905..21894a3a4 100644 --- a/packages/website/src/components/Section.tsx +++ b/packages/website/src/components/Section.tsx @@ -41,7 +41,7 @@ export function Section({ const { classes } = useStyles({ opened }); return ( - + setOpened((o) => !o)}> diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx index 7d4022e7c..dc980a806 100644 --- a/packages/website/src/components/SidebarItems.tsx +++ b/packages/website/src/components/SidebarItems.tsx @@ -103,7 +103,9 @@ export function SidebarItems({ setOpened((o) => !o)}> - {member.name} + + {member.name} + {member.overloadIndex && member.overloadIndex > 1 ? ( {member.overloadIndex} diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index 8e7868464..211f796ca 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/packages/website/src/components/SidebarLayout.tsx @@ -3,7 +3,6 @@ import { AppShell, Navbar, MediaQuery, - Aside, Header, Burger, Anchor, @@ -26,8 +25,6 @@ import { type PropsWithChildren, useState } from 'react'; import { VscChevronDown, VscPackage } from 'react-icons/vsc'; import { WiDaySunny, WiNightClear } from 'react-icons/wi'; import { SidebarItems } from './SidebarItems'; -import { TableOfContentsItems } from './TableOfContentsItems'; -import type { DocClass } from '~/DocModel/DocClass'; import type { DocItem } from '~/DocModel/DocItem'; import type { findMember } from '~/util/model.server'; import type { getMembers } from '~/util/parse.server'; @@ -155,21 +152,6 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren ) : null} } - aside={ - packageName && data?.member && data.member.kind === 'Class' ? ( - - - - ) : ( - <> - ) - } // footer={ //
// Application footer diff --git a/packages/website/src/components/TableOfContentsItems.tsx b/packages/website/src/components/TableOfContentsItems.tsx index c47c512cb..ccece300c 100644 --- a/packages/website/src/components/TableOfContentsItems.tsx +++ b/packages/website/src/components/TableOfContentsItems.tsx @@ -38,7 +38,9 @@ export function TableOfContentsItems({ return ( key={key} href={`#${key}`} component="a" className={classes.link}> - {member.name} + + {member.name} + {member.overloadIndex && member.overloadIndex > 1 ? ( {member.overloadIndex} diff --git a/packages/website/src/components/TypeParamTable.tsx b/packages/website/src/components/TypeParamTable.tsx index 1aef0d00c..73252738a 100644 --- a/packages/website/src/components/TypeParamTable.tsx +++ b/packages/website/src/components/TypeParamTable.tsx @@ -19,7 +19,7 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) { }; return ( - +
}) { extendsTokens={data.extendsTokens} implementsTokens={data.implementsTokens} comment={data.comment} + methods={data.methods} > diff --git a/packages/website/src/components/tsdoc/BlockComment.tsx b/packages/website/src/components/tsdoc/BlockComment.tsx index 1c0e2458a..467405445 100644 --- a/packages/website/src/components/tsdoc/BlockComment.tsx +++ b/packages/website/src/components/tsdoc/BlockComment.tsx @@ -1,4 +1,4 @@ -import { Alert } from '@mantine/core'; +import { Alert, Box, Title } from '@mantine/core'; import { StandardTags } from '@microsoft/tsdoc'; import type { ReactNode } from 'react'; import { VscWarning } from 'react-icons/vsc'; @@ -10,10 +10,10 @@ export interface BlockProps { export function Block({ children, title }: BlockProps) { return ( -
-

{title}

+ + {title} {children} -
+ ); } diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx index cb705a50e..692bea4cf 100644 --- a/packages/website/src/components/tsdoc/TSDoc.tsx +++ b/packages/website/src/components/tsdoc/TSDoc.tsx @@ -1,4 +1,4 @@ -import { Anchor, Box, Text } from '@mantine/core'; +import { Anchor, Box, Code, Text } from '@mantine/core'; import { DocNodeKind, StandardTags } from '@microsoft/tsdoc'; import Link from 'next/link'; import type { ReactNode } from 'react'; @@ -61,9 +61,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element { case DocNodeKind.CodeSpan: { const { code } = node as DocFencedCodeJSON; return ( - 
+					
 						{code}
-
+ ); } case DocNodeKind.FencedCode: { diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx index fb3f06416..ba7d9537b 100644 --- a/packages/website/src/pages/docs/[...slug].tsx +++ b/packages/website/src/pages/docs/[...slug].tsx @@ -146,7 +146,7 @@ const member = (props: any) => { export default function Slug(props: Partial) { return props.error ? ( -
{props.error}
+ {props.error} ) : ( {props.data?.member ? member(props.data.member) : null} diff --git a/packages/website/src/util/parse.server.ts b/packages/website/src/util/parse.server.ts index 47c06966f..67f2b7dc6 100644 --- a/packages/website/src/util/parse.server.ts +++ b/packages/website/src/util/parse.server.ts @@ -38,7 +38,7 @@ export function generatePath(items: readonly ApiItem[]) { const functionItem = item as ApiFunction; path += `${functionItem.displayName}${ functionItem.overloadIndex && functionItem.overloadIndex > 1 ? `:${functionItem.overloadIndex}` : '' - }:/`; + }/`; break; default: path += `${item.displayName}/`;