mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-16 03:23:29 +01:00
feat(website): add support for type parameter documentation (#8237)
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
||||
import { TypeParamTable } from './TypeParamTable';
|
||||
import type { TypeParameterData } from '~/util/parse.server';
|
||||
|
||||
export interface DocContainerProps {
|
||||
name: string;
|
||||
@@ -8,6 +10,7 @@ export interface DocContainerProps {
|
||||
excerpt: string;
|
||||
summary?: string | null;
|
||||
children?: JSX.Element;
|
||||
typeParams?: TypeParameterData[];
|
||||
}
|
||||
|
||||
const symbolClass = 'mr-2';
|
||||
@@ -20,7 +23,7 @@ const icons = {
|
||||
TypeAlias: <VscSymbolVariable color="blue" className={symbolClass} />,
|
||||
};
|
||||
|
||||
export function DocContainer({ name, kind, excerpt, summary, children }: DocContainerProps) {
|
||||
export function DocContainer({ name, kind, excerpt, summary, typeParams, children }: DocContainerProps) {
|
||||
return (
|
||||
<div className="px-10">
|
||||
<h1 style={{ fontFamily: 'JetBrains Mono' }} className="flex items-csenter content-center">
|
||||
@@ -31,6 +34,12 @@ export function DocContainer({ name, kind, excerpt, summary, children }: DocCont
|
||||
<SyntaxHighlighter language="typescript" style={vs} codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}>
|
||||
{excerpt}
|
||||
</SyntaxHighlighter>
|
||||
{typeParams?.length ? (
|
||||
<>
|
||||
<h3>Type Parameters</h3>
|
||||
<TypeParamTable data={typeParams} />
|
||||
</>
|
||||
) : null}
|
||||
<h3>Summary</h3>
|
||||
<p>{summary ?? 'No summary provided.'}</p>
|
||||
{children}
|
||||
|
||||
39
packages/website/src/components/TypeParamTable.tsx
Normal file
39
packages/website/src/components/TypeParamTable.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { TypeParameterData } from '~/util/parse.server';
|
||||
import { constructHyperlinkedText } from '~/util/util';
|
||||
|
||||
export interface TableProps {
|
||||
data: TypeParameterData[];
|
||||
}
|
||||
|
||||
export function TypeParamTable({ data }: TableProps) {
|
||||
return (
|
||||
<div className="p-10 border border-gray-200 solid rounded-md">
|
||||
<table className="w-full text-sm text-left text-black-500 dark:text-gray-400">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Constraint</th>
|
||||
<th>Optional</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((parameter) => (
|
||||
<tr key={parameter.name} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
<th className="py-4 font-normal text-gray-900 dark:text-white whitespace-nowrap">{parameter.name}</th>
|
||||
<th>
|
||||
<code>{constructHyperlinkedText(parameter.constraintTokens)}</code>
|
||||
</th>
|
||||
<th>{parameter.optional ? 'Yes' : 'No'}</th>
|
||||
<th>
|
||||
<code>{constructHyperlinkedText(parameter.defaultTokens)}</code>
|
||||
</th>
|
||||
<th>None</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,13 @@ export interface ClassProps {
|
||||
|
||||
export function Class({ data }: ClassProps) {
|
||||
return (
|
||||
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
|
||||
<DocContainer
|
||||
name={data.name}
|
||||
kind={data.kind}
|
||||
excerpt={data.excerpt}
|
||||
summary={data.summary}
|
||||
typeParams={data.typeParameters}
|
||||
>
|
||||
<>
|
||||
{data.properties.length ? <PropertyList data={data.properties} /> : null}
|
||||
{data.methods.length ? <MethodList data={data.methods} /> : null}
|
||||
|
||||
@@ -8,7 +8,13 @@ export interface FunctionProps {
|
||||
|
||||
export function Function({ data }: FunctionProps) {
|
||||
return (
|
||||
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
|
||||
<DocContainer
|
||||
name={data.name}
|
||||
kind={data.kind}
|
||||
excerpt={data.excerpt}
|
||||
summary={data.summary}
|
||||
typeParams={data.typeParameters}
|
||||
>
|
||||
<ParameterTable data={data.parameters} />
|
||||
</DocContainer>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,13 @@ export interface InterfaceProps {
|
||||
|
||||
export function Interface({ data }: InterfaceProps) {
|
||||
return (
|
||||
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
|
||||
<DocContainer
|
||||
name={data.name}
|
||||
kind={data.kind}
|
||||
excerpt={data.excerpt}
|
||||
summary={data.summary}
|
||||
typeParams={data.typeParameters}
|
||||
>
|
||||
<>
|
||||
{data.properties.length ? <PropertyList data={data.properties} /> : null}
|
||||
{data.methods.length ? <MethodList data={data.methods} /> : null}
|
||||
|
||||
@@ -7,7 +7,13 @@ export interface TypeAliasProps {
|
||||
|
||||
export function TypeAlias({ data }: TypeAliasProps) {
|
||||
return (
|
||||
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
|
||||
<DocContainer
|
||||
name={data.name}
|
||||
kind={data.kind}
|
||||
excerpt={data.excerpt}
|
||||
summary={data.summary}
|
||||
typeParams={data.typeParameters}
|
||||
>
|
||||
<div>WIP</div>
|
||||
</DocContainer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user