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

refactor(website): extract layouts and use more server components (#9027)

Browse Source 
Closes https://github.com/discordjs/discord.js/issues/8920
Closes https://github.com/discordjs/discord.js/issues/8997
This commit is contained in:
Suneet Tipirneni
2023-01-10 12:25:14 -05:00
committed by GitHub
parent 158db474b7
commit 39c4de2dbc
73 changed files with 1831 additions and 1476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/website/src/components/TableOfContentItems.tsx
View File

@@ -1,59 +1,88 @@
'use client';
import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
import { useMemo } from 'react';
export function TableOfContentItems({
methods,
properties,
}: {
methods: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'];
properties: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'];
}) {
export interface TableOfContentsSerializedMethod {
kind: 'Method' | 'MethodSignature';
name: string;
overloadIndex?: number;
}
export interface TableOfContentsSerializedProperty {
kind: 'Property' | 'PropertySignature';
name: string;
}
export type TableOfContentsSerialized = TableOfContentsSerializedMethod | TableOfContentsSerializedProperty;
export interface TableOfContentsItemProps {
serializedMembers: TableOfContentsSerialized[];
}
export function TableOfContentsPropertyItem({ property }: { property: TableOfContentsSerializedProperty }) {
return (
<a
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={`#${property.name}`}
key={property.name}
title={property.name}
>
<span className="line-clamp-1">{property.name}</span>
</a>
);
}
export function TableOfContentsMethodItem({ method }: { method: TableOfContentsSerializedMethod }) {
if (method.overloadIndex && method.overloadIndex > 1) {
return null;
}
const key = `${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`;
return (
<a
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={method.name}
>
<span className="line-clamp-1">{method.name}</span>
{method.overloadIndex && method.overloadIndex > 1 ? (
<span className="text-xs">{method.overloadIndex}</span>
) : null}
</a>
);
}
export function TableOfContentItems({ serializedMembers }: TableOfContentsItemProps) {
const propertyItems = useMemo(
() =>
properties.map((prop) => (
<a
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>
)),
[properties],
serializedMembers
.filter(
(member): member is TableOfContentsSerializedProperty =>
member.kind === 'Property' || member.kind === 'PropertySignature',
)
.map((prop) => <TableOfContentsPropertyItem key={prop.name} property={prop} />),
[serializedMembers],
);
const methodItems = useMemo(
() =>
methods.map((member) => {
if (member.overloadIndex && member.overloadIndex > 1) {
return null;
}
const key = `${member.name}${
member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''
}`;
return (
<a
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 ? (
<span className="text-xs">{member.overloadIndex}</span>
) : null}
</a>
);
}),
[methods],
serializedMembers
.filter(
(member): member is TableOfContentsSerializedMethod =>
member.kind === 'Method' || member.kind === 'MethodSignature',
)
.map((member) => (
<TableOfContentsMethodItem
key={`${member.name}${member.overloadIndex ? `:${member.overloadIndex}` : ''}`}
method={member}
/>
)),
[serializedMembers],
);
return (