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

feat(website): enhance lazy loading

Browse Source
This commit is contained in:
iCrawl
2023-03-24 04:27:21 +01:00
parent 3bd76078e1
commit 1c4af93898
6 changed files with 14 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
View File

@@ -1,6 +1,7 @@
import { addPackageToModel } from '@discordjs/scripts';
import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
import { ApiModel } from '@microsoft/api-extractor-model';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { notFound } from 'next/navigation';
import type { PropsWithChildren } from 'react';
@@ -8,12 +9,13 @@ import { Providers } from './providers';
import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
import vercelLogo from '~/assets/powered-by-vercel.svg';
import { CmdKDialog } from '~/components/CmdK';
import { Header } from '~/components/Header';
import { Nav } from '~/components/Nav';
import type { SidebarSectionItemData } from '~/components/Sidebar';
import { resolveItemURI } from '~/components/documentation/util';
import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
const Header = dynamic(async () => import('~/components/Header'));
export interface VersionRouteParams {
package: string;
version: string;

2
apps/website/src/app/global-error.tsx
View File

@@ -11,7 +11,7 @@ export default function GlobalError({ error }: { error: Error }) {
<body className="dark:bg-dark-800 bg-white">
<Providers>
<main className="mx-auto h-screen max-w-2xl">
<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-screen 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]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

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

@@ -23,7 +23,6 @@ export default function Page() {
<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"
prefetch={false}
>
Docs
</Link>

22
apps/website/src/components/Header.tsx
View File

@@ -5,31 +5,23 @@ import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted'
import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
import { Button } from 'ariakit/button';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Fragment, useEffect, useMemo, useState } from 'react';
import { ThemeSwitcher } from './ThemeSwitcher';
import { Fragment, useMemo } from 'react';
import { useCmdK } from '~/contexts/cmdK';
import { useNav } from '~/contexts/nav';
export function Header() {
const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
export default function Header() {
const pathname = usePathname();
const { setOpened } = useNav();
const dialog = useCmdK();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
useEffect(() => {
setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
}, [pathname]);
const asPathWithoutContainerKey = useMemo(
() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
[asPathWithoutQueryAndAnchor],
);
const pathElements = useMemo(
() =>
asPathWithoutContainerKey
pathname
.split('/')
.slice(1)
.map((path, idx, original) => (
@@ -41,7 +33,7 @@ export function Header() {
{path}
</Link>
)),
[asPathWithoutContainerKey],
[pathname],
);
const breadcrumbs = useMemo(

4
apps/website/src/components/ItemLink.tsx
View File

@@ -31,10 +31,10 @@ export interface ItemLinkProps
* generate the full path to the item client-side.
*/
export function ItemLink(props: PropsWithChildren<ItemLinkProps>) {
const path = usePathname();
const pathname = usePathname();
const { packageName, version } = useCurrentPathMeta();
if (!path) {
if (!pathname) {
throw new Error('ItemLink must be used inside a Next.js page. (e.g. /docs/packages/foo/main)');
}

12
apps/website/src/components/ThemeSwitcher.tsx
View File

@@ -3,21 +3,11 @@
import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
import { Button } from 'ariakit/button';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
export function ThemeSwitcher() {
const [mounted, setMounted] = useState(false);
export default function ThemeSwitcher() {
const { resolvedTheme, setTheme } = useTheme();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
return (
<Button
aria-label="Toggle theme"