mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 01:34:43 +12:00
refactor(website): revise landing page
This commit is contained in:
iCrawl
parent
eda118dae9
commit
24f17998c8
4 changed files with 71 additions and 50 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import { fileURLToPath } from 'node:url';
|
||||
import bundleAnalyzer from '@next/bundle-analyzer';
|
||||
|
||||
const withBundleAnalyzer = bundleAnalyzer({
|
||||
|
|
@ -23,6 +22,11 @@ export default withBundleAnalyzer({
|
|||
destination: '/logo.svg',
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: '/guide/:path*',
|
||||
destination: 'https://next.discordjs.guide/guide/:path*',
|
||||
permanent: true,
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@ import Image from 'next/image';
|
|||
import Link from 'next/link';
|
||||
import vercelLogo from '~/assets/powered-by-vercel.svg';
|
||||
import { Banner } from '~/components/Banner';
|
||||
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
|
||||
import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants';
|
||||
import { InstallButton } from '~/components/InstallButton';
|
||||
import { DESCRIPTION } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Banner />
|
||||
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
|
||||
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-24 px-8 pb-16 pt-12 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
|
||||
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
|
||||
<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
|
||||
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
|
||||
<div className="flex flex-col place-items-center gap-8 text-center">
|
||||
<h1 className="text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
|
||||
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
|
||||
Discord <br /> bots.
|
||||
Discord bots.
|
||||
</h1>
|
||||
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
|
||||
<div className="flex flex-row gap-4">
|
||||
|
|
@ -25,8 +25,14 @@ export default function Page() {
|
|||
>
|
||||
Docs
|
||||
</Link>
|
||||
{/* <Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href="/guide"
|
||||
>
|
||||
Guide
|
||||
</Link> */}
|
||||
<a
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
|
|
@ -34,7 +40,7 @@ export default function Page() {
|
|||
Guide <FiExternalLink />
|
||||
</a>
|
||||
<a
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
|
|
@ -42,31 +48,26 @@ export default function Page() {
|
|||
GitHub <FiExternalLink />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-xs sm:max-w-2xl">
|
||||
{/* @ts-expect-error async component */}
|
||||
<SyntaxHighlighter code={CODE_EXAMPLE} />
|
||||
<InstallButton />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row place-content-center">
|
||||
<a
|
||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
>
|
||||
<Image
|
||||
alt="Vercel"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={vercelLogo}
|
||||
width={212}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Vercel"
|
||||
>
|
||||
<Image
|
||||
alt="Vercel"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||
height={44}
|
||||
placeholder="blur"
|
||||
priority
|
||||
src={vercelLogo}
|
||||
width={212}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
34
apps/website/src/components/InstallButton.tsx
Normal file
34
apps/website/src/components/InstallButton.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
'use client';
|
||||
|
||||
import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
|
||||
import { FiCopy } from '@react-icons/all-files/fi/FiCopy';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCopyToClipboard } from 'react-use';
|
||||
|
||||
export function InstallButton() {
|
||||
const [interacted, setInteracted] = useState(false);
|
||||
const [state, copyToClipboard] = useCopyToClipboard();
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setInteracted(false), 2_000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [interacted]);
|
||||
|
||||
return (
|
||||
<button
|
||||
className="cursor-copy select-none bg-transparent px-4 py-2 text-sm text-dark-50"
|
||||
onClick={() => {
|
||||
setInteracted(true);
|
||||
copyToClipboard('npm install discord.js');
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<span className="font-semibold text-blurple">{'>'}</span> npm install discord.js{' '}
|
||||
{state.value && interacted ? (
|
||||
<FiCheck className="ml-1 inline-block text-green-500" />
|
||||
) : (
|
||||
<FiCopy className="ml-1 inline-block" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -21,23 +21,5 @@ export const METHOD_SEPARATOR = '#';
|
|||
export const DESCRIPTION =
|
||||
"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.";
|
||||
|
||||
export const CODE_EXAMPLE = `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);`;
|
||||
|
||||
export const DISCORD_API_TYPES_VERSION = 'v10';
|
||||
export const DISCORD_API_TYPES_DOCS_URL = `https://discord-api-types.dev/api/discord-api-types-${DISCORD_API_TYPES_VERSION}`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue