docs: guide setup (#10862)

apps/guide/src/app/api/search/route.ts

@@ -0,0 +1,4 @@
+import { createFromSource } from 'fumadocs-core/search/server';
+import { source } from '@/lib/source';
+
+export const { GET } = createFromSource(source);

apps/guide/src/app/docs-og/[...slug]/route.tsx

@@ -0,0 +1,36 @@
+import { generateOGImage } from 'fumadocs-ui/og';
+import { notFound } from 'next/navigation';
+import { source } from '@/lib/source';
+
+export function generateStaticParams() {
+	return source.generateParams().map((page) => ({
+		...page,
+		slug: [...page.slug, 'image.png'],
+	}));
+}
+
+export async function GET(_req: Request, { params }: { params: Promise<{ slug: string[] }> }) {
+	const { slug } = await params;
+	const page = source.getPage(slug.slice(0, -1));
+	// const fontData = await fetch(new URL('../../../assets/Geist-Regular.ttf', import.meta.url), {
+	// next: { revalidate: 604_800 },
+	// }).then(async (res) => res.arrayBuffer());
+
+	if (!page) {
+		notFound();
+	}
+
+	return generateOGImage({
+		title: page.data.title,
+		description: page.data.description,
+		site: 'discord.js Guide',
+		// fonts: [
+		// 	{
+		// 		name: 'Geist',
+		// 		data: fontData,
+		// 		weight: 900,
+		// 		style: 'normal',
+		// 	},
+		// ],
+	});
+}

apps/guide/src/app/guide/[[...slug]]/page.tsx

@@ -0,0 +1,53 @@
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { source } from '@/lib/source';
+import { getMDXComponents } from '@/mdx-components';
+
+export async function generateStaticParams() {
+	return source.generateParams();
+}
+
+export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
+	const params = await props.params;
+	const page = source.getPage(params.slug);
+
+	if (!page) {
+		notFound();
+	}
+
+	const image = ['/docs-og', ...(params.slug ?? []), 'image.png'].join('/');
+	return {
+		title: page.data.title,
+		description: page.data.description,
+		openGraph: {
+			images: image,
+		},
+		twitter: {
+			card: 'summary_large_image',
+			images: image,
+		},
+	} satisfies Metadata;
+}
+
+export default async function Page(props: { readonly params: Promise<{ slug?: string[] }> }) {
+	const params = await props.params;
+	const page = source.getPage(params.slug);
+
+	if (!page) {
+		notFound();
+	}
+
+	const MDX = page.data.body;
+
+	return (
+		<DocsPage full={page.data.full!} toc={page.data.toc}>
+			<DocsTitle>{page.data.title}</DocsTitle>
+			<DocsDescription>{page.data.description}</DocsDescription>
+			<DocsBody>
+				{/* eslint-disable-next-line @stylistic/jsx/jsx-pascal-case */}
+				<MDX components={getMDXComponents()} />
+			</DocsBody>
+		</DocsPage>
+	);
+}

apps/guide/src/app/guide/layout.tsx

@@ -0,0 +1,12 @@
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import type { ReactNode } from 'react';
+import { baseOptions } from '@/app/layout.config';
+import { source } from '@/lib/source';
+
+export default function Layout({ children }: { readonly children: ReactNode }) {
+	return (
+		<DocsLayout tree={source.pageTree} {...baseOptions}>
+			{children}
+		</DocsLayout>
+	);
+}

apps/guide/src/app/layout.config.tsx

@@ -0,0 +1,7 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+
+export const baseOptions: BaseLayoutProps = {
+	nav: {
+		title: 'discord.js Guide',
+	},
+};

apps/guide/src/app/layout.tsx

@@ -0,0 +1,81 @@
+import { Analytics } from '@vercel/analytics/react';
+import { RootProvider } from 'fumadocs-ui/provider';
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
+import type { Metadata, Viewport } from 'next';
+import type { PropsWithChildren } from 'react';
+import { ENV } from '@/util/env';
+
+import '@/styles/base.css';
+
+export const viewport: Viewport = {
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#fbfbfb' },
+		{ media: '(prefers-color-scheme: dark)', color: '#1a1a1e' },
+	],
+	colorScheme: 'light dark',
+};
+
+export const metadata: Metadata = {
+	metadataBase: new URL(ENV.IS_LOCAL_DEV ? `http://localhost:${ENV.PORT}` : 'https://discord.js.org'),
+	title: {
+		template: '%s | discord.js',
+		default: 'discord.js',
+	},
+	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',
+
+	appleWebApp: {
+		title: 'discord.js',
+	},
+
+	applicationName: 'discord.js',
+
+	openGraph: {
+		siteName: 'discord.js',
+		type: 'website',
+		title: 'discord.js',
+		images: 'https://discordjs.dev/api/open-graph.png',
+	},
+
+	twitter: {
+		card: 'summary_large_image',
+		creator: '@iCrawlToGo',
+	},
+
+	other: {
+		'msapplication-TileColor': '#1a1a1e',
+	},
+};
+
+export default async function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} lang="en" suppressHydrationWarning>
+			<body className="overscroll-y-none">
+				<RootProvider>{children}</RootProvider>
+				<Analytics />
+			</body>
+		</html>
+	);
+}

apps/guide/src/assets/powered-by-vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="212" height="44" fill="none"><rect width="212" height="44" fill="#000" rx="8"/><path fill="#fff" d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257Zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75Zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36Zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148Zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422Zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477Zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04Zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 0 0-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5Zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477Zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4Zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358Zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148Zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492Zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148Zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047Zm17.391-3.047 3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32Zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836Zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5Zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844Zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835Zm3.625 2.352h1.937V14.648h-1.937V26.5ZM23.325 13l9.325 16H14l9.325-16Z"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>

apps/guide/src/lib/source.ts

@@ -0,0 +1,7 @@
+import { loader } from 'fumadocs-core/source';
+import { docs } from '../../.source';
+
+export const source = loader({
+	baseUrl: '/guide',
+	source: docs.toFumadocsSource(),
+});

apps/guide/src/mdx-components.tsx

@@ -0,0 +1,13 @@
+import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+	return {
+		...defaultMdxComponents,
+		Popup,
+		PopupContent,
+		PopupTrigger,
+		...components,
+	};
+}

apps/guide/src/styles/base.css

@@ -0,0 +1,26 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+@import 'fumadocs-twoslash/twoslash.css';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--font-sans: var(--font-geist-sans);
+	--font-mono: var(--font-geist-mono);
+}
+
+@layer base {
+	* {
+		font-family: var(--font-roboto);
+		text-rendering: optimizeLegibility;
+
+		scrollbar-width: thin;
+	}
+}
+
+@utility scrollbar-hidden {
+	scrollbar-width: none;
+}

apps/guide/src/util/env.ts

@@ -0,0 +1,5 @@
+export const ENV = {
+	IS_LOCAL_DEV: process.env.VERCEL_ENV === 'development' || process.env.NEXT_PUBLIC_LOCAL_DEV === 'true',
+	IS_PREVIEW: process.env.VERCEL_ENV === 'preview',
+	PORT: process.env.PORT ?? 3_001,
+};