feat: Docs design revamp

.gitignore

@@ -18,6 +18,8 @@ dist
 .DS_Store
 *.pem
 
+www-old/
+
 # debug
 npm-debug.log*
 yarn-debug.log*
@@ -37,4 +39,4 @@ yarn-error.log*
 .vercel
 
 # vscode plugin
-*.vsix
+*.vsix

apps/www/.gitignore

@@ -1,28 +1,44 @@
-# deps
-/node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# generated content
-.contentlayer
-.content-collections
-.source
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# test & build
+# testing
 /coverage
+
+# next.js
 /.next/
 /out/
+
+# production
 /build
-*.tsbuildinfo
 
 # misc
 .DS_Store
 *.pem
-/.pnp
-.pnp.js
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# others
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
 .vercel
-next-env.d.ts
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# fumadocs source
+.source

apps/www/README.md

@@ -1,26 +1,36 @@
-# fuma-base
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-This is a Next.js application generated with
-[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+## Getting Started
 
-Run development server:
+First, run the development server:
 
 ```bash
 npm run dev
 # or
+yarn dev
+# or
 pnpm dev
 # or
-yarn dev
+bun dev
 ```
 
-Open http://localhost:3000 with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More
 
-To learn more about Next.js and Fumadocs, take a look at the following
-resources:
+To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
-  features and API.
+- [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
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/www/next.config.mjs

@@ -1,7 +1,5 @@
 import { createMDX } from 'fumadocs-mdx/next';
 
-const withMDX = createMDX();
-
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -12,11 +10,6 @@ const config = {
     // !! WARN !!
     ignoreBuildErrors: true
   },
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true
-  },
   experimental: {
     optimizePackageImports: ['shiki']
   },
@@ -31,7 +24,19 @@ const config = {
         destination: '/llms.mdx/:path*'
       }
     ];
+  },
+  async redirects() {
+    // TODO: remove this once we have a proper home page
+    return [
+      {
+        source: '/',
+        destination: '/docs',
+        permanent: true
+      }
+    ];
   }
 };
 
+const withMDX = createMDX();
+
 export default withMDX(config);

apps/www/package.json

@@ -1,29 +1,31 @@
 {
   "name": "www",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "prebuild": "cd ../.. && npm run build:apsara",
-    "build": "next build",
     "dev": "next dev",
+    "build": "next build",
     "start": "next start",
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
     "@raystack/apsara": "workspace:*",
+    "@types/mdast": "^4.0.4",
     "class-variance-authority": "^0.7.1",
     "dayjs": "^1.11.11",
-    "fumadocs-core": "^14.7.7",
+    "fumadocs-core": "16.0.7",
     "fumadocs-docgen": "^1.3.8",
-    "fumadocs-mdx": "^11.5.6",
+    "fumadocs-mdx": "13.0.5",
     "fumadocs-typescript": "^4.0.6",
-    "fumadocs-ui": "^14.7.7",
-    "lucide-react": "^0.477.0",
-    "next": "14.2.5",
+    "fumadocs-ui": "16.0.7",
+    "lucide-react": "^0.548.0",
+    "next": "16.0.7",
     "next-themes": "^0.4.4",
     "prettier": "^2.8.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-live": "^4.1.8",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
@@ -32,15 +34,11 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.13.4",
-    "@types/prettier": "^3.0.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "eslint": "^8",
-    "eslint-config-next": "14",
-    "typescript": "^5.7.3"
+    "@types/node": "^24.9.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=22"

apps/www/source.config.ts

@@ -1,11 +1,19 @@
 import * as path from 'node:path';
 import { fileURLToPath } from 'url';
-import { TagSchema } from '@/lib/types';
-import { remarkInstall } from 'fumadocs-docgen';
+import { SourceSchema, TagSchema } from '@/lib/types';
+import {
+  rehypeToc,
+  remarkGfm,
+  remarkHeading,
+  remarkImage,
+  remarkNpm,
+  remarkStructure
+} from 'fumadocs-core/mdx-plugins';
 import {
   defineConfig,
   defineDocs,
-  frontmatterSchema
+  frontmatterSchema,
+  metaSchema
 } from 'fumadocs-mdx/config';
 import {
   GeneratorOptions,
@@ -28,13 +36,32 @@ export const docs = defineDocs({
   dir: 'src/content/docs',
   docs: {
     schema: frontmatterSchema.extend({
+      source: SourceSchema,
       tag: TagSchema
-    })
+    }),
+    postprocess: {
+      includeProcessedMarkdown: true
+    }
+  },
+  meta: {
+    schema: metaSchema
   }
 });
 
 export default defineConfig({
   mdxOptions: {
-    remarkPlugins: [remarkInstall, [remarkAutoTypeTable, { generator }]]
+    remarkPlugins: () => {
+      return [
+        remarkGfm,
+        [remarkHeading, { generateToc: false }],
+        [remarkImage, { useImport: undefined }],
+        // remarkCodeTab,
+        remarkNpm,
+        remarkStructure,
+        // remarkInstall,
+        [remarkAutoTypeTable, { generator }]
+      ];
+    },
+    rehypePlugins: () => [rehypeToc]
   }
 });

apps/www/src/app/(home)/page.tsx

@@ -1,17 +1,15 @@
-import Logo from "@/components/logo";
-import { Card } from "fumadocs-ui/components/card";
-import { Notebook, Paintbrush } from "lucide-react";
-import styles from "./page.module.css";
+import Logo from '@/components/logo';
+import styles from './page.module.css';
 
 export const metadata = {
-  title: "Apsara",
+  title: 'Apsara'
 };
 
 export default function HomePage() {
   return (
     <main className={styles.main}>
       <div className={styles.info}>
-        <Logo variant="large" />
+        <Logo variant='large' />
         <h1>
           The design system <br />
           for the next big thing
@@ -21,22 +19,6 @@ export default function HomePage() {
           built using Radix UI.
         </h3>
       </div>
-      <div className={styles.links}>
-        <Card
-          title="Documentation"
-          description="API docs, and examples for Apsara components."
-          icon={<Notebook />}
-          href="/docs"
-          className={styles.card}
-        />
-        <Card
-          title="Playground"
-          description="Try out Apsara components and see them in action."
-          icon={<Paintbrush />}
-          href="/playground"
-          className={styles.card}
-        />
-      </div>
     </main>
   );
 }

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

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