Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-12 17:43:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): font loading and reduce cls

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/website/src/app/docs/packages/[package]/[version]/[item]/loading.tsx Normal file
View File

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

1
apps/website/src/app/docs/packages/[package]/[version]/loading.tsx Normal file
View File

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

1
apps/website/src/app/docs/packages/[package]/loading.tsx Normal file
View File

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

1
apps/website/src/app/docs/packages/loading.tsx Normal file
View File

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

2
apps/website/src/app/docs/packages/page.tsx
View File

@@ -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

10
apps/website/src/app/layout.tsx
View File

@@ -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 />

20
apps/website/src/app/loading.tsx Normal file
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>
);
}

27
apps/website/src/app/not-found.tsx
View File

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

15
apps/website/src/app/page.tsx
View File

@@ -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>