mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-13 18:13:29 +01:00
133 lines
3.3 KiB
TypeScript
133 lines
3.3 KiB
TypeScript
import { createStyles, Container, Title, Button, Group, Text, Center, Box } from '@mantine/core';
|
|
import Image from 'next/future/image';
|
|
import Link from 'next/link';
|
|
import { FiExternalLink } from 'react-icons/fi';
|
|
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
outer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
gap: 50,
|
|
padding: 32,
|
|
|
|
[theme.fn.smallerThan('md')]: {
|
|
height: 'unset',
|
|
},
|
|
},
|
|
|
|
inner: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
|
|
[theme.fn.smallerThan('md')]: {
|
|
flexDirection: 'column',
|
|
gap: 50,
|
|
},
|
|
},
|
|
|
|
content: {
|
|
maxWidth: 480,
|
|
marginRight: theme.spacing.xl,
|
|
|
|
[theme.fn.smallerThan('md')]: {
|
|
marginRight: 0,
|
|
},
|
|
},
|
|
|
|
title: {
|
|
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
|
fontSize: 44,
|
|
lineHeight: 1.2,
|
|
fontWeight: 900,
|
|
|
|
[theme.fn.smallerThan('xs')]: {
|
|
fontSize: 28,
|
|
},
|
|
},
|
|
|
|
highlight: {
|
|
position: 'relative',
|
|
backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
|
|
borderRadius: theme.radius.sm,
|
|
padding: '4px 12px',
|
|
},
|
|
}));
|
|
|
|
export default function IndexRoute() {
|
|
const { classes } = useStyles();
|
|
|
|
return (
|
|
<Container className={classes.outer} size="lg">
|
|
<Box className={classes.inner}>
|
|
<Box className={classes.content}>
|
|
<Title className={classes.title}>
|
|
The <span className={classes.highlight}>most popular</span> way to build Discord <br /> bots.
|
|
</Title>
|
|
<Text color="dimmed" mt="md">
|
|
discord.js is a powerful Node.js module that allows you to interact with the Discord API very easily. It
|
|
takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code
|
|
significantly tidier and easier to comprehend.
|
|
</Text>
|
|
|
|
<Group mt={30}>
|
|
<Link href="/docs" passHref>
|
|
<Button component="a" radius="sm" size="md">
|
|
Docs
|
|
</Button>
|
|
</Link>
|
|
<Link href="https://discordjs.guide" passHref>
|
|
<Button component="a" variant="default" radius="sm" size="md" rightIcon={<FiExternalLink />}>
|
|
Guide
|
|
</Button>
|
|
</Link>
|
|
</Group>
|
|
</Box>
|
|
<Box pb="xs">
|
|
<SyntaxHighlighter
|
|
wrapLongLines
|
|
language="typescript"
|
|
style={vscDarkPlus}
|
|
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
|
|
>
|
|
{`import { Client, GatewayIntentBits } from 'discord.js';
|
|
|
|
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
|
|
|
|
client.on('ready', () => {
|
|
console.log(\`Logged in as \${client.user.tag}!\`);
|
|
});
|
|
|
|
client.on('interactionCreate', async (interaction) => {
|
|
if (!interaction.isChatInputCommand()) return;
|
|
|
|
if (interaction.commandName === 'ping') {
|
|
await interaction.reply('Pong!');
|
|
}
|
|
});
|
|
|
|
await client.login('token');`}
|
|
</SyntaxHighlighter>
|
|
</Box>
|
|
</Box>
|
|
<Center>
|
|
<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss">
|
|
<a title="Vercel">
|
|
<Image
|
|
src="/powered-by-vercel.svg"
|
|
alt="Vercel"
|
|
width={0}
|
|
height={0}
|
|
style={{ height: '100%', width: '100%', maxWidth: 250 }}
|
|
/>
|
|
</a>
|
|
</Link>
|
|
</Center>
|
|
</Container>
|
|
);
|
|
}
|