feat: rewrite docs site

apps/docs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

apps/docs/.gitignore

@@ -1,35 +1,28 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# deps
 /node_modules
-/.pnp
-.pnp.js
 
-# testing
-/coverage
+# generated content
+.contentlayer
+.content-collections
+.source
 
-# next.js
+# test & build
+/coverage
 /.next/
 /out/
-
-# production
 /build
+*.tsbuildinfo
 
 # misc
 .DS_Store
 *.pem
-
-# debug
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
+# others
 .env*.local
-
-# vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+next-env.d.ts

apps/docs/README.md

@@ -0,0 +1,26 @@
+# docs
+
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs

apps/docs/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;
+}): React.ReactElement {
+  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+}

apps/docs/app/(home)/page.tsx

@@ -0,0 +1,115 @@
+import { Card, Cards } from '@/components/card';
+import { Heading } from '@/components/heading';
+import Link from 'next/link';
+
+// export default function HomePage() {
+//   return (
+//     <main className="flex flex-1 flex-col justify-center text-center">
+//       <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
+//       <p className="text-fd-muted-foreground">
+//         You can open{' '}
+//         <Link
+//           href="/docs"
+//           className="text-fd-foreground font-semibold underline"
+//         >
+//           /docs
+//         </Link>{' '}
+//         and see the documentation.
+//       </p>
+//     </main>
+//   );
+// }
+
+const features = [
+  {
+    title: 'Beginner friendly 🚀',
+    description: 'CommandKit aims to be beginner friendly.',
+  },
+  {
+    title: 'Slash + context menu commands support ✅',
+    description: 'CommandKit supports slash and context menu commands.',
+  },
+  {
+    title: 'Multiple dev guilds, users, & roles support 🤝',
+    description: 'CommandKit supports multiple dev guilds, users, and roles.',
+  },
+  {
+    title: 'Automatic command updates 🤖',
+    description: 'CommandKit automatically updates commands.',
+  },
+  {
+    title: 'REST registration behaviour 📍',
+    description: 'CommandKit has REST registration behaviour.',
+  },
+  {
+    title: 'And much more! 🧪',
+    description: 'CommandKit has much more features.',
+  },
+];
+
+export default function HomePage() {
+  return (
+    <>
+      <section className="w-72 h-96 mx-auto text-center mt-20 mb-28 md:mb-16 flex items-center justify-center flex-col md:flex-row-reverse md:gap-2 md:text-left md:mt-12 md:w-[700px] lg:w-[850px]">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src="/logo.png"
+          alt="CommandKit Logo"
+          className="md:w-[230px] lg:w-[280px] mb-10 md:mb-0"
+          width={200}
+          height={200}
+        />
+
+        <div>
+          <p className="text-4xl font-bold mb-5 md:text-5xl lg:text-6xl">
+            Let{' '}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbc6f] to-[#b079fc]">
+              CommandKit
+            </span>{' '}
+            handle it for you!
+          </p>
+          <p className="font-semibold lg:text-xl">
+            A Discord.js handler for commands and events.
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mt-10 md:justify-start text-neutral-100">
+            <Link
+              href="/guide/installation"
+              className="font-semibold bg-[#b079fc] py-2 px-4 rounded-full"
+            >
+              Guide
+            </Link>
+            <Link
+              href="/docs/typedef/AutocompleteProps"
+              className="font-semibold bg-blue-500 py-2 px-4 rounded-full"
+            >
+              Docs
+            </Link>
+            <Link
+              href="https://github.com/underctrl-io/commandkit"
+              className="font-semibold bg-[#fc7993] py-2 px-4 rounded-full"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </Link>
+          </div>
+        </div>
+      </section>
+      <section className="max-w-[400px] md:max-w-none mx-auto md:w-[700px] lg:w-[850px] text-fd-foreground">
+        <Heading as="h1" className="text-lg font-semibold mb-2">
+          Features
+        </Heading>
+        <Cards>
+          {features.map((feature) => (
+            <Card
+              key={feature.title}
+              title={feature.title}
+              description={feature.description}
+            />
+          ))}
+        </Cards>
+      </section>
+    </>
+  );
+}

apps/docs/app/api/search/route.ts

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

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

@@ -0,0 +1,62 @@
+import { source } from '@/lib/api-source';
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
+import { Callout } from 'fumadocs-ui/components/callout';
+
+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 MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={{
+            ...defaultMdxComponents,
+            Tab,
+            Tabs,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            pre: ({ ref: _ref, ...props }) => (
+              <CodeBlock {...props}>
+                <Pre>{props.children}</Pre>
+              </CodeBlock>
+            ),
+            Callout,
+          }}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+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();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

apps/docs/app/docs/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/api-source';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { source } from '@/lib/source';
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
+import { Callout } from 'fumadocs-ui/components/callout';
+
+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 MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={{
+            ...defaultMdxComponents,
+            Tab,
+            Tabs,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            pre: ({ ref: _ref, ...props }) => (
+              <CodeBlock {...props}>
+                <Pre>{props.children}</Pre>
+              </CodeBlock>
+            ),
+            Callout,
+          }}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+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();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

apps/docs/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 }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}