refactor(guide): next 13

2026-03-14 02:23:31 +01:00 · 2023-03-25 22:52:47 +01:00
parent d9a9500b40
commit fbd599d586
42 changed files with 2145 additions and 1698 deletions
--- a/apps/guide/src/app/error.tsx
+++ b/apps/guide/src/app/error.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+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 py-16 px-8 lg:py-0 lg:px-6">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
+		</div>
+	);
+}
--- a/apps/guide/src/app/global-error.tsx
+++ b/apps/guide/src/app/global-error.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Providers } from './providers';
+import { inter } from '~/util/fonts';
+
+export default function GlobalError({ error }: { error: Error }) {
+	console.error(error);
+
+	return (
+		<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 py-16 px-8 lg:py-0 lg:px-6">
+							<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
+							<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
+						</div>
+					</main>
+				</Providers>
+			</body>
+		</html>
+	);
+}
--- a/apps/guide/src/app/guide/[[...slug]]/page.tsx
+++ b/apps/guide/src/app/guide/[[...slug]]/page.tsx
@@ -0,0 +1,21 @@
+import { allContents } from 'contentlayer/generated';
+import { notFound } from 'next/navigation';
+import { Mdx } from '~/components/Mdx';
+
+export async function generateStaticParams() {
+	return allContents.map((content) => ({ slug: content.slug }));
+}
+
+export default function Page({ params }: { params: { slug: string[] } }) {
+	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
+
+	if (!content) {
+		notFound();
+	}
+
+	return (
+		<article className="prose mx-auto max-w-4xl py-8">
+			<Mdx code={content?.body.code ?? ''} />
+		</article>
+	);
+}
--- a/apps/guide/src/app/layout.tsx
+++ b/apps/guide/src/app/layout.tsx
@@ -0,0 +1,82 @@
+import { Analytics } from '@vercel/analytics/react';
+import type { Metadata } from 'next/types';
+import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
+import { DESCRIPTION } from '~/util/constants';
+import { inter, jetBrainsMono } from '~/util/fonts';
+
+import '@unocss/reset/tailwind-compat.css';
+import '~/styles/unocss.css';
+import '~/styles/cmdk.css';
+import '@code-hike/mdx/styles.css';
+import '~/styles/main.css';
+
+export const metadata: Metadata = {
+	title: 'discord.js',
+	description: DESCRIPTION,
+	viewport: {
+		minimumScale: 1,
+		initialScale: 1,
+		width: 'device-width',
+	},
+	icons: {
+		other: [
+			{
+				url: '/favicon-32x32.png',
+				sizes: '32x32',
+				type: 'image/png',
+			},
+			{
+				url: '/favicon-16x16.png',
+				sizes: '16x16',
+				type: 'image/png',
+			},
+		],
+		apple: [
+			'/apple-touch-icon.png',
+			{
+				url: '/safari-pinned-tab.svg',
+				rel: 'mask-icon',
+			},
+		],
+	},
+
+	manifest: '/site.webmanifest',
+
+	themeColor: '#5865f2',
+	colorScheme: 'light dark',
+
+	appleWebApp: {
+		title: 'discord.js',
+	},
+
+	applicationName: 'discord.js',
+
+	openGraph: {
+		siteName: 'discord.js',
+		type: 'website',
+		title: 'discord.js',
+		description: DESCRIPTION,
+		images: 'https://discordjs.dev/api/open-graph.png',
+	},
+
+	twitter: {
+		card: 'summary_large_image',
+		creator: '@iCrawlToGo',
+	},
+
+	other: {
+		'msapplication-TileColor': '#090a16',
+	},
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
+			<body className="dark:bg-dark-800 bg-light-600">
+				<Providers>{children}</Providers>
+				<Analytics />
+			</body>
+		</html>
+	);
+}
--- a/apps/guide/src/app/loading.tsx
+++ b/apps/guide/src/app/loading.tsx
@@ -0,0 +1,20 @@
+export default function Loading() {
+	return (
+		<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
+			<svg
+				className="h-9 w-9 animate-spin text-black dark:text-white"
+				fill="none"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+				<path
+					className="opacity-75 dark:opacity-100"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					fill="currentColor"
+				/>
+			</svg>
+			<div className="text-lg font-medium">Loading...</div>
+		</div>
+	);
+}
--- a/apps/guide/src/app/not-found.tsx
+++ b/apps/guide/src/app/not-found.tsx
@@ -0,0 +1,16 @@
+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 py-16 px-8 lg:py-0 lg:px-6">
+			<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"
+				href="/docs/packages"
+			>
+				Take me back
+			</Link>
+		</div>
+	);
+}
--- a/apps/guide/src/app/page.tsx
+++ b/apps/guide/src/app/page.tsx
@@ -0,0 +1,26 @@
+import Image from 'next/image';
+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 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
+			<div className="flex flex-row place-content-center">
+				<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"
+						priority
+						src={vercelLogo}
+					/>
+				</a>
+			</div>
+		</div>
+	);
+}
--- a/apps/guide/src/app/providers.tsx
+++ b/apps/guide/src/app/providers.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+
+export function Providers({ children }: PropsWithChildren) {
+	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+}