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

chore(website): add banner

Browse Source
This commit is contained in:
iCrawl
2023-04-15 14:03:03 +02:00
parent bcb48fea3e
commit 49627b1f46
8 changed files with 85 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/guide/src/app/page.tsx
View File

@@ -8,7 +8,7 @@ export default function Page() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
title="Vercel" title="Vercel"
> >

12
apps/guide/src/components/Footer.tsx
View File

@@ -9,7 +9,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
title="Vercel" title="Vercel"
> >
@@ -27,7 +27,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs" href="https://discord.gg/djs"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
Discord Discord
@@ -35,7 +35,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions" href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
GitHub discussions GitHub discussions
@@ -48,14 +48,14 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
discord.js discord.js
</a> </a>
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.js.org/docs/" href="https://discord.js.org/docs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
@@ -64,7 +64,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev" href="https://discord-api-types.dev"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
discord-api-types discord-api-types

2
apps/guide/src/components/Header.tsx
View File

@@ -77,7 +77,7 @@ export default function Header() {
as="a" as="a"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple" className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
<VscGithubInverted size={24} /> <VscGithubInverted size={24} />

4
apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
View File

@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { Providers } from './providers'; import { Providers } from './providers';
import { fetchModelJSON, fetchVersions } from '~/app/docAPI'; import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
import { Banner } from '~/components/Banner';
import { CmdKDialog } from '~/components/CmdK'; import { CmdKDialog } from '~/components/CmdK';
import { Nav } from '~/components/Nav'; import { Nav } from '~/components/Nav';
import type { SidebarSectionItemData } from '~/components/Sidebar'; import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -69,9 +70,10 @@ export default async function PackageLayout({ children, params }: PropsWithChild
return ( return (
<Providers> <Providers>
<Banner />
<main className="mx-auto max-w-7xl px-4 lg:max-w-full"> <main className="mx-auto max-w-7xl px-4 lg:max-w-full">
<Header /> <Header />
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex"> <div className="relative top-2.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]"> <div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} /> <Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
</div> </div>

106
apps/website/src/app/page.tsx
View File

@@ -2,66 +2,70 @@ import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import vercelLogo from '~/assets/powered-by-vercel.svg'; import vercelLogo from '~/assets/powered-by-vercel.svg';
import { Banner } from '~/components/Banner';
import { SyntaxHighlighter } from '~/components/SyntaxHighlighter'; import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants'; import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants';
export default function Page() { export default function Page() {
return ( return (
<div className="mx-auto max-w-6xl min-h-screen flex flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0"> <div className="min-h-screen">
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6"> <Banner />
<div className="max-w-lg flex flex-col gap-3 lg:mr-8"> <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-0">
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight"> <div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build <div className="max-w-lg flex flex-col gap-3 lg:mr-8">
Discord <br /> bots. <h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
</h1> The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p> Discord <br /> bots.
<div className="flex flex-row gap-4"> </h1>
<Link <p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
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-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white" <div className="flex flex-row gap-4">
href="/docs" <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-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
Docs href="/docs"
</Link> >
<a Docs
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-0 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" </Link>
href="https://discordjs.guide" <a
rel="noopener noreferrer" 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-0 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"
target="_blank" href="https://discordjs.guide"
> rel="noopener noreferrer"
Guide <FiExternalLink /> target="_blank"
</a> >
<a Guide <FiExternalLink />
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-0 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" </a>
href="https://github.com/discordjs/discord.js" <a
rel="noopener noreferrer" 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-0 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"
target="_blank" href="https://github.com/discordjs/discord.js"
> rel="external noopener noreferrer"
GitHub <FiExternalLink /> target="_blank"
</a> >
GitHub <FiExternalLink />
</a>
</div>
</div>
<div className="max-w-xs sm:max-w-2xl">
{/* @ts-expect-error async component */}
<SyntaxHighlighter code={CODE_EXAMPLE} />
</div> </div>
</div> </div>
<div className="max-w-xs sm:max-w-6xl"> <div className="flex flex-row place-content-center">
{/* @ts-expect-error async component */} <a
<SyntaxHighlighter code={CODE_EXAMPLE} /> className="rounded outline-0 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=="
placeholder="blur"
priority
src={vercelLogo}
/>
</a>
</div> </div>
</div> </div>
<div className="flex flex-row place-content-center">
<a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
title="Vercel"
>
<Image
alt="Vercel"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
placeholder="blur"
priority
src={vercelLogo}
/>
</a>
</div>
</div> </div>
); );
} }

13
apps/website/src/components/Banner.tsx Normal file
View File

@@ -0,0 +1,13 @@
export function Banner() {
return (
<div className="mb-6 bg-blurple px-4 py-2 text-center text-sm text-white">
You are reading the documentation for the <strong>next</strong> version of discord.js. Documentation for v13/v14+
has been moved to{' '}
<strong>
<a href="https://old.discordjs.dev/#/docs" rel="external noopener noreferrer" target="_blank">
old.discordjs.dev
</a>
</strong>
</div>
);
}

10
apps/website/src/components/Footer.tsx
View File

@@ -9,7 +9,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
title="Vercel" title="Vercel"
> >
@@ -27,7 +27,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs" href="https://discord.gg/djs"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
Discord Discord
@@ -35,7 +35,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions" href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
GitHub discussions GitHub discussions
@@ -48,7 +48,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
discord.js discord.js
@@ -64,7 +64,7 @@ export default function Footer() {
<a <a
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev" href="https://discord-api-types.dev"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
discord-api-types discord-api-types

2
apps/website/src/components/Header.tsx
View File

@@ -94,7 +94,7 @@ export default function Header() {
as="a" as="a"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple" className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js" href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer" rel="external noopener noreferrer"
target="_blank" target="_blank"
> >
<VscGithubInverted size={24} /> <VscGithubInverted size={24} />