refactor(website): redesign

apps/website/package.json

@@ -15,7 +15,7 @@
 		"build:analyze": "yarn run --top-level docs --force && cross-env-shell ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
 		"preview": "next start",
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
-		"dev:next": "next dev",
+		"dev:next": "yarn workspaces foreach -ptR run build && next dev",
 		"dev:css": "yarn generate:css --watch",
 		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
 		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --format=pretty",

apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx

@@ -172,19 +172,5 @@ function Member({ member }: { member?: ApiItem }) {
 export default async function Page({ params }: { params: ItemRouteParams }) {
 	const member = await fetchMember(params);
 
-	return (
-		<div
-			className={
-				(member?.kind === 'Class' || member?.kind === 'Interface') && (member as ApiClass | ApiInterface).members.length
-					? 'xl:pr-64'
-					: ''
-			}
-		>
-			<article className="dark:bg-dark-800 bg-light-600">
-				<div className="dark:bg-dark-600 min-h-[calc(100vh_-_64px)] bg-white p-6 pb-20 shadow">
-					{member ? <Member member={member} /> : null}
-				</div>
-			</article>
-		</div>
-	);
+	return <div className="relative top-6">{member ? <Member member={member} /> : null}</div>;
 }

apps/website/src/app/docs/packages/[package]/[version]/layout.tsx

@@ -69,14 +69,18 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 
 	return (
 		<Providers>
-			<main>
+			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
 				<Header />
-				<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
-				<article className="lg:pl-76 pt-16">
-					<div className="relative z-10">{children}</div>
-					<div className="h-76 md:h-52" />
-				</article>
-				<Footer />
+				<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
+					<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_100px)]">
+						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
+					</div>
+
+					<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
+						{children}
+						<Footer />
+					</div>
+				</div>
 			</main>
 			<CmdKDialog />
 		</Providers>

apps/website/src/app/docs/packages/[package]/[version]/page.tsx

@@ -27,11 +27,9 @@ export default async function Page({ params }: { params: VersionRouteParams }) {
 	const readmeSource = await loadREADME(packageName);
 
 	return (
-		<article className="dark:bg-dark-600 bg-white p-10">
-			<div className="prose max-w-none">
-				{/* @ts-expect-error async component */}
-				<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
-			</div>
-		</article>
+		<div className="prose max-w-none">
+			{/* @ts-expect-error async component */}
+			<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
+		</div>
 	);
 }

apps/website/src/app/layout.tsx

