refactor(website): font loading and reduce cls

2026-03-09 08:03:30 +01:00 · 2023-03-25 13:44:35 +01:00
parent d6f4e60efd
commit ad31edc7aa
28 changed files with 100 additions and 62 deletions
--- a/apps/website/next.config.js
+++ b/apps/website/next.config.js
@@ -23,6 +23,7 @@ export default withBundleAnalyzer({
 	},
 	images: {
 		dangerouslyAllowSVG: true,
-		contentSecurityPolicy: "default-src 'self'; script-src 'none'; frame-src 'none'; sandbox;",
+		contentDispositionType: 'attachment',
+		contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
 	},
 });
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx
@@ -0,0 +1 @@
+export { default } from '~/app/loading';
--- a/apps/website/src/app/docs/packages/[package]/[version]/loading.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/loading.tsx
@@ -0,0 +1 @@
+export { default } from '~/app/loading';
--- a/apps/website/src/app/docs/packages/[package]/loading.tsx
+++ b/apps/website/src/app/docs/packages/[package]/loading.tsx
@@ -0,0 +1 @@
+export { default } from '~/app/loading';
--- a/apps/website/src/app/docs/packages/loading.tsx
+++ b/apps/website/src/app/docs/packages/loading.tsx
@@ -0,0 +1 @@
+export { default } from '~/app/loading';
--- a/apps/website/src/app/docs/packages/page.tsx
+++ b/apps/website/src/app/docs/packages/page.tsx
@@ -10,7 +10,7 @@ export const runtime: ServerRuntime = 'edge';

 export default function Page() {
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-6 px-4 lg:py-6 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a package:</h1>
 				<a
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -3,12 +3,12 @@ import type { Metadata } from 'next/types';
 import type { PropsWithChildren } from 'react';
 import { Providers } from './providers';
 import { DESCRIPTION } from '~/util/constants';
-import { inter } from '~/util/fonts';
+import { inter, jetBrainsMono } from '~/util/fonts';

 import '@unocss/reset/tailwind-compat.css';
-import '../styles/unocss.css';
-import '../styles/cmdk.css';
-import '../styles/main.css';
+import '~/styles/unocss.css';
+import '~/styles/cmdk.css';
+import '~/styles/main.css';

 export const metadata: Metadata = {
 	title: 'discord.js',
@@ -71,7 +71,7 @@ export const metadata: Metadata = {

 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
-		<html className={inter.variable} lang="en" suppressHydrationWarning>
+		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
 			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>{children}</Providers>
 				<Analytics />
--- a/apps/website/src/app/loading.tsx
+++ b/apps/website/src/app/loading.tsx
@@ -0,0 +1,20 @@
+export default function Loading() {
+	return (
+		<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
+			<svg
+				className="h-9 w-9 animate-spin text-black dark:text-white"
+				fill="none"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+				<path
+					className="opacity-75 dark:opacity-100"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					fill="currentColor"
+				/>
+			</svg>
+			<div className="text-lg font-medium">Loading...</div>
+		</div>
+	);
+}
--- a/apps/website/src/app/not-found.tsx
+++ b/apps/website/src/app/not-found.tsx
@@ -1,23 +1,16 @@
-// import Head from 'next/head';
 import Link from 'next/link';

 export default function NotFound() {
 	return (
-		<>
-			{/* <Head>
-				<title key="title">discord.js | 404</title>
-				<meta content="discord.js | 404" key="og_title" property="og:title" />
-			</Head> */}
-			<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
-				<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
-				<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
-				<Link
-					className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
-					href="/docs/packages"
-				>
-					Take me back
-				</Link>
-			</div>
-		</>
+		<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+			<Link
+				className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+				href="/docs/packages"
+			>
+				Take me back
+			</Link>
+		</div>
 	);
 }
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,13 +1,13 @@
 import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
 import Image from 'next/image';
 import Link from 'next/link';
-import vercelLogo from '../assets/powered-by-vercel.svg';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { CODE_EXAMPLE } from '~/util/constants';

 export default function Page() {
 	return (
-		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
+		<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
 			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
 				<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
 					<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
@@ -27,7 +27,7 @@ export default function Page() {
 							Docs
 						</Link>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 rounded border bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://discordjs.guide"
 							rel="noopener noreferrer"
 							target="_blank"
@@ -35,7 +35,7 @@ export default function Page() {
 							Guide <FiExternalLink />
 						</a>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none flex-row place-items-center gap-2 rounded border bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://github.com/discordjs/discord.js"
 							rel="noopener noreferrer"
 							target="_blank"
@@ -57,7 +57,12 @@ export default function Page() {
 					target="_blank"
 					title="Vercel"
 				>
-					<Image alt="Vercel" src={vercelLogo} />
+					<Image
+						alt="Vercel"
+						blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+						placeholder="blur"
+						src={vercelLogo}
+					/>
 				</a>
 			</div>
 		</div>
--- a/apps/website/src/assets/fonts/Inter.ttf
+++ b/apps/website/src/assets/fonts/Inter.ttf
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -13,7 +13,12 @@ export default function Footer() {
 						target="_blank"
 						title="Vercel"
 					>
-						<Image alt="Vercel" src={vercelLogo} />
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							placeholder="blur"
+							src={vercelLogo}
+						/>
 					</a>
 					<div className="flex flex-row gap-6 md:gap-12">
 						<div className="flex flex-col gap-2">
--- a/apps/website/src/components/OverloadSwitcher.tsx
+++ b/apps/website/src/components/OverloadSwitcher.tsx
@@ -2,7 +2,7 @@

 import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { useState } from 'react';

--- a/apps/website/src/components/VersionSelect.tsx
+++ b/apps/website/src/components/VersionSelect.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
--- a/apps/website/src/components/documentation/section/ConstructorSection.tsx
+++ b/apps/website/src/components/documentation/section/ConstructorSection.tsx
@@ -1,9 +1,9 @@
 import type { ApiConstructor } from '@microsoft/api-extractor-model';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { useCallback } from 'react';
+import { ParameterTable } from '../../ParameterTable';
 import { TSDoc } from '../tsdoc/TSDoc';
 import { DocumentationSection } from './DocumentationSection';
-import { ParameterTable } from '~/components/ParameterTable';

 export function ConstructorSection({ item }: { item: ApiConstructor }) {
 	const getShorthandName = useCallback(
--- a/apps/website/src/components/documentation/section/MethodsSection.tsx
+++ b/apps/website/src/components/documentation/section/MethodsSection.tsx
@@ -8,8 +8,8 @@ import type {
 import { ApiItemKind } from '@microsoft/api-extractor-model';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { useMemo, Fragment } from 'react';
+import { Method } from '../../model/method/Method';
 import { DocumentationSection } from './DocumentationSection';
-import { Method } from '~/components/model/method/Method';
 import { resolveMembers } from '~/util/members';

 function isMethodLike(item: ApiItem): item is ApiMethod | ApiMethodSignature {
--- a/apps/website/src/components/documentation/section/ParametersSection.tsx
+++ b/apps/website/src/components/documentation/section/ParametersSection.tsx
@@ -1,7 +1,7 @@
 import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { ParameterTable } from '../../ParameterTable';
 import { DocumentationSection } from './DocumentationSection';
-import { ParameterTable } from '~/components/ParameterTable';

 export function ParameterSection({ item }: { item: ApiParameterListMixin }) {
 	return (
--- a/apps/website/src/components/documentation/section/PropertiesSection.tsx
+++ b/apps/website/src/components/documentation/section/PropertiesSection.tsx
@@ -1,7 +1,7 @@
 import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
+import { PropertyList } from '../../PropertyList';
 import { DocumentationSection } from './DocumentationSection';
-import { PropertyList } from '~/components/PropertyList';

 export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
 	return (
--- a/apps/website/src/components/documentation/section/TypeParametersSection.tsx
+++ b/apps/website/src/components/documentation/section/TypeParametersSection.tsx
@@ -1,7 +1,7 @@
 import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
 import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { TypeParamTable } from '../../TypeParamTable';
 import { DocumentationSection } from './DocumentationSection';
-import { TypeParamTable } from '~/components/TypeParamTable';

 export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
 	return (
--- a/apps/website/src/components/documentation/tsdoc/TSDoc.tsx
+++ b/apps/website/src/components/documentation/tsdoc/TSDoc.tsx
@@ -3,10 +3,10 @@ import type { DocComment, DocFencedCode, DocLinkTag, DocNode, DocNodeContainer,
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
 import { Fragment, useCallback, type ReactNode } from 'react';
+import { ItemLink } from '../../ItemLink';
 import { SyntaxHighlighter } from '../../SyntaxHighlighter';
 import { resolveItemURI } from '../util';
 import { DeprecatedBlock, ExampleBlock, RemarksBlock, SeeBlock } from './BlockComment';
-import { ItemLink } from '~/components/ItemLink';

 export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.Element {
 	const createNode = useCallback(
--- a/apps/website/src/components/model/enum/Enum.tsx
+++ b/apps/website/src/components/model/enum/Enum.tsx
@@ -1,11 +1,11 @@
 import type { ApiEnum } from '@microsoft/api-extractor-model';
 import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
+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';
-import { Panel } from '~/components/Panel';
-import { ObjectHeader } from '~/components/documentation/ObjectHeader';
-import { DocumentationSection } from '~/components/documentation/section/DocumentationSection';
-import { SummarySection } from '~/components/documentation/section/SummarySection';

 export function Enum({ item }: { item: ApiEnum }) {
 	return (
--- a/apps/website/src/components/model/enum/EnumMember.tsx
+++ b/apps/website/src/components/model/enum/EnumMember.tsx
@@ -1,8 +1,8 @@
 import type { ApiEnumMember } from '@microsoft/api-extractor-model';
-import { Anchor } from '~/components/Anchor';
-import { NameText } from '~/components/NameText';
-import { SignatureText } from '~/components/SignatureText';
-import { TSDoc } from '~/components/documentation/tsdoc/TSDoc';
+import { Anchor } from '../../Anchor';
+import { NameText } from '../../NameText';
+import { SignatureText } from '../../SignatureText';
+import { TSDoc } from '../../documentation/tsdoc/TSDoc';

 export function EnumMember({ member }: { member: ApiEnumMember }) {
 	return (
--- a/apps/website/src/components/model/function/Function.tsx
+++ b/apps/website/src/components/model/function/Function.tsx
@@ -1,7 +1,7 @@
 import type { ApiFunction } from '@microsoft/api-extractor-model';
 import dynamic from 'next/dynamic';
+import { Header } from '../../documentation/Header';
 import { FunctionBody } from './FunctionBody';
-import { Header } from '~/components/documentation/Header';

 const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));

--- a/apps/website/src/components/model/function/FunctionBody.tsx
+++ b/apps/website/src/components/model/function/FunctionBody.tsx
@@ -1,9 +1,9 @@
 import type { ApiFunction } from '@microsoft/api-extractor-model';
-import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
-import { Documentation } from '~/components/documentation/Documentation';
-import { ParameterSection } from '~/components/documentation/section/ParametersSection';
-import { SummarySection } from '~/components/documentation/section/SummarySection';
-import { TypeParameterSection } from '~/components/documentation/section/TypeParametersSection';
+import { SyntaxHighlighter } from '../../SyntaxHighlighter';
+import { Documentation } from '../../documentation/Documentation';
+import { ParameterSection } from '../../documentation/section/ParametersSection';
+import { SummarySection } from '../../documentation/section/SummarySection';
+import { TypeParameterSection } from '../../documentation/section/TypeParametersSection';

 export interface FunctionBodyProps {
 	mergedSiblingCount: number;
--- a/apps/website/src/components/model/method/MethodDocumentation.tsx
+++ b/apps/website/src/components/model/method/MethodDocumentation.tsx
@@ -4,18 +4,16 @@ import type {
 	ApiMethod,
 	ApiMethodSignature,
 } from '@microsoft/api-extractor-model';
-import type { DocSection } from '@microsoft/tsdoc';
-import { InheritanceText } from '~/components/InheritanceText';
-import { ParameterTable } from '~/components/ParameterTable';
-import { TSDoc } from '~/components/documentation/tsdoc/TSDoc';
+import { InheritanceText } from '../../InheritanceText';
+import { ParameterTable } from '../../ParameterTable';
+import { TSDoc } from '../../documentation/tsdoc/TSDoc';

 export interface MethodDocumentationProps {
-	fallbackSummary?: DocSection;
 	inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
 	method: ApiMethod | ApiMethodSignature;
 }

-export function MethodDocumentation({ method, fallbackSummary, inheritedFrom }: MethodDocumentationProps) {
+export function MethodDocumentation({ method, inheritedFrom }: MethodDocumentationProps) {
 	const parent = method.parent as ApiDeclaredItem;

 	if (!(method.tsdocComment?.summarySection || method.parameters.length > 0)) {
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -30,5 +30,5 @@ pre {
 }

 code {
-	font-family: 'JetBrains Mono', monospace !important;
+	font-family: var(--font-mono);
 }
--- a/apps/website/src/util/fonts.ts
+++ b/apps/website/src/util/fonts.ts
@@ -1,7 +1,13 @@
-import localFont from 'next/font/local';
+import { Inter, JetBrains_Mono } from 'next/font/google';

-export const inter = localFont({
-	src: '../assets/fonts/Inter.ttf',
-	variable: '--font-inter',
+export const inter = Inter({
+	subsets: ['latin'],
 	display: 'swap',
+	variable: '--font-inter',
+});
+
+export const jetBrainsMono = JetBrains_Mono({
+	subsets: ['latin'],
+	display: 'swap',
+	variable: '--font-mono',
 });
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -16,6 +16,10 @@ export default defineConfig({
 				900: '#020208',
 			},
 		},
+		fontFamily: {
+			sans: ['var(--font-inter)'],
+			mono: ['var(--font-mono)'],
+		},
 	},
 	presets: [
 		presetUno({ dark: 'class' }),