refactor(website): redesign (#9286)

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: {