Skip to content

Commit

Permalink
chore(guide): bring guide up to speed
Browse files Browse the repository at this point in the history
  • Loading branch information
iCrawl committed Apr 9, 2023
1 parent bfee6c8 commit 3d2f4b4
Show file tree
Hide file tree
Showing 39 changed files with 1,543 additions and 970 deletions.
5 changes: 3 additions & 2 deletions apps/guide/contentlayer.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files';
// import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm';
import codeHikeThemeDarkPlus from './src/styles/code-hike-theme-dark-plus.json';

export const Content = defineDocumentType(() => ({
name: 'Content',
Expand All @@ -30,7 +31,7 @@ export const Content = defineDocumentType(() => ({
},
url: {
type: 'string',
resolve: (post) => `/posts/${post._raw.flattenedPath}`,
resolve: (post) => `/guide/${post._raw.flattenedPath}`,
},
},
}));
Expand Down Expand Up @@ -67,7 +68,7 @@ export default makeSource({
contentDirPath: 'src/content',
documentTypes: [Content],
mdx: {
remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: 'css-variables', lineNumbers: true }]],
remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: codeHikeThemeDarkPlus, lineNumbers: true }]],
rehypePlugins: [
rehypeSlug,
// [
Expand Down
8 changes: 4 additions & 4 deletions apps/guide/next.config.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// import { fileURLToPath } from 'node:url';
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/no-require-imports */
// import bundleAnalyzer from '@next/bundle-analyzer';
// import { withContentlayer } from 'next-contentlayer';
const { fileURLToPath } = require('node:url');
const bundleAnalyzer = require('@next/bundle-analyzer');
const { withContentlayer } = require('next-contentlayer');

const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});

module.exports = withContentlayer(
withBundleAnalyzer({
module.exports = withBundleAnalyzer(
withContentlayer({
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
Expand Down
18 changes: 9 additions & 9 deletions apps/guide/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@
},
"homepage": "https://discord.js.org",
"dependencies": {
"@code-hike/mdx": "^0.7.5-next.0",
"@code-hike/mdx": "^0.8.1",
"@discordjs/ui": "workspace:^",
"@react-icons/all-files": "^4.1.0",
"@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.6",
"@vercel/og": "^0.5.0",
"@vercel/og": "^0.5.1",
"ariakit": "^2.0.0-next.43",
"cmdk": "^0.2.0",
"contentlayer": "^0.3.1",
Expand All @@ -65,6 +65,7 @@
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.1.0",
"remark-gfm": "^3.0.1",
"server-only": "^0.0.1",
"sharp": "^0.32.0"
},
"devDependencies": {
Expand All @@ -74,26 +75,25 @@
"@types/node": "18.15.11",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@unocss/cli": "^0.50.7",
"@unocss/reset": "^0.50.7",
"@unocss/cli": "^0.51.0",
"@unocss/reset": "^0.51.0",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.37.0",
"eslint-config-neon": "^0.1.41",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",
"eslint-formatter-pretty": "^5.0.0",
"happy-dom": "^9.1.9",
"hast-util-to-string": "^2.0.0",
"hastscript": "^7.2.0",
"html-escaper": "^3.0.3",
"lighthouse": "^10.1.0",
"prettier": "^2.8.7",
"prettier-plugin-astro": "^0.8.0",
"prettier-plugin-tailwindcss": "^0.2.7",
"typescript": "^5.0.4",
"unocss": "^0.50.7",
"vercel": "^28.18.3",
"unocss": "^0.51.0",
"vercel": "^28.18.4",
"vitest": "^0.29.8"
},
"engines": {
Expand Down
2 changes: 1 addition & 1 deletion apps/guide/src/app/error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);

return (
<div className="mx-auto flex h-full 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 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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/guide/src/app/global-error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export default function GlobalError({ error }: { error: Error }) {
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600">
<Providers>
<main className="mx-auto h-screen max-w-2xl">
<div className="mx-auto flex 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 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">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/guide/src/app/guide/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
import { Mdx } from '~/components/Mdx';

export async function generateStaticParams() {
return allContents.map((content) => ({ slug: content.slug }));
return allContents.map((content) => ({ slug: [content.slug] }));
}

export default function Page({ params }: { params: { slug: string[] } }) {
Expand All @@ -14,7 +14,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
}

return (
<article className="prose mx-auto max-w-4xl py-8">
<article className="prose max-w-none">
<Mdx code={content?.body.code ?? ''} />
</article>
);
Expand Down
25 changes: 25 additions & 0 deletions apps/guide/src/app/guide/layout.tsx
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>
);
}
8 changes: 8 additions & 0 deletions apps/guide/src/app/guide/providers.tsx
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>;
}
5 changes: 4 additions & 1 deletion apps/guide/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,10 @@ export const metadata: Metadata = {

manifest: '/site.webmanifest',

themeColor: '#5865f2',
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
{ media: '(prefers-color-scheme: dark)', color: '#181818' },
],
colorScheme: 'light dark',

appleWebApp: {
Expand Down
79 changes: 79 additions & 0 deletions apps/guide/src/components/Footer.tsx
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>
);
}
91 changes: 91 additions & 0 deletions apps/guide/src/components/Header.tsx
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>
);
}
30 changes: 30 additions & 0 deletions apps/guide/src/components/Nav.tsx
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>
);
}
Loading

2 comments on commit 3d2f4b4

@vercel
Copy link

@vercel vercel bot commented on 3d2f4b4 Apr 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 3d2f4b4 Apr 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.