[cdn] Create a new template for creating a docs rewrite to mintlify (#1362)

### Description

This is a template for using a rewrites in vercel.ts to a docs site.
This is meant to display the capabilities of the new vercel.ts project.,
a typsecript based configuration file. Please view the readme for more
info.

### Demo URL

https://docsrewrite.vercel.app/

### Type of Change

- [x] New Example
- [ ] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

Author: pranavkarthik10

cdn/mintlify-docs-rewrite/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}
+

cdn/mintlify-docs-rewrite/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Next.js
+/.next/
+/out/
+next-env.d.ts
+
+# Production
+build
+dist
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local ENV files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Vercel
+.vercel
+
+# Turborepo
+.turbo
+
+# typescript
+*.tsbuildinfo
+.env*.local
+

cdn/mintlify-docs-rewrite/README.md

@@ -0,0 +1,68 @@
+---
+name: Mintlify docs rewrite (vercel.ts)
+slug: mintlify-docs-rewrite
+description: Serve Mintlify-hosted docs from your main domain using vercel.ts rewrites. Build a product site with seamlessly integrated documentation.
+framework: Next.js
+useCase: Rewrites
+css: Tailwind
+deployUrl: https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/cdn/mintlify-docs-rewrite&project-name=mintlify-docs-rewrite&repository-name=mintlify-docs-rewrite&env=MINTLIFY_DOCS_URL
+demoUrl: https://docsrewrite.vercel.app
+---
+
+# Mintlify docs rewrite (vercel.ts) example
+
+This template demonstrates how to serve Mintlify-hosted documentation from your main domain using Vercel's `vercel.ts` configuration. Instead of linking to `docs.yourdomain.com` or an external URL, your docs are seamlessly integrated at `/docs` on your product site.
+
+The demo shows a fictional product site ("Flux") with docs hosted on Mintlify but served from the main domain for a unified user experience.
+
+## Demo
+
+https://docsrewrite.vercel.app
+
+Visit the docs at `/docs` to see the Mintlify-hosted site served through the main domain.
+
+## How to Use
+
+You can choose from one of the following two methods to use this repository:
+
+### One-Click Deploy
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/cdn/mintlify-docs-rewrite&project-name=mintlify-docs-rewrite&repository-name=mintlify-docs-rewrite&env=MINTLIFY_DOCS_URL)
+
+### Clone and Deploy
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+pnpm create next-app --example https://github.com/vercel/examples/tree/main/cdn/mintlify-docs-rewrite
+```
+
+Next, run Next.js in development mode:
+
+```bash
+pnpm dev
+```
+
+## Environment variables
+
+- `MINTLIFY_DOCS_URL` – Your Mintlify custom domain URL (e.g., `https://your-subdomain.mintlify.dev`)
+
+Set this in your Vercel project settings or in a `.env.local` file.
+
+## How it works
+
+1. You configure a custom domain in Mintlify (e.g., `your-subdomain.mintlify.dev`)
+2. `vercel.ts` exports a config with rewrite rules that map `/docs` and `/docs/:match*` to your Mintlify URL
+3. Vercel applies these rewrites at the edge, transparently proxying requests to Mintlify while preserving the original URL in the browser
+4. Users visit `yourdomain.com/docs` and see your Mintlify documentation as if it's part of your main site
+
+## Key benefits
+
+- **Better SEO**: Docs are on your main domain, not a separate subdomain
+- **No CORS issues**: Content is served from your domain
+- **Seamless branding**: Consistent experience across product and docs
+- **Simple setup**: Just add environment variable and deploy
+- **Mintlify handles infrastructure**: Focus on content while Mintlify manages hosting, CDN, and updates
+

cdn/mintlify-docs-rewrite/app/about/page.tsx

