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

refactor: simplify path logic

Browse Source
This commit is contained in:
iCrawl
2022-10-11 11:13:25 +02:00
parent c39faa94f6
commit f92be4fb94
11 changed files with 46 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/src/components/CmdK.tsx
View File

@@ -52,7 +52,7 @@ export function CmdKDialog({
() => () =>
searchResults?.map((item) => ( searchResults?.map((item) => (
<Command.Item <Command.Item
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white" className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
key={item.id} key={item.id}
onSelect={() => { onSelect={() => {
void router.push(item.path); void router.push(item.path);

6
apps/website/src/components/CodeListing.tsx
View File

@@ -45,17 +45,17 @@ export function CodeListing({
{deprecation || readonly || optional ? ( {deprecation || readonly || optional ? (
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
{deprecation ? ( {deprecation ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white"> <div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated
</div> </div>
) : null} ) : null}
{readonly ? ( {readonly ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white"> <div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Readonly Readonly
</div> </div>
) : null} ) : null}
{optional ? ( {optional ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white"> <div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Optional Optional
</div> </div>
) : null} ) : null}

6
apps/website/src/components/MethodItem.tsx
View File

@@ -47,17 +47,17 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
(data.kind === 'Method' && method.static) ? ( (data.kind === 'Method' && method.static) ? (
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
{data.deprecated ? ( {data.deprecated ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white"> <div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated
</div> </div>
) : null} ) : null}
{data.kind === 'Method' && method.protected ? ( {data.kind === 'Method' && method.protected ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white"> <div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Protected Protected
</div> </div>
) : null} ) : null}
{data.kind === 'Method' && method.static ? ( {data.kind === 'Method' && method.static ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white"> <div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Static Static
</div> </div>
) : null} ) : null}

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

@@ -66,12 +66,12 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
{data.deprecated || data.protected ? ( {data.deprecated || data.protected ? (
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
{data.deprecated ? ( {data.deprecated ? (
<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white"> <div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated Deprecated
</div> </div>
) : null} ) : null}
{data.protected ? ( {data.protected ? (
<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white"> <div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Protected Protected
</div> </div>
) : null} ) : null}

13
apps/website/src/components/SidebarItems.tsx
View File

@@ -1,7 +1,6 @@
import { Section } from '@discordjs/ui'; import { Section } from '@discordjs/ui';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { type Dispatch, type SetStateAction, useMemo } from 'react';
import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
import { import {
VscSymbolClass, VscSymbolClass,
VscSymbolEnum, VscSymbolEnum,
@@ -68,18 +67,14 @@ function resolveIcon(item: keyof GroupedMembers) {
export function SidebarItems({ export function SidebarItems({
members, members,
setOpened, setOpened,
asPath,
}: { }: {
asPath: string;
members: Members; members: Members;
setOpened: Dispatch<SetStateAction<boolean>>; setOpened: Dispatch<SetStateAction<boolean>>;
}) { }) {
const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const groupItems = useMemo(() => groupMembers(members), [members]); const groupItems = useMemo(() => groupMembers(members), [members]);
useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);
return ( return (
<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12"> <div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
{(Object.keys(groupItems) as (keyof GroupedMembers)[]) {(Object.keys(groupItems) as (keyof GroupedMembers)[])
@@ -90,7 +85,7 @@ export function SidebarItems({
<Link href={member.path} key={index} prefetch={false}> <Link href={member.path} key={index} prefetch={false}>
<a <a
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${ className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
asPathWithoutQueryAndAnchor === member.path asPath === member.path
? 'bg-blurple text-white' ? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800' : 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
}`} }`}

33
apps/website/src/components/SidebarLayout.tsx
View File

@@ -1,9 +1,8 @@
import type { getMembers, ApiItemJSON, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils'; import type { getMembers, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { Button } from 'ariakit/button'; import { Button } from 'ariakit/button';
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu'; import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
import Image from 'next/future/image'; import Image from 'next/future/image';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router';
import type { MDXRemoteSerializeResult } from 'next-mdx-remote'; import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react'; import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react';
@@ -29,15 +28,14 @@ import { fetcher } from '~/util/fetcher';
import type { findMember } from '~/util/model.server'; import type { findMember } from '~/util/model.server';
export interface SidebarLayoutProps { export interface SidebarLayoutProps {
asPath: string;
branchName: string; branchName: string;
data: { data: {
member: ReturnType<typeof findMember>; member?: ReturnType<typeof findMember>;
members: ReturnType<typeof getMembers>; members: ReturnType<typeof getMembers>;
source: MDXRemoteSerializeResult; source: MDXRemoteSerializeResult;
}; };
packageName: string; packageName: string;
selectedMember?: ApiItemJSON | undefined;
} }
export type Members = SidebarLayoutProps['data']['members']; export type Members = SidebarLayoutProps['data']['members'];
@@ -55,11 +53,10 @@ export function SidebarLayout({
packageName, packageName,
branchName, branchName,
data, data,
asPath,
children, children,
}: PropsWithChildren<Partial<SidebarLayoutProps>>) { }: PropsWithChildren<SidebarLayoutProps>) {
const router = useRouter();
const dialog = useCmdK(); const dialog = useCmdK();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher); const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
const { resolvedTheme, setTheme } = useTheme(); const { resolvedTheme, setTheme } = useTheme();
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light'); const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
@@ -75,9 +72,7 @@ export function SidebarLayout({
} }
}, [matches]); }, [matches]);
useEffect(() => { const asPathWithoutContainerKey = useMemo(() => asPath?.split(':')[0] ?? '', [asPath]);
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
}, [router.asPath]);
const packageMenuItems = useMemo( const packageMenuItems = useMemo(
() => [ () => [
@@ -129,7 +124,7 @@ export function SidebarLayout({
const pathElements = useMemo( const pathElements = useMemo(
() => () =>
asPathWithoutQueryAndAnchor asPathWithoutContainerKey
.split('/') .split('/')
.slice(1) .slice(1)
.map((path, idx, original) => ( .map((path, idx, original) => (
@@ -137,7 +132,7 @@ export function SidebarLayout({
<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a> <a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
</Link> </Link>
)), )),
[asPathWithoutQueryAndAnchor], [asPathWithoutContainerKey],
); );
const breadcrumbs = useMemo( const breadcrumbs = useMemo(
@@ -174,12 +169,12 @@ export function SidebarLayout({
<div className="flex h-full flex-row place-content-between place-items-center"> <div className="flex h-full flex-row place-content-between place-items-center">
<Button <Button
aria-label="Menu" aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden" className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
onClick={() => setOpened((open) => !open)} onClick={() => setOpened((open) => !open)}
> >
<VscMenu size={24} /> <VscMenu size={24} />
</Button> </Button>
<div className="hidden md:flex md:flex-row">{breadcrumbs}</div> <div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
<div className="flex flex-row place-items-center gap-4"> <div className="flex flex-row place-items-center gap-4">
<Button <Button
as="div" as="div"
@@ -189,7 +184,7 @@ export function SidebarLayout({
<div className="flex flex-row place-items-center gap-4"> <div className="flex flex-row place-items-center gap-4">
<VscSearch size={18} /> <VscSearch size={18} />
<span className="opacity-65">Search...</span> <span className="opacity-65">Search...</span>
<div className="opacity-65 flex flex-row place-items-center gap-2"> <div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<FiCommand size={18} /> K <FiCommand size={18} /> K
</div> </div>
</div> </div>
@@ -197,7 +192,7 @@ export function SidebarLayout({
<Button <Button
aria-label="GitHub" aria-label="GitHub"
as="a" as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px" className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
href="https://github.com/discordjs/discord.js" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@@ -206,7 +201,7 @@ export function SidebarLayout({
</Button> </Button>
<Button <Button
aria-label="Toggle theme" aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px" className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
onClick={() => toggleTheme()} onClick={() => toggleTheme()}
> >
<VscColorMode size={24} /> <VscColorMode size={24} />
@@ -277,7 +272,7 @@ export function SidebarLayout({
{versionMenuItems} {versionMenuItems}
</Menu> </Menu>
</div> </div>
<SidebarItems members={data?.members ?? []} setOpened={setOpened} /> <SidebarItems asPath={asPath} members={data?.members ?? []} setOpened={setOpened} />
</Scrollbars> </Scrollbars>
</nav> </nav>
<main <main

2
apps/website/src/pages/404.tsx
View File

@@ -12,7 +12,7 @@ export default function FourOhFourPage() {
<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>
<Link href="/docs/packages" prefetch={false}> <Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none 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"> <a 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">
Take me back Take me back
</a> </a>
</Link> </Link>

12
apps/website/src/pages/docs/[...slug].tsx
View File

@@ -20,7 +20,7 @@ import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types'; import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { MDXRemote } from 'next-mdx-remote'; import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize'; import { serialize } from 'next-mdx-remote/serialize';
import { useMemo } from 'react'; import { useEffect, useMemo, useState } from 'react';
import rehypeIgnore from 'rehype-ignore'; import rehypeIgnore from 'rehype-ignore';
import rehypePrettyCode, { type Options } from 'rehype-pretty-code'; import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
import rehypeRaw from 'rehype-raw'; import rehypeRaw from 'rehype-raw';
@@ -280,8 +280,10 @@ function member(props?: ApiItemJSON | undefined) {
} }
} }
export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) { export default function SlugPage(props: SidebarLayoutProps & { error?: string }) {
const router = useRouter(); const router = useRouter();
const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
const name = useMemo( const name = useMemo(
() => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`, () => `discord.js${props.data?.member?.name ? ` | ${props.data.member.name}` : ''}`,
[props.data?.member?.name], [props.data?.member?.name],
@@ -295,6 +297,10 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
[props.packageName, props.data?.member], [props.packageName, props.data?.member],
); );
useEffect(() => {
setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
}, [router.asPath]);
if (router.isFallback) { if (router.isFallback) {
return null; return null;
} }
@@ -307,7 +313,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
) : ( ) : (
<CmdKProvider> <CmdKProvider>
<MemberProvider member={props.data?.member}> <MemberProvider member={props.data?.member}>
<SidebarLayout {...props}> <SidebarLayout {...props} asPath={asPathWithoutQueryAndAnchor}>
{props.data?.member ? ( {props.data?.member ? (
<> <>
<Head> <Head>

4
apps/website/src/pages/docs/packages/[package]/index.tsx
View File

@@ -71,7 +71,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
<h1 className="text-2xl font-semibold">Select a version:</h1> <h1 className="text-2xl font-semibold">Select a version:</h1>
{props.data?.versions.map((version) => ( {props.data?.versions.map((version) => (
<Link href={`/docs/packages/${props.packageName}/${version}`} key={version} prefetch={false}> <Link href={`/docs/packages/${props.packageName}/${version}`} key={version} prefetch={false}>
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"> <a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
<div className="flex flex-row place-content-between place-items-center gap-4"> <div className="flex flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-content-between place-items-center gap-4"> <div className="flex flex-row place-content-between place-items-center gap-4">
<VscVersions size={25} /> <VscVersions size={25} />
@@ -83,7 +83,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
</Link> </Link>
)) ?? null} )) ?? null}
<Link href="/docs/packages" prefetch={false}> <Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"> <a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
<VscArrowLeft size={20} /> Go back <VscArrowLeft size={20} /> Go back
</a> </a>
</Link> </Link>

6
apps/website/src/pages/docs/packages/index.tsx
View File

@@ -79,7 +79,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
</a> </a>
{PACKAGES.map((pkg) => ( {PACKAGES.map((pkg) => (
<Link href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} key={pkg} prefetch={false}> <Link href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} key={pkg} prefetch={false}>
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"> <a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white">
<div className="flex grow flex-row place-content-between place-items-center gap-4"> <div className="flex grow flex-row place-content-between place-items-center gap-4">
<div className="flex grow flex-row place-content-between place-items-center gap-4"> <div className="flex grow flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-content-between place-items-center gap-4"> <div className="flex flex-row place-content-between place-items-center gap-4">
@@ -89,7 +89,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<Link href={`/docs/packages/${pkg}`} prefetch={false}> <Link href={`/docs/packages/${pkg}`} prefetch={false}>
<Button <Button
as="div" as="div"
className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px" className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)} onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
role="link" role="link"
> >
@@ -103,7 +103,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
</Link> </Link>
))} ))}
<Link href="/" prefetch={false}> <Link href="/" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"> <a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
<VscArrowLeft size={20} /> Go back <VscArrowLeft size={20} /> Go back
</a> </a>
</Link> </Link>

8
apps/website/src/pages/index.tsx
View File

@@ -21,12 +21,12 @@ export default function IndexRoute() {
</p> </p>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<Link href="/docs" prefetch={false}> <Link href="/docs" prefetch={false}>
<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none 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"> <a 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">
Docs Docs
</a> </a>
</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 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-transparent 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"
@@ -34,7 +34,7 @@ export default function IndexRoute() {
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 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-transparent 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"
@@ -45,7 +45,7 @@ export default function IndexRoute() {
</div> </div>
<SyntaxHighlighter code={CODE_EXAMPLE} /> <SyntaxHighlighter code={CODE_EXAMPLE} />
</div> </div>
<div className="flex place-content-center"> <div className="flex flex-row place-content-center">
<a <a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"