From b216dc38df3e449b9b46cf02e000a3bc3f56acd2 Mon Sep 17 00:00:00 2001 From: iCrawl Date: Sat, 3 Sep 2022 04:01:03 +0200 Subject: [PATCH 01/34] refactor: website components rewrite --- packages/website/package.json | 3 + .../website/src/components/DocContainer.tsx | 19 +- packages/website/src/components/Section.tsx | 16 +- .../website/src/components/SidebarLayout.tsx | 20 +- .../src/components/TableOfContentItems.tsx | 11 +- .../website/src/components/tsdoc/TSDoc.tsx | 9 +- packages/website/src/pages/_app.tsx | 167 +++++++------- packages/website/src/pages/_document.tsx | 3 + .../pages/docs/packages/[package]/index.tsx | 6 +- .../website/src/pages/docs/packages/index.tsx | 18 +- packages/website/src/pages/index.tsx | 208 +++++++++++------- packages/website/src/styles/main.css | 5 +- packages/website/stitches.config.ts | 31 +++ yarn.lock | 30 +++ 14 files changed, 313 insertions(+), 233 deletions(-) create mode 100644 packages/website/stitches.config.ts diff --git a/packages/website/package.json b/packages/website/package.json index 25a4e6ee9b35..5b3d3e3d4073 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -50,10 +50,13 @@ "@mantine/spotlight": "^5.2.5", "@microsoft/api-extractor-model": "7.24.0", "@microsoft/tsdoc": "0.14.1", + "@radix-ui/colors": "^0.1.8", + "@stitches/react": "^1.2.8", "@vscode/codicons": "^0.0.32", "minisearch": "^5.0.0", "next": "^12.2.5", "next-mdx-remote": "^4.1.0", + "next-themes": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.4.0", diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index 934f7880fb19..10ff5216addf 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/packages/website/src/components/DocContainer.tsx @@ -5,21 +5,10 @@ import type { ApiClassJSON, ApiInterfaceJSON, } from '@discordjs/api-extractor-utils'; -import { - Group, - Stack, - Title, - Text, - Box, - MediaQuery, - Aside, - ScrollArea, - Skeleton, - Divider, - useMantineColorScheme, -} from '@mantine/core'; +import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core'; import { useMediaQuery } from '@mantine/hooks'; import { useRouter } from 'next/router'; +import { useTheme } from 'next-themes'; import { Fragment, type PropsWithChildren } from 'react'; import { VscSymbolClass, @@ -77,7 +66,7 @@ export function DocContainer({ }: DocContainerProps) { const router = useRouter(); const matches = useMediaQuery('(max-width: 768px)'); - const { colorScheme } = useMantineColorScheme(); + const { theme } = useTheme(); return ( @@ -103,7 +92,7 @@ export function DocContainer({ {excerpt} diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx index 68dd8c09f08b..0b4108002019 100644 --- a/packages/website/src/components/Section.tsx +++ b/packages/website/src/components/Section.tsx @@ -1,13 +1,5 @@ -import { - createStyles, - UnstyledButton, - Group, - ThemeIcon, - Collapse, - Box, - Text, - useMantineColorScheme, -} from '@mantine/core'; +import { createStyles, UnstyledButton, Group, ThemeIcon, Collapse, Box, Text } from '@mantine/core'; +import { useTheme } from 'next-themes'; import { useState, useEffect, type PropsWithChildren } from 'react'; import { VscChevronDown } from 'react-icons/vsc'; @@ -47,7 +39,7 @@ export function Section({ title: string; }>) { const [opened, setOpened] = useState(!defaultClosed); - const { colorScheme } = useMantineColorScheme(); + const { theme } = useTheme(); const { classes } = useStyles({ opened }); useEffect(() => { @@ -61,7 +53,7 @@ export function Section({ {icon ? ( - + {icon} ) : null} diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index 4449665b4681..5cdf90da6481 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/packages/website/src/components/SidebarLayout.tsx @@ -17,7 +17,6 @@ import { createStyles, Menu, ActionIcon, - useMantineColorScheme, Stack, Skeleton, LoadingOverlay, @@ -29,6 +28,7 @@ import Image from 'next/future/image'; import Link from 'next/link'; import { useRouter } from 'next/router'; import type { MDXRemoteSerializeResult } from 'next-mdx-remote'; +import { useTheme } from 'next-themes'; import { type PropsWithChildren, useState, useEffect, useMemo } from 'react'; import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc'; import { WiDaySunny, WiNightClear } from 'react-icons/wi'; @@ -161,9 +161,9 @@ export function SidebarLayout({ `https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`, fetcher, ); - const theme = useMantineTheme(); - // eslint-disable-next-line @typescript-eslint/unbound-method - const { colorScheme, toggleColorScheme } = useMantineColorScheme(); + const mantineTheme = useMantineTheme(); + const { theme, setTheme } = useTheme(); + const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light'); const [opened, setOpened] = useState(false); const [openedLibPicker, setOpenedLibPicker] = useState(false); @@ -243,7 +243,7 @@ export function SidebarLayout({ - + @@ -267,7 +267,7 @@ export function SidebarLayout({ - + @@ -309,7 +309,7 @@ export function SidebarLayout({ opened={opened} onClick={() => (router.isFallback ? null : setOpened((isOpened) => !isOpened))} size="sm" - color={theme.colors.gray![6]} + color={mantineTheme.colors.gray![6]} mr="xl" /> @@ -335,12 +335,12 @@ export function SidebarLayout({ toggleColorScheme()} + color={theme === 'dark' ? 'yellow' : 'blue'} + onClick={() => toggleTheme()} title="Toggle color scheme" radius="sm" > - {colorScheme === 'dark' ? : } + {theme === 'dark' ? : } diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx index 89e1452fec08..a8f8a92e9faa 100644 --- a/packages/website/src/components/TableOfContentItems.tsx +++ b/packages/website/src/components/TableOfContentItems.tsx @@ -1,5 +1,6 @@ import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils'; -import { createStyles, Group, Text, Box, Stack, ThemeIcon, useMantineColorScheme } from '@mantine/core'; +import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core'; +import { useTheme } from 'next-themes'; import { useMemo } from 'react'; import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc'; @@ -33,7 +34,7 @@ export function TableOfContentItems({ methods: ApiClassJSON['methods'] | ApiInterfaceJSON['methods']; properties: ApiClassJSON['properties'] | ApiInterfaceJSON['properties']; }) { - const { colorScheme } = useMantineColorScheme(); + const { theme } = useTheme(); const { classes } = useStyles(); const propertyItems = useMemo( @@ -48,7 +49,7 @@ export function TableOfContentItems({ )), // eslint-disable-next-line react-hooks/exhaustive-deps - [properties, colorScheme], + [properties, theme], ); const methodItems = useMemo( @@ -86,7 +87,7 @@ export function TableOfContentItems({ {propertyItems.length ? ( - + @@ -101,7 +102,7 @@ export function TableOfContentItems({ {methodItems.length ? ( - + diff --git a/packages/website/src/components/tsdoc/TSDoc.tsx b/packages/website/src/components/tsdoc/TSDoc.tsx index 3d81b4a35f93..f03699e36e34 100644 --- a/packages/website/src/components/tsdoc/TSDoc.tsx +++ b/packages/website/src/components/tsdoc/TSDoc.tsx @@ -7,16 +7,17 @@ import type { DocBlockJSON, DocCommentJSON, } from '@discordjs/api-extractor-utils'; -import { Anchor, Box, Code, Text, useMantineColorScheme } from '@mantine/core'; +import { Anchor, Box, Code, Text } from '@mantine/core'; import { DocNodeKind, StandardTags } from '@microsoft/tsdoc'; import Link from 'next/link'; +import { useTheme } from 'next-themes'; import { Fragment, useCallback, type ReactNode } from 'react'; import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { BlockComment } from './BlockComment'; export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element { - const { colorScheme } = useMantineColorScheme(); + const { theme } = useTheme(); const createNode = useCallback( (node: AnyDocNodeJSON, idx?: number): ReactNode => { @@ -81,7 +82,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element { wrapLines wrapLongLines language={language} - style={colorScheme === 'dark' ? vscDarkPlus : ghcolors} + style={theme === 'dark' ? vscDarkPlus : ghcolors} codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }} > {code} @@ -123,7 +124,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element { return null; }, - [colorScheme], + [theme], ); return ( diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx index 0451c156d0fc..cde44ffb0148 100644 --- a/packages/website/src/pages/_app.tsx +++ b/packages/website/src/pages/_app.tsx @@ -1,81 +1,76 @@ -import { type ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core'; -import { useLocalStorage } from '@mantine/hooks'; -import { type SpotlightAction, SpotlightProvider } from '@mantine/spotlight'; +import { MantineProvider } from '@mantine/core'; +// import { type SpotlightAction, SpotlightProvider } from '@mantine/spotlight'; import type { AppProps } from 'next/app'; import Head from 'next/head'; -import { type NextRouter, useRouter } from 'next/router'; -import { VscPackage } from 'react-icons/vsc'; +// import { type NextRouter, useRouter } from 'next/router'; +import { ThemeProvider } from 'next-themes'; +// import { VscPackage } from 'react-icons/vsc'; +import { darkTheme, globalStyles } from '../../stitches.config'; import { RouterTransition } from '../components/RouterTransition'; import '../styles/unocss.css'; import '../styles/main.css'; -import { miniSearch } from '~/util/search'; +// import { miniSearch } from '~/util/search'; -const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) => [ - { - title: 'Home', - description: 'Go to landing page', - onTrigger: () => void router.push('/'), - icon: , - }, - { - title: 'Packages', - description: 'Go to the package selection', - onTrigger: () => void router.push('/docs/packages'), - icon: , - }, - { - id: 'packages-builders', - title: 'Builders', - description: 'Go to the @discordjs/builders documentation', - onTrigger: () => void router.push('/docs/packages/builders'), - icon: , - }, - { - id: 'packages-collection', - title: 'Collection', - description: 'Go to the @discordjs/collection documentation', - onTrigger: () => void router.push('/docs/packages/collection'), - icon: , - }, - { - id: 'packages-proxy', - title: 'Proxy', - description: 'Go to the @discordjs/proxy documentation', - onTrigger: () => void router.push('/docs/packages/proxy'), - icon: , - }, - { - id: 'packages-rest', - title: 'REST', - description: 'Go to the @discordjs/rest documentation', - onTrigger: () => void router.push('/docs/packages/voice'), - icon: , - }, - { - id: 'packages-voice', - title: 'Voice', - description: 'Go to the @discordjs/voice documentation', - onTrigger: () => void router.push('/docs/packages/ws'), - icon: , - }, - { - id: 'packages-ws', - title: 'WS', - description: 'Go to the @discordjs/ws documentation', - onTrigger: () => void router.push('/docs'), - icon: , - }, -]; +// const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) => [ +// { +// title: 'Home', +// description: 'Go to landing page', +// onTrigger: () => void router.push('/'), +// icon: , +// }, +// { +// title: 'Packages', +// description: 'Go to the package selection', +// onTrigger: () => void router.push('/docs/packages'), +// icon: , +// }, +// { +// id: 'packages-builders', +// title: 'Builders', +// description: 'Go to the @discordjs/builders documentation', +// onTrigger: () => void router.push('/docs/packages/builders'), +// icon: , +// }, +// { +// id: 'packages-collection', +// title: 'Collection', +// description: 'Go to the @discordjs/collection documentation', +// onTrigger: () => void router.push('/docs/packages/collection'), +// icon: , +// }, +// { +// id: 'packages-proxy', +// title: 'Proxy', +// description: 'Go to the @discordjs/proxy documentation', +// onTrigger: () => void router.push('/docs/packages/proxy'), +// icon: , +// }, +// { +// id: 'packages-rest', +// title: 'REST', +// description: 'Go to the @discordjs/rest documentation', +// onTrigger: () => void router.push('/docs/packages/voice'), +// icon: , +// }, +// { +// id: 'packages-voice', +// title: 'Voice', +// description: 'Go to the @discordjs/voice documentation', +// onTrigger: () => void router.push('/docs/packages/ws'), +// icon: , +// }, +// { +// id: 'packages-ws', +// title: 'WS', +// description: 'Go to the @discordjs/ws documentation', +// onTrigger: () => void router.push('/docs'), +// icon: , +// }, +// ]; export default function MyApp({ Component, pageProps }: AppProps) { - const router = useRouter(); - const [colorScheme, setColorScheme] = useLocalStorage({ - key: 'theme', - defaultValue: 'dark', - getInitialValueInEffect: true, - }); - const toggleColorScheme = (value?: ColorScheme) => - setColorScheme(value ?? (colorScheme === 'dark' ? 'light' : 'dark')); + // const router = useRouter(); + globalStyles(); return ( <> @@ -83,7 +78,14 @@ export default function MyApp({ Component, pageProps }: AppProps) { discord.js - + - { - if (!query) { - return actions; - } - - const search = miniSearch.search(query); - return actions.filter((action) => search.some((res) => res.name === action.title)); - }} - > - - - + + - + ); } diff --git a/packages/website/src/pages/_document.tsx b/packages/website/src/pages/_document.tsx index bc5736543aa7..698ab5d3e269 100644 --- a/packages/website/src/pages/_document.tsx +++ b/packages/website/src/pages/_document.tsx @@ -1,5 +1,7 @@ +/* eslint-disable react/no-danger */ import { createGetInitialProps } from '@mantine/next'; import Document, { Html, Head, Main, NextScript } from 'next/document'; +import { getCssText } from '../../stitches.config'; const getInitialProps = createGetInitialProps(); @@ -32,6 +34,7 @@ export default class _Document extends Document { /> +