-
-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(guide): bring guide up to speed
- Loading branch information
Showing
39 changed files
with
1,543 additions
and
970 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import type { PropsWithChildren } from 'react'; | ||
import { Providers } from './providers'; | ||
import Footer from '~/components/Footer'; | ||
import Header from '~/components/Header'; | ||
import { Nav } from '~/components/Nav'; | ||
|
||
export default function Layout({ children }: PropsWithChildren) { | ||
return ( | ||
<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_-_100px)]"> | ||
<Nav /> | ||
</div> | ||
|
||
<div className="min-w-xs mx-auto w-full max-w-5xl pb-10"> | ||
{children} | ||
<Footer /> | ||
</div> | ||
</div> | ||
</main> | ||
</Providers> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
'use client'; | ||
|
||
import type { PropsWithChildren } from 'react'; | ||
import { NavProvider } from '~/contexts/nav'; | ||
|
||
export function Providers({ children }: PropsWithChildren) { | ||
return <NavProvider>{children}</NavProvider>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import Image from 'next/image'; | ||
import vercelLogo from '~/assets/powered-by-vercel.svg'; | ||
|
||
export default function Footer() { | ||
return ( | ||
<footer className="dark:bg-dark-800 bg-light-600 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"> | ||
<a | ||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" | ||
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" | ||
src={vercelLogo} | ||
/> | ||
</a> | ||
<div className="flex flex-row gap-6 md:gap-12"> | ||
<div className="flex flex-col gap-2"> | ||
<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" | ||
href="https://discord.gg/djs" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
Discord | ||
</a> | ||
<a | ||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" | ||
href="https://github.com/discordjs/discord.js/discussions" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
GitHub discussions | ||
</a> | ||
</div> | ||
</div> | ||
<div className="flex flex-col gap-2"> | ||
<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" | ||
href="https://github.com/discordjs/discord.js" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
discord.js | ||
</a> | ||
<a | ||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" | ||
href="https://discordjs.guide" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
discord.js guide | ||
</a> | ||
<a | ||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring" | ||
href="https://discord-api-types.dev" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
discord-api-types | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
'use client'; | ||
|
||
import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted'; | ||
import { VscMenu } from '@react-icons/all-files/vsc/VscMenu'; | ||
import { Button } from 'ariakit/button'; | ||
import dynamic from 'next/dynamic'; | ||
import Link from 'next/link'; | ||
import { usePathname } from 'next/navigation'; | ||
import { Fragment, useMemo } from 'react'; | ||
import { useNav } from '~/contexts/nav'; | ||
|
||
const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher')); | ||
|
||
export default function Header() { | ||
const pathname = usePathname(); | ||
const { setOpened } = useNav(); | ||
|
||
const pathElements = useMemo( | ||
() => | ||
pathname | ||
.split('/') | ||
.slice(1) | ||
.map((path, idx, original) => ( | ||
<Link | ||
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring" | ||
href={`/${original.slice(0, idx + 1).join('/')}`} | ||
key={`${path}-${idx}`} | ||
> | ||
{path} | ||
</Link> | ||
)), | ||
[pathname], | ||
); | ||
|
||
const breadcrumbs = useMemo( | ||
() => | ||
pathElements.flatMap((el, idx, array) => { | ||
if (idx === 0) { | ||
return ( | ||
<Fragment key={`${el.key}-${idx}`}> | ||
<div className="mx-2">/</div> | ||
{el} | ||
<div className="mx-2">/</div> | ||
</Fragment> | ||
); | ||
} | ||
|
||
if (idx !== array.length - 1) { | ||
return ( | ||
<Fragment key={`${el.key}-${idx}`}> | ||
{el} | ||
<div className="mx-2">/</div> | ||
</Fragment> | ||
); | ||
} | ||
|
||
return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>; | ||
}), | ||
[pathElements], | ||
); | ||
|
||
return ( | ||
<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md"> | ||
<div className="block h-16 px-6"> | ||
<div className="flex h-full 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" | ||
onClick={() => setOpened((open) => !open)} | ||
> | ||
<VscMenu size={24} /> | ||
</Button> | ||
<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div> | ||
<div className="flex flex-row place-items-center gap-4"> | ||
<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" | ||
href="https://github.com/discordjs/discord.js" | ||
rel="noopener noreferrer" | ||
target="_blank" | ||
> | ||
<VscGithubInverted size={24} /> | ||
</Button> | ||
<ThemeSwitcher /> | ||
</div> | ||
</div> | ||
</div> | ||
</header> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
'use client'; | ||
|
||
import { Scrollbars } from 'react-custom-scrollbars-2'; | ||
import { Sidebar } from './Sidebar'; | ||
import { useNav } from '~/contexts/nav'; | ||
|
||
export function Nav() { | ||
const { opened } = useNav(); | ||
|
||
return ( | ||
<nav | ||
className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${ | ||
opened ? 'block' : 'hidden' | ||
} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`} | ||
> | ||
<Scrollbars | ||
autoHide | ||
className="[&>div]:overscroll-none" | ||
hideTracksWhenNotNeeded | ||
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />} | ||
renderTrackVertical={(props) => ( | ||
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" /> | ||
)} | ||
universal | ||
> | ||
<Sidebar /> | ||
</Scrollbars> | ||
</nav> | ||
); | ||
} |
Oops, something went wrong.
3d2f4b4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
discord-js-guide – ./apps/guide
discord-js-guide.vercel.app
discord-js-guide-discordjs.vercel.app
discord-js-guide-git-main-discordjs.vercel.app
next.discordjs.guide
guide.discordjs.dev
3d2f4b4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
discord-js – ./apps/website
discord-js-discordjs.vercel.app
discord-js-number-one.vercel.app
discordjs.dev
discord-js-git-main-discordjs.vercel.app
www.discordjs.dev
discord.js.org