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

refactor: properly handling spacing

Browse Source
This commit is contained in:
iCrawl
2022-08-13 20:42:03 +02:00
parent 5360099e5f
commit d08da8a212
3 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
const createNode = (node: ReturnType<CommentNode['toJSON']>, idx?: number): ReactNode => {
switch (node.kind) {
case 'PlainText':
return <span>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
return <span key={idx}>{(node as ReturnType<PlainTextCommentNode['toJSON']>).text}</span>;
case 'Paragraph':
return (
<p key={idx} className={textClassName}>
@@ -24,7 +24,7 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.
</p>
);
case 'SoftBreak':
return <br />;
return <br key={idx} />;
case 'LinkTag': {
const { codeDestination, urlDestination, text } = node as ReturnType<LinkTagCommentNode['toJSON']>;

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

@@ -42,24 +42,28 @@ export function DocContainer({
</div>
<div className="min-h-full overflow-y-auto overflow-x-clip px-10 pt-5 pb-10">
<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white mb-5">
{summary ? (
<CommentSection textClassName="text-dark-100 dark:text-gray-300" node={summary} />
) : (
<p className="text-dark-100 dark:text-gray-300">No summary provided.</p>
)}
</Section>
<SyntaxHighlighter
wrapLines
wrapLongLines
language="typescript"
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}
</SyntaxHighlighter>
<div className={extendsTokens?.length ? 'mb-2' : 'mb-10'}>
<SyntaxHighlighter
wrapLines
wrapLongLines
language="typescript"
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}
</SyntaxHighlighter>
</div>
{extendsTokens?.length ? (
<div className="flex flex-row items-center dark:text-white gap-3">
<div
className={`flex flex-row items-center dark:text-white gap-3 ${implementsTokens?.length ? '' : 'mb-10'}`}
>
<h3 className="m-0">Extends</h3>
<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
<p className="font-mono break-all">
@@ -68,7 +72,7 @@ export function DocContainer({
</div>
) : null}
{implementsTokens?.length ? (
<div className="flex flex-row items-center dark:text-white gap-3">
<div className={`flex flex-row items-center dark:text-white gap-3 mb-10`}>
<h3 className="m-0">Implements</h3>
<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
<p className="font-mono break-all">

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

@@ -10,6 +10,7 @@ export interface SectionProps {
defaultClosed?: boolean;
iconElement?: JSX.Element;
showSeparator?: boolean;
margin?: boolean;
}
export function Section({
@@ -19,6 +20,7 @@ export function Section({
defaultClosed,
iconElement,
showSeparator = true,
margin = true,
}: SectionProps) {
const [collapsed, setCollapsed] = useState(defaultClosed ?? false);
@@ -47,8 +49,16 @@ export function Section({
height: 'auto',
paddingLeft: '1.75rem',
paddingRight: '1.75rem',
marginBottom: margin ? '1.25rem' : 0,
},
collapsed: {
opacity: 0,
height: 0,
paddingLeft: '1.75rem',
paddingRight: '1.75rem',
paddingBottom: 0,
marginBottom: 0,
},
collapsed: { opacity: 0, height: 0, paddingLeft: '1.75rem', paddingRight: '1.75rem', paddingBottom: 0 },
}}
>
{children}