shipd 0.1.0

package/docs-template/[slug]/[subslug]/page.tsx

@@ -0,0 +1,1242 @@
+import DocsToc from "@/components/docs/docs-toc";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type Section = { id: string; heading: string; body: string };
+type Page = { title: string; updated: string; toc: { id: string; title: string }[]; sections: Section[] };
+
+const subpages: Record<string, Page> = {
+  "authentication/better-auth": {
+    title: "Better Auth",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "generate-secret", title: "Generate BETTER_AUTH_SECRET" },
+      { id: "google-oauth", title: "Google OAuth Setup" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Better Auth is the default authentication provider in the scaffold. It handles email/password authentication, OAuth providers (Google, GitHub, etc.), session management, and integrates with your database for user storage.",
+      },
+      {
+        id: "generate-secret",
+        heading: "Generate BETTER_AUTH_SECRET",
+        body: `Generate a secure random secret for Better Auth. This is used to encrypt sessions and tokens.
+
+**Option 1: Using OpenSSL (recommended)**
+\`\`\`bash
+openssl rand -base64 32
+\`\`\`
+
+**Option 2: Using Node.js**
+\`\`\`bash
+node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+\`\`\`
+
+Copy the generated secret - you'll add it to your \`.env.local\` file in the next step.`,
+      },
+      {
+        id: "google-oauth",
+        heading: "Google OAuth Setup",
+        body: `To enable Google sign-in, you need to create OAuth credentials in the Google Cloud Console.
+
+**Step 1: Create a Google Cloud Project**
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Click "Select a project" → "New Project"
+3. Enter a project name and click "Create"
+
+**Step 2: Enable Google+ API**
+1. Navigate to "APIs & Services" → "Library"
+2. Search for "Google+ API" and click "Enable"
+
+**Step 3: Create OAuth Credentials**
+1. Go to "APIs & Services" → "Credentials"
+2. Click "Create Credentials" → "OAuth client ID"
+3. If prompted, configure the OAuth consent screen first:
+   - Choose "External" user type
+   - Fill in app name, support email, developer contact
+   - Add scopes: \`email\`, \`profile\`, \`openid\`
+   - Add test users if needed
+   - Save and continue
+4. Back in "Create OAuth client ID":
+   - Application type: "Web application"
+   - Name: Your app name
+   - Authorized redirect URIs: \`http://localhost:3000/api/auth/callback/google\` (for local dev)
+   - For production, add: \`https://yourdomain.com/api/auth/callback/google\`
+5. Click "Create"
+6. Copy the **Client ID** and **Client Secret**`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Better Auth
+BETTER_AUTH_SECRET="your-generated-secret-from-step-1"
+
+# Google OAuth (optional, but recommended)
+GOOGLE_CLIENT_ID="your-google-client-id.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
+
+# App URL (required for OAuth redirects)
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
+\`\`\`
+
+**Important:**
+- \`BETTER_AUTH_SECRET\` is required - use the secret you generated in step 1
+- \`GOOGLE_CLIENT_ID\` and \`GOOGLE_CLIENT_SECRET\` are optional but needed for Google sign-in
+- For production, update \`NEXT_PUBLIC_APP_URL\` to your production domain`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`http://localhost:3000/sign-up\`
+3. Try creating an account with email/password
+4. Try signing in with Google (if configured)
+5. Verify you can access protected routes like \`/dashboard\`
+
+**Troubleshooting:**
+- If Google sign-in fails, check that redirect URIs match exactly
+- If sessions don't persist, verify \`BETTER_AUTH_SECRET\` is set correctly
+- Check browser console and server logs for detailed error messages`,
+      },
+    ],
+  },
+  "authentication/supabase-auth": {
+    title: "Supabase Auth",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "create-project", title: "Create Supabase Project" },
+      { id: "get-credentials", title: "Get API Credentials" },
+      { id: "configure-auth", title: "Configure Auth Settings" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Supabase Auth provides a complete authentication solution with email/password, magic links, OAuth providers, and user management. It's integrated with Supabase's database and real-time features.",
+      },
+      {
+        id: "create-project",
+        heading: "Create Supabase Project",
+        body: `1. Go to [supabase.com](https://supabase.com) and sign up
+2. Click "New Project"
+3. Fill in project details (name, database password, region)
+4. Click "Create new project"
+5. Wait for provisioning (2-3 minutes)`,
+      },
+      {
+        id: "get-credentials",
+        heading: "Get API Credentials",
+        body: `1. In your Supabase project dashboard, go to "Settings" → "API"
+2. You'll find these values:
+   - **Project URL:** \`https://xxx.supabase.co\` (this is your \`NEXT_PUBLIC_SUPABASE_URL\`)
+   - **anon public key:** A long string starting with \`eyJ...\` (this is your \`NEXT_PUBLIC_SUPABASE_ANON_KEY\`)
+   - **service_role key:** Another long string (this is your \`SUPABASE_SERVICE_ROLE_KEY\` - keep this secret!)
+3. Copy these values - you'll need them in the next step`,
+      },
+      {
+        id: "configure-auth",
+        heading: "Configure Auth Settings",
+        body: `1. Go to "Authentication" → "Providers" in your Supabase dashboard
+2. Enable the providers you want (Email, Google, GitHub, etc.)
+3. For Email provider:
+   - Enable "Enable email confirmations" if you want email verification
+   - Configure email templates in "Email Templates"
+4. For OAuth providers (e.g., Google):
+   - Enable the provider
+   - Add your OAuth client ID and secret (from Google Cloud Console)
+   - Add redirect URL: \`https://yourproject.supabase.co/auth/v1/callback\`
+5. Go to "Authentication" → "URL Configuration"
+6. Add your site URL: \`http://localhost:3000\` (for development)
+7. Add redirect URLs:
+   - \`http://localhost:3000/auth/callback\`
+   - \`https://yourdomain.com/auth/callback\` (for production)`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL="https://xxx.supabase.co"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+SUPABASE_SERVICE_ROLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." # Server-side only
+\`\`\`
+
+**Important:**
+- \`NEXT_PUBLIC_SUPABASE_URL\` is your project URL from "Settings" → "API"
+- \`NEXT_PUBLIC_SUPABASE_ANON_KEY\` is the anon/public key (safe to expose in client)
+- \`SUPABASE_SERVICE_ROLE_KEY\` is the service role key (NEVER expose in client - server-side only)
+- All \`NEXT_PUBLIC_*\` variables are exposed to the browser`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`http://localhost:3000/sign-up\`
+3. Try creating an account with email/password
+4. Check your email for the verification link (if enabled)
+5. Try signing in with OAuth provider (if configured)
+6. Verify user appears in Supabase dashboard → "Authentication" → "Users"
+
+**Troubleshooting:**
+- If sign-up fails, check that email provider is enabled in Supabase dashboard
+- For OAuth, verify redirect URLs match exactly in both Supabase and OAuth provider
+- Check browser console and Supabase logs for error details
+- Ensure environment variables are correctly set`,
+      },
+    ],
+  },
+  "authentication/nextauth": {
+    title: "NextAuth",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "generate-secret", title: "Generate NEXTAUTH_SECRET" },
+      { id: "configure-providers", title: "Configure Providers" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "NextAuth.js (Auth.js) is a popular authentication library for Next.js. It supports email/password, OAuth providers (Google, GitHub, etc.), and database sessions. The scaffold uses NextAuth v5 (Auth.js) with adapters for your database.",
+      },
+      {
+        id: "generate-secret",
+        heading: "Generate NEXTAUTH_SECRET",
+        body: `Generate a secure random secret for NextAuth. This is used to encrypt sessions and tokens.
+
+**Option 1: Using OpenSSL (recommended)**
+\`\`\`bash
+openssl rand -base64 32
+\`\`\`
+
+**Option 2: Using Node.js**
+\`\`\`bash
+node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+\`\`\`
+
+Copy the generated secret - you'll add it to your \`.env.local\` file.`,
+      },
+      {
+        id: "configure-providers",
+        heading: "Configure Providers",
+        body: `**For Google OAuth:**
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a project or select existing
+3. Enable "Google+ API"
+4. Go to "Credentials" → "Create Credentials" → "OAuth client ID"
+5. Configure OAuth consent screen if prompted
+6. Set redirect URI: \`http://localhost:3000/api/auth/callback/google\` (and production URL)
+7. Copy Client ID and Client Secret
+
+**For GitHub OAuth:**
+1. Go to GitHub → Settings → Developer settings → OAuth Apps
+2. Click "New OAuth App"
+3. Set Authorization callback URL: \`http://localhost:3000/api/auth/callback/github\`
+4. Copy Client ID and Client Secret
+
+**For Email Provider:**
+NextAuth supports magic links via email. You'll need to configure an email service (Resend, SendGrid, etc.) in your NextAuth configuration.`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# NextAuth
+NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_SECRET="your-generated-secret-from-step-1"
+
+# Google OAuth (if using Google provider)
+GOOGLE_CLIENT_ID="your-google-client-id.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
+
+# GitHub OAuth (if using GitHub provider)
+GITHUB_CLIENT_ID="your-github-client-id"
+GITHUB_CLIENT_SECRET="your-github-client-secret"
+
+# Database (required for sessions)
+DATABASE_URL="your-database-connection-string"
+\`\`\`
+
+**Important:**
+- \`NEXTAUTH_URL\` must match your app URL exactly
+- \`NEXTAUTH_SECRET\` is required - use the secret you generated
+- OAuth provider credentials are only needed if you're using those providers
+- Database URL is required for session storage`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`http://localhost:3000/api/auth/signin\` (NextAuth sign-in page)
+3. Try signing in with your configured provider
+4. Verify you're redirected to the callback URL
+5. Check that session is created (verify in database or check cookies)
+6. Test protected routes to ensure authentication works
+
+**Troubleshooting:**
+- If redirect fails, verify \`NEXTAUTH_URL\` matches your app URL exactly
+- Check OAuth redirect URIs match in both NextAuth config and OAuth provider
+- Verify \`NEXTAUTH_SECRET\` is set correctly
+- Check browser console and server logs for detailed errors
+- Ensure database is properly configured for session storage`,
+      },
+    ],
+  },
+
+  "payments/stripe": {
+    title: "Stripe",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "account-setup", title: "Account Setup" },
+      { id: "api-keys", title: "Get API Keys" },
+      { id: "create-products", title: "Create Products" },
+      { id: "webhooks", title: "Configure Webhooks" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Stripe is a payment processing platform that supports subscriptions, one-time payments, and complex billing scenarios. It provides robust APIs, webhooks, and a customer portal for subscription management.",
+      },
+      {
+        id: "account-setup",
+        heading: "Account Setup",
+        body: `1. Go to [stripe.com](https://stripe.com) and sign up for an account
+2. Complete your business profile
+3. Add a payment method (for account verification)
+4. Switch between "Test mode" and "Live mode" using the toggle in the dashboard
+5. **Important:** Use Test mode for development, Live mode for production`,
+      },
+      {
+        id: "api-keys",
+        heading: "Get API Keys",
+        body: `1. In your Stripe dashboard, go to "Developers" → "API keys"
+2. You'll see two keys:
+   - **Publishable key:** Starts with \`pk_test_\` (test) or \`pk_live_\` (live)
+   - **Secret key:** Starts with \`sk_test_\` (test) or \`sk_live_\` (live)
+3. Click "Reveal" to see the secret key
+4. Copy both keys - you'll need them in the next step
+5. **Important:** Never expose your secret key in client-side code`,
+      },
+      {
+        id: "create-products",
+        heading: "Create Products",
+        body: `1. Go to "Products" in your Stripe dashboard
+2. Click "Add product"
+3. Fill in product details:
+   - Name: Your subscription tier (e.g., "Starter")
+   - Description: Optional
+   - Pricing: Set recurring price (monthly, yearly, etc.)
+4. Click "Save product"
+5. Copy the **Price ID** (starts with \`price_\`) - you'll need this in your code
+6. Repeat for each subscription tier you want to offer`,
+      },
+      {
+        id: "webhooks",
+        heading: "Configure Webhooks",
+        body: `Webhooks notify your app when payment events occur (subscription created, canceled, payment succeeded, etc.).
+
+**Step 1: Create Webhook Endpoint**
+1. Go to "Developers" → "Webhooks" in your Stripe dashboard
+2. Click "Add endpoint"
+3. Set the endpoint URL:
+   - Development: \`http://localhost:3000/api/webhooks/stripe\` (use [ngrok](https://ngrok.com/) for local testing)
+   - Production: \`https://yourdomain.com/api/webhooks/stripe\`
+4. Select events to listen to (recommended: all \`customer.subscription.*\` events)
+5. Click "Add endpoint"
+
+**Step 2: Get Webhook Secret**
+1. After creating the endpoint, click on it to view details
+2. Click "Reveal" next to "Signing secret"
+3. Copy the webhook secret (starts with \`whsec_\`)
+4. This is your \`STRIPE_WEBHOOK_SECRET\``,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Stripe (Test mode)
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_xxxxxxxxxxxxx"
+STRIPE_SECRET_KEY="sk_test_xxxxxxxxxxxxx"
+STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxx"
+
+# Stripe Products
+NEXT_PUBLIC_STRIPE_STARTER_PRICE_ID="price_xxxxxxxxxxxxx"
+
+# App URL
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
+\`\`\`
+
+**For Production:**
+Replace test keys with live keys (starting with \`pk_live_\` and \`sk_live_\`) and update \`NEXT_PUBLIC_APP_URL\` to your production domain.
+
+**Important:**
+- \`NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY\` is safe to expose in client code
+- \`STRIPE_SECRET_KEY\` must NEVER be exposed - use server-side only
+- \`STRIPE_WEBHOOK_SECRET\` is used to verify webhook signatures`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Use Stripe's test mode (toggle in dashboard)
+2. Restart your dev server: \`npm run dev\`
+3. Navigate to your pricing/checkout page
+4. Use Stripe test card: \`4242 4242 4242 4242\`
+   - Expiry: Any future date (e.g., 12/34)
+   - CVC: Any 3 digits (e.g., 123)
+   - ZIP: Any 5 digits (e.g., 12345)
+5. Complete the checkout flow
+6. Verify webhook events are received (check server logs)
+7. Check subscription status updates in your database
+
+**Test Cards:**
+- Success: \`4242 4242 4242 4242\`
+- Decline: \`4000 0000 0000 0002\`
+- Requires 3D Secure: \`4000 0027 6000 3184\`
+
+**Testing Webhooks Locally:**
+Use [Stripe CLI](https://stripe.com/docs/stripe-cli) to forward webhooks:
+\`\`\`bash
+stripe listen --forward-to localhost:3000/api/webhooks/stripe
+\`\`\`
+This gives you a webhook signing secret to use locally.`,
+      },
+    ],
+  },
+  "payments/lemon-squeezy": {
+    title: "Lemon Squeezy",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "account-setup", title: "Account Setup" },
+      { id: "api-keys", title: "Get API Keys" },
+      { id: "create-products", title: "Create Products" },
+      { id: "webhooks", title: "Configure Webhooks" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Lemon Squeezy is a payment platform designed for digital products and SaaS subscriptions. It handles VAT, tax compliance, and provides a hosted checkout experience similar to Gumroad.",
+      },
+      {
+        id: "account-setup",
+        heading: "Account Setup",
+        body: `1. Go to [lemonsqueezy.com](https://lemonsqueezy.com) and sign up
+2. Complete your store setup
+3. Connect a payment method (Stripe or PayPal)
+4. Verify your account and business details`,
+      },
+      {
+        id: "api-keys",
+        heading: "Get API Keys",
+        body: `1. In your Lemon Squeezy dashboard, go to "Settings" → "API"
+2. Click "Generate API Key"
+3. Name it (e.g., "Production" or "Development")
+4. Copy the API key - this is your \`LEMON_SQUEEZY_API_KEY\`
+5. **Important:** Store this securely - you won't be able to see it again
+6. You'll also need your Store ID, found in "Settings" → "Store"`,
+      },
+      {
+        id: "create-products",
+        heading: "Create Products",
+        body: `1. Go to "Products" in your Lemon Squeezy dashboard
+2. Click "New Product"
+3. Fill in product details:
+   - Name: Your subscription tier
+   - Price: Set subscription pricing
+   - Billing interval: Monthly, yearly, etc.
+4. Configure product settings (description, images, etc.)
+5. Save the product
+6. Copy the **Variant ID** (you'll need this for checkout links)
+7. Repeat for each subscription tier`,
+      },
+      {
+        id: "webhooks",
+        heading: "Configure Webhooks",
+        body: `Webhooks notify your app when subscription events occur.
+
+**Step 1: Create Webhook**
+1. Go to "Settings" → "Webhooks" in your Lemon Squeezy dashboard
+2. Click "Create Webhook"
+3. Set the endpoint URL:
+   - Development: \`http://localhost:3000/api/webhooks/lemonsqueezy\` (use ngrok for local testing)
+   - Production: \`https://yourdomain.com/api/webhooks/lemonsqueezy\`
+4. Select events to listen to:
+   - \`subscription_created\`
+   - \`subscription_updated\`
+   - \`subscription_cancelled\`
+   - \`order_created\`
+   - \`payment_success\`
+5. Save the webhook
+6. Copy the **Signing Secret** (shown after creation) - this is your \`LEMON_SQUEEZY_WEBHOOK_SECRET\``,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Lemon Squeezy
+LEMON_SQUEEZY_API_KEY="your-api-key"
+LEMON_SQUEEZY_STORE_ID="your-store-id"
+LEMON_SQUEEZY_WEBHOOK_SECRET="your-webhook-secret"
+
+# Product Variant IDs
+NEXT_PUBLIC_LEMON_SQUEEZY_STARTER_VARIANT_ID="variant_xxxxxxxxxxxxx"
+
+# App URL
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
+\`\`\`
+
+**Important:**
+- \`LEMON_SQUEEZY_API_KEY\` comes from "Settings" → "API"
+- \`LEMON_SQUEEZY_STORE_ID\` comes from "Settings" → "Store"
+- \`LEMON_SQUEEZY_WEBHOOK_SECRET\` comes from webhook configuration
+- Variant IDs come from your products`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Use Lemon Squeezy's test mode
+2. Restart your dev server: \`npm run dev\`
+3. Navigate to your pricing/checkout page
+4. Click through to Lemon Squeezy checkout
+5. Use test card: \`4242 4242 4242 4242\`
+6. Complete checkout
+7. Verify webhook events are received
+8. Check subscription status in your database
+
+**Test Mode:**
+Lemon Squeezy uses Stripe's test mode when your connected Stripe account is in test mode. Use Stripe test cards for testing.
+
+**Testing Webhooks Locally:**
+Use [ngrok](https://ngrok.com/) to expose your local server:
+\`\`\`bash
+ngrok http 3000
+\`\`\`
+Update your webhook endpoint URL in Lemon Squeezy dashboard with the ngrok URL.`,
+      },
+    ],
+  },
+  "payments/polar": {
+    title: "Polar",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "account-setup", title: "Account Setup" },
+      { id: "create-products", title: "Create Products" },
+      { id: "api-keys", title: "API Keys" },
+      { id: "webhooks", title: "Webhooks" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Polar.sh is the default payments provider in the scaffold. It handles subscription management, checkout flows, customer portals, and webhook events for subscription lifecycle changes.",
+      },
+      {
+        id: "account-setup",
+        heading: "Account Setup",
+        body: `1. Go to [polar.sh](https://polar.sh) and sign up for an account
+2. Complete your organization profile
+3. Connect a payment method (Stripe account) - Polar uses Stripe as the payment processor
+4. Navigate to your organization dashboard`,
+      },
+      {
+        id: "create-products",
+        heading: "Create Products",
+        body: `1. In your Polar dashboard, go to "Products" → "New Product"
+2. Create your subscription tiers (e.g., "Starter" and "Professional")
+3. For each product:
+   - Set the name, description, and pricing
+   - Choose billing interval (monthly, yearly, etc.)
+   - Copy the **Product ID** (you'll need this)
+   - Copy the **Product Slug** (you'll need this too)
+4. Make note of at least one product ID and slug for your starter tier`,
+      },
+      {
+        id: "api-keys",
+        heading: "API Keys",
+        body: `1. Go to "Settings" → "API Keys" in your Polar dashboard
+2. Click "Generate API Key"
+3. Name it (e.g., "Production API Key" or "Development")
+4. Copy the **Access Token** - this is your \`POLAR_ACCESS_TOKEN\`
+5. **Important:** Store this securely - you won't be able to see it again after closing the dialog`,
+      },
+      {
+        id: "webhooks",
+        heading: "Webhooks",
+        body: `Webhooks notify your app when subscription events occur (created, canceled, updated, etc.).
+
+**Step 1: Generate Webhook Secret**
+1. Go to "Settings" → "Webhooks" in your Polar dashboard
+2. Click "Add Endpoint" or edit existing endpoint
+3. Set the endpoint URL:
+   - Development: \`http://localhost:3000/api/webhooks/polar\` (use ngrok for local testing)
+   - Production: \`https://yourdomain.com/api/webhooks/polar\`
+4. Copy the **Webhook Secret** - this is your \`POLAR_WEBHOOK_SECRET\`
+5. Select the events you want to receive (recommended: all subscription events)
+6. Save the endpoint`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Polar.sh API
+POLAR_ACCESS_TOKEN="your-polar-access-token"
+
+# Polar.sh Webhooks
+POLAR_WEBHOOK_SECRET="your-webhook-secret"
+
+# Polar.sh Products (from step 2)
+NEXT_PUBLIC_STARTER_TIER="your-product-id"
+NEXT_PUBLIC_STARTER_SLUG="your-product-slug"
+
+# Success URL (where users redirect after successful payment)
+POLAR_SUCCESS_URL="success"
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
+\`\`\`
+
+**Important:**
+- \`POLAR_ACCESS_TOKEN\` comes from "Settings" → "API Keys"
+- \`POLAR_WEBHOOK_SECRET\` comes from "Settings" → "Webhooks"
+- \`NEXT_PUBLIC_STARTER_TIER\` is the Product ID from your product
+- \`NEXT_PUBLIC_STARTER_SLUG\` is the Product Slug from your product
+- \`POLAR_SUCCESS_URL\` is the relative path where users redirect after checkout`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`/pricing\` page
+3. Click "Get Started" on a plan
+4. Complete the checkout flow (use Stripe test cards)
+5. Verify webhook events are received (check server logs)
+6. Check that subscription status updates in your database
+
+**Test Cards (Stripe):**
+- Success: \`4242 4242 4242 4242\`
+- Decline: \`4000 0000 0000 0002\`
+- Any future expiry date, any 3-digit CVC
+
+**Testing Webhooks Locally:**
+Use [ngrok](https://ngrok.com/) to expose your local server:
+\`\`\`bash
+ngrok http 3000
+\`\`\`
+Then use the ngrok URL in your Polar webhook endpoint configuration.`,
+      },
+    ],
+  },
+
+  "emails/resend": {
+    title: "Resend",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "account-setup", title: "Account Setup" },
+      { id: "api-key", title: "Get API Key" },
+      { id: "domain-setup", title: "Domain Setup (Optional)" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Resend is a modern transactional email API built for developers. It's simple to use, has great deliverability, and works perfectly for sending transactional emails like welcome emails, password resets, and notifications.",
+      },
+      {
+        id: "account-setup",
+        heading: "Account Setup",
+        body: `1. Go to [resend.com](https://resend.com) and sign up for an account
+2. Verify your email address
+3. You'll start with a free tier that includes 3,000 emails/month and unlimited domains`,
+      },
+      {
+        id: "api-key",
+        heading: "Get API Key",
+        body: `1. In your Resend dashboard, go to "API Keys"
+2. Click "Create API Key"
+3. Name it (e.g., "Production" or "Development")
+4. Select permissions (for sending emails, you only need "Sending access")
+5. Click "Add"
+6. **Important:** Copy the API key immediately - you won't be able to see it again after closing the dialog
+7. This is your \`RESEND_API_KEY\``,
+      },
+      {
+        id: "domain-setup",
+        heading: "Domain Setup (Optional but Recommended)",
+        body: `While you can use Resend's test domain initially, setting up your own domain improves deliverability.
+
+**Step 1: Add Domain**
+1. Go to "Domains" in your Resend dashboard
+2. Click "Add Domain"
+3. Enter your domain (e.g., \`mg.yourdomain.com\` - using a subdomain is recommended)
+4. Click "Add"
+
+**Step 2: Add DNS Records**
+Resend will show you the DNS records to add. You need to add:
+- **SPF Record:** \`v=spf1 include:resend.com ~all\`
+- **DKIM Records:** Multiple CNAME records (Resend will provide exact values)
+- **DMARC Record (Optional):** \`v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com\`
+
+**Step 3: Verify Domain**
+1. Add the DNS records in your domain's DNS provider (Cloudflare, Namecheap, etc.)
+2. Wait for DNS propagation (can take up to 24 hours, usually much faster)
+3. Click "Verify" in Resend dashboard
+4. Once verified, you can send emails from addresses like \`noreply@mg.yourdomain.com\``,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add this variable to your \`.env.local\` file:
+
+\`\`\`env
+# Resend
+RESEND_API_KEY="re_xxxxxxxxxxxxx"
+\`\`\`
+
+**For Domain Setup:**
+If you've set up a custom domain, you'll also need to specify the "From" email address in your email sending code. For example:
+\`\`\`typescript
+from: "noreply@mg.yourdomain.com"
+\`\`\`
+
+**Without Domain Setup:**
+You can use Resend's test domain:
+\`\`\`typescript
+from: "onboarding@resend.dev"
+\`\`\`
+Note: Emails from the test domain may have delivery limitations.`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Add \`RESEND_API_KEY\` to your \`.env.local\`
+2. Restart your dev server: \`npm run dev\`
+3. Trigger an email (e.g., sign up a user, reset password)
+4. Check your email inbox
+5. In Resend dashboard → "Logs", you can see email delivery status
+
+**Test Email Script:**
+You can test sending emails directly:
+\`\`\`typescript
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+await resend.emails.send({
+  from: 'onboarding@resend.dev',
+  to: 'your-email@example.com',
+  subject: 'Hello World',
+  html: '<p>This is a test email!</p>',
+});
+\`\`\`
+
+**Troubleshooting:**
+- If emails don't arrive, check the "Logs" in Resend dashboard for error messages
+- Verify your API key is correct
+- For production, ensure domain is verified
+- Check spam folder if using test domain`,
+      },
+    ],
+  },
+  "emails/mailgun": {
+    title: "Mailgun",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "account-setup", title: "Account Setup" },
+      { id: "api-key", title: "Get API Key" },
+      { id: "domain-setup", title: "Domain Setup" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Mailgun is an email service provider that specializes in transactional emails and inbound email processing. It's great for high-volume sending and provides detailed analytics and tracking.",
+      },
+      {
+        id: "account-setup",
+        heading: "Account Setup",
+        body: `1. Go to [mailgun.com](https://www.mailgun.com) and sign up
+2. Verify your email address
+3. You'll start with a free tier that includes 5,000 emails/month for the first 3 months
+4. Complete account verification`,
+      },
+      {
+        id: "api-key",
+        heading: "Get API Key",
+        body: `1. In your Mailgun dashboard, go to "Sending" → "Domain Settings"
+2. You'll see your API key displayed
+3. Copy the **API Key** - this is your \`MAILGUN_API_KEY\`
+4. Also note your domain (e.g., \`sandboxxxx.mailgun.org\` for testing, or your custom domain)
+5. **Important:** Store the API key securely`,
+      },
+      {
+        id: "domain-setup",
+        heading: "Domain Setup",
+        body: `For production, you need to add and verify your sending domain.
+
+**Step 1: Add Domain**
+1. Go to "Sending" → "Domains" in your Mailgun dashboard
+2. Click "Add New Domain"
+3. Enter your domain (e.g., \`mg.yourdomain.com\` - using a subdomain is recommended)
+4. Click "Add Domain"
+
+**Step 2: Add DNS Records**
+Mailgun will show you the DNS records to add:
+- **TXT Record (SPF):** \`v=spf1 include:mailgun.org ~all\`
+- **CNAME Records (DKIM):** Multiple CNAME records (Mailgun provides exact values)
+- **TXT Record (DMARC):** \`v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com\`
+- **MX Records (for inbound):** Optional, only if you want to receive emails
+
+**Step 3: Verify Domain**
+1. Add the DNS records in your domain's DNS provider
+2. Wait for DNS propagation (can take up to 24 hours, usually faster)
+3. Click "Verify DNS Settings" in Mailgun
+4. Once verified, you can send from addresses like \`noreply@mg.yourdomain.com\`
+
+**For Testing:**
+You can use Mailgun's sandbox domain (e.g., \`sandboxxxx.mailgun.org\`) without DNS setup, but emails may have delivery limitations.`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add these variables to your \`.env.local\` file:
+
+\`\`\`env
+# Mailgun
+MAILGUN_API_KEY="your-mailgun-api-key"
+MAILGUN_DOMAIN="mg.yourdomain.com"  # or sandboxxxx.mailgun.org for testing
+\`\`\`
+
+**Important:**
+- \`MAILGUN_API_KEY\` comes from "Sending" → "Domain Settings"
+- \`MAILGUN_DOMAIN\` is your verified domain or sandbox domain
+- For production, use your custom verified domain
+- For development, you can use the sandbox domain`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Add \`MAILGUN_API_KEY\` and \`MAILGUN_DOMAIN\` to your \`.env.local\`
+2. Restart your dev server: \`npm run dev\`
+3. Trigger an email (e.g., sign up, password reset)
+4. Check your email inbox
+5. In Mailgun dashboard → "Sending" → "Logs", you can see email delivery status
+
+**Test Email Script:**
+\`\`\`typescript
+import formData from 'form-data';
+import Mailgun from 'mailgun.js';
+
+const mailgun = new Mailgun(formData);
+const mg = mailgun.client({
+  username: 'api',
+  key: process.env.MAILGUN_API_KEY!,
+});
+
+await mg.messages.create(process.env.MAILGUN_DOMAIN!, {
+  from: \`noreply@\${process.env.MAILGUN_DOMAIN}\`,
+  to: ['your-email@example.com'],
+  subject: 'Hello',
+  text: 'Testing Mailgun!',
+});
+\`\`\`
+
+**Troubleshooting:**
+- If emails don't arrive, check Mailgun logs for error messages
+- Verify API key and domain are correct
+- For production, ensure domain is verified
+- Check spam folder, especially when using sandbox domain
+- Review Mailgun's sending limits and quotas`,
+      },
+    ],
+  },
+  "emails/inbound-webhooks": {
+    title: "Inbound webhooks",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Receive inbound email events and forward to your app endpoint." }],
+  },
+  "emails/dns": {
+    title: "DNS (DKIM/DMARC/SPF)",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Use a subdomain and configure DKIM/DMARC/SPF to avoid spam." }],
+  },
+
+  "database/supabase-postgres": {
+    title: "Supabase Postgres",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "create-project", title: "Create Project" },
+      { id: "get-connection-string", title: "Get Connection String" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "run-migrations", title: "Run Migrations" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Supabase provides a fully managed PostgreSQL database with additional features like real-time subscriptions, storage, and auth. It works seamlessly with Drizzle ORM and is a great alternative to Neon.",
+      },
+      {
+        id: "create-project",
+        heading: "Create Project",
+        body: `1. Go to [supabase.com](https://supabase.com) and sign up for an account
+2. Click "New Project"
+3. Choose an organization (or create one)
+4. Fill in project details:
+   - Name: Your project name
+   - Database Password: Create a strong password (save this!)
+   - Region: Choose closest to your users
+5. Click "Create new project"
+6. Wait for provisioning (usually 2-3 minutes)`,
+      },
+      {
+        id: "get-connection-string",
+        heading: "Get Connection String",
+        body: `1. In your Supabase project dashboard, go to "Settings" → "Database"
+2. Scroll down to "Connection string"
+3. Select "URI" tab (not "JDBC" or "Golang")
+4. Copy the connection string - it looks like: \`postgresql://postgres:[YOUR-PASSWORD]@db.xxx.supabase.co:5432/postgres\`
+5. **Important:** Replace \`[YOUR-PASSWORD]\` with the database password you set when creating the project
+6. Add \`?sslmode=require\` at the end for SSL
+
+**Connection Pooling (Recommended for Serverless):**
+Supabase provides connection pooling for better performance with serverless functions. In "Settings" → "Database", look for "Connection pooling" and use the "Transaction" mode connection string.`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add this variable to your \`.env.local\` file:
+
+\`\`\`env
+# Supabase Postgres
+DATABASE_URL="postgresql://postgres:your-password@db.xxx.supabase.co:5432/postgres?sslmode=require"
+\`\`\`
+
+**Important:**
+- Replace \`your-password\` with your actual database password
+- The connection string should include \`?sslmode=require\` for SSL
+- For production, use environment variables in your hosting platform
+- Never commit \`.env.local\` to git`,
+      },
+      {
+        id: "run-migrations",
+        heading: "Run Migrations",
+        body: `After setting \`DATABASE_URL\`, run the database migrations:
+
+\`\`\`bash
+# Generate migrations from your schema
+npx drizzle-kit generate
+
+# Push migrations to your database
+npx drizzle-kit push
+\`\`\`
+
+This will create all the required tables in your Supabase database.
+
+**Using Supabase SQL Editor:**
+You can also run SQL directly in Supabase:
+1. Go to "SQL Editor" in your Supabase dashboard
+2. Write and run SQL queries
+3. View results in the interface`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`http://localhost:3000/sign-up\`
+3. Create a test account
+4. Verify the user was created:
+   - Go to Supabase dashboard → "Table Editor"
+   - Select the \`user\` table
+   - You should see your test user
+5. Sign in and verify sessions work correctly
+
+**Troubleshooting:**
+- If connection fails, verify the password in the connection string is correct
+- Check that SSL mode is set to \`require\`
+- Ensure your IP isn't blocked in "Settings" → "Database" → "Connection Pooling"
+- For serverless, use the connection pooling URL instead`,
+      },
+    ],
+  },
+  "database/neon-postgres": {
+    title: "Neon Postgres",
+    updated: "December 18, 2025",
+    toc: [
+      { id: "overview", title: "Overview" },
+      { id: "create-project", title: "Create Project" },
+      { id: "get-connection-string", title: "Get Connection String" },
+      { id: "env-variables", title: "Environment Variables" },
+      { id: "run-migrations", title: "Run Migrations" },
+      { id: "test", title: "Testing" },
+    ],
+    sections: [
+      {
+        id: "overview",
+        heading: "Overview",
+        body: "Neon is a serverless PostgreSQL database that works seamlessly with Drizzle ORM. It's the default database provider in the scaffold, offering automatic scaling, branching, and zero-downtime migrations.",
+      },
+      {
+        id: "create-project",
+        heading: "Create Project",
+        body: `1. Go to [neon.tech](https://neon.tech) and sign up for an account
+2. Click "Create Project"
+3. Choose a project name and region (select closest to your users)
+4. Select PostgreSQL version (15 or 16 recommended)
+5. Click "Create Project"
+6. Wait for the database to be provisioned (usually takes ~30 seconds)`,
+      },
+      {
+        id: "get-connection-string",
+        heading: "Get Connection String",
+        body: `1. In your Neon project dashboard, you'll see a connection string displayed
+2. Click "Copy" next to the connection string
+3. The connection string looks like: \`postgresql://user:password@ep-xxx-xxx.region.aws.neon.tech/dbname?sslmode=require\`
+4. **Important:** This is your database password - store it securely. You can also reset it in "Settings" → "Password" if needed
+
+**Connection Pooling (Optional but Recommended):**
+Neon also provides a pooled connection string for better performance with serverless functions. Look for the "Pooled connection" option in the dashboard.`,
+      },
+      {
+        id: "env-variables",
+        heading: "Environment Variables",
+        body: `Add this variable to your \`.env.local\` file:
+
+\`\`\`env
+# Neon Postgres
+DATABASE_URL="postgresql://user:password@ep-xxx-xxx.region.aws.neon.tech/dbname?sslmode=require"
+\`\`\`
+
+**Important:**
+- Replace the connection string with your actual Neon connection string
+- For production, use environment variables in your hosting platform (Vercel, etc.)
+- Never commit \`.env.local\` to git (it's already in \`.gitignore\`)`,
+      },
+      {
+        id: "run-migrations",
+        heading: "Run Migrations",
+        body: `After setting \`DATABASE_URL\`, run the database migrations:
+
+\`\`\`bash
+# Generate migrations from your schema
+npx drizzle-kit generate
+
+# Push migrations to your database
+npx drizzle-kit push
+\`\`\`
+
+This will create all the required tables (users, sessions, accounts, subscriptions, etc.) in your Neon database.
+
+**Alternative: Use Drizzle Studio (Optional)**
+View and manage your database with Drizzle Studio:
+\`\`\`bash
+npx drizzle-kit studio
+\`\`\`
+This opens a local web interface to browse your database tables and data.`,
+      },
+      {
+        id: "test",
+        heading: "Testing",
+        body: `1. Restart your dev server: \`npm run dev\`
+2. Navigate to \`http://localhost:3000/sign-up\`
+3. Create a test account
+4. Verify the user was created in your database (use Drizzle Studio or Neon dashboard)
+5. Sign in and verify sessions work correctly
+
+**Using Neon Dashboard:**
+1. Go to your Neon project dashboard
+2. Click "SQL Editor"
+3. Run: \`SELECT * FROM user;\` to see created users
+
+**Troubleshooting:**
+- If connection fails, verify the connection string is correct
+- Check that SSL mode is set to \`require\` in the connection string
+- Ensure your IP isn't blocked (Neon allows all IPs by default)
+- For serverless environments (Vercel), connection pooling is recommended`,
+      },
+    ],
+  },
+  "database/mongodb": {
+    title: "MongoDB",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Use MongoDB with Mongoose schemas and plugins." }],
+  },
+  "database/schema-migrations": {
+    title: "Schema & migrations",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }, { id: "drizzle", title: "Drizzle migrations" }],
+    sections: [
+      { id: "overview", heading: "Overview", body: "Keep schema changes tracked and deployable." },
+      { id: "drizzle", heading: "Drizzle migrations", body: "Use drizzle-kit generate/push to keep Postgres schema in sync." },
+    ],
+  },
+
+  "seo/blog": {
+    title: "Blog starter",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "A blog structure to publish SEO-friendly content quickly." }],
+  },
+  "seo/meta-tags": {
+    title: "Meta tags",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Title/description defaults and page overrides." }],
+  },
+  "seo/opengraph": {
+    title: "OpenGraph",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "OpenGraph tags for social previews." }],
+  },
+  "seo/sitemap": {
+    title: "Sitemap",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Automated sitemap generation for faster indexing." }],
+  },
+  "seo/structured-data": {
+    title: "Structured data",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Schema.org markup for rich snippets." }],
+  },
+
+  "style/tailwind": {
+    title: "Tailwind CSS",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Utility-first styling with sensible defaults." }],
+  },
+  "style/daisyui": {
+    title: "daisyUI themes",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Theme packs to re-skin your UI quickly." }],
+  },
+  "style/dark-mode": {
+    title: "Automatic dark mode",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "Toggle + persisted preference out of the box." }],
+  },
+  "style/ui-components": {
+    title: "UI components",
+    updated: "December 18, 2025",
+    toc: [{ id: "overview", title: "Overview" }],
+    sections: [{ id: "overview", heading: "Overview", body: "A starter component library for common flows and sections." }],
+  },
+};
+
+export default async function DocsSubPage({
+  params,
+}: {
+  params: Promise<{ slug: string; subslug: string }>;
+}) {
+  const { slug, subslug } = await params;
+  const key = `${slug}/${subslug}`;
+  const page = subpages[key];
+
+  if (!page) {
+    return (
+      <div className="py-10">
+        <div className="text-3xl font-semibold tracking-tight">Not found</div>
+        <p className="mt-3 text-white/70">This docs page doesn’t exist yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_240px] gap-10">
+      <article className="py-10">
+        <div className="text-[44px] leading-[1.1] font-semibold tracking-tight">{page.title}</div>
+        <div className="mt-4 text-sm text-white/60">Last updated {page.updated}</div>
+
+        <div className="mt-10 border-t border-white/10 pt-10 space-y-10">
+          {page.sections.map((s) => (
+            <section key={s.id} id={s.id} className="space-y-4">
+              <h2 className="text-2xl font-semibold tracking-tight">{s.heading}</h2>
+              <div className="text-white/70 leading-relaxed prose prose-invert prose-p:text-white/70 prose-headings:text-white prose-strong:text-white prose-code:text-orange-500 prose-code:bg-white/10 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:bg-[#1a1a1a] prose-pre:border prose-pre:border-white/10 max-w-none">
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    code: ({ className, children, ...props }: { className?: string; children?: React.ReactNode }) => {
+                      const match = /language-(\w+)/.exec(className || "");
+                      const isBlock = match;
+                      return isBlock ? (
+                        <pre className="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 overflow-x-auto my-4">
+                          <code className={className} {...props}>
+                            {children}
+                          </code>
+                        </pre>
+                      ) : (
+                        <code className="text-orange-500 bg-white/10 px-1.5 py-0.5 rounded" {...props}>
+                          {children}
+                        </code>
+                      );
+                    },
+                    a: ({ ...props }) => (
+                      <a className="text-orange-500 hover:text-orange-400 underline" {...props} />
+                    ),
+                    ul: ({ ...props }) => <ul className="list-disc list-inside space-y-1 my-4" {...props} />,
+                    ol: ({ ...props }) => <ol className="list-decimal list-inside space-y-1 my-4" {...props} />,
+                    li: ({ ...props }) => <li className="ml-4" {...props} />,
+                  }}
+                >
+                  {s.body}
+                </ReactMarkdown>
+              </div>
+            </section>
+          ))}
+        </div>
+      </article>
+
+      <aside className="hidden xl:block">
+        <DocsToc items={page.toc} />
+      </aside>
+    </div>
+  );
+}
+
+