refactor: cleanup css

packages/website/src/DocModel/DocInterface.ts

@@ -2,7 +2,13 @@ import { DocItem } from './DocItem';
 import { DocMethodSignature } from './DocMethodSignature';
 import { DocProperty } from './DocProperty';
 import { TypeParameterMixin } from './TypeParameterMixin';
-import { ApiInterface, ApiItemKind, ApiMethodSignature, ApiModel, ApiPropertySignature } from '~/api-extractor.server';
+import {
+	ApiInterface,
+	ApiItemKind,
+	ApiMethodSignature,
+	ApiModel,
+	ApiPropertySignature,
+} from '~/util/api-extractor.server';
 import { type TokenDocumentation, genToken } from '~/util/parse.server';
 
 export class DocInterface extends TypeParameterMixin(DocItem<ApiInterface>) {

packages/website/src/DocModel/DocItem.ts

@@ -1,5 +1,5 @@
 import type { ApiModel, ApiDeclaredItem } from '@microsoft/api-extractor-model';
-import type { ReferenceData } from '~/model.server';
+import type { ReferenceData } from '~/util/model.server';
 import { resolveName, genReference, resolveDocComment, TokenDocumentation, genToken } from '~/util/parse.server';
 
 export type DocItemConstructor<T = DocItem> = new (...args: any[]) => T;

packages/website/src/components/CodeListing.tsx

@@ -26,15 +26,15 @@ export function CodeListing({
 }: CodeListingProps) {
 	return (
 		<div className={className}>
-			<div key={name} className="flex flex-col mb-2 ml-3">
-				<div className="w-full flex flex-row">
-					<h4 className="font-mono my-0">{`${name}`}</h4>
-					<h4 className="mx-3 my-0">{separator}</h4>
-					<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0">
+			<div key={name} className="flex flex-col">
+				<div className="w-full flex flex-row gap-3">
+					<h4 className="font-mono m-0">{`${name}`}</h4>
+					<h4 className="m-0">{separator}</h4>
+					<h4 className="font-mono m-0">
 						<HyperlinkedText tokens={typeTokens} />
 					</h4>
 				</div>
-				{summary && <p className="text-dark-100 mt-2">{summary}</p>}
+				{summary && <p className="text-dark-100 dark:text-gray-300">{summary}</p>}
 				{children}
 			</div>
 		</div>

packages/website/src/components/DocContainer.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 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';
@@ -21,27 +22,26 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 	return (
 		<>
 			<div className="bg-white dark:bg-dark border-b-solid border-gray border-0.5 border-width-0.5 sticky top-0 px-10 py-2">
-				<h2 className="flex items-center break-all m-0 dark:text-white">
-					{generateIcon(kind, 'mr-2')}
+				<h2 className="flex gap-2 items-center break-all m-0 dark:text-white">
+					{generateIcon(kind)}
 					{name}
 				</h2>
 			</div>
 
 			<div className="px-10 pt-5 pb-10">
-				<div>
-					<SyntaxHighlighter
-						wrapLines
-						wrapLongLines
-						language="typescript"
-						style={vscDarkPlus}
-						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					>
-						{excerpt}
-					</SyntaxHighlighter>
-				</div>
+				<SyntaxHighlighter
+					wrapLines
+					wrapLongLines
+					language="typescript"
+					style={vscDarkPlus}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
+					{excerpt}
+				</SyntaxHighlighter>
 				{extendsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white">
-						<h3 className="mr-5 mt-0 mb-0">Extends</h3>
+					<div className="flex flex-row items-center dark:text-white gap-3">
+						<h3 className="m-0">Extends:</h3>
+						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
@@ -49,11 +49,11 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 				) : null}
 				<div className="space-y-10">
 					<Section title="Summary" className="dark:text-white">
-						<p className="text-dark-100 mb-0 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
+						<p className="text-dark-100 dark:text-gray-300 m-0">{summary ?? 'No summary provided.'}</p>
 					</Section>
 					{typeParams?.length ? (
 						<Section title="Type Parameters" className="dark:text-white" defaultClosed>
-							<TypeParamTable data={typeParams} className="mb-5 p-3" />
+							<TypeParamTable data={typeParams} />
 						</Section>
 					) : null}
 					<div className="space-y-10">{children}</div>

packages/website/src/components/HyperlinkedText.tsx

@@ -19,12 +19,16 @@ export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
 				if (token.path) {
 					return (
 						<Link key={token.text} href={token.path}>
-							{token.text}
+							<a className="text-blue-500 dark:text-blue-300">{token.text}</a>
 						</Link>
 					);
 				}
 
-				return token.text;
+				return (
+					<span key={token.text} className="text-blue-500 dark:text-blue-300">
+						{token.text}
+					</span>
+				);
 			})}
 		</>
 	);

packages/website/src/components/ItemSidebar.tsx

@@ -19,30 +19,30 @@ function onMenuClick() {
 
 export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
 	return (
-		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-0.5 border-gray border-width-0.5">
-			<div className=" border-b-solid border-0.5 border-gray border-width-0.5 py-2 sticky top-0">
-				<h2 className="px-2 flex items-center m-0 dark:text-white">
-					<VscPackage className="px-1" />
+		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-0.5 border-gray">
+			<div className="border-b-0.5 border-gray py-2">
+				<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
+					<VscPackage />
 					{`${packageName}`}
 				</h2>
 				<button className="lg:hidden mr-2 bg-transparent border-none cursor-pointer" onClick={onMenuClick}>
 					<FiMenu size={32} />
 				</button>
 			</div>
-			<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7 space-y-2">
+			<div className="hidden lg:block lg:min-h-full overflow-y-scroll overflow-x-clip p-7 space-y-2">
 				{data.members.map((member, i) => (
-					<div key={i} className="mb-1">
-						<div className="flex items-center align-center no-underline break-all text-blue-500 dark:text-blue-300">
-							<Link href={member.path}>
-								<a
-									className={`no-underline m-0 hover:color-black hover:font-semibold  ${
-										selectedMember === member.name ? 'color-black font-semibold' : 'color-gray-600'
-									}`}
-								>
-									{member.name}
-								</a>
-							</Link>
-						</div>
+					<div key={i} className="flex items-center no-underline break-all text-blue-500 dark:text-blue-300">
+						<Link href={member.path}>
+							<a
+								className={`no-underline m-0 ${
+									selectedMember === member.name
+										? 'text-blue-500 dark:text-blue-300 font-semibold'
+										: 'text-black dark:text-white hover:text-dark-100 dark:hover:text-gray-300 hover:font-semibold'
+								}`}
+							>
+								{member.name}
+							</a>
+						</Link>
 					</div>
 				))}
 			</div>

packages/website/src/components/MethodItem.tsx

@@ -28,23 +28,23 @@ function onAnchorClick() {
 export function MethodItem({ data }: MethodItemProps) {
 	return (
 		<div className="flex flex-col">
-			<div className="flex content-center">
+			<div className="flex">
 				<button className="bg-transparent border-none cursor-pointer dark:text-white" onClick={onAnchorClick}>
 					<FiLink size={16} />
 				</button>
-				<div className="flex flex-col ml-3">
-					<div className="w-full flex flex-row">
-						<h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4>
-						<h4 className="mx-3 my-0">:</h4>
-						<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0 break-all ">
+				<div className="flex flex-col">
+					<div className="w-full flex flex-row gap-3">
+						<h4 className="font-mono m-0 break-all">{`${getShorthandName(data)}`}</h4>
+						<h4 className="m-0">:</h4>
+						<h4 className="font-mono m-0 break-all">
 							<HyperlinkedText tokens={data.returnTypeTokens} />
 						</h4>
 					</div>
 				</div>
 			</div>
-			<div className="mx-10">
-				{data.summary && <p className="text-dark-100 dark:text-gray-400 mt-2">{data.summary}</p>}
-				{data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null}
+			<div className="mx-7 mb-5">
+				{data.summary && <p className="text-dark-100 dark:text-gray-300">{data.summary}</p>}
+				{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
 			</div>
 		</div>
 	);

packages/website/src/components/MethodList.tsx

@@ -9,7 +9,7 @@ export interface MethodListProps {
 export function MethodList({ data }: MethodListProps) {
 	return (
 		<div>
-			<div className="flex flex-col">
+			<div className="flex flex-col gap-5">
 				{data.map((method) => (
 					<MethodItem key={method.name} data={method} />
 				))}

packages/website/src/components/PropertyList.tsx

@@ -7,7 +7,7 @@ export interface PropertyListProps {
 
 export function PropertyList({ data }: PropertyListProps) {
 	return (
-		<div className="flex flex-col">
+		<div className="flex flex-col gap-5">
 			{data.map((prop) => (
 				<CodeListing key={prop.name} name={prop.name} typeTokens={prop.propertyTypeTokens} summary={prop.summary} />
 			))}

packages/website/src/components/Section.tsx

@@ -16,29 +16,36 @@ export function Section({ title, children, className, defaultClosed }: SectionPr
 	return (
 		<div className={className}>
 			<AnimatePresence initial={false}>
-				<h3 className="-ml-4 flex whitespace-pre-wrap pl-4 font-semibold dark:text-white">
+				<h3 className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white">
 					<div onClick={() => setCollapsed(!collapsed)}>
-						{collapsed ? <VscChevronRight className="mr-2" size={20} /> : <VscChevronDown className="mr-2" size={20} />}
+						{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
 					</div>
-
 					{title}
 				</h3>
-				{!collapsed && (
-					<motion.div
-						transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
-						key="content"
-						initial="collapsed"
-						animate="open"
-						exit="collapsed"
-						variants={{
-							open: { opacity: 1, height: 'auto' },
-							collapsed: { opacity: 0, height: 0 },
-						}}
-					>
-						<div className="pb-5">{children}</div>
-					</motion.div>
+				{collapsed ? null : (
+					<>
+						<motion.div
+							transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
+							key="content"
+							initial="collapsed"
+							animate="open"
+							exit="collapsed"
+							variants={{
+								open: {
+									opacity: 1,
+									height: 'auto',
+									paddingLeft: '1.75rem',
+									paddingRight: '1.75rem',
+									paddingBottom: '2.5rem',
+								},
+								collapsed: { opacity: 0, height: 0, paddingLeft: '1.75rem', paddingRight: '1.75rem', paddingBottom: 0 },
+							}}
+						>
+							{children}
+						</motion.div>
+						<Separator />
+					</>
 				)}
-				<Separator />
 			</AnimatePresence>
 		</div>
 	);

packages/website/src/components/Seperator.tsx

@@ -1,3 +1,3 @@
 export function Separator() {
-	return <div className="h-[1px] w-full bg-gray-300 mb-3" />;
+	return <div className="h-[1px] w-full bg-gray-300" />;
 }

packages/website/src/components/SidebarLayout.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import { type ItemListProps, ItemSidebar } from './ItemSidebar';
-import type { findMember } from '~/model.server';
+import type { findMember } from '~/util/model.server';
 
 export function SidebarLayout({
 	packageName,

packages/website/src/components/Table.tsx

@@ -19,7 +19,7 @@ export function Table({ rows, columns, columnStyles, className }: TableProps) {
 				<thead>
 					<tr>
 						{columns.map((column) => (
-							<th key={column} className="border-b z-10 text-left text-sm pl-2 border-slate-400">
+							<th key={column} className="border-b z-10 text-left text-sm pl-2 border-gray">
 								{column}
 							</th>
 						))}
@@ -31,9 +31,7 @@ export function Table({ rows, columns, columnStyles, className }: TableProps) {
 							{Object.entries(row).map(([colName, val]) => (
 								<td
 									key={colName}
-									className={`p-2 text-sm border-b text-left border-slate-300 break-all ${
-										columnStyles?.[colName] ?? ''
-									}`}
+									className={`p-2 text-sm border-b text-left border-gray break-all ${columnStyles?.[colName] ?? ''}`}
 								>
 									{val}
 								</td>

packages/website/src/pages/docs/[...slug].tsx

@@ -14,12 +14,12 @@ import { Function } from '~/components/model/Function';
 import { Interface } from '~/components/model/Interface';
 import { TypeAlias } from '~/components/model/TypeAlias';
 import { Variable } from '~/components/model/Variable';
-import { findMember } from '~/model.server';
 import { createApiModel } from '~/util/api-model.server';
+import { findMember } from '~/util/model.server';
 import { findPackage, getMembers } from '~/util/parse.server';
 
 export const getStaticPaths: GetStaticPaths = async () => {
-	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice'];
+	const packages = ['builders', 'collection', 'proxy', 'rest', 'voice', 'ws'];
 
 	const pkgs = (
 		await Promise.all(

packages/website/src/pages/index.tsx

@@ -23,8 +23,8 @@ const LinkButton = forwardRef<HTMLAnchorElement, ButtonProps>(({ title, onClick,
 export default function IndexRoute() {
 	return (
 		<main className="w-full max-w-full max-h-full h-full flex-col bg-white dark:bg-dark overflow-y-auto">
-			<div className="flex h-[65px] sticky top-0 border-b border-slate-300 justify-center px-10 bg-white dark:bg-dark">
-				<div className="flex align-center items-center w-full max-w-[1100px] justify-between">
+			<div className="flex h-[65px] sticky top-0 border-b border-gray justify-center px-10 bg-white dark:bg-dark">
+				<div className="flex items-center w-full max-w-[1100px] justify-between">
 					<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
 						<Image className="h-[50px] w-[50px]" src={logo} />
 					</div>
@@ -38,7 +38,7 @@ export default function IndexRoute() {
 				<div className="flex flex-col xl:flex-row grow max-w-[1100px] pb-10 space-y-10 xl:space-x-20 place-items-center place-self-center">
 					<div className="flex flex-col max-w-[800px] lt-xl:items-center">
 						<h1 className="font-bold text-6xl text-blurple my-2">{text.heroTitle}</h1>
-						<p className="text-xl text-dark-100 dark:text-gray-400">{text.heroDescription}</p>
+						<p className="text-xl text-dark-100 dark:text-gray-300">{text.heroDescription}</p>
 						<div className="flex flew-row space-x-4">
 							<LinkButton title="Read the guide" />
 							<Link href="/docs/" passHref>
@@ -46,7 +46,7 @@ export default function IndexRoute() {
 							</Link>
 						</div>
 					</div>
-					<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">
+					<div className="sm:flex sm:grow sm:shrink h-full xl:items-center hidden">
 						<Image src={codeSample} className="max-w-[600px] h-full rounded-xl shadow-md overflow-hidden" />
 					</div>
 				</div>

packages/website/src/util/api-model.server.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { ApiItem, ApiModel, ApiPackage } from '~/api-extractor.server';
-import { TSDocConfigFile } from '~/tsdoc-config.server';
-import { TSDocConfiguration } from '~/tsdoc.server';
+import { ApiItem, ApiModel, ApiPackage } from '~/util/api-extractor.server';
+import { TSDocConfigFile } from '~/util/tsdoc-config.server';
+import { TSDocConfiguration } from '~/util/tsdoc.server';
 
 export function createApiModel(data: any) {
 	const model = new ApiModel();

packages/website/src/util/icon.tsx

@@ -2,12 +2,12 @@ import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, Vsc
 
 export function generateIcon(kind: string, className?: string) {
 	const icons = {
-		Class: <VscSymbolClass color="blue" className={className} />,
+		Class: <VscSymbolClass className={className} />,
 		Method: <VscSymbolMethod className={className} />,
 		Function: <VscSymbolMethod color="purple" className={className} />,
 		Enum: <VscSymbolEnum className={className} />,
-		Interface: <VscSymbolInterface color="blue" className={className} />,
-		TypeAlias: <VscSymbolVariable color="blue" className={className} />,
+		Interface: <VscSymbolInterface className={className} />,
+		TypeAlias: <VscSymbolVariable className={className} />,
 	};
 
 	return icons[kind as keyof typeof icons];

packages/website/src/util/model.server.ts

@@ -10,14 +10,14 @@ import {
 	ApiTypeAlias,
 	ApiVariable,
 } from '@microsoft/api-extractor-model';
-import { DocClass } from './DocModel/DocClass';
-import { DocEnum } from './DocModel/DocEnum';
-import { DocFunction } from './DocModel/DocFunction';
-import { DocInterface } from './DocModel/DocInterface';
-import { DocItem } from './DocModel/DocItem';
-import { DocTypeAlias } from './DocModel/DocTypeAlias';
-import { DocVariable } from './DocModel/DocVariable';
-import { findPackage } from './util/parse.server';
+import { findPackage } from './parse.server';
+import { DocClass } from '../DocModel/DocClass';
+import { DocEnum } from '../DocModel/DocEnum';
+import { DocFunction } from '../DocModel/DocFunction';
+import { DocInterface } from '../DocModel/DocInterface';
+import { DocItem } from '../DocModel/DocItem';
+import { DocTypeAlias } from '../DocModel/DocTypeAlias';
+import { DocVariable } from '../DocModel/DocVariable';
 
 export interface ReferenceData {
 	name: string;