@@ -0,0 +1,65 @@
+import Link from 'next/link'
+
+export default function AboutPage() {
+  return (
+    <main className="min-h-screen py-16 px-4">
+      <div className="max-w-3xl mx-auto">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white mb-8"
+        >
+          ← Back to home
+        </Link>
+
+        <h1 className="text-4xl font-bold text-black dark:text-white mb-6">
+          About Flux
+        </h1>
+
+        <div className="prose prose-gray dark:prose-invert max-w-none">
+          <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+            Flux is a real-time event platform designed to make it easy to build event-driven applications. Whether you&apos;re sending transactional events, processing webhooks, or building real-time notifications, Flux handles the infrastructure so you can focus on your product.
+          </p>
+
+          <div className="space-y-8">
+            <section className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h2 className="text-xl font-semibold text-black dark:text-white mb-3">
+                Built for scale
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                From thousands to millions of events per second, Flux automatically scales to handle your traffic. Events are persisted to durable storage and retried with exponential backoff to guarantee delivery.
+              </p>
+            </section>
+
+            <section className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h2 className="text-xl font-semibold text-black dark:text-white mb-3">
+                Developer experience first
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 mb-4">
+                Drop-in SDKs for all major languages make integration seamless. Comprehensive API documentation and example code get you up and running in minutes.
+              </p>
+            </section>
+
+            <section className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h2 className="text-xl font-semibold text-black dark:text-white mb-3">
+                Complete observability
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                Track every event with detailed logs, traces, and delivery analytics. Debug production issues quickly with comprehensive error context and retry history.
+              </p>
+            </section>
+
+            <section className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h2 className="text-xl font-semibold text-black dark:text-white mb-3">
+                Secure by default
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                All events are encrypted in transit and at rest. Webhook signatures are automatically verified to prevent spoofing. Fine-grained access controls let you manage API keys and permissions with ease.
+              </p>
+            </section>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
+

cdn/mintlify-docs-rewrite/app/globals.css

@@ -0,0 +1,27 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+

cdn/mintlify-docs-rewrite/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+import Navbar from '../components/Navbar'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'Flux - Real-time event infrastructure',
+  description: 'Send, receive, and react to events across your entire stack with a simple API.',
+}
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+      <body className="antialiased bg-white dark:bg-black text-gray-900 dark:text-gray-100">
+        <Navbar />
+        {children}
+      </body>
+    </html>
+  )
+}
+

cdn/mintlify-docs-rewrite/app/not-found.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <main className="min-h-screen flex items-center justify-center px-4">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-black dark:text-white mb-4">404</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
+          Page not found
+        </p>
+        <Link
+          href="/"
+          className="inline-flex items-center justify-center bg-black dark:bg-white text-white dark:text-black px-6 py-3 rounded-lg font-medium hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
+        >
+          Go home
+        </Link>
+      </div>
+    </main>
+  )
+}
+

cdn/mintlify-docs-rewrite/app/page.tsx

@@ -0,0 +1,103 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      <section className="py-24 px-4 border-b border-gray-200 dark:border-gray-800">
+        <div className="max-w-4xl mx-auto text-center">
+          <h1 className="text-5xl md:text-6xl font-bold tracking-tight text-black dark:text-white mb-6">
+            Flux
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto">
+            Real-time event infrastructure for modern applications. Send, receive, and react to events across your entire stack with a simple API.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href="/docs"
+              className="inline-flex items-center justify-center bg-black dark:bg-white text-white dark:text-black px-8 py-3 rounded-lg font-medium hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
+            >
+              Read Documentation →
+            </Link>
+            <a
+              href="https://github.com"
+              className="inline-flex items-center justify-center border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 px-8 py-3 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors"
+            >
+              View on GitHub
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold text-black dark:text-white mb-4">
+              Why Flux
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
+              Purpose-built for event-driven applications at any scale.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-black dark:text-white mb-2">Simple Integration</h3>
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Drop-in SDKs for Node.js, Python, Go, and more. Start sending events in minutes.
+              </p>
+            </div>
+
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-black dark:text-white mb-2">Guaranteed Delivery</h3>
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Events are persisted and retried automatically. Never lose critical data.
+              </p>
+            </div>
+
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-black dark:text-white mb-2">Real-time Webhooks</h3>
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Receive events instantly via webhooks with automatic signature verification.
+              </p>
+            </div>
+
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-black dark:text-white mb-2">Full Observability</h3>
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Debug issues fast with event logs, traces, and delivery analytics.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 px-4 border-t border-gray-200 dark:border-gray-800">
+        <div className="max-w-4xl mx-auto">
+          <h3 className="text-2xl font-bold text-black dark:text-white mb-6 text-center">
+            Quick example
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400 mb-4 text-center">
+            Send your first event in minutes
+          </p>
+          <div className="bg-gray-950 rounded-xl p-6 overflow-x-auto">
+            <pre className="text-sm text-gray-300 font-mono">
+{`import Flux from '@flux/node';
+
+const flux = new Flux('sk_live_...');
+
+await flux.events.send({
+  type: 'user.signup',
+  data: {
+    userId: 'usr_123',
+    email: 'jane@example.com',
+    plan: 'pro'
+  }
+});`}
+            </pre>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}
+