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

chore: deps

Browse Source
This commit is contained in:
iCrawl
2022-10-05 20:57:39 +02:00
parent 9effd82abe
commit e745b95677
42 changed files with 305 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,8 +52,8 @@ export function CmdKDialog({
() =>
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-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"
key={item.id}
onSelect={() => {
void router.push(item.path);
dialog!.setOpen(false);
@@ -116,19 +116,18 @@ export function CmdKDialog({
return (
<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
<Command
label="Command Menu"
className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
label="Command Menu"
shouldFilter={false}
>
<Command.Input
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"
onValueChange={setSearch}
placeholder="Quick search..."
value={search}
onValueChange={setSearch}
/>
<Command.List className="pt-0">
<Command.Empty className="p-4 text-center">No results found</Command.Empty>
{search ? searchResultItems : null}
</Command.List>
</Command>

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

@@ -33,11 +33,11 @@ export function CodeListing({
typeTokens: TokenDocumentation[];
}>) {
return (
<div id={name} className="scroll-mt-30 flex flex-col gap-4">
<div className="scroll-mt-30 flex flex-col gap-4" id={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"
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
href={`#${name}`}
>
<FiLink size={20} />

20
packages/website/src/components/DocContainer.tsx
View File

@@ -73,16 +73,12 @@ export function DocContainer({
<span>{generateIcon(kind)}</span>
{name}
</h2>
{subHeading}
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
<Section dense={matches} icon={<VscListSelection size={20} />} padded title="Summary">
{summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>}
<div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" />
</Section>
<SyntaxHighlighter code={excerpt} />
{extendsTokens?.length ? (
<div className="flex flex-row place-items-center gap-4">
<h3 className="text-xl font-bold">Extends</h3>
@@ -91,7 +87,6 @@ export function DocContainer({
</span>
</div>
) : null}
{implementsTokens?.length ? (
<div className="flex flex-row place-items-center gap-4">
<h3 className="text-xl font-bold">Implements</h3>
@@ -105,15 +100,14 @@ export function DocContainer({
</span>
</div>
) : null}
<div className="flex flex-col gap-4">
{typeParams?.length ? (
<Section
title="Type Parameters"
defaultClosed
dense={matches}
icon={<VscSymbolParameter size={20} />}
padded
dense={matches}
defaultClosed
title="Type Parameters"
>
<TypeParamTable data={typeParams} />
</Section>
@@ -124,15 +118,15 @@ export function DocContainer({
{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
<aside className="h-[calc(100vh - 72px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden w-64 border-l bg-white pr-2 xl:block">
<Scrollbars
universal
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
)}
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
universal
>
<TableOfContentItems properties={properties ?? []} methods={methods ?? []} />
<TableOfContentItems methods={methods ?? []} properties={properties ?? []} />
</Scrollbars>
</aside>
) : null}

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

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

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

@@ -32,12 +32,12 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
);
return (
<div id={key} className="scroll-mt-30 flex flex-col gap-4">
<div className="scroll-mt-30 flex flex-col gap-4" id={key}>
<div className="flex flex-col">
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
<a
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
aria-label="Anchor"
className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
href={`#${key}`}
>
<FiLink size={20} />
@@ -75,8 +75,8 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
{data.mergedSiblings.length > 1 ? (
<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 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
@@ -91,15 +91,17 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
</div>
</MenuButton>
<Menu
state={menu}
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={menu}
>
{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 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
key={idx}
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
>
{`Overload ${idx + 1}`}
</MenuItem>
))}
</Menu>
</div>

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

@@ -23,7 +23,7 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
return (
<div className="overflow-x-auto">
<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
<Table columnStyles={columnStyles} columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} />
</div>
);
}

10
packages/website/src/components/PropertyList.tsx
View File

@@ -8,14 +8,14 @@ export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
data.map((prop) => (
<Fragment key={prop.name}>
<CodeListing
name={prop.name}
typeTokens={prop.propertyTypeTokens}
readonly={prop.readonly}
optional={prop.optional}
summary={prop.summary}
comment={prop.comment}
deprecation={prop.deprecated}
inheritanceData={prop.inheritanceData}
name={prop.name}
optional={prop.optional}
readonly={prop.readonly}
summary={prop.summary}
typeTokens={prop.propertyTypeTokens}
/>
<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
</Fragment>

10
packages/website/src/components/Sections.tsx
View File

@@ -17,7 +17,7 @@ export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] |
const matches = useMedia('(max-width: 768px)', true);
return data.length ? (
<Section title="Properties" icon={<VscSymbolProperty size={20} />} padded dense={matches}>
<Section dense={matches} icon={<VscSymbolProperty size={20} />} padded title="Properties">
<PropertyList data={data} />
</Section>
) : null;
@@ -27,7 +27,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn
const matches = useMedia('(max-width: 768px)', true);
return data.length ? (
<Section title="Methods" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<Section dense={matches} icon={<VscSymbolMethod size={20} />} padded title="Methods">
<MethodList data={data} />
</Section>
) : null;
@@ -37,7 +37,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
const matches = useMedia('(max-width: 768px)', true);
return data.length ? (
<Section title="Parameters" icon={<VscSymbolConstant size={20} />} padded dense={matches}>
<Section dense={matches} icon={<VscSymbolConstant size={20} />} padded title="Parameters">
<ParameterTable data={data} />
</Section>
) : null;
@@ -59,8 +59,8 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
);
return data.parameters.length ? (
<Section title="Constructor" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<div id={data.name} className="scroll-mt-30 flex flex-col gap-4">
<Section dense={matches} icon={<VscSymbolMethod size={20} />} padded title="Constructor">
<div className="scroll-mt-30 flex flex-col gap-4" id={data.name}>
<div className="flex flex-col">
<div className="flex flex-col gap-2 md:flex-row md:place-items-center">
{data.deprecated || data.protected ? (

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

@@ -85,17 +85,17 @@ export function SidebarItems({
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
.filter((group) => groupItems[group].length)
.map((group, idx) => (
<Section key={idx} title={group} icon={resolveIcon(group)}>
<Section icon={resolveIcon(group)} key={idx} title={group}>
{groupItems[group].map((member, index) => (
<Link key={index} href={member.path} prefetch={false}>
<Link href={member.path} key={index} prefetch={false}>
<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 ${
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'
}`}
title={member.name}
onClick={() => setOpened(false)}
title={member.name}
>
<div className="flex flex-row place-items-center gap-2 lg:text-sm">
<span className="truncate">{member.name}</span>

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

@@ -82,22 +82,22 @@ export function SidebarLayout({
const packageMenuItems = useMemo(
() => [
<a key="discord.js" href="https://discord.js.org/#/docs/discord.js">
<a href="https://discord.js.org/#/docs/discord.js" key="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 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)}
state={packageMenu}
>
discord.js
</MenuItem>
</a>,
...PACKAGES.map((pkg) => (
<Link key={pkg} href={`/docs/packages/${pkg}/main`} passHref prefetch={false}>
<Link href={`/docs/packages/${pkg}/main`} key={pkg} 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 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}
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"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
>
{pkg}
</MenuItem>
@@ -112,12 +112,12 @@ export function SidebarLayout({
() =>
versions
?.map((item) => (
<Link key={item} href={`/docs/packages/${packageName}/${item}`} passHref prefetch={false}>
<Link href={`/docs/packages/${packageName}/${item}`} key={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 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}
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"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
{item}
</MenuItem>
@@ -134,7 +134,7 @@ export function SidebarLayout({
.split('/')
.slice(1)
.map((path, idx, original) => (
<Link key={idx} href={`/${original.slice(0, idx + 1).join('/')}`} prefetch={false}>
<Link href={`/${original.slice(0, idx + 1).join('/')}`} key={idx} prefetch={false}>
<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
</Link>
)),
@@ -174,8 +174,8 @@ 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="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"
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"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
@@ -196,18 +196,18 @@ export function SidebarLayout({
</div>
</Button>
<Button
aria-label="GitHub"
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"
aria-label="GitHub"
href="https://github.com/discordjs/discord.js"
target="_blank"
rel="noopener noreferrer"
target="_blank"
>
<VscGithubInverted size={24} />
</Button>
<Button
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"
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"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />
@@ -222,13 +222,13 @@ export function SidebarLayout({
} lg:w-76 lg:max-w-76 lg:block`}
>
<Scrollbars
universal
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
)}
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
universal
>
<div className="flex flex-col gap-3 px-3 pt-3">
<MenuButton
@@ -254,7 +254,6 @@ export function SidebarLayout({
>
{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 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={versionMenu}
@@ -279,7 +278,6 @@ export function SidebarLayout({
{versionMenuItems}
</Menu>
</div>
<SidebarItems members={data?.members ?? []} setOpened={setOpened} />
</Scrollbars>
</nav>
@@ -309,31 +307,31 @@ export function SidebarLayout({
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<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"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
title="Vercel"
>
<Image src={vercelLogo} alt="Vercel" />
<Image alt="Vercel" src={vercelLogo} />
</a>
<div className="flex flex-row gap-6 md:gap-12">
<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"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
>
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"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
>
GitHub discussions
</a>
@@ -343,26 +341,26 @@ export function SidebarLayout({
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
href="https://github.com/discordjs/discord.js"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
>
discord.js
</a>
<a
href="https://discordjs.guide"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
href="https://discordjs.guide"
rel="noopener noreferrer"
target="_blank"
>
discord.js guide
</a>
<a
href="https://discord-api-types.dev"
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
target="_blank"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"
>
discord-api-types
</a>

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

@@ -6,22 +6,22 @@ export function SyntaxHighlighter({ language = 'typescript', code }: { code: str
<>
<div data-theme="dark">
<PrismAsyncLight
wrapLines
wrapLongLines
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
language={language}
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
wrapLines
wrapLongLines
>
{code}
</PrismAsyncLight>
</div>
<div data-theme="light">
<PrismAsyncLight
wrapLines
wrapLongLines
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
language={language}
style={prism}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
wrapLines
wrapLongLines
>
{code}
</PrismAsyncLight>

6
packages/website/src/components/Table.tsx
View File

@@ -13,8 +13,8 @@ export function Table({
() =>
columns.map((column) => (
<th
key={column}
className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
key={column}
>
{column}
</th>
@@ -25,13 +25,13 @@ export function Table({
const data = useMemo(
() =>
rows.map((row, idx) => (
<tr key={idx} className="[&>td]:last-of-type:border-0">
<tr className="[&>td]:last-of-type:border-0" key={idx}>
{Object.entries(row).map(([colName, val]) => (
<td
key={colName}
className={`border-light-900 dark:border-dark-100 border-b px-3 py-2 text-left text-sm ${
columnStyles?.[colName] ?? ''
}`}
key={colName}
>
{val}
</td>

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

@@ -13,10 +13,10 @@ export function TableOfContentItems({
() =>
properties.map((prop) => (
<a
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 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
href={`#${prop.name}`}
key={prop.name}
title={prop.name}
>
<span className="line-clamp-1">{prop.name}</span>
</a>
@@ -37,10 +37,10 @@ export function TableOfContentItems({
return (
<a
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 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
href={`#${key}`}
key={key}
title={member.name}
>
<span className="line-clamp-1">{member.name}</span>
{member.overloadIndex && member.overloadIndex > 1 ? (

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

@@ -26,9 +26,9 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
return (
<div className="overflow-x-auto">
<Table
columnStyles={rowElements}
columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
rows={rows}
columnStyles={rowElements}
/>
</div>
);

8
packages/website/src/components/model/Class.tsx
View File

@@ -5,15 +5,15 @@ import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sectio
export function Class({ data }: { data: ApiClassJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameters}
extendsTokens={data.extendsTokens}
implementsTokens={data.implementsTokens}
kind={data.kind}
methods={data.methods}
name={data.name}
properties={data.properties}
summary={data.summary}
typeParams={data.typeParameters}
>
{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
<PropertiesSection data={data.properties} />

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

@@ -9,16 +9,16 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
const matches = useMedia('(max-width: 768px)', true);
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<DocContainer excerpt={data.excerpt} kind={data.kind} name={data.name} summary={data.summary}>
<Section dense={matches} icon={<VscSymbolEnumMember size={20} />} padded title="Members">
<div className="flex flex-col gap-4">
{data.members.map((member) => (
<CodeListing
key={member.name}
name={member.name}
separator={CodeListingSeparatorType.Value}
typeTokens={member.initializerTokens}
summary={member.summary}
typeTokens={member.initializerTokens}
/>
))}
</div>

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

@@ -12,19 +12,17 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
return (
<DocContainer
excerpt={overloadedData.excerpt}
kind={overloadedData.kind}
name={`${overloadedData.name}${
overloadedData.overloadIndex && overloadedData.overloadIndex > 1 ? ` (${overloadedData.overloadIndex})` : ''
}`}
kind={overloadedData.kind}
excerpt={overloadedData.excerpt}
summary={overloadedData.summary}
typeParams={overloadedData.typeParameters}
subHeading={
data.mergedSiblings.length > 1 ? (
<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 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">
<VscVersions size={20} />
@@ -39,20 +37,24 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
</div>
</MenuButton>
<Menu
state={menu}
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={menu}
>
{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 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
key={idx}
onClick={() => setOverloadIndex(idx + 1)}
>{`Overload ${idx + 1}`}</MenuItem>
>
{`Overload ${idx + 1}`}
</MenuItem>
))}
</Menu>
</div>
) : null
}
summary={overloadedData.summary}
typeParams={overloadedData.typeParameters}
>
<ParametersSection data={overloadedData.parameters} />
</DocContainer>

8
packages/website/src/components/model/Interface.tsx
View File

@@ -5,13 +5,13 @@ import { MethodsSection, PropertiesSection } from '../Sections';
export function Interface({ data }: { data: ApiInterfaceJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
kind={data.kind}
methods={data.methods}
name={data.name}
properties={data.properties}
summary={data.summary}
typeParams={data.typeParameters}
methods={data.methods}
properties={data.properties}
>
<PropertiesSection data={data.properties} />
<MethodsSection data={data.methods} />

4
packages/website/src/components/model/TypeAlias.tsx
View File

@@ -4,9 +4,9 @@ import { DocContainer } from '../DocContainer';
export function TypeAlias({ data }: { data: ApiTypeAliasJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
kind={data.kind}
name={data.name}
summary={data.summary}
typeParams={data.typeParameters}
/>

2
packages/website/src/components/model/Variable.tsx
View File

@@ -2,5 +2,5 @@ import type { ApiVariableJSON } from '@discordjs/api-extractor-utils';
import { DocContainer } from '../DocContainer';
export function Variable({ data }: { data: ApiVariableJSON }) {
return <DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary} />;
return <DocContainer excerpt={data.excerpt} kind={data.kind} name={data.name} summary={data.summary} />;
}

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

@@ -21,13 +21,13 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
switch (node.kind) {
case DocNodeKind.PlainText:
return (
<span key={idx} className="break-words">
<span className="break-words" key={idx}>
{(node as DocPlainTextJSON).text}
</span>
);
case DocNodeKind.Paragraph:
return (
<span key={idx} className="break-words leading-relaxed">
<span className="break-words leading-relaxed" key={idx}>
{(node as DocNodeContainerJSON).nodes.map((node, idx) => createNode(node, idx))}
</span>
);
@@ -38,7 +38,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (codeDestination) {
return (
<Link key={idx} href={codeDestination.path} prefetch={false}>
<Link href={codeDestination.path} key={idx} prefetch={false}>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
{text ?? codeDestination.name}
</a>
@@ -48,7 +48,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
if (urlDestination) {
return (
<Link key={idx} href={urlDestination} prefetch={false}>
<Link href={urlDestination} key={idx} prefetch={false}>
<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
{text ?? urlDestination}
</a>
@@ -62,7 +62,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
case DocNodeKind.CodeSpan: {
const { code } = node as DocFencedCodeJSON;
return (
<code key={idx} className="font-mono text-sm">
<code className="font-mono text-sm" key={idx}>
{code}
</code>
);
@@ -70,7 +70,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
case DocNodeKind.FencedCode: {
const { language, code } = node as DocFencedCodeJSON;
return <SyntaxHighlighter key={idx} language={language} code={code} />;
return <SyntaxHighlighter code={code} key={idx} language={language} />;
}
case DocNodeKind.ParamBlock:
@@ -84,7 +84,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
const index = numberOfExamples > 1 ? exampleIndex : undefined;
return (
<BlockComment tagName={tag.tagName} key={idx} index={index}>
<BlockComment index={index} key={idx} tagName={tag.tagName}>
{(node as DocBlockJSON).content.map((node, idx) => createNode(node, idx))}
</BlockComment>
);

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

@@ -6,7 +6,7 @@ export default function FourOhFourPage() {
<>
<Head>
<title key="title">discord.js | 404</title>
<meta key="og_title" property="og:title" content="discord.js | 404" />
<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>

6
packages/website/src/pages/_app.tsx
View File

@@ -12,17 +12,17 @@ export default function MyApp({ Component, pageProps }: AppProps) {
<>
<Head>
<title key="title">discord.js</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="theme-color" content="#5865f2" />
<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
<meta content="#5865f2" name="theme-color" />
</Head>
<ThemeProvider
attribute="class"
defaultTheme="system"
disableTransitionOnChange
value={{
light: 'light',
dark: 'dark',
}}
disableTransitionOnChange
>
<NextProgress color="#5865f2" options={{ showSpinner: false }} />
<Component {...pageProps} />

35
packages/website/src/pages/_document.tsx
View File

@@ -5,24 +5,23 @@ export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#090a16" />
<meta name="color-scheme" content="light dark" />
<meta name="apple-mobile-web-app-title" content="discord.js" />
<meta name="application-name" content="discord.js" />
<meta name="msapplication-TileColor" content="#090a16" />
<meta key="description" name="description" content={DESCRIPTION} />
<meta property="og:site_name" content="discord.js" />
<meta property="og:type" content="website" />
<meta key="og_title" property="og:title" content="discord.js" />
<meta key="og_description" name="og:description" content={DESCRIPTION} />
<meta property="og:image" content="https://discordjs.dev/open-graph.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@iCrawlToGo" />
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<link href="/site.webmanifest" rel="manifest" />
<link color="#090a16" href="/safari-pinned-tab.svg" rel="mask-icon" />
<meta content="light dark" name="color-scheme" />
<meta content="discord.js" name="apple-mobile-web-app-title" />
<meta content="discord.js" name="application-name" />
<meta content="#090a16" name="msapplication-TileColor" />
<meta content={DESCRIPTION} key="description" name="description" />
<meta content="discord.js" property="og:site_name" />
<meta content="website" property="og:type" />
<meta content="discord.js" key="og_title" property="og:title" />
<meta content={DESCRIPTION} key="og_description" name="og:description" />
<meta content="https://discordjs.dev/open-graph.png" property="og:image" />
<meta content="summary_large_image" name="twitter:card" />
<meta content="@iCrawlToGo" name="twitter:creator" />
</Head>
<body className="dark:bg-dark-800 bg-white">
<Main />

4
packages/website/src/pages/docs/[...slug].tsx
View File

@@ -222,7 +222,7 @@ const member = (props?: ApiItemJSON | undefined) => {
case 'Class':
return <Class data={props as ApiClassJSON} />;
case 'Function':
return <Function key={props.containerKey} data={props as ApiFunctionJSON} />;
return <Function data={props as ApiFunctionJSON} key={props.containerKey} />;
case 'Interface':
return <Interface data={props as ApiInterfaceJSON} />;
case 'TypeAlias':
@@ -264,7 +264,7 @@ export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: s
<>
<Head>
<title key="title">{name}</title>
<meta key="og_title" property="og:title" content={ogTitle} />
<meta content={ogTitle} key="og_title" property="og:title" />
</Head>
{member(props.data.member)}
</>

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

@@ -70,7 +70,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
<div className="flex grow flex-col place-content-center gap-4">
<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}>
<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">
<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">

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

@@ -78,7 +78,7 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
</div>
</a>
{PACKAGES.map((pkg) => (
<Link key={pkg} href={`/docs/packages/${pkg}/${findLatestVersion(pkg)?.version ?? 'main'}`} 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">
<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">
@@ -89,9 +89,9 @@ export default function PackagesRoute(props: Partial<PackageProps> & { error?: s
<Link href={`/docs/packages/${pkg}`} prefetch={false}>
<Button
as="div"
role="link"
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)}
role="link"
>
Select version
</Button>

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

@@ -28,16 +28,16 @@ export default function IndexRoute() {
<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"
href="https://discordjs.guide"
target="_blank"
rel="noopener noreferrer"
target="_blank"
>
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 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"
target="_blank"
>
GitHub <FiExternalLink />
</a>
@@ -47,13 +47,13 @@ export default function IndexRoute() {
</div>
<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"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
title="Vercel"
>
<Image src={vercelLogo} alt="Vercel" />
<Image alt="Vercel" src={vercelLogo} />
</a>
</div>
</div>