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

refactor: docs design (#8487)

Browse Source
This commit is contained in:
Noel
2022-08-15 14:48:00 +02:00
committed by GitHub
parent d09ef1e425
commit 4ab1d09997
44 changed files with 1533 additions and 1251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,5 @@
import { Group, Stack, Title, Text, Box } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import type { ReactNode } from 'react';
import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -32,73 +34,73 @@ export function DocContainer({
extendsTokens,
implementsTokens,
}: DocContainerProps) {
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return (
<div className="flex flex-col min-h-full max-h-full grow">
<div className="border-0.5 border-gray px-10 py-2">
<h2 className="flex gap-2 items-center break-all m-0 dark:text-white">
<Stack>
<Title order={2} ml="xs">
<Group>
{generateIcon(kind)}
{name}
</h2>
</div>
</Group>
</Title>
<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 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>
<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 ${implementsTokens?.length ? '' : 'mb-10'}`}
>
<h3 className="m-0">Extends</h3>
<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
<p className="font-mono break-all">
<HyperlinkedText tokens={extendsTokens} />
</p>
</div>
<Section title="Summary" icon={<VscListSelection />} padded dense={matches}>
{summary ? <CommentSection node={summary} /> : <Text>No summary provided.</Text>}
</Section>
<Box px="xs" pb="xs">
<SyntaxHighlighter
wrapLongLines
language="typescript"
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}
</SyntaxHighlighter>
</Box>
{extendsTokens?.length ? (
<Group noWrap>
<Title order={3} ml="xs">
Extends
</Title>
<Title order={3} ml="xs">
{CodeListingSeparatorType.Type}
</Title>
<Text className="font-mono break-all">
<HyperlinkedText tokens={extendsTokens} />
</Text>
</Group>
) : null}
{implementsTokens?.length ? (
<Group noWrap>
<Title order={3} ml="xs">
Implements
</Title>
<Title order={3} ml="xs">
{CodeListingSeparatorType.Type}
</Title>
<Text className="font-mono break-all">
{implementsTokens.map((token, idx) => (
<>
<HyperlinkedText tokens={token} />
{idx < implementsTokens.length - 1 ? ', ' : ''}
</>
))}
</Text>
</Group>
) : null}
<Stack>
{typeParams?.length ? (
<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed>
<TypeParamTable data={typeParams} />
</Section>
) : null}
{implementsTokens?.length ? (
<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">
{implementsTokens.map((token, i) => (
<>
<HyperlinkedText key={i} tokens={token} />
{i < implementsTokens.length - 1 ? ', ' : ''}
</>
))}
</p>
</div>
) : null}
<div className="space-y-10">
{typeParams?.length ? (
<Section
iconElement={<VscSymbolParameter />}
title="Type Parameters"
className="dark:text-white"
defaultClosed
>
<TypeParamTable data={typeParams} />
</Section>
) : null}
<div className="space-y-10">{children}</div>
</div>
</div>
</div>
<Stack>{children}</Stack>
</Stack>
</Stack>
);
}