refactor(website): font loading and reduce cls

This commit is contained in:
iCrawl
2023-03-25 13:44:35 +01:00
parent d6f4e60efd
commit ad31edc7aa
28 changed files with 100 additions and 62 deletions

View File

@@ -23,6 +23,7 @@ export default withBundleAnalyzer({
}, },
images: { images: {
dangerouslyAllowSVG: true, dangerouslyAllowSVG: true,
contentSecurityPolicy: "default-src 'self'; script-src 'none'; frame-src 'none'; sandbox;", contentDispositionType: 'attachment',
contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
}, },
}); });

View File

@@ -0,0 +1 @@
export { default } from '~/app/loading';

View File

@@ -0,0 +1 @@
export { default } from '~/app/loading';

View File

@@ -0,0 +1 @@
export { default } from '~/app/loading';

View File

@@ -0,0 +1 @@
export { default } from '~/app/loading';

View File

@@ -10,7 +10,7 @@ export const runtime: ServerRuntime = 'edge';
export default function Page() { export default function Page() {
return ( 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"> <div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a package:</h1> <h1 className="text-2xl font-semibold">Select a package:</h1>
<a <a

View File

@@ -3,12 +3,12 @@ import type { Metadata } from 'next/types';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { Providers } from './providers'; import { Providers } from './providers';
import { DESCRIPTION } from '~/util/constants'; import { DESCRIPTION } from '~/util/constants';
import { inter } from '~/util/fonts'; import { inter, jetBrainsMono } from '~/util/fonts';
import '@unocss/reset/tailwind-compat.css'; import '@unocss/reset/tailwind-compat.css';
import '../styles/unocss.css'; import '~/styles/unocss.css';
import '../styles/cmdk.css'; import '~/styles/cmdk.css';
import '../styles/main.css'; import '~/styles/main.css';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'discord.js', title: 'discord.js',
@@ -71,7 +71,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) { export default function RootLayout({ children }: PropsWithChildren) {
return ( 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"> <body className="dark:bg-dark-800 bg-light-600">
<Providers>{children}</Providers> <Providers>{children}</Providers>
<Analytics /> <Analytics />

View File

@@ -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>
);
}

View File

@@ -1,13 +1,7 @@
// import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
export default function NotFound() { export default function NotFound() {
return ( 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"> <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> <h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2> <h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
@@ -18,6 +12,5 @@ export default function NotFound() {
Take me back Take me back
</Link> </Link>
</div> </div>
</>
); );
} }

View File

@@ -1,13 +1,13 @@
import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink'; import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; 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 { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
import { CODE_EXAMPLE } from '~/util/constants'; import { CODE_EXAMPLE } from '~/util/constants';
export default function Page() { export default function Page() {
return ( 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 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"> <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"> <h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
@@ -27,7 +27,7 @@ export default function Page() {
Docs Docs
</Link> </Link>
<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 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" href="https://discordjs.guide"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@@ -35,7 +35,7 @@ export default function Page() {
Guide <FiExternalLink /> Guide <FiExternalLink />
</a> </a>
<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" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@@ -57,7 +57,12 @@ export default function Page() {
target="_blank" target="_blank"
title="Vercel" title="Vercel"
> >
<Image alt="Vercel" src={vercelLogo} /> <Image
alt="Vercel"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
placeholder="blur"
src={vercelLogo}
/>
</a> </a>
</div> </div>
</div> </div>

View File

@@ -13,7 +13,12 @@ export default function Footer() {
target="_blank" target="_blank"
title="Vercel" title="Vercel"
> >
<Image alt="Vercel" src={vercelLogo} /> <Image
alt="Vercel"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
placeholder="blur"
src={vercelLogo}
/>
</a> </a>
<div className="flex flex-row gap-6 md:gap-12"> <div className="flex flex-row gap-6 md:gap-12">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">

View File

@@ -2,7 +2,7 @@
import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown'; import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions'; 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 type { PropsWithChildren, ReactNode } from 'react';
import { useState } from 'react'; import { useState } from 'react';

View File

@@ -1,3 +1,5 @@
'use client';
import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown'; import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions'; import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu'; import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';

View File

@@ -1,9 +1,9 @@
import type { ApiConstructor } from '@microsoft/api-extractor-model'; import type { ApiConstructor } from '@microsoft/api-extractor-model';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod'; import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { ParameterTable } from '../../ParameterTable';
import { TSDoc } from '../tsdoc/TSDoc'; import { TSDoc } from '../tsdoc/TSDoc';
import { DocumentationSection } from './DocumentationSection'; import { DocumentationSection } from './DocumentationSection';
import { ParameterTable } from '~/components/ParameterTable';
export function ConstructorSection({ item }: { item: ApiConstructor }) { export function ConstructorSection({ item }: { item: ApiConstructor }) {
const getShorthandName = useCallback( const getShorthandName = useCallback(

View File

@@ -8,8 +8,8 @@ import type {
import { ApiItemKind } from '@microsoft/api-extractor-model'; import { ApiItemKind } from '@microsoft/api-extractor-model';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod'; import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { useMemo, Fragment } from 'react'; import { useMemo, Fragment } from 'react';
import { Method } from '../../model/method/Method';
import { DocumentationSection } from './DocumentationSection'; import { DocumentationSection } from './DocumentationSection';
import { Method } from '~/components/model/method/Method';
import { resolveMembers } from '~/util/members'; import { resolveMembers } from '~/util/members';
function isMethodLike(item: ApiItem): item is ApiMethod | ApiMethodSignature { function isMethodLike(item: ApiItem): item is ApiMethod | ApiMethodSignature {

View File

@@ -1,7 +1,7 @@
import type { ApiParameterListMixin } from '@microsoft/api-extractor-model'; import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter'; import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
import { ParameterTable } from '../../ParameterTable';
import { DocumentationSection } from './DocumentationSection'; import { DocumentationSection } from './DocumentationSection';
import { ParameterTable } from '~/components/ParameterTable';
export function ParameterSection({ item }: { item: ApiParameterListMixin }) { export function ParameterSection({ item }: { item: ApiParameterListMixin }) {
return ( return (

View File

@@ -1,7 +1,7 @@
import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model'; import type { ApiItemContainerMixin } from '@microsoft/api-extractor-model';
import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty'; import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
import { PropertyList } from '../../PropertyList';
import { DocumentationSection } from './DocumentationSection'; import { DocumentationSection } from './DocumentationSection';
import { PropertyList } from '~/components/PropertyList';
export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) { export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
return ( return (

View File

@@ -1,7 +1,7 @@
import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model'; import type { ApiTypeParameterListMixin } from '@microsoft/api-extractor-model';
import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter'; import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
import { TypeParamTable } from '../../TypeParamTable';
import { DocumentationSection } from './DocumentationSection'; import { DocumentationSection } from './DocumentationSection';
import { TypeParamTable } from '~/components/TypeParamTable';
export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) { export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
return ( return (

View File

@@ -3,10 +3,10 @@ import type { DocComment, DocFencedCode, DocLinkTag, DocNode, DocNodeContainer,
import { DocNodeKind, StandardTags } from '@microsoft/tsdoc'; import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
import Link from 'next/link'; import Link from 'next/link';
import { Fragment, useCallback, type ReactNode } from 'react'; import { Fragment, useCallback, type ReactNode } from 'react';
import { ItemLink } from '../../ItemLink';
import { SyntaxHighlighter } from '../../SyntaxHighlighter'; import { SyntaxHighlighter } from '../../SyntaxHighlighter';
import { resolveItemURI } from '../util'; import { resolveItemURI } from '../util';
import { DeprecatedBlock, ExampleBlock, RemarksBlock, SeeBlock } from './BlockComment'; import { DeprecatedBlock, ExampleBlock, RemarksBlock, SeeBlock } from './BlockComment';
import { ItemLink } from '~/components/ItemLink';
export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.Element { export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.Element {
const createNode = useCallback( const createNode = useCallback(

View File

@@ -1,11 +1,11 @@
import type { ApiEnum } from '@microsoft/api-extractor-model'; import type { ApiEnum } from '@microsoft/api-extractor-model';
import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum'; import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
import { Panel } from '../../Panel';
import { Documentation } from '../../documentation/Documentation'; 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 { 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 }) { export function Enum({ item }: { item: ApiEnum }) {
return ( return (

View File

@@ -1,8 +1,8 @@
import type { ApiEnumMember } from '@microsoft/api-extractor-model'; import type { ApiEnumMember } from '@microsoft/api-extractor-model';
import { Anchor } from '~/components/Anchor'; import { Anchor } from '../../Anchor';
import { NameText } from '~/components/NameText'; import { NameText } from '../../NameText';
import { SignatureText } from '~/components/SignatureText'; import { SignatureText } from '../../SignatureText';
import { TSDoc } from '~/components/documentation/tsdoc/TSDoc'; import { TSDoc } from '../../documentation/tsdoc/TSDoc';
export function EnumMember({ member }: { member: ApiEnumMember }) { export function EnumMember({ member }: { member: ApiEnumMember }) {
return ( return (

View File

@@ -1,7 +1,7 @@
import type { ApiFunction } from '@microsoft/api-extractor-model'; import type { ApiFunction } from '@microsoft/api-extractor-model';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { Header } from '../../documentation/Header';
import { FunctionBody } from './FunctionBody'; import { FunctionBody } from './FunctionBody';
import { Header } from '~/components/documentation/Header';
const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher')); const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));

View File

@@ -1,9 +1,9 @@
import type { ApiFunction } from '@microsoft/api-extractor-model'; import type { ApiFunction } from '@microsoft/api-extractor-model';
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter'; import { SyntaxHighlighter } from '../../SyntaxHighlighter';
import { Documentation } from '~/components/documentation/Documentation'; import { Documentation } from '../../documentation/Documentation';
import { ParameterSection } from '~/components/documentation/section/ParametersSection'; import { ParameterSection } from '../../documentation/section/ParametersSection';
import { SummarySection } from '~/components/documentation/section/SummarySection'; import { SummarySection } from '../../documentation/section/SummarySection';
import { TypeParameterSection } from '~/components/documentation/section/TypeParametersSection'; import { TypeParameterSection } from '../../documentation/section/TypeParametersSection';
export interface FunctionBodyProps { export interface FunctionBodyProps {
mergedSiblingCount: number; mergedSiblingCount: number;

View File

@@ -4,18 +4,16 @@ import type {
ApiMethod, ApiMethod,
ApiMethodSignature, ApiMethodSignature,
} from '@microsoft/api-extractor-model'; } from '@microsoft/api-extractor-model';
import type { DocSection } from '@microsoft/tsdoc'; import { InheritanceText } from '../../InheritanceText';
import { InheritanceText } from '~/components/InheritanceText'; import { ParameterTable } from '../../ParameterTable';
import { ParameterTable } from '~/components/ParameterTable'; import { TSDoc } from '../../documentation/tsdoc/TSDoc';
import { TSDoc } from '~/components/documentation/tsdoc/TSDoc';
export interface MethodDocumentationProps { export interface MethodDocumentationProps {
fallbackSummary?: DocSection;
inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined; inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
method: ApiMethod | ApiMethodSignature; method: ApiMethod | ApiMethodSignature;
} }
export function MethodDocumentation({ method, fallbackSummary, inheritedFrom }: MethodDocumentationProps) { export function MethodDocumentation({ method, inheritedFrom }: MethodDocumentationProps) {
const parent = method.parent as ApiDeclaredItem; const parent = method.parent as ApiDeclaredItem;
if (!(method.tsdocComment?.summarySection || method.parameters.length > 0)) { if (!(method.tsdocComment?.summarySection || method.parameters.length > 0)) {

View File

@@ -30,5 +30,5 @@ pre {
} }
code { code {
font-family: 'JetBrains Mono', monospace !important; font-family: var(--font-mono);
} }

View File

@@ -1,7 +1,13 @@
import localFont from 'next/font/local'; import { Inter, JetBrains_Mono } from 'next/font/google';
export const inter = localFont({ export const inter = Inter({
src: '../assets/fonts/Inter.ttf', subsets: ['latin'],
variable: '--font-inter',
display: 'swap', display: 'swap',
variable: '--font-inter',
});
export const jetBrainsMono = JetBrains_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-mono',
}); });

View File

@@ -16,6 +16,10 @@ export default defineConfig({
900: '#020208', 900: '#020208',
}, },
}, },
fontFamily: {
sans: ['var(--font-inter)'],
mono: ['var(--font-mono)'],
},
}, },
presets: [ presets: [
presetUno({ dark: 'class' }), presetUno({ dark: 'class' }),