docs: Add docs by fumadocs

README.md

@@ -1,4 +1,15 @@
-[![Header VitNode GitHub](https://raw.githubusercontent.com/aXenDeveloper/vitnode/canary/docs/public/header.jpg "Header VitNode GitHub")](https://vitnode.com/)
+<h1 align="center">
+  <br>
+  <a href="https://vitnode.com/" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="apps/docs/public/assets/vitnode_logo_dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="apps/docs/public/assets/vitnode_logo_light.svg">
+      <img alt="VitNode Logo" src="apps/docs/public/assets/vitnode_logo_light.svg" width="600">
+    </picture>
+  </a>
+  <br>
+  <br>
+</h1>
 
 # VitNode
 

apps/docs/.gitignore

@@ -0,0 +1,27 @@
+# deps
+/node_modules
+
+# generated content
+.map.ts
+.contentlayer
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

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

@@ -0,0 +1,11 @@
+import { getPages } from '@/app/source';
+import { createSearchAPI } from 'fumadocs-core/search/server';
+
+export const { GET } = createSearchAPI('advanced', {
+  indexes: getPages().map((page) => ({
+    title: page.data.title,
+    structuredData: page.data.exports.structuredData,
+    id: page.url,
+    url: page.url,
+  })),
+});

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

@@ -0,0 +1,49 @@
+import { getPage, getPages } from "@/app/source";
+import type { Metadata } from "next";
+import { DocsPage, DocsBody } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+
+export default async function Page({
+  params
+}: {
+  params: { slug?: string[] };
+}) {
+  const page = getPage(params.slug);
+
+  if (page == null) {
+    notFound();
+  }
+
+  const MDX = page.data.exports.default;
+
+  return (
+    <DocsPage toc={page.data.exports.toc}>
+      <DocsBody>
+        <h1 className="text-foreground m-0 text-3xl font-bold sm:text-4xl">
+          {page.data.title}
+        </h1>
+        <p className="text-muted-foreground mb-8 text-lg">
+          {page.data.description}
+        </p>
+        <MDX />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return getPages().map(page => ({
+    slug: page.slugs
+  }));
+}
+
+export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+  const page = getPage(params.slug);
+
+  if (page == null) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description
+  } satisfies Metadata;
+}

apps/docs/app/docs/layout.tsx

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

apps/docs/app/global.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 220 40% 98%;
+    --foreground: 213deg 5% 8%;
+    --card: 220 40% 100%;
+    --card-foreground: 213deg 26% 7%;
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
+    --primary: 220 74% 50%;
+    --primary-foreground: 220 40% 98%;
+    --secondary: 40 74% 50%;
+    --secondary-foreground: 210 40% 2%;
+    --muted: 220 40% 96%;
+    --muted-foreground: 220 8% 44%;
+    --accent: 220 40% 92%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 57% 43%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 220 20% 90%;
+    --input: var(--border);
+    --ring: var(--primary);
+    --radius: 0.5rem;
+    --cover: 220 80% 67%;
+    --cover-foreground: 210 40% 98%;
+  }
+
+  .dark {
+    --background: 220 32% 7%;
+    --foreground: 0 0% 98%;
+    --card: 220 32% 10%;
+    --card-foreground: 0 0% 98%;
+    /* --popover: var(--card); */
+    /* --popover-foreground: var(--card-foreground); */
+    --primary: 220 84% 59%;
+    --primary-foreground: 220 40% 98%;
+    --secondary: 40 74% 50%;
+    --secondary-foreground: 210 40% 2%;
+    --muted: 220 32% 14%;
+    --muted-foreground: 220 18% 64%;
+    --accent: 220 32% 18%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 359 78% 55%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 220 25% 16%;
+    /* --input: var(--border); */
+    /* --ring: var(--primary); */
+    --cover: 220 64% 39%;
+    --cover-foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}

apps/docs/app/layout.config.tsx

@@ -0,0 +1,16 @@
+import { type BaseLayoutProps } from "fumadocs-ui/layout";
+
+// basic configuration here
+export const baseOptions: BaseLayoutProps = {
+  githubUrl: "https://github.com/aXenDeveloper/VitNode",
+  nav: {
+    title: "My App"
+  },
+  links: [
+    {
+      text: "Documentation",
+      url: "/docs",
+      active: "nested-url"
+    }
+  ]
+};

apps/docs/app/layout.tsx

@@ -0,0 +1,18 @@
+import './global.css';
+import { RootProvider } from 'fumadocs-ui/provider';
+import { Inter } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body>
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

apps/docs/app/page.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <main className="flex h-screen flex-col justify-center text-center">
+      <h1 className="mb-4 text-2xl font-bold">Hello World</h1>
+      <p className="text-muted-foreground">
+        You can open{' '}
+        <Link href="/docs" className="text-foreground font-semibold underline">
+          /docs
+        </Link>{' '}
+        and see the documentation.
+      </p>
+    </main>
+  );
+}

apps/docs/app/source.ts

@@ -0,0 +1,9 @@
+import { map } from '@/.map';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+
+export const { getPage, getPages, pageTree } = loader({
+  baseUrl: '/docs',
+  rootDir: 'docs',
+  source: createMDXSource(map),
+});

apps/docs/content/docs/index.mdx

@@ -0,0 +1,13 @@
+---
+title: Quick Start
+description: Getting started with VitNode
+---
+
+Welcome to the docs! You can start writing documents in `/content/docs`.
+
+## Quick Start
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+</Cards>

apps/docs/content/docs/meta.json

@@ -0,0 +1,17 @@
+{
+  "title": "headless",
+  "root": true,
+  "pages": [
+    "---Guide---",
+    "index",
+    "---API References---",
+    "components",
+    "utils",
+    "mdx",
+    "search",
+    "---Sources---",
+    "source-api",
+    "fumadocs-mdx",
+    "contentlayer"
+  ]
+}

apps/docs/content/docs/test.mdx

@@ -0,0 +1,20 @@
+---
+title: Components
+description: Components
+---
+
+## Code Block
+
+```js title="My Title"
+console.log("Hello World"); // [!code highlight]
+
+// [!code word:World]
+console.log("Hello World");
+```
+
+## Cards
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+</Cards>

apps/docs/mdx-components.tsx

@@ -0,0 +1,9 @@
+import type { MDXComponents } from 'mdx/types';
+import defaultComponents from 'fumadocs-ui/mdx';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...defaultComponents,
+    ...components,
+  };
+}

apps/docs/next.config.mjs

@@ -0,0 +1,10 @@
+import createMDX from 'fumadocs-mdx/config';
+
+const withMDX = createMDX();
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+};
+
+export default withMDX(config);

apps/docs/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev --port 3001",
+    "start": "next start"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "fumadocs-core": "12.1.3",
+    "fumadocs-mdx": "8.2.32",
+    "fumadocs-ui": "12.1.3",
+    "lucide-react": "^0.395.0",
+    "next": "^14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5"
+  }
+}

apps/docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};