-
-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(website): add detailed property and method documentation (#8252)
Co-authored-by: Noel <buechler.noel@outlook.com>
- Loading branch information
1 parent
feb3bdd
commit 33ae7df
Showing
18 changed files
with
241 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { FiLink } from 'react-icons/fi'; | ||
| import { ParameterTable } from './ParameterTable'; | ||
| import type { DocMethod } from '~/DocModel/DocMethod'; | ||
| import type { DocMethodSignature } from '~/DocModel/DocMethodSignature'; | ||
| import { constructHyperlinkedText } from '~/util/util'; | ||
|
|
||
| type MethodResolvable = ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>; | ||
|
|
||
| export interface MethodItemProps { | ||
| data: MethodResolvable; | ||
| } | ||
|
|
||
| function getShorthandName(data: MethodResolvable) { | ||
| return `${data.name}(${data.parameters.reduce((prev, cur, index) => { | ||
| if (index === 0) { | ||
| return `${prev}${cur.name}`; | ||
| } | ||
| return `${prev}, ${cur.name}`; | ||
| }, '')})`; | ||
| } | ||
|
|
||
| function onAnchorClick() { | ||
| console.log('anchor clicked'); | ||
| // Todo implement jump-to links | ||
| } | ||
|
|
||
| export function MethodItem({ data }: MethodItemProps) { | ||
| return ( | ||
| <div className="flex flex-col"> | ||
| <div className="flex content-center"> | ||
| <button className="bg-transparent border-none cursor-pointer" onClick={onAnchorClick}> | ||
| <FiLink size={16} /> | ||
| </button> | ||
| <div className="flex flex-col ml-3"> | ||
| <div className="w-full flex flex-row"> | ||
| <h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4> | ||
| <h4 className="mx-3 my-0">:</h4> | ||
| <h4 className="font-mono color-blue-800 my-0 break-all "> | ||
| {constructHyperlinkedText(data.returnTypeTokens)} | ||
| </h4> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mx-10"> | ||
| {data.summary && <p className="color-slate-500 mt-2">{data.summary}</p>} | ||
| {data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,31 @@ | ||
| import { Table } from './Table'; | ||
| import { constructHyperlinkedText } from '../util/util'; | ||
| import type { ParameterDocumentation } from '~/util/parse.server'; | ||
|
|
||
| interface ParameterDetailProps { | ||
| data: ParameterDocumentation[]; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function ParameterTable({ data }: ParameterDetailProps) { | ||
| export function ParameterTable({ data, className }: ParameterDetailProps) { | ||
| const rows = data.map((param) => ({ | ||
| Name: param.name, | ||
| Type: constructHyperlinkedText(param.tokens), | ||
| Optional: param.isOptional ? 'Yes' : 'No', | ||
| Description: 'None', | ||
| })); | ||
|
|
||
| const columnStyles = { | ||
| Name: 'font-mono', | ||
| Type: 'font-mono', | ||
| }; | ||
|
|
||
| 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>Type</th> | ||
| <th>Optional</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.tokens)}</code> | ||
| </th> | ||
| <th>{parameter.isOptional ? 'Yes' : 'No'}</th> | ||
| <th>None</th> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <Table | ||
| className={className} | ||
| columns={['Name', 'Type', 'Optional', 'Description']} | ||
| rows={rows} | ||
| columnStyles={columnStyles} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import type { DocProperty } from '~/DocModel/DocProperty'; | ||
| import { constructHyperlinkedText } from '~/util/util'; | ||
|
|
||
| export interface PropertyItemProps { | ||
| data: ReturnType<DocProperty['toJSON']>; | ||
| } | ||
|
|
||
| export function PropertyItem({ data }: PropertyItemProps) { | ||
| return ( | ||
| <div className="flex flex-col mb-2 ml-3"> | ||
| <div className="w-full flex flex-row"> | ||
| <h4 className="font-mono my-0">{`${data.name}`}</h4> | ||
| <h4 className="mx-3 my-0">:</h4> | ||
| <h4 className="font-mono color-blue-800 my-0">{constructHyperlinkedText(data.propertyTypeTokens)}</h4> | ||
| </div> | ||
| {data.summary && <p className="color-slate-500 mt-2">{data.summary}</p>} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export function Separator() { | ||
| return <div className="h-[1px] w-full bg-gray-300 mb-3" />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| export interface RowData { | ||
| monospace?: boolean; | ||
| content: string; | ||
| } | ||
|
|
||
| export interface TableProps { | ||
| columns: string[]; | ||
| columnStyles?: Record<string, string>; | ||
| rows: Record<string, string | (string | JSX.Element)[]>[]; | ||
| className?: string | undefined; | ||
| } | ||
|
|
||
| export function Table({ rows, columns, columnStyles, className }: TableProps) { | ||
| return ( | ||
| <div className={className}> | ||
| <table className="table-fixed w-full pb-10 border-collapse"> | ||
| <thead> | ||
| <tr> | ||
| {columns.map((column) => ( | ||
| <th key={column} className="border-b z-10 text-left text-sm pl-2 border-slate-400"> | ||
| {column} | ||
| </th> | ||
| ))} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {rows.map((row, i) => ( | ||
| <tr key={i}> | ||
| {Object.entries(row).map(([colName, val]) => { | ||
| console.log(colName); | ||
| console.log(columnStyles?.[colName]); | ||
| return ( | ||
| <td | ||
| key={colName} | ||
| className={`p-2 text-sm border-b text-left border-slate-300 break-all ${ | ||
| columnStyles?.[colName] ?? '' | ||
| }`} | ||
| > | ||
| {val} | ||
| </td> | ||
| ); | ||
| })} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.
33ae7dfThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
discord-js – ./
discord-js-discordjs.vercel.app
discord-js-git-main-discordjs.vercel.app
discord-js-number-one.vercel.app