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

fix: focus-ring styles

Browse Source
This commit is contained in:
iCrawl
2022-09-21 15:46:44 +02:00
parent 0b12d6fa10
commit 9b40a79b3e
15 changed files with 101 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/src/components/CmdK.tsx
View File

@@ -47,7 +47,7 @@ export function CmdKDialog({ currentPackageName }: { currentPackageName?: string
searchResults?.map((item) => (
<Command.Item
key={item.id}
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-offset-0 [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring 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 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"
onSelect={() => {
void router.push(item.path);
dialog!.setOpen(false);
@@ -115,7 +115,7 @@ export function CmdKDialog({ currentPackageName }: { currentPackageName?: string
shouldFilter={false}
>
<Command.Input
className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 mt-4 border-0 bg-white p-4 pt-0 text-lg outline-0 dark:placeholder:text-white/75"
className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
placeholder="Quick search..."
value={search}
onValueChange={setSearch}

8
packages/website/src/components/CodeListing.tsx
View File

@@ -34,8 +34,12 @@ export function CodeListing({
}>) {
return (
<div id={name} className="scroll-mt-30 flex flex-col gap-4">
<div className={`md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2`}>
<a className="hidden md:inline-block" aria-label="Anchor" href={`#${name}`}>
<div className="md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2">
<a
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
aria-label="Anchor"
href={`#${name}`}
>
<FiLink size={20} />
</a>
{deprecation || readonly || optional ? (

4
packages/website/src/components/HyperlinkedText.tsx
View File

@@ -8,7 +8,9 @@ export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
if (token.path) {
return (
<Link key={idx} href={token.path} prefetch={false}>
<a className="text-blurple">{token.text}</a>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring">
{token.text}
</a>
</Link>
);
}

4
packages/website/src/components/InheritanceText.tsx
View File

@@ -6,7 +6,9 @@ export function InheritanceText({ data }: { data: InheritanceData }) {
<span className="font-semibold">
Inherited from{' '}
<Link href={data.path} prefetch={false}>
<a className="text-blurple font-mono">{data.parentName}</a>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
{data.parentName}
</a>
</Link>
</span>
);

12
packages/website/src/components/MethodItem.tsx
View File

@@ -35,7 +35,11 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<div id={key} className="scroll-mt-30 flex flex-col gap-4">
<div className="flex flex-col">
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
<a className="hidden md:inline-block" aria-label="Anchor" href={`#${key}`}>
<a
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
aria-label="Anchor"
href={`#${key}`}
>
<FiLink size={20} />
</a>
{data.deprecated ||
@@ -72,7 +76,7 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
<div className="flex flex-row place-items-center gap-2">
<MenuButton
state={menu}
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
@@ -88,12 +92,12 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</MenuButton>
<Menu
state={menu}
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
>
{data.mergedSiblings.map((_, idx) => (
<MenuItem
key={idx}
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
))}

2
packages/website/src/components/Section.tsx
View File

@@ -21,7 +21,7 @@ export function Section({
return (
<div className="flex flex-col">
<Disclosure
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={disclosure}
>
<div className="flex flex-row place-content-between place-items-center">

2
packages/website/src/components/SidebarItems.tsx
View File

@@ -89,7 +89,7 @@ export function SidebarItems({
{groupItems[group].map((member, index) => (
<Link key={index} href={member.path} prefetch={false}>
<a
className={`dark:border-dark-100 border-light-800 ml-5 flex flex-col border-l p-[5px] pl-6 ${
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col rounded border-l p-[5px] pl-6 outline-0 focus:ring ${
asPathWithoutQueryAndAnchor === member.path
? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'

75
packages/website/src/components/SidebarLayout.tsx
View File

@@ -84,7 +84,7 @@ export function SidebarLayout({
() => [
<a key="discord.js" href="https://discord.js.org/#/docs/discord.js">
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
state={packageMenu}
onClick={() => packageMenu.setOpen(false)}
>
@@ -94,7 +94,7 @@ export function SidebarLayout({
...PACKAGES.map((pkg) => (
<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
as="a"
state={packageMenu}
onClick={() => packageMenu.setOpen(false)}
@@ -114,7 +114,7 @@ export function SidebarLayout({
?.map((item) => (
<Link key={item} href={`/docs/packages/${packageName}/${item}`} passHref prefetch={false}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
as="a"
state={versionMenu}
onClick={() => versionMenu.setOpen(false)}
@@ -130,17 +130,30 @@ export function SidebarLayout({
const pathElements = useMemo(
() =>
asPathWithoutQueryAndAnchor.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} prefetch={false}>
<a className="hover:underline">{path}</a>
</Link>
)),
asPathWithoutQueryAndAnchor
.split('/')
.slice(1)
.map((path, idx, original) => (
<Link key={idx} href={`/${original.slice(0, idx + 1).join('/')}`} prefetch={false}>
<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
</Link>
)),
[asPathWithoutQueryAndAnchor],
);
const breadcrumbs = useMemo(
() =>
pathElements.flatMap((el, idx, array) => {
if (idx === 0) {
return (
<Fragment key={idx}>
<div className="mx-2">/</div>
{el}
<div className="mx-2">/</div>
</Fragment>
);
}
if (idx !== array.length - 1) {
return (
<Fragment key={idx}>
@@ -161,7 +174,7 @@ export function SidebarLayout({
<div className="h-18 block px-6">
<div className="flex h-full flex-row place-content-between place-items-center">
<Button
className="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 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 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"
aria-label="Menu"
onClick={() => setOpened((open) => !open)}
>
@@ -171,7 +184,7 @@ export function SidebarLayout({
<div className="flex flex-row place-items-center gap-4">
<Button
as="div"
className="dark:bg-dark-800 rounded bg-white px-4 py-2.5"
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4">
@@ -184,7 +197,7 @@ export function SidebarLayout({
</Button>
<Button
as="a"
className="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 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 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"
aria-label="GitHub"
href="https://github.com/discordjs/discord.js"
target="_blank"
@@ -193,7 +206,7 @@ export function SidebarLayout({
<VscGithubInverted size={24} />
</Button>
<Button
className="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 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 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"
aria-label="Toggle theme"
onClick={() => toggleTheme()}
>
@@ -219,7 +232,7 @@ export function SidebarLayout({
>
<div className="flex flex-col gap-3 px-3 pt-3">
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -236,14 +249,14 @@ export function SidebarLayout({
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={packageMenu}
>
{packageMenuItems}
</Menu>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -260,7 +273,7 @@ export function SidebarLayout({
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
state={versionMenu}
>
{versionMenuItems}
@@ -297,6 +310,7 @@ export function SidebarLayout({
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
title="Vercel"
@@ -307,11 +321,17 @@ export function SidebarLayout({
<div className="flex flex-col gap-2">
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a href="https://discord.gg/djs" target="_blank" rel="noopener noreferrer">
<a
href="https://discord.gg/djs"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
>
Discord
</a>
<a
href="https://github.com/discordjs/discord.js/discussions"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
>
@@ -322,13 +342,28 @@ export function SidebarLayout({
<div className="flex flex-col gap-2">
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a href="https://github.com/discordjs/discord.js" target="_blank" rel="noopener noreferrer">
<a
href="https://github.com/discordjs/discord.js"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
>
discord.js
</a>
<a href="https://discordjs.guide" target="_blank" rel="noopener noreferrer">
<a
href="https://discordjs.guide"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
>
discord.js guide
</a>
<a href="https://discord-api-types.dev" target="_blank" rel="noopener noreferrer">
<a
href="https://discord-api-types.dev"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
>
discord-api-types
</a>
</div>

4
packages/website/src/components/TableOfContentItems.tsx
View File

@@ -16,7 +16,7 @@ export function TableOfContentItems({
key={prop.name}
href={`#${prop.name}`}
title={prop.name}
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 ml-[10px] border-l p-[5px] text-sm"
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] rounded border-l p-[5px] text-sm outline-0 focus:ring"
>
<span className="line-clamp-1">{prop.name}</span>
</a>
@@ -40,7 +40,7 @@ export function TableOfContentItems({
key={key}
href={`#${key}`}
title={member.name}
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm"
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 rounded border-l p-[5px] text-sm outline-0 focus:ring"
>
<span className="line-clamp-1">{member.name}</span>
{member.overloadIndex && member.overloadIndex > 1 ? (

6
packages/website/src/components/model/Function.tsx
View File

@@ -24,7 +24,7 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
<div className="flex flex-row place-items-center gap-2">
<MenuButton
state={menu}
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
@@ -40,12 +40,12 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
</MenuButton>
<Menu
state={menu}
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
>
{data.mergedSiblings.map((_, idx) => (
<MenuItem
key={idx}
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 cursor-pointer rounded bg-white p-3 text-sm"
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
))}

8
packages/website/src/components/tsdoc/TSDoc.tsx
View File

@@ -39,7 +39,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (codeDestination) {
return (
<Link key={idx} href={codeDestination.path} prefetch={false}>
<a className="text-blurple font-mono">{text ?? codeDestination.name}</a>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
{text ?? codeDestination.name}
</a>
</Link>
);
}
@@ -47,7 +49,9 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (urlDestination) {
return (
<Link key={idx} href={urlDestination} prefetch={false}>
<a className="text-blurple font-mono">{text ?? urlDestination}</a>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
{text ?? urlDestination}
</a>
</Link>
);
}

2
packages/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>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple 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 active:translate-y-px">
<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">
Take me back
</a>
</Link>

4
packages/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>
{props.data?.versions.map((version) => (
<Link key={version} href={`/docs/packages/${props.packageName}/${version}`} prefetch={false}>
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 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 hover:bg-neutral-100 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 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">
<VscVersions size={25} />
@@ -83,7 +83,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
</Link>
)) ?? null}
<Link href="/docs/packages" prefetch={false}>
<a className="bg-blurple 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 active:translate-y-px">
<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">
<VscArrowLeft size={20} /> Go back
</a>
</Link>

8
packages/website/src/pages/docs/packages/index.tsx
View File

@@ -64,7 +64,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<div className="flex grow flex-col place-content-center gap-4">
<h1 className="text-2xl font-semibold">Select a package:</h1>
<a
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 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 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
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"
href="https://discord.js.org/#/docs/discord.js"
>
<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -79,7 +79,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
</a>
{PACKAGES.map((pkg) => (
<Link key={pkg} href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} prefetch={false}>
<a className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 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 hover:bg-neutral-100 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 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 flex-row place-content-between place-items-center gap-4">
@@ -90,7 +90,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<Button
as="div"
role="link"
className="bg-blurple 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 active:translate-y-px"
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"
onClick={async (ev: MouseEvent<HTMLDivElement>) => handleClick(ev, pkg)}
>
Select version
@@ -103,7 +103,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
</Link>
))}
<Link href="/" prefetch={false}>
<a className="bg-blurple 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 active:translate-y-px">
<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">
<VscArrowLeft size={20} /> Go back
</a>
</Link>

7
packages/website/src/pages/index.tsx
View File

@@ -21,12 +21,12 @@ export default function IndexRoute() {
</p>
<div className="flex flex-row gap-4">
<Link href="/docs" prefetch={false}>
<a className="bg-blurple 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 active:translate-y-px">
<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">
Docs
</a>
</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 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 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 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"
target="_blank"
rel="noopener noreferrer"
@@ -34,7 +34,7 @@ export default function IndexRoute() {
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 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 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 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"
target="_blank"
rel="noopener noreferrer"
@@ -48,6 +48,7 @@ export default function IndexRoute() {
<div className="flex place-content-center">
<a
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
rel="noopener noreferrer"
title="Vercel"