From 0f834029850d2448981596cf082ff59917018d66 Mon Sep 17 00:00:00 2001 From: Suneet Tipirneni <77477100+suneettipirneni@users.noreply.github.com> Date: Wed, 17 Aug 2022 04:17:09 -0400 Subject: [PATCH] refactor(website): adjust typography (#8503) --- packages/collection/src/collection.ts | 40 +++++++++---------- .../website/src/components/CodeListing.tsx | 10 +++-- .../website/src/components/DocContainer.tsx | 7 ---- .../website/src/components/MethodItem.tsx | 8 ++-- .../website/src/components/MethodList.tsx | 7 +++- .../website/src/components/SidebarItems.tsx | 2 +- .../website/src/components/tsdoc/TSDoc.tsx | 4 +- packages/ws/src/utils/utils.ts | 2 +- packages/ws/src/ws/WebSocketManager.ts | 7 ++-- 9 files changed, 43 insertions(+), 44 deletions(-) diff --git a/packages/collection/src/collection.ts b/packages/collection/src/collection.ts index 7b33955ac..cc082728e 100644 --- a/packages/collection/src/collection.ts +++ b/packages/collection/src/collection.ts @@ -37,7 +37,7 @@ export class Collection extends Map { * @param defaultValueGenerator - A function that generates the default value * * @example - * ``` + * ```ts * collection.ensure(guildId, () => defaultGuildConfig); * ``` */ @@ -232,7 +232,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.find(user => user.username === 'Bob'); * ``` */ @@ -261,7 +261,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.findKey(user => user.username === 'Bob'); * ``` */ @@ -310,7 +310,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.filter(user => user.username === 'Bob'); * ``` */ @@ -344,7 +344,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * const [big, small] = collection.partition(guild => guild.memberCount > 250); * ``` */ @@ -395,7 +395,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.flatMap(guild => guild.members.cache); * ``` */ @@ -417,7 +417,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.map(user => user.tag); * ``` */ @@ -443,7 +443,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.mapValues(user => user.tag); * ``` */ @@ -465,7 +465,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.some(user => user.discriminator === '0000'); * ``` */ @@ -488,7 +488,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection.every(user => !user.bot); * ``` */ @@ -522,7 +522,7 @@ export class Collection extends Map { * @param initialValue - Starting value for the accumulator * * @example - * ``` + * ```ts * collection.reduce((acc, guild) => acc + guild.memberCount, 0); * ``` */ @@ -562,7 +562,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection * .each(user => console.log(user.username)) * .filter(user => user.bot) @@ -584,7 +584,7 @@ export class Collection extends Map { * @param thisArg - Value to use as `this` when executing function * * @example - * ``` + * ```ts * collection * .tap(coll => console.log(coll.size)) * .filter(user => user.bot) @@ -604,7 +604,7 @@ export class Collection extends Map { * Creates an identical shallow copy of this collection. * * @example - * ``` + * ```ts * const newColl = someColl.clone(); * ``` */ @@ -618,7 +618,7 @@ export class Collection extends Map { * @param collections - Collections to merge * * @example - * ``` + * ```ts * const newColl = someColl.concat(someOtherColl, anotherColl, ohBoyAColl); * ``` */ @@ -661,7 +661,7 @@ export class Collection extends Map { * If omitted, the collection is sorted according to each character's Unicode code point value, according to the string conversion of each element. * * @example - * ``` + * ```ts * collection.sort((userA, userB) => userA.createdTimestamp - userB.createdTimestamp); * ``` */ @@ -718,7 +718,7 @@ export class Collection extends Map { * @param whenInBoth - Function getting the result if the entry exists in both Collections * * @example - * ``` + * ```ts * // Sums up the entries in two collections. * coll.merge( * other, @@ -729,7 +729,7 @@ export class Collection extends Map { * ``` * * @example - * ``` + * ```ts * // Intersects two collections in a left-biased manner. * coll.merge( * other, @@ -775,7 +775,7 @@ export class Collection extends Map { * according to the string conversion of each element. * * @example - * ``` + * ```ts * collection.sorted((userA, userB) => userA.createdTimestamp - userB.createdTimestamp); * ``` */ @@ -799,7 +799,7 @@ export class Collection extends Map { * @param combine - Function to combine an existing entry with a new one * * @example - * ``` + * ```ts * Collection.combineEntries([["a", 1], ["b", 2], ["a", 2]], (x, y) => x + y); * // returns Collection { "a" => 3, "b" => 2 } * ``` diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx index 58d62924c..64bf0a2fb 100644 --- a/packages/website/src/components/CodeListing.tsx +++ b/packages/website/src/components/CodeListing.tsx @@ -28,7 +28,7 @@ export function CodeListing({ comment?: AnyDocNodeJSON | null; }) { return ( - + {name} @@ -38,9 +38,11 @@ export function CodeListing({ <HyperlinkedText tokens={typeTokens} /> - {summary && } - {comment && } - {children} + + {summary && } + {comment && } + {children} + ); } diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index b76c34e44..7a868a893 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/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({ Extends - - {CodeListingSeparatorType.Type} - @@ -81,9 +77,6 @@ export function DocContainer({ Implements - - {CodeListingSeparatorType.Type} - {implementsTokens.map((token, idx) => ( <> diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx index 04b4ca418..9be37effc 100644 --- a/packages/website/src/components/MethodItem.tsx +++ b/packages/website/src/components/MethodItem.tsx @@ -19,13 +19,13 @@ function getShorthandName(data: MethodResolvable) { export function MethodItem({ data }: { data: MethodResolvable }) { return ( - + - {`${getShorthandName(data)}`} - : - + <Title order={4} className="font-mono break-all">{`${getShorthandName(data)}`} + : + <HyperlinkedText tokens={data.returnTypeTokens} /> diff --git a/packages/website/src/components/MethodList.tsx b/packages/website/src/components/MethodList.tsx index d53cf4389..3358fc3af 100644 --- a/packages/website/src/components/MethodList.tsx +++ b/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 ( {data.map((method) => ( - + <> + + + ))} ); diff --git a/packages/website/src/components/SidebarItems.tsx b/packages/website/src/components/SidebarItems.tsx index 1a52f7586..096912771 100644 --- a/packages/website/src/components/SidebarItems.tsx +++ b/packages/website/src/components/SidebarItems.tsx @@ -103,7 +103,7 @@ export function SidebarItems({ setOpened((o) => !o)}> - {member.name} + {member.name} {member.overloadIndex && member.overloadIndex > 1 ? ( {member.overloadIndex} diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx index 107679df5..e6f1dcb0b 100644 --- a/packages/website/src/components/tsdoc/TSDoc.tsx +++ b/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 ( - + {(node as DocPlainTextJSON).text} ); case DocNodeKind.Paragraph: return ( - + {(node as DocNodeContainerJSON).nodes.map((node, idx) => createNode(node, idx))} ); diff --git a/packages/ws/src/utils/utils.ts b/packages/ws/src/utils/utils.ts index aaca45b8a..5bb7196f9 100644 --- a/packages/ws/src/utils/utils.ts +++ b/packages/ws/src/utils/utils.ts @@ -6,7 +6,7 @@ export type Awaitable = T | Promise; * Yields the numbers in the given range as an array * * @example - * ``` + * ```ts * range({ start: 3, end: 5 }); // [3, 4, 5] * ``` */ diff --git a/packages/ws/src/ws/WebSocketManager.ts b/packages/ws/src/ws/WebSocketManager.ts index 42458ec78..3d75c6e9b 100644 --- a/packages/ws/src/ws/WebSocketManager.ts +++ b/packages/ws/src/ws/WebSocketManager.ts @@ -81,14 +81,14 @@ export interface OptionalWebSocketManagerOptions { * Use `null` to simply spawn 0 through `shardCount - 1` * * @example - * ``` + * ```ts * const manager = new WebSocketManager({ * shardIds: [1, 3, 7], // spawns shard 1, 3, and 7, nothing else * }); * ``` * * @example - * ``` + * ```ts * const manager = new WebSocketManager({ * shardIds: { * start: 3, @@ -127,8 +127,9 @@ export interface OptionalWebSocketManagerOptions { compression: CompressionMethod | null; /** * Function used to retrieve session information (and attempt to resume) for a given shard + * * @example - * ``` + * ```ts * const manager = new WebSocketManager({ * async retrieveSessionInfo(shardId): Awaitable { * // Fetch this info from redis or similar