@@ -42,7 +42,10 @@ export const metadata: Metadata = {
 
 	manifest: '/site.webmanifest',
 
-	themeColor: '#5865f2',
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
+		{ media: '(prefers-color-scheme: dark)', color: '#181818' },
+	],
 	colorScheme: 'light dark',
 
 	appleWebApp: {

apps/website/src/components/Anchor.tsx

@@ -2,10 +2,7 @@ import { FiLink } from '@react-icons/all-files/fi/FiLink';
 
 export function Anchor({ href }: { href: string }) {
 	return (
-		<a
-			className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
-			href={href}
-		>
+		<a className="focus:ring-width-2 focus:ring-blurple mr-1 inline-block rounded outline-0 focus:ring" href={href}>
 			<FiLink size={20} />
 		</a>
 	);

apps/website/src/components/CmdK.tsx

@@ -50,7 +50,7 @@ export function CmdKDialog() {
 		() =>
 			searchResults?.map((item, idx) => (
 				<Command.Item
-					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-2 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
 					key={`${item.id}-${idx}`}
 					onSelect={() => {
 						router.push(item.path);
@@ -114,12 +114,12 @@ export function CmdKDialog() {
 	return (
 		<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
 			<Command
-				className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
+				className="dark:bg-dark/50 min-w-xs sm:min-w-lg dark:border-dark-100 border-light-900 max-w-xs rounded border bg-white/50 shadow backdrop-blur-md sm:max-w-lg"
 				label="Command Menu"
 				shouldFilter={false}
 			>
 				<Command.Input
-					className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
+					className="dark:bg-dark/50 caret-blurple placeholder:text-dark-300/75 dark:border-dark-100 border-light-900 rounded-b-0 w-full rounded border-0 border-b bg-white/50 p-4 text-lg outline-0 dark:placeholder:text-white/75"
 					onValueChange={setSearch}
 					placeholder="Quick search..."
 					value={search}

apps/website/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
 
 export default function Footer() {
 	return (
-		<footer className="dark:bg-dark-800 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
+		<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
 			<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
 				<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
 					<a

apps/website/src/components/Header.tsx

@@ -64,31 +64,31 @@ export default function Header() {
 	);
 
 	return (
-		<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+		<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
 			<div className="block h-16 px-6">
-				<div className="flex h-full flex-row place-content-between place-items-center">
+				<div className="flex h-full flex-row place-content-between place-items-center gap-8">
 					<Button
 						aria-label="Menu"
 						className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
 						onClick={() => setOpened((open) => !open)}
 					>
 						<VscMenu size={24} />
 					</Button>
-					<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
-					<div className="flex flex-row place-items-center gap-4">
-						<Button
-							as="div"
-							className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
-							onClick={() => dialog?.toggle()}
-						>
-							<div className="flex flex-row place-items-center gap-4">
-								<VscSearch size={18} />
-								<span className="opacity-65">Search...</span>
-								<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
-									<FiCommand size={18} /> K
-								</div>
+					<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
+					<Button
+						as="div"
+						className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple w-56 grow rounded bg-white px-4 py-2.5 outline-0 focus:ring sm:grow-0"
+						onClick={() => dialog?.toggle()}
+					>
+						<div className="flex flex-row place-items-center gap-4 md:justify-between">
+							<VscSearch size={18} />
+							<span className="opacity-65">Search...</span>
+							<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
+								<FiCommand size={18} /> K
 							</div>
-						</Button>
+						</div>
+					</Button>
+					<div className="flex flex-row place-items-center gap-4">
 						<Button
 							aria-label="GitHub"
 							as="a"

apps/website/src/components/Nav.tsx

@@ -14,20 +14,21 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
 
 	return (
 		<nav
-			className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[65px] left-0 bottom-0 z-20 h-[calc(100vh_-_65px)] w-full border-r bg-white ${
+			className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
 				opened ? 'block' : 'hidden'
-			} lg:w-76 lg:max-w-76 lg:block`}
+			} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
 		>
 			<Scrollbars
 				autoHide
+				className="[&>div]:overscroll-none"
 				hideTracksWhenNotNeeded
 				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
 				renderTrackVertical={(props) => (
 					<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
 				)}
 				universal
 			>
-				<div className="flex flex-col gap-3 px-3 pt-3">
+				<div className="flex flex-col gap-4 p-3">
 					<PackageSelect />
 					<VersionSelect />
 				</div>

apps/website/src/components/Panel.tsx

@@ -4,7 +4,7 @@ export function Panel({ children }: PropsWithChildren) {
 	return (
 		<>
 			{children}
-			<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+			<div className="border-light-900 dark:border-dark-100 border-t-2" />
 		</>
 	);
 }

apps/website/src/components/Property.tsx

@@ -25,10 +25,9 @@ export function Property({
 
 	return (
 		<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
-			<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
-				<Anchor href={`#${item.displayName}`} />
+			<div className="flex flex-col gap-2 md:-ml-9">
 				{isDeprecated || item.isReadonly || item.isOptional ? (
-					<div className="flex flex-row gap-1">
+					<div className="flex flex-row gap-1 md:ml-7">
 						{isDeprecated ? (
 							<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 								Deprecated
@@ -47,6 +46,7 @@ export function Property({
 					</div>
 				) : null}
 				<div className="flex flex-row flex-wrap place-items-center gap-1">
+					<Anchor href={`#${item.displayName}`} />
 					<h4 className="break-all font-mono text-lg font-bold">
 						{item.displayName}
 						{item.isOptional ? '?' : ''}

apps/website/src/components/PropertyList.tsx

@@ -28,7 +28,7 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
 							item={prop.item as ApiPropertyItem}
 							separator={PropertySeparatorType.Type}
 						/>
-						<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+						<div className="border-light-900 dark:border-dark-100 border-t-2" />
 					</Fragment>
 				);
 			}),

apps/website/src/components/Sidebar.tsx

@@ -89,7 +89,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 	const groupItems = useMemo(() => groupMembers(members), [members]);
 
 	return (
-		<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
+		<div className="flex flex-col gap-3 p-3">
 			{(Object.keys(groupItems) as (keyof GroupedMembers)[])
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (

apps/website/src/components/documentation/MemberContainerDocumentation.tsx

@@ -25,7 +25,7 @@ export function MemberContainerDocumentation({
 			{hasProperties(item) ? <PropertiesSection item={item} /> : null}
 			{hasMethods(item) ? <MethodsSection item={item} /> : null}
 
-			<Outline members={serializeMembers(item)} />
+			{/* <Outline members={serializeMembers(item)} /> */}
 		</Documentation>
 	);
 }

apps/website/src/components/documentation/section/DocumentationSection.tsx

@@ -8,7 +8,7 @@ export function DocumentationSection(opts: PropsWithChildren<SectionOptions & {
 	return (
 		<Section {...props}>
 			{children}
-			{separator ? <div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" /> : null}
+			{separator ? <div className="border-light-900 dark:border-dark-100 mt-6 border-t-2" /> : null}
 		</Section>
 	);
 }

apps/website/src/components/documentation/section/MethodsSection.tsx

@@ -31,7 +31,7 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
 					}`}
 				>
 					<Method inheritedFrom={inherited as ApiDeclaredItem & ApiItemContainerMixin} method={method} />
-					<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+					<div className="border-light-900 dark:border-dark-100 border-t-2" />
 				</Fragment>
 			)),
 		[members],

apps/website/src/components/documentation/tsdoc/TSDoc.tsx

@@ -74,7 +74,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
 
 				case DocNodeKind.FencedCode: {
 					const { language, code } = tsdoc as DocFencedCode;
-					return <SyntaxHighlighter code={code} key={idx} lang={language ?? 'typescript'} />;
+					return <SyntaxHighlighter code={code.trim()} key={idx} lang={language ?? 'typescript'} />;
 				}
 
 				case DocNodeKind.Comment: {

apps/website/src/components/model/Class.tsx

@@ -22,7 +22,7 @@ export function Class({ clazz }: { clazz: ApiClass }) {
 			{clazz.typeParameters.length ? <TypeParameterSection item={clazz} /> : null}
 			{constructor ? <ConstructorSection item={constructor} /> : null}
 			<Members item={clazz} />
-			<Outline members={serializeMembers(clazz)} />
+			{/* <Outline members={serializeMembers(clazz)} /> */}
 		</Documentation>
 	);
 }

apps/website/src/components/model/Interface.tsx

@@ -14,7 +14,7 @@ export function Interface({ item }: { item: ApiInterface }) {
 			<HierarchyText item={item} type="Extends" />
 			{item.typeParameters.length ? <TypeParameterSection item={item} /> : null}
 			<Members item={item} />
-			<Outline members={serializeMembers(item)} />
+			{/* <Outline members={serializeMembers(item)} /> */}
 		</Documentation>
 	);
 }

apps/website/src/components/model/Variable.tsx

@@ -1,13 +1,11 @@
 import type { ApiVariable } from '@microsoft/api-extractor-model';
 import { Documentation } from '../documentation/Documentation';
 import { ObjectHeader } from '../documentation/ObjectHeader';
-import { SummarySection } from '../documentation/section/SummarySection';
 
 export function Variable({ item }: { item: ApiVariable }) {
 	return (
 		<Documentation>
 			<ObjectHeader item={item} />
-			<SummarySection item={item} />
 		</Documentation>
 	);
 }

apps/website/src/components/model/enum/Enum.tsx

@@ -4,14 +4,12 @@ import { Panel } from '../../Panel';
 import { Documentation } from '../../documentation/Documentation';
 import { ObjectHeader } from '../../documentation/ObjectHeader';
 import { DocumentationSection } from '../../documentation/section/DocumentationSection';
-import { SummarySection } from '../../documentation/section/SummarySection';
 import { EnumMember } from './EnumMember';
 
 export function Enum({ item }: { item: ApiEnum }) {
 	return (
 		<Documentation>
 			<ObjectHeader item={item} />
-			<SummarySection item={item} />
 			<DocumentationSection icon={<VscSymbolEnum size={20} />} padded title="Members">
 				<div className="flex flex-col gap-4">
 					{item.members.map((member, idx) => (

apps/website/src/components/model/method/MethodHeader.tsx

@@ -26,12 +26,11 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
 
 	return (
 		<div className="scroll-mt-30 flex flex-col" id={key}>
-			<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
-				<Anchor href={`#${key}`} />
+			<div className="flex flex-col gap-2 md:-ml-9">
 				{isDeprecated ||
 				(method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected) ||
 				(method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic) ? (
-					<div className="flex flex-row gap-1">
+					<div className="flex flex-row gap-1 md:ml-7">
 						{isDeprecated ? (
 							<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 								Deprecated
@@ -49,7 +48,8 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
 						) : null}
 					</div>
 				) : null}
-				<div className="flex flex-row flex-wrap gap-1">
+				<div className="flex flex-row flex-wrap place-items-center gap-1">
+					<Anchor href={`#${key}`} />
 					<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(method)}</h4>
 					<h4 className="font-mono text-lg font-bold">:</h4>
 					<h4 className="break-all font-mono text-lg font-bold">

apps/website/src/styles/cmdk.css

@@ -1,3 +1,3 @@
 [data-backdrop] {
-	background-color: rgb(0 0 0 / 35%);
+	background-color: rgb(0 0 0 / 15%);
 }

packages/ui/src/lib/components/Section.tsx

@@ -22,7 +22,7 @@ export function Section({
 	background = false,
 	gutter = false,
 	children,
-	className,
+	className = '',
 }: PropsWithChildren<SectionOptions>) {
 	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });