diff --git a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx index c63c7e6f7..9857d2a66 100644 --- a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx +++ b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx @@ -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; diff --git a/apps/website/src/app/global-error.tsx b/apps/website/src/app/global-error.tsx index 7acab1d9f..7b98bce46 100644 --- a/apps/website/src/app/global-error.tsx +++ b/apps/website/src/app/global-error.tsx @@ -11,7 +11,7 @@ export default function GlobalError({ error }: { error: Error }) {
-
+

500

Error.

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx index 23abb37d6..53f070508 100644 --- a/apps/website/src/app/page.tsx +++ b/apps/website/src/app/page.tsx @@ -23,7 +23,6 @@ export default function Page() { Docs diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx index a3f5cd02b..7dbd0c7bd 100644 --- a/apps/website/src/components/Header.tsx +++ b/apps/website/src/components/Header.tsx @@ -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} )), - [asPathWithoutContainerKey], + [pathname], ); const breadcrumbs = useMemo( diff --git a/apps/website/src/components/ItemLink.tsx b/apps/website/src/components/ItemLink.tsx index 9f4ec740c..ba5ac7183 100644 --- a/apps/website/src/components/ItemLink.tsx +++ b/apps/website/src/components/ItemLink.tsx @@ -31,10 +31,10 @@ export interface ItemLinkProps * generate the full path to the item client-side. */ export function ItemLink(props: PropsWithChildren) { - 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)'); } diff --git a/apps/website/src/components/ThemeSwitcher.tsx b/apps/website/src/components/ThemeSwitcher.tsx index eaf4bc200..6b4be1113 100644 --- a/apps/website/src/components/ThemeSwitcher.tsx +++ b/apps/website/src/components/ThemeSwitcher.tsx @@ -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 (