Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: website components #8600

Merged
merged 34 commits into from Sep 6, 2022
Merged

refactor: website components #8600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
b216dc3
refactor: website components rewrite
iCrawl Sep 3, 2022
adcee1b
refactor: only build main and latest tag
iCrawl Sep 3, 2022
06edbab
refactor: accessibility
iCrawl Sep 3, 2022
bd18e01
feat: og title for specific pages
iCrawl Sep 3, 2022
29b53da
fix: file tracing
iCrawl Sep 3, 2022
53fcfe6
fix: include shiki theme
iCrawl Sep 3, 2022
9763454
refactor: package and version selection
iCrawl Sep 3, 2022
9ac5252
refactor: extract common components
iCrawl Sep 3, 2022
7628e25
refactor: only bundle whats needed from shiki
iCrawl Sep 3, 2022
4460c57
fix: general styling
iCrawl Sep 3, 2022
4a4a712
refactor: docs page
iCrawl Sep 3, 2022
3da8cd7
build: fix build
iCrawl Sep 3, 2022
11ae47d
fix: open handler for navbar
iCrawl Sep 3, 2022
29a43cc
fix: sidebars
iCrawl Sep 3, 2022
6ecd32e
refactor: back to unocss
iCrawl Sep 4, 2022
ce6a951
refactor: switch light theme of syntax highlighter
iCrawl Sep 4, 2022
fadfc7a
feat: prose for md
iCrawl Sep 4, 2022
d89b718
fix: several dark mode issues
iCrawl Sep 4, 2022
1bedead
feat: prettier plugin for tailwind css sorting
iCrawl Sep 4, 2022
fb35348
refactor: sidebar
iCrawl Sep 5, 2022
0d93971
fix: hover sidebar dark mode
iCrawl Sep 5, 2022
24b558f
refactor: table of contents sidebar
iCrawl Sep 5, 2022
fd8dd87
fix: scrollbar madness
iCrawl Sep 5, 2022
c75efe5
refactor: main content
iCrawl Sep 5, 2022
f8f193e
fix: various spacing issues
iCrawl Sep 5, 2022
ec4c57f
chore: build correct amount over versions only
iCrawl Sep 5, 2022
e746457
refactor: leftover mantine components
iCrawl Sep 6, 2022
76c9c54
fix: scrolling on header on mobile
iCrawl Sep 6, 2022
649ca3a
feat: redirect for stable
iCrawl Sep 6, 2022
870038e
refactor: finalize mantine removal
iCrawl Sep 6, 2022
fb903ac
fix: scrollbars
iCrawl Sep 6, 2022
0549604
refactor: package and version selector
iCrawl Sep 6, 2022
81f4a42
refactor: scrollbar for nav
iCrawl Sep 6, 2022
54d9155
fix: dont lock body
iCrawl Sep 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/actions/package.json
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
@@ -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
View file
Open in desktop
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",
Copy link

Choose a reason for hiding this comment

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

I recommend setting it to the exact version (without ^) while it's in alpha so that you don't get breaking changes by mistake.

"minisearch": "^5.0.0",
"next": "^12.2.5",
"next-mdx-remote": "^4.1.0",
"next-progress": "^2.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

nextjs-progressbar is a good alternative with 30x more downloads

Copy link
Member

Choose a reason for hiding this comment

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

4460c57

Copy link
Member Author

Choose a reason for hiding this comment

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

Theres actually a few differences between the 2 packages, one would be allowing full custom css, which nextjs-progressbar doesn't. Plus its wrapped in a memo, which nextjs-progressbar is not.

"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
View file
Open in desktop
Binary file not shown.
Binary file removed packages/website/src/assets/djs_logo_rainbow_400x400.png
View file
Open in desktop
Binary file not shown.
0 ...ages/website/public/powered-by-vercel.svg → .../website/src/assets/powered-by-vercel.svg
View file
Open in desktop
File renamed without changes
80 changes: 34 additions & 46 deletions packages/website/src/components/CodeListing.tsx
View file
Open in desktop
@@ -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>
);
}