feat(docs): initialize fumadocs

.gitignore

@@ -1,5 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# generated content
+.contentlayer
+.content-collections
+.source
+
 # dependencies
 /node_modules
 /.pnp

app/(home)/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/app/layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+	return (
+		<HomeLayout {...baseOptions}>
+			<div className="bg-background pt-8 md:pt-16">{children}</div>
+		</HomeLayout>
+	);
+}

app/page.tsx → app/(home)/page.tsx

@@ -13,16 +13,8 @@ import {
 export default function Home() {
 	return (
 		<div className="mx-auto flex min-h-svh max-w-3xl flex-col gap-8 px-4 py-8">
-			<header className="flex flex-col gap-1">
-				<h1 className="font-bold text-3xl tracking-tight">
-					Discord Components
-				</h1>
-				<p className="text-muted-foreground">
-					A collection of discord components for integrating discord UIs into
-					your project.
-				</p>
-			</header>
 			<main className="flex flex-1 flex-col gap-8">
+				<h1 className="font-bold text-3xl">Examples</h1>
 				<div className="relative flex min-h-[450px] flex-col gap-4 rounded-lg border p-4">
 					<div className="flex items-center justify-between">
 						<h2 className="text-muted-foreground text-sm sm:pl-3">
@@ -398,7 +390,7 @@ export default function Home() {
 					<p className="text-muted-foreground text-sm">
 						Made with <span>❤️</span> by{" "}
 						<a
-							className="text-white/80 hover:underline"
+							className="text-foreground/80 hover:underline"
 							href="https://woofer21.com/"
 							target="_blank"
 							rel="noreferrer"
@@ -407,7 +399,7 @@ export default function Home() {
 						</a>{" "}
 						and{" "}
 						<a
-							className="text-white/80 hover:underline"
+							className="text-foreground/80 hover:underline"
 							href="https://github.com/Would-You-Bot/discord-components/graphs/contributors"
 							target="_blank"
 							rel="noreferrer"
@@ -417,7 +409,7 @@ export default function Home() {
 						!
 					</p>
 					<a
-						className="text-white/80 hover:underline"
+						className="text-foreground/80 hover:underline"
 						target="_blank"
 						rel="noreferrer"
 						href="https://wouldyoubot.gg/legal"

app/api/search/route.ts

@@ -0,0 +1,6 @@
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";
+
+export const { GET } = createFromSource(source, {
+	language: "english"
+});

app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,108 @@
+import { source } from "@/lib/source";
+import {
+	DocsPage,
+	DocsBody,
+	DocsDescription,
+	DocsTitle
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { getMDXComponents } from "@/mdx-components";
+import { getGithubLastEdit, getPageTreePeers } from "fumadocs-core/server";
+import type { Metadata } from "next";
+import { Card, Cards } from "fumadocs-ui/components/card";
+
+export default async function Page(props: {
+	params: Promise<{ slug?: string[] }>;
+}) {
+	const params = await props.params;
+	const page = source.getPage(params.slug);
+	if (!page) {
+		notFound();
+	}
+
+	const MDXContent = page.data.body;
+
+	const time = await getGithubLastEdit({
+		owner: "Would-You-Bot",
+		repo: "discord-components",
+		path: `content/docs/${page.path}`
+	});
+
+	return (
+		<DocsPage
+			toc={page.data.toc}
+			full={page.data.full}
+			tableOfContent={{
+				style: "clerk"
+			}}
+			lastUpdate={time ? new Date(time) : undefined}
+		>
+			<DocsTitle>{page.data.title}</DocsTitle>
+			<DocsDescription>{page.data.description}</DocsDescription>
+			<DocsBody>
+				<MDXContent
+					components={getMDXComponents({
+						// this allows you to link to other pages with relative file paths
+						a: createRelativeLink(source, page),
+						DocsCategory: ({ url }) => {
+							return <DocsCategory url={url ?? page.url} />;
+						}
+					})}
+				/>
+			</DocsBody>
+		</DocsPage>
+	);
+}
+
+function DocsCategory({ url }: { url: string }) {
+	return (
+		<Cards>
+			{getPageTreePeers(source.pageTree, url).map((peer) => (
+				<Card
+					key={peer.url}
+					title={peer.name}
+					href={peer.url}
+				>
+					{peer.description}
+				</Card>
+			))}
+		</Cards>
+	);
+}
+
+export function generateStaticParams() {
+	return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+	params: Promise<{ slug: string[] }>;
+}): Promise<Metadata> {
+	const { slug = [] } = await props.params;
+	const page = source.getPage(slug);
+	if (!page) {
+		notFound();
+	}
+
+	const description =
+		page.data.description ||
+		"A collection of discord components for integrating discord UIs into your project.";
+
+	const image = {
+		url: ["/og", ...slug, "image.png"].join("/"),
+		width: 1200,
+		height: 630
+	};
+
+	return {
+		title: `${page.data.title} | Discord Components`,
+		description,
+		openGraph: {
+			images: [image]
+		},
+		twitter: {
+			card: "summary_large_image",
+			images: [image]
+		}
+	};
+}

app/docs/layout.tsx

@@ -0,0 +1,15 @@
+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 }: { children: ReactNode }) {
+	return (
+		<DocsLayout
+			tree={source.pageTree}
+			{...baseOptions}
+		>
+			{children}
+		</DocsLayout>
+	);
+}

app/globals.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
 
 @custom-variant dark (&:is(.dark *));
 

app/layout.config.tsx

@@ -0,0 +1,33 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+	subsets: ["latin"],
+	weight: ["400", "500", "600", "700"]
+});
+
+/**
+ * Shared layout configurations
+ *
+ * you can customise layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: BaseLayoutProps = {
+	themeSwitch: {
+		enabled: false, // TODO: Add better theme colors
+		mode: "light-dark"
+	},
+	nav: {
+		title: (
+			<>
+				<div className={`${inter.className} font-bold text-2xl`}>
+					Discord Components
+				</div>
+			</>
+		)
+	},
+	// see https://fumadocs.dev/docs/ui/navigation/links
+	links: [],
+	githubUrl: "https://github.com/Would-You-Bot/discord-components"
+};

app/layout.tsx

@@ -1,7 +1,8 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import type React from "react";
 import "./globals.css";
+import { RootProvider } from "fumadocs-ui/provider";
+import { Geist, Geist_Mono } from "next/font/google";
+import type { ReactNode } from "react";
+import type { Metadata, Viewport } from "next";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -13,21 +14,42 @@ const geistMono = Geist_Mono({
 	subsets: ["latin"]
 });
 
+export const viewport: Viewport = {
+	themeColor: "#059af6",
+	maximumScale: 5,
+	minimumScale: 1,
+	initialScale: 1
+};
+
 export const metadata: Metadata = {
+	metadataBase: new URL("https://discord-components.com"),
 	title: "Discord Components",
 	description:
-		"A collection of discord components for integrating discord UIs into your project."
+		"A collection of discord components for integrating discord UIs into your project.",
+	robots: "index, follow",
+	publisher: "Would You",
+	openGraph: {
+		title: "Discord Components",
+		description:
+			"A collection of discord components for integrating discord UIs into your project.",
+		type: "website",
+		url: "https://discord-components.com",
+		locale: "en_US"
+	},
+	twitter: {
+		title: "Discord Components",
+		description:
+			"A collection of discord components for integrating discord UIs into your project."
+	},
+	pinterest: { richPin: true }
 };
 
-export default function RootLayout({
-	children
-}: Readonly<{
-	children: React.ReactNode;
-}>) {
+export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<html
 			lang="en"
 			className="dark"
+			suppressHydrationWarning
 		>
 			<script
 				src="https://app.databuddy.cc/databuddy.js"
@@ -40,9 +62,9 @@ export default function RootLayout({
 				async
 			/>
 			<body
-				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+				className={`${geistSans.variable} ${geistMono.variable} flex min-h-screen flex-col antialiased`}
 			>
-				{children}
+				<RootProvider>{children}</RootProvider>
 			</body>
 		</html>
 	);