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

refactor: website components (#8600)

Browse Source
This commit is contained in:
Noel
2022-09-06 19:48:33 +02:00
committed by GitHub
parent f3ce4a75d0
commit c3341570d9
55 changed files with 1910 additions and 2673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
packages/website/src/pages/_app.tsx
View File

@@ -1,135 +1,31 @@
import { type ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
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 { RouterTransition } from '../components/RouterTransition';
import NextProgress from 'next-progress';
import { ThemeProvider } from 'next-themes';
import '@unocss/reset/antfu.css';
import '../styles/unocss.css';
import '../styles/main.css';
import { miniSearch } from '~/util/search';
const actions: (router: NextRouter) => SpotlightAction[] = (router: NextRouter) => [
{
title: 'Home',
description: 'Go to landing page',
onTrigger: () => void router.push('/'),
icon: <VscPackage size={20} />,
},
{
title: 'Packages',
description: 'Go to the package selection',
onTrigger: () => void router.push('/docs/packages'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-builders',
title: 'Builders',
description: 'Go to the @discordjs/builders documentation',
onTrigger: () => void router.push('/docs/packages/builders'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-collection',
title: 'Collection',
description: 'Go to the @discordjs/collection documentation',
onTrigger: () => void router.push('/docs/packages/collection'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-proxy',
title: 'Proxy',
description: 'Go to the @discordjs/proxy documentation',
onTrigger: () => void router.push('/docs/packages/proxy'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-rest',
title: 'REST',
description: 'Go to the @discordjs/rest documentation',
onTrigger: () => void router.push('/docs/packages/voice'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-voice',
title: 'Voice',
description: 'Go to the @discordjs/voice documentation',
onTrigger: () => void router.push('/docs/packages/ws'),
icon: <VscPackage size={20} />,
},
{
id: 'packages-ws',
title: 'WS',
description: 'Go to the @discordjs/ws documentation',
onTrigger: () => void router.push('/docs'),
icon: <VscPackage size={20} />,
},
];
export default function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: 'theme',
defaultValue: 'dark',
getInitialValueInEffect: true,
});
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value ?? (colorScheme === 'dark' ? 'light' : 'dark'));
return (
<>
<Head>
<title key="title">discord.js</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="theme-color" content="#5865f2" />
</Head>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider
theme={{
fontFamily: 'Inter var',
fontFamilyMonospace: 'JetBrains Mono',
headings: {
fontFamily: 'Inter var',
},
colorScheme,
colors: {
blurple: [
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
'#5865f2',
],
},
primaryColor: 'blurple',
}}
withCSSVariables
withNormalizeCSS
withGlobalStyles
>
<SpotlightProvider
shortcut={['mod + P', 'mod + K', '/']}
actions={actions(router)}
limit={7}
filter={(query, actions) => {
if (!query) {
return actions;
}
const search = miniSearch.search(query);
return actions.filter((action) => search.some((res) => res.name === action.title));
}}
>
<RouterTransition />
<Component {...pageProps} />
</SpotlightProvider>
</MantineProvider>
</ColorSchemeProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
value={{
light: 'light',
dark: 'dark',
}}
disableTransitionOnChange
>
<NextProgress color="#5865f2" options={{ showSpinner: false }} />
<Component {...pageProps} />
</ThemeProvider>
</>
);
}