refactor(website): adjust typography (#8503)

discordjs · Aug 17, 2022 · 0f83402 · 0f83402 · vercel · Aug 17, 2022
1 parent d97cd93
commit 0f83402
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 44 deletions.
diff --git a/packages/collection/src/collection.ts b/packages/collection/src/collection.ts
@@ -37,7 +37,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @param defaultValueGenerator - A function that generates the default value
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * collection.ensure(guildId, () => defaultGuildConfig);
 	 * ```
 	 */
@@ -232,7 +232,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @param thisArg - Value to use as `this` when executing function
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * collection.map(user => user.tag);
 	 * ```
 	 */
@@ -443,7 +443,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @param thisArg - Value to use as `this` when executing function
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * collection.mapValues(user => user.tag);
 	 * ```
 	 */
@@ -465,7 +465,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @param thisArg - Value to use as `this` when executing function
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * collection.every(user => !user.bot);
 	 * ```
 	 */
@@ -522,7 +522,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @param initialValue - Starting value for the accumulator
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * collection.reduce((acc, guild) => acc + guild.memberCount, 0);
 	 * ```
 	 */
@@ -562,7 +562,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * Creates an identical shallow copy of this collection.
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * const newColl = someColl.clone();
 	 * ```
 	 */
@@ -618,7 +618,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * @param collections - Collections to merge
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * const newColl = someColl.concat(someOtherColl, anotherColl, ohBoyAColl);
 	 * ```
 	 */
@@ -661,7 +661,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * 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<K, V> extends Map<K, V> {
 	 * @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<K, V> extends Map<K, V> {
 	 * ```
 	 *
 	 * @example
-	 * ```
+	 * ```ts
 	 * // Intersects two collections in a left-biased manner.
 	 * coll.merge(
 	 *  other,
@@ -775,7 +775,7 @@ export class Collection<K, V> extends Map<K, V> {
 	 * 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<K, V> extends Map<K, V> {
 	 * @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
@@ -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>
 	);
 }
diff --git 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({
 					<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) => (
 							<>

diff --git 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 (
-		<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>

diff --git 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 (
 		<Stack>
 			{data.map((method) => (
-				<MethodItem key={method.name} data={method} />
+				<>
+					<MethodItem key={method.name} data={method} />
+					<Divider className="bg-gray-100" size="md" />
+				</>
 			))}
 		</Stack>
 	);

diff --git a/packages/website/src/components/SidebarItems.tsx b/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}

diff --git 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 (
-					<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>
 				);

diff --git a/packages/ws/src/utils/utils.ts b/packages/ws/src/utils/utils.ts
@@ -6,7 +6,7 @@ export type Awaitable<T> = T | Promise<T>;
  * 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
@@ -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<SessionInfo | null> {
 	 *     // Fetch this info from redis or similar