Skip to content

Commit

Permalink
refactor: website components (#8600)
Browse files Browse the repository at this point in the history
  • Loading branch information
iCrawl committed Sep 6, 2022
1 parent f3ce4a7 commit c334157
Show file tree
Hide file tree
Showing 55 changed files with 1,908 additions and 2,671 deletions.
6 changes: 3 additions & 3 deletions packages/actions/package.json
Expand Up @@ -43,14 +43,14 @@
"tslib": "^2.4.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@vitest/coverage-c8": "^0.23.0",
"@types/node": "^16.11.57",
"@vitest/coverage-c8": "^0.23.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/api-extractor-utils/package.json
Expand Up @@ -35,7 +35,7 @@
"@microsoft/tsdoc": "^0.14.1"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/api-extractor-utils/src/ApiNodeJSONEncoder.ts
Expand Up @@ -164,7 +164,7 @@ export class ApiNodeJSONEncoder {
case ApiItemKind.Variable:
return this.encodeVariable(model, node as ApiVariable, version);
default:
console.log(`Unknown API item kind: ${node.kind}`);
// console.log(`Unknown API item kind: ${node.kind}`);
return undefined;
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/builders/package.json
Expand Up @@ -64,15 +64,15 @@
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@microsoft/api-extractor": "^7.30.0",
"@types/node": "^16.11.56",
"@vitest/coverage-c8": "^0.23.0",
"@types/node": "^16.11.57",
"@vitest/coverage-c8": "^0.23.1",
"downlevel-dts": "^0.10.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
6 changes: 3 additions & 3 deletions packages/collection/package.json
Expand Up @@ -53,15 +53,15 @@
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@microsoft/api-extractor": "^7.30.0",
"@types/node": "^16.11.56",
"@vitest/coverage-c8": "^0.23.0",
"@types/node": "^16.11.57",
"@vitest/coverage-c8": "^0.23.1",
"downlevel-dts": "^0.10.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/discord.js/package.json
Expand Up @@ -64,7 +64,7 @@
"devDependencies": {
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"dtslint": "^4.2.1",
"eslint": "^8.23.0",
"jest": "^29.0.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/docgen/package.json
Expand Up @@ -50,7 +50,7 @@
"devDependencies": {
"@favware/cliff-jumper": "^1.8.7",
"@types/jsdoc-to-markdown": "^7.0.3",
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/proxy-container/package.json
Expand Up @@ -49,7 +49,7 @@
"tslib": "^2.4.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
Expand Down
6 changes: 3 additions & 3 deletions packages/proxy/package.json
Expand Up @@ -62,17 +62,17 @@
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@microsoft/api-extractor": "^7.30.0",
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"@types/supertest": "^2.0.12",
"@vitest/coverage-c8": "^0.23.0",
"@vitest/coverage-c8": "^0.23.1",
"downlevel-dts": "^0.10.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"supertest": "^6.2.4",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
6 changes: 3 additions & 3 deletions packages/rest/package.json
Expand Up @@ -64,15 +64,15 @@
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@microsoft/api-extractor": "^7.30.0",
"@types/node": "^16.11.56",
"@vitest/coverage-c8": "^0.23.0",
"@types/node": "^16.11.57",
"@vitest/coverage-c8": "^0.23.1",
"downlevel-dts": "^0.10.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
6 changes: 3 additions & 3 deletions packages/scripts/package.json
Expand Up @@ -52,14 +52,14 @@
"undici": "^5.10.0"
},
"devDependencies": {
"@types/node": "^16.11.56",
"@vitest/coverage-c8": "^0.23.0",
"@types/node": "^16.11.57",
"@vitest/coverage-c8": "^0.23.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"prettier": "^2.7.1",
"tsup": "^6.2.3",
"typescript": "^4.8.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
6 changes: 3 additions & 3 deletions packages/voice/package.json
Expand Up @@ -59,14 +59,14 @@
"ws": "^8.8.1"
},
"devDependencies": {
"@babel/core": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"@babel/core": "^7.19.0",
"@babel/preset-env": "^7.19.0",
"@babel/preset-typescript": "^7.18.6",
"@discordjs/docgen": "workspace:^",
"@favware/cliff-jumper": "^1.8.7",
"@microsoft/api-extractor": "^7.30.0",
"@types/jest": "^29.0.0",
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"downlevel-dts": "^0.10.1",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
Expand Down
4 changes: 4 additions & 0 deletions packages/website/next.config.js
@@ -1,3 +1,6 @@
/* eslint-disable tsdoc/syntax */
import { URL, fileURLToPath } from 'node:url';

/**
* @type {import('next').NextConfig}
*/
Expand All @@ -12,6 +15,7 @@ export default {
images: {
allowFutureImage: true,
},
outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)),
},
images: {
dangerouslyAllowSVG: true,
Expand Down
24 changes: 11 additions & 13 deletions packages/website/package.json
Expand Up @@ -41,52 +41,50 @@
"dependencies": {
"@discordjs/api-extractor-utils": "workspace:^",
"@discordjs/scripts": "workspace:^",
"@emotion/react": "^11.10.4",
"@emotion/server": "^11.10.0",
"@mantine/core": "^5.2.5",
"@mantine/hooks": "^5.2.5",
"@mantine/next": "^5.2.5",
"@mantine/nprogress": "^5.2.5",
"@mantine/spotlight": "^5.2.5",
"@microsoft/api-extractor-model": "7.24.0",
"@microsoft/tsdoc": "0.14.1",
"@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.41",
"minisearch": "^5.0.0",
"next": "^12.2.5",
"next-mdx-remote": "^4.1.0",
"next-progress": "^2.2.0",
"next-themes": "^0.2.0",
"react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-syntax-highlighter": "^15.5.0",
"react-use": "^17.4.0",
"rehype-ignore": "^1.0.1",
"rehype-pretty-code": "^0.3.2",
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.0.1",
"remark-gfm": "^3.0.1",
"sharp": "^0.30.7",
"sharp": "^0.31.0",
"shiki": "^0.11.1",
"swr": "^1.3.0"
},
"devDependencies": {
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "^16.11.56",
"@types/node": "^16.11.57",
"@types/react-dom": "^18.0.6",
"@types/react-syntax-highlighter": "^15.5.5",
"@unocss/cli": "^0.45.15",
"@unocss/preset-web-fonts": "^0.45.15",
"@unocss/reset": "^0.45.15",
"@vitejs/plugin-react": "^2.0.1",
"@vitest/coverage-c8": "^0.23.0",
"@vitejs/plugin-react": "^2.1.0",
"@vitest/coverage-c8": "^0.23.1",
"concurrently": "^7.3.0",
"eslint": "^8.23.0",
"eslint-config-neon": "^0.1.33",
"happy-dom": "^6.0.4",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"typescript": "^4.8.2",
"unocss": "^0.45.15",
"vercel": "^28.2.2",
"vitest": "^0.23.0"
"vitest": "^0.23.1"
},
"engines": {
"node": ">=16.9.0"
Expand Down
Binary file removed packages/website/src/assets/code-sample.png
Binary file not shown.
Binary file not shown.
80 changes: 34 additions & 46 deletions packages/website/src/components/CodeListing.tsx
@@ -1,6 +1,4 @@
import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
import { ActionIcon, Badge, Box, createStyles, Group, MediaQuery, Stack, Title } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import type { PropsWithChildren } from 'react';
import { FiLink } from 'react-icons/fi';
import { HyperlinkedText } from './HyperlinkedText';
Expand All @@ -12,19 +10,6 @@ export enum CodeListingSeparatorType {
Value = '=',
}

const useStyles = createStyles((theme) => ({
outer: {
display: 'flex',
alignItems: 'center',
gap: 16,

[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
alignItems: 'unset',
},
},
}));

export function CodeListing({
name,
separator = CodeListingSeparatorType.Type,
Expand All @@ -47,48 +32,51 @@ export function CodeListing({
summary?: ApiItemJSON['summary'];
typeTokens: TokenDocumentation[];
}>) {
const { classes } = useStyles();
const matches = useMediaQuery('(max-width: 768px)');

return (
<Stack id={name} className="scroll-mt-30" spacing="xs">
<Box className={classes.outer} ml={matches ? 0 : -45}>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<ActionIcon component="a" href={`#${name}`} variant="transparent">
<FiLink size={20} />
</ActionIcon>
</MediaQuery>
<div id={name} className="scroll-mt-30 flex flex-col gap-4">
<div className={`md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2`}>
<a className="hidden md:inline-block" href={`#${name}`}>
<FiLink size={20} />
</a>
{deprecation || readonly || optional ? (
<Group spacing={10} noWrap>
<div className="flex flex-row flex-wrap gap-1">
{deprecation ? (
<Badge variant="filled" color="red">
<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</Badge>
</div>
) : null}
{readonly ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{optional ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}
{readonly ? <Badge variant="filled">Readonly</Badge> : null}
{optional ? <Badge variant="filled">Optional</Badge> : null}
</Group>
</div>
) : null}
<Group spacing={10}>
<Title order={4} className="font-mono">
<div className="flex flex-row flex-wrap place-items-center gap-1">
<h4 className="break-all font-mono text-lg font-bold">
{name}
{optional ? '?' : ''}
</Title>
<Title order={4}>{separator}</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
</h4>
<h4 className="font-mono text-lg font-bold">{separator}</h4>
<h4 className="break-all font-mono text-lg font-bold">
<HyperlinkedText tokens={typeTokens} />
</Title>
</Group>
</Box>
<Group>
<Stack>
</h4>
</div>
</div>
{summary || inheritanceData ? (
<div className="flex flex-col gap-4">
{deprecation ? <TSDoc node={deprecation} /> : null}
{summary && <TSDoc node={summary} />}
{comment && <TSDoc node={comment} />}
{summary ? <TSDoc node={summary} /> : null}
{comment ? <TSDoc node={comment} /> : null}
{inheritanceData ? <InheritanceText data={inheritanceData} /> : null}
{children}
</Stack>
</Group>
</Stack>
</div>
) : null}
</div>
);
}

1 comment on commit c334157

@vercel
Copy link

@vercel vercel bot commented on c334157 Sep 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.