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

* refactor(website): add typography improvements * chore: bold on hover
2026-03-09 16:13:31 +01:00 · 2022-07-24 15:56:50 -04:00
parent 9ae461d84d
commit 4bda24678a
10 changed files with 238 additions and 40 deletions
--- a/packages/website/package.json
+++ b/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",
--- a/packages/website/src/components/DocContainer.tsx
+++ b/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>
 		</>
 	);
--- a/packages/website/src/components/ItemSidebar.tsx
+++ b/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>
 				))}
--- a/packages/website/src/components/Section.tsx
+++ b/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>
 	);
 }
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/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>
--- a/packages/website/src/components/model/Enum.tsx
+++ b/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}
--- a/packages/website/src/pages/index.tsx
+++ b/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">
--- a/packages/website/src/styles/main.css
+++ b/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 {
--- a/packages/website/unocss.config.ts
+++ b/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'],
 			},
 		}),
 	],
--- a/yarn.lock
+++ b/yarn.lock
@@ -1958,6 +1958,7 @@ __metadata:
    eslint-plugin-import: ^2.26.0
    eslint-plugin-react: ^7.30.1
    eslint-plugin-react-hooks: ^4.6.0
+    framer-motion: ^6.5.1
    happy-dom: ^6.0.4
    msw: ^0.44.2
    next: ^12.2.3
@@ -2027,6 +2028,22 @@ __metadata:
  languageName: node
  linkType: hard

+"@emotion/is-prop-valid@npm:^0.8.2":
+  version: 0.8.8
+  resolution: "@emotion/is-prop-valid@npm:0.8.8"
+  dependencies:
+    "@emotion/memoize": 0.7.4
+  checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:0.7.4":
+  version: 0.7.4
+  resolution: "@emotion/memoize@npm:0.7.4"
+  checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^1.3.0":
  version: 1.3.0
  resolution: "@eslint/eslintrc@npm:1.3.0"
@@ -2532,6 +2549,71 @@ __metadata:
  languageName: node
  linkType: hard

+"@motionone/animation@npm:^10.12.0":
+  version: 10.13.1
+  resolution: "@motionone/animation@npm:10.13.1"
+  dependencies:
+    "@motionone/easing": ^10.13.1
+    "@motionone/types": ^10.13.0
+    "@motionone/utils": ^10.13.1
+    tslib: ^2.3.1
+  checksum: bf3f95f1c100a18e170fd55fa3d16c6f674fe02dd0f344e78a8ae7e6ffac3510612e9f0b7a5a73fae3bb91b7c3d4e287f605e4feeb8a92538c3588d3ab8a4a70
+  languageName: node
+  linkType: hard
+
+"@motionone/dom@npm:10.12.0":
+  version: 10.12.0
+  resolution: "@motionone/dom@npm:10.12.0"
+  dependencies:
+    "@motionone/animation": ^10.12.0
+    "@motionone/generators": ^10.12.0
+    "@motionone/types": ^10.12.0
+    "@motionone/utils": ^10.12.0
+    hey-listen: ^1.0.8
+    tslib: ^2.3.1
+  checksum: 123356f28e44362c4f081aae3df22e576f46bfcb07e01257b2ac64a115668448f29b8de67e4b6e692c5407cffb78ffe7cf9fa1bc064007482bab5dd23a69d380
+  languageName: node
+  linkType: hard
+
+"@motionone/easing@npm:^10.13.1":
+  version: 10.13.1
+  resolution: "@motionone/easing@npm:10.13.1"
+  dependencies:
+    "@motionone/utils": ^10.13.1
+    tslib: ^2.3.1
+  checksum: 04d3c2d1458795d207067a8341ac23b5037b11d9e7160f91bb953438551255d072012dd22aaed678d0f88792143ad16c9566e131003ec047ef7938529a27b485
+  languageName: node
+  linkType: hard
+
+"@motionone/generators@npm:^10.12.0":
+  version: 10.13.1
+  resolution: "@motionone/generators@npm:10.13.1"
+  dependencies:
+    "@motionone/types": ^10.13.0
+    "@motionone/utils": ^10.13.1
+    tslib: ^2.3.1
+  checksum: d4b91d0352c00275644c5e33bf031545212f94821aa6f7fdc26fa92f054138c76ff89c77a3b10ca167b447e4cf7c019a9628688c9635a21528da2ea260724fbc
+  languageName: node
+  linkType: hard
+
+"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.13.0":
+  version: 10.13.0
+  resolution: "@motionone/types@npm:10.13.0"
+  checksum: 4c0a4593562f3c8fa30660a3b796ec012d592029137fc35f3029b34e69e5c364efa24c2016dd66b21db580d0a9d4107730b30f55496b416b2ed9dbe437865eab
+  languageName: node
+  linkType: hard
+
+"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.13.1":
+  version: 10.13.1
+  resolution: "@motionone/utils@npm:10.13.1"
+  dependencies:
+    "@motionone/types": ^10.13.0
+    hey-listen: ^1.0.8
+    tslib: ^2.3.1
+  checksum: 2ec2de91d07f7bd1dcb157d96c0c0f7565d1e8c6ac9adec0ce33811a321fea72d45a4c51833d2c3e432c26b3904e17e3296d553ad87b4b6705d6fba93cd22aca
+  languageName: node
+  linkType: hard
+
 "@mswjs/cookies@npm:^0.2.2":
  version: 0.2.2
  resolution: "@mswjs/cookies@npm:0.2.2"
@@ -7989,6 +8071,36 @@ __metadata:
  languageName: node
  linkType: hard

+"framer-motion@npm:^6.5.1":
+  version: 6.5.1
+  resolution: "framer-motion@npm:6.5.1"
+  dependencies:
+    "@emotion/is-prop-valid": ^0.8.2
+    "@motionone/dom": 10.12.0
+    framesync: 6.0.1
+    hey-listen: ^1.0.8
+    popmotion: 11.0.3
+    style-value-types: 5.0.0
+    tslib: ^2.1.0
+  peerDependencies:
+    react: ">=16.8 || ^17.0.0 || ^18.0.0"
+    react-dom: ">=16.8 || ^17.0.0 || ^18.0.0"
+  dependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+  checksum: 737959063137b4ccafe01e0ac0c9e5a9531bf3f729f62c34ca7a5d7955e6664f70affd22b044f7db51df41acb21d120a4f71a860e17a80c4db766ad66f2153a1
+  languageName: node
+  linkType: hard
+
+"framesync@npm:6.0.1":
+  version: 6.0.1
+  resolution: "framesync@npm:6.0.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: a23ebe8f7e20a32c0b99c2f8175b6f07af3ec6316aad52a2316316a6d011d717af8d2175dcc2827031c59fabb30232ed3e19a720a373caba7f070e1eae436325
+  languageName: node
+  linkType: hard
+
 "fs-constants@npm:^1.0.0":
  version: 1.0.0
  resolution: "fs-constants@npm:1.0.0"
@@ -8715,6 +8827,13 @@ __metadata:
  languageName: node
  linkType: hard

+"hey-listen@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "hey-listen@npm:1.0.8"
+  checksum: 6bad60b367688f5348e25e7ca3276a74b59ac5a09b0455e6ff8ab7d4a9e38cd2116c708a7dcd8a954d27253ce1d8717ec891d175723ea739885b828cf44e4072
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
  version: 10.7.3
  resolution: "highlight.js@npm:10.7.3"
@@ -12253,6 +12372,18 @@ __metadata:
  languageName: node
  linkType: hard

+"popmotion@npm:11.0.3":
+  version: 11.0.3
+  resolution: "popmotion@npm:11.0.3"
+  dependencies:
+    framesync: 6.0.1
+    hey-listen: ^1.0.8
+    style-value-types: 5.0.0
+    tslib: ^2.1.0
+  checksum: 9fe7d03b4ec0e85bfb9dadc23b745147bfe42e16f466ba06e6327197d0e38b72015afc2f918a8051dedc3680310417f346ffdc463be6518e2e92e98f48e30268
+  languageName: node
+  linkType: hard
+
 "postcss-load-config@npm:^3.0.1":
  version: 3.1.4
  resolution: "postcss-load-config@npm:3.1.4"
@@ -14012,6 +14143,16 @@ __metadata:
  languageName: node
  linkType: hard

+"style-value-types@npm:5.0.0":
+  version: 5.0.0
+  resolution: "style-value-types@npm:5.0.0"
+  dependencies:
+    hey-listen: ^1.0.8
+    tslib: ^2.1.0
+  checksum: 16d198302cd102edf9dba94e7752a2364c93b1eaa5cc7c32b42b28eef4af4ccb5149a3f16bc2a256adc02616a2404f4612bd15f3081c1e8ca06132cae78be6c0
+  languageName: node
+  linkType: hard
+
 "styled-jsx@npm:5.0.2":
  version: 5.0.2
  resolution: "styled-jsx@npm:5.0.2"
@@ -14649,7 +14790,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
  version: 2.4.0
  resolution: "tslib@npm:2.4.0"
  checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113