refactor(website): add typography improvements (#8355)

* refactor(website): add typography improvements

* chore: bold on hover

packages/website/package.json

@@ -51,6 +51,7 @@
 		"@microsoft/tsdoc": "0.14.1",
 		"@microsoft/tsdoc-config": "0.16.1",
 		"@vscode/codicons": "^0.0.31",
+		"framer-motion": "^6.5.1",
 		"next": "^12.2.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

packages/website/src/components/DocContainer.tsx

@@ -20,8 +20,8 @@ export interface DocContainerProps {
 export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
 	return (
 		<>
-			<div className="bg-white dark:bg-dark border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
-				<h2 className="flex items-center font-mono break-all m-0 dark:text-white">
+			<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')}
 					{name}
 				</h2>
@@ -41,21 +41,23 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 				</div>
 				{extendsTokens?.length ? (
 					<div className="flex flex-row items-center dark:text-white">
-						<h2 className="mr-5">Extends</h2>
+						<h3 className="mr-5 mt-0 mb-0">Extends</h3>
 						<p className="font-mono">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
 					</div>
 				) : null}
-				<Section title="Summary" className="dark:text-white">
-					<p className="text-dark-100 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
-				</Section>
-				{typeParams?.length ? (
-					<Section title="Type Parameters" className="dark:text-white">
-						<TypeParamTable data={typeParams} className="mb-5 p-3" />
+				<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>
 					</Section>
-				) : null}
-				<div>{children}</div>
+					{typeParams?.length ? (
+						<Section title="Type Parameters" className="dark:text-white" defaultClosed>
+							<TypeParamTable data={typeParams} className="mb-5 p-3" />
+						</Section>
+					) : null}
+					<div className="space-y-10">{children}</div>
+				</div>
 			</div>
 		</>
 	);

packages/website/src/components/ItemSidebar.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { FiMenu } from 'react-icons/fi';
 import { VscPackage } from 'react-icons/vsc';
-import { generateIcon } from '~/util/icon';
 import type { getMembers } from '~/util/parse.server';
 
 export interface ItemListProps {
@@ -9,6 +8,8 @@ export interface ItemListProps {
 	data: {
 		members: ReturnType<typeof getMembers>;
 	};
+
+	selectedMember?: string | undefined;
 }
 
 function onMenuClick() {
@@ -16,11 +17,11 @@ function onMenuClick() {
 	// Todo show/hide list
 }
 
-export function ItemSidebar({ packageName, data }: ItemListProps) {
+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-gray border-width-0.5">
-			<div className=" border-b-solid border-gray border-width-0.5 py-2 sticky top-0">
-				<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
+		<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" />
 					{`${packageName}`}
 				</h2>
@@ -28,12 +29,19 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
 					<FiMenu size={32} />
 				</button>
 			</div>
-			<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7">
+			<div className="hidden lg:block lg:min-h-screen 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 font-mono no-underline break-all text-blue-500 dark:text-blue-300">
-							{generateIcon(member.kind, 'px-1')}
-							<Link href={member.path}>{member.name}</Link>
+						<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>
 				))}

packages/website/src/components/Section.tsx

@@ -1,18 +1,45 @@
-import type { ReactNode } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { type ReactNode, useState } from 'react';
+import { VscChevronDown, VscChevronRight } from 'react-icons/vsc';
 import { Separator } from './Seperator';
 
 export interface SectionProps {
 	children: ReactNode;
 	title: string;
 	className?: string | undefined;
+	defaultClosed?: boolean;
 }
 
-export function Section({ title, children, className }: SectionProps) {
+export function Section({ title, children, className, defaultClosed }: SectionProps) {
+	const [collapsed, setCollapsed] = useState(defaultClosed ?? false);
+
 	return (
 		<div className={className}>
-			<h2>{title}</h2>
-			{children}
-			<Separator />
+			<AnimatePresence initial={false}>
+				<h3 className="-ml-4 flex whitespace-pre-wrap pl-4 font-semibold dark:text-white">
+					<div onClick={() => setCollapsed(!collapsed)}>
+						{collapsed ? <VscChevronRight className="mr-2" size={20} /> : <VscChevronDown className="mr-2" 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>
+				)}
+				<Separator />
+			</AnimatePresence>
 		</div>
 	);
 }

packages/website/src/components/SidebarLayout.tsx

@@ -10,7 +10,9 @@ export function SidebarLayout({
 	return (
 		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full max-h-full bg-white dark:bg-dark">
 			<div className="w-full lg:max-w-1/4 lg:min-w-1/4">
-				{packageName && data ? <ItemSidebar packageName={packageName} data={data} /> : null}
+				{packageName && data ? (
+					<ItemSidebar packageName={packageName} data={data} selectedMember={data.member?.name} />
+				) : null}
 			</div>
 			<div className="max-h-full grow overflow-auto">{children}</div>
 		</div>

packages/website/src/components/model/Enum.tsx

@@ -11,7 +11,7 @@ export function Enum({ data }: EnumProps) {
 	return (
 		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
 			<Section title="Members">
-				<div className="flex flex-col">
+				<div className="flex flex-col space-y-5">
 					{data.members.map((member) => (
 						<CodeListing
 							key={member.name}

packages/website/src/pages/index.tsx

@@ -1,4 +1,6 @@
 import Image from 'next/future/image';
+import Link from 'next/link';
+import { forwardRef, MouseEventHandler, Ref } from 'react';
 import codeSample from '../assets/code-sample.png';
 import logo from '../assets/djs_logo_rainbow_400x400.png';
 import vercelLogo from '../assets/powered-by-vercel.svg';
@@ -6,15 +8,17 @@ import text from '../text.json';
 
 interface ButtonProps {
 	title: string;
+	href?: string;
+	ref?: Ref<HTMLAnchorElement>;
+	onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
-function Button({ title }: ButtonProps) {
-	return (
-		<div className="max-h-[70px] bg-blurple px-3 py-4 rounded-lg">
-			<p className="font-semibold text-white m-0">{title}</p>
-		</div>
-	);
-}
+// eslint-disable-next-line react/display-name
+const LinkButton = forwardRef<HTMLAnchorElement, ButtonProps>(({ title, onClick, href }: ButtonProps, ref) => (
+	<a href={href} onClick={onClick} ref={ref} className="max-h-[70px] bg-blurple px-3 py-4 rounded-lg">
+		<p className="font-semibold text-white m-0">{title}</p>
+	</a>
+));
 
 export default function IndexRoute() {
 	return (
@@ -36,8 +40,10 @@ export default function IndexRoute() {
 						<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>
 						<div className="flex flew-row space-x-4">
-							<Button title="Read the guide" />
-							<Button title="Check out the docs" />
+							<LinkButton title="Read the guide" />
+							<Link href="/docs/" passHref>
+								<LinkButton title="Check out the docs" />
+							</Link>
 						</div>
 					</div>
 					<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">

packages/website/src/styles/main.css

@@ -1,9 +1,20 @@
+@import url('https://rsms.me/inter/inter.css');
+
+@supports (font-variation-settings: normal) {
+	html {
+		font-family: 'Inter var', sans-serif;
+		font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+	}
+}
+
 html,
 body {
 	height: 100vh;
 	margin: 0;
-	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
-		Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+	font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+		Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
+		'Noto Color Emoji';
+	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
 }
 
 #__next {

packages/website/unocss.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
 		presetWebFonts({
 			provider: 'google',
 			fonts: {
-				sans: 'JetBrains Mono',
+				mono: ['JetBrains Mono', 'JetBrains Mono:400,600'],
 			},
 		}),
 	],