docs: new anchor docs build with fumadocs

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*
-.pnpm-debug.log*
 
-# local env files
+# others
 .env*.local
-
-# vercel
 .vercel
-
-.vscode/
-.idea
+next-env.d.ts

docs/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "endOfLine": "auto",
+  "proseWrap": "always"
+}

docs/README.md

@@ -1,20 +1,16 @@
 # Anchor Docs
 
-## Getting started
+Created with [Fumadocs](https://fumadocs.vercel.app). Page contents located in
+[`docs/content/docs`](/docs/content/docs).
 
-```bash
-npm install
-cp .env.example .env.local
-```
-
-Next, run the development server:
+Run development server:
 
 ```bash
 npm run dev
+# or
+pnpm dev
+# or
+yarn dev
 ```
 
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
-
-## Customizing
-
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+Open http://localhost:3000 with your browser to see the result.

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>;
+}

docs/app/(home)/page.tsx

@@ -0,0 +1,19 @@
+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>
+  );
+}

docs/app/api/search/route.ts

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

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

@@ -0,0 +1,93 @@
+import { docsSource as source } from "@/app/source";
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+  DocsCategory,
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { ImageZoom } from "fumadocs-ui/components/image-zoom";
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
+import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { Callout } from "fumadocs-ui/components/callout";
+import { TypeTable } from "fumadocs-ui/components/type-table";
+import { Files, Folder, File } from "fumadocs-ui/components/files";
+import GithubIcon from "@/public/icons/github.svg";
+
+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
+      // Filter the toc to only include h1, h2, and h3
+      toc={page.data.toc.filter(item => item.depth <= 3)}
+      full={page.data.full}
+      tableOfContent={{ footer: <EditOnGithub path={page.file.path} /> }}
+    >
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={{
+            ...defaultMdxComponents,
+            img: props => <ImageZoom {...(props as any)} />,
+            Accordion,
+            Accordions,
+            Step,
+            Steps,
+            Tab,
+            Tabs,
+            Callout,
+            TypeTable,
+            Files,
+            Folder,
+            File,
+          }}
+        />
+        {page.data.index ? <DocsCategory page={page} from={source} /> : null}
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+function EditOnGithub({ path }: { path: string }) {
+  // placeholder
+  const href = `https://github.com/coral-xyz/anchor/blob/master/docs/content/docs/${path.startsWith("/") ? path.slice(1) : path}`;
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="pt-2 flex items-center gap-2 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground/80"
+    >
+      <GithubIcon width="18" height="18" />
+      <span>Edit on GitHub</span>
+    </a>
+  );
+}
+
+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,
+  };
+}

docs/app/docs/layout.tsx

@@ -0,0 +1,7 @@
+import { DocsLayout } from "fumadocs-ui/layouts/notebook";
+import type { ReactNode } from "react";
+import { docsOptions } from "../layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
+}

docs/app/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/app/layout.config.tsx

@@ -0,0 +1,54 @@
+import { type DocsLayoutProps } from "fumadocs-ui/layouts/notebook";
+import { type HomeLayoutProps } from "fumadocs-ui/layouts/home";
+import { docsSource } from "./source";
+import StackExchangeIcon from "@/public/icons/stackexchange.svg";
+import GithubIcon from "@/public/icons/github.svg";
+import DiscordIcon from "@/public/icons/discord.svg";
+import Image from "next/image";
+
+/**
+ * Shared layout configurations
+ *
+ * you can configure layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: HomeLayoutProps = {
+  nav: {
+    title: (
+      <div className="flex items-center gap-2 pl-2">
+        <Image src="/icons/anchor.png" alt="Logo" width={24} height={24} />
+        <span>Anchor Docs</span>
+      </div>
+    ),
+    url: "/docs",
+  },
+  links: [
+    {
+      icon: <GithubIcon />,
+      text: "Github",
+      url: "https://github.com/coral-xyz/anchor",
+      active: "none",
+    },
+    {
+      icon: <DiscordIcon />,
+      text: "Discord",
+      url: "https://discord.com/invite/NHHGSXAnXk",
+      active: "none",
+    },
+    {
+      icon: <StackExchangeIcon />,
+      text: "Stack Exchange",
+      url: "https://solana.stackexchange.com/",
+      active: "none",
+    },
+  ],
+};
+
+export const docsOptions: DocsLayoutProps = {
+  ...baseOptions,
+  sidebar: {
+    defaultOpenLevel: 1,
+  },
+  tree: docsSource.pageTree,
+};

docs/app/layout.tsx

@@ -0,0 +1,19 @@
+import "./global.css";
+import { RootProvider } from "fumadocs-ui/provider";
+import { Inter } from "next/font/google";
+import type { ReactNode } from "react";
+import { GoogleAnalytics } from "@next/third-parties/google";
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+      <GoogleAnalytics gaId="G-ZJYNM2WNM0" />
+    </html>
+  );
+}

docs/app/source.ts

@@ -0,0 +1,8 @@
+import { docs, meta } from "@/.source";
+import { createMDXSource } from "fumadocs-mdx";
+import { loader } from "fumadocs-core/source";
+
+export const docsSource = loader({
+  baseUrl: "/docs",
+  source: createMDXSource(docs, meta),
+});