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

chore: storybook

Browse Source
This commit is contained in:
iCrawl
2023-04-13 19:09:56 +02:00
parent 8218ffc78d
commit e5859b41cf
91 changed files with 3660 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

6
apps/guide/src/app/global-error.tsx
View File

@@ -8,10 +8,10 @@ export default function GlobalError({ error }: { error: Error }) {
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>
<main className="mx-auto min-h-screen max-w-2xl">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<main className="mx-auto max-w-2xl min-h-screen">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

2
apps/guide/src/app/guide/[[...slug]]/page.tsx
View File

@@ -14,7 +14,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
}
return (
<article className="prose max-w-none">
<article className="max-w-none prose">
<Mdx code={content?.body.code ?? ''} />
</article>
);

6
apps/guide/src/app/guide/layout.tsx
View File

@@ -9,12 +9,12 @@ export default function Layout({ children }: PropsWithChildren) {
<Providers>
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
<Header />
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_105px)]">
<div className="relative top-6 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)]">
<Nav />
</div>
<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
{children}
<Footer />
</div>

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

@@ -77,7 +77,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-600 bg-light-600 dark:text-light-900">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>{children}</Providers>
<Analytics />
</body>

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

@@ -1,6 +1,6 @@
export default function Loading() {
return (
<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
<div className="mx-4 min-h-screen flex flex-col items-center justify-center gap-4">
<svg
className="h-9 w-9 animate-spin text-black dark:text-white"
fill="none"

4
apps/guide/src/app/not-found.tsx
View File

@@ -2,11 +2,11 @@ import Link from 'next/link';
export default function NotFound() {
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
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"
href="/guide"
>
Take me back

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

@@ -3,10 +3,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<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="flex flex-row place-content-center">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
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"

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

@@ -2,7 +2,7 @@ import { FiExternalLink } from 'react-icons/fi';
export function ExternalLink({ href, title }: { href: string; title: string }) {
return (
<a className="text-blurple inline-flex place-items-center gap-2 text-sm font-semibold" href={href}>
<a className="inline-flex place-items-center gap-2 text-sm font-semibold text-blurple" href={href}>
<p>{title}</p>
<FiExternalLink size={18} />
</a>

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

@@ -4,10 +4,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="md:pl-12 md:pr-12">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
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"
@@ -25,7 +25,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
@@ -33,7 +33,7 @@ export default function Footer() {
Discord
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
@@ -46,7 +46,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
@@ -54,7 +54,7 @@ export default function Footer() {
discord.js
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.js.org/docs/"
rel="noopener noreferrer"
target="_blank"
@@ -62,7 +62,7 @@ export default function Footer() {
discord.js documentation
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"

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

@@ -22,7 +22,7 @@ export default function Header() {
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={`${path}-${idx}`}
>
@@ -60,12 +60,12 @@ export default function Header() {
);
return (
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
<div className="h-full flex flex-row place-content-between place-items-center gap-8">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
@@ -75,7 +75,7 @@ export default function Header() {
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
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"
rel="noopener noreferrer"
target="_blank"

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

@@ -17,7 +17,7 @@ export function Nav() {
autoHide
className="[&>div]:overscroll-none"
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

4
apps/guide/src/components/Outline.tsx
View File

@@ -43,7 +43,7 @@ export function Outline({ headings }: { headings: MarkdownHeading[] }) {
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
@@ -57,7 +57,7 @@ export function Outline({ headings }: { headings: MarkdownHeading[] }) {
<div className="ml-2 mt-4 flex flex-col gap-2">
<div className="relative flex flex-col">
<div
className="bg-blurple absolute h-[10px] w-[10px] rounded-full border-2 border-black dark:border-white"
className="absolute h-[10px] w-[10px] border-2 border-black rounded-full bg-blurple dark:border-white"
style={{
left: INDICATOR_SIZE / 2 + 0.5,
transform: `translateY(${active * LINK_HEIGHT + INDICATOR_OFFSET}px)`,

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

@@ -1,7 +1,7 @@
export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
return (
<a
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded px-4 py-3 leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-0 active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
href={url}
>
<h3 className="text-md font-semibold">{title}</h3>

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

@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
return (
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
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"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />