How to build a Substack clone with Next.js and Whop

npx create-next-app@latest penstack --typescript --tailwind --eslint --app --src-dir --use-npm
cd penstack

npm install @whop/sdk @whop/embedded-components-react-js @whop/embedded-components-vanilla-js iron-session zod prisma @prisma/client @prisma/adapter-pg uploadthing @uploadthing/react @tiptap/core @tiptap/react @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-placeholder @tiptap/extension-underline @tiptap/extension-link @tiptap/pm lucide-react

NEXT_PUBLIC_APP_URL=https://your-app.vercel.app

vercel env pull .env.local

import { z } from "zod";

const envSchema = z.object({
  WHOP_APP_ID: z.string().startsWith("app_"),
  WHOP_API_KEY: z.string().startsWith("apik_"),
  WHOP_COMPANY_ID: z.string().startsWith("biz_"),
  WHOP_WEBHOOK_SECRET: z.string().min(1),
  WHOP_CLIENT_ID: z.string().min(1),
  WHOP_CLIENT_SECRET: z.string().min(1),

  DATABASE_URL: z.string().url(),
  DIRECT_URL: z.string().url(),

  UPLOADTHING_TOKEN: z.string().min(1),

  SESSION_SECRET: z.string().min(32),

  NEXT_PUBLIC_APP_URL: z.string().url(),

  NEXT_PUBLIC_DEMO_MODE: z.string().optional(),

  WHOP_SANDBOX: z.string().optional(),
});

let _env: z.infer<typeof envSchema> | null = null;

export function getEnv() {
  if (!_env) {
    _env = envSchema.parse(process.env);
  }
  return _env;
}

export const env = new Proxy({} as z.infer<typeof envSchema>, {
  get(_target, prop: string) {
    return getEnv()[prop as keyof z.infer<typeof envSchema>];
  },
});

export function isDemoMode(): boolean {
  return process.env.NEXT_PUBLIC_DEMO_MODE === "true";
}

npx prisma init
npm install -D dotenv

generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

model User {
  id          String   @id @default(cuid())
  whopUserId  String   @unique
  email       String?
  username    String?
  displayName String?
  avatarUrl   String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

import "dotenv/config";
import { defineConfig } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
  },
  datasource: {
    url: process.env["DIRECT_URL"],
  },
});

npx prisma db push

import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    adapter,
    log: process.env.NODE_ENV === "development" ? ["query"] : [],
  });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

WHOP_SANDBOX=true

import { getIronSession, SessionOptions } from "iron-session";
import { cookies } from "next/headers";

export interface SessionData {
  userId?: string;
  whopUserId?: string;
  accessToken?: string;
  codeVerifier?: string;
}

const sessionOptions: SessionOptions = {
  password: process.env.SESSION_SECRET!,
  cookieName: "penstack_session",
  cookieOptions: {
    secure: process.env.NODE_ENV === "production",
    httpOnly: true,
    sameSite: "lax",
    maxAge: 60 * 60 * 24 * 7, // 7 days
  },
};

export async function getSession() {
  const cookieStore = await cookies();
  return getIronSession<SessionData>(cookieStore, sessionOptions);
}

import Whop from "@whop/sdk";

let _whop: Whop | null = null;
export function getWhop(): Whop {
  if (!_whop) {
    _whop = new Whop({
      appID: process.env.WHOP_APP_ID!,
      apiKey: process.env.WHOP_API_KEY!,
      ...(process.env.WHOP_SANDBOX === "true" && {
        baseURL: "https://sandbox-api.whop.com/api/v1",
      }),
    });
  }
  return _whop;
}

export const whop = new Proxy({} as Whop, {
  get(_target, prop, receiver) {
    return Reflect.get(getWhop(), prop, receiver);
  },
});

const isSandbox = process.env.WHOP_SANDBOX === "true";
const whopDomain = isSandbox ? "sandbox.whop.com" : "whop.com";
const whopApiDomain = isSandbox ? "sandbox-api.whop.com" : "api.whop.com";

export const WHOP_OAUTH = {
  authorizationUrl: `https://${whopApiDomain}/oauth/authorize`,
  tokenUrl: `https://${whopApiDomain}/oauth/token`,
  userInfoUrl: `https://${whopApiDomain}/oauth/userinfo`,
  clientId: process.env.WHOP_CLIENT_ID!,
  clientSecret: process.env.WHOP_CLIENT_SECRET!,
  scopes: [
    "openid",
    "profile",
    "email",
    "chat:message:create",
    "chat:read",
    "dms:read",
    "dms:message:manage",
    "dms:channel:manage",
  ],
  redirectUri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
};

export async function generatePKCE() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  const verifier = base64UrlEncode(array);

  const encoder = new TextEncoder();
  const data = encoder.encode(verifier);
  const digest = await crypto.subtle.digest("SHA-256", data);
  const challenge = base64UrlEncode(new Uint8Array(digest));

  return { verifier, challenge };
}

function base64UrlEncode(buffer: Uint8Array): string {
  let binary = "";
  for (const byte of buffer) {
    binary += String.fromCharCode(byte);
  }
  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

import { NextResponse } from "next/server";

interface RateLimitConfig {
  interval: number; // ms
  maxRequests: number;
}

const rateLimitMap = new Map<string, { count: number; lastReset: number }>();

export function rateLimit(
  key: string,
  config: RateLimitConfig = { interval: 60_000, maxRequests: 30 }
): NextResponse | null {
  const now = Date.now();
  const entry = rateLimitMap.get(key);

  if (!entry || now - entry.lastReset > config.interval) {
    rateLimitMap.set(key, { count: 1, lastReset: now });
    return null;
  }

  if (entry.count >= config.maxRequests) {
    return NextResponse.json(
      { error: "Too many requests. Please try again later." },
      {
        status: 429,
        headers: {
          "Retry-After": String(
            Math.ceil((config.interval - (now - entry.lastReset)) / 1000)
          ),
        },
      }
    );
  }

  entry.count++;
  return null;
}

if (typeof globalThis !== "undefined") {
  const CLEANUP_INTERVAL = 5 * 60 * 1000;
  setInterval(() => {
    const now = Date.now();
    for (const [key, entry] of rateLimitMap.entries()) {
      if (now - entry.lastReset > 10 * 60 * 1000) {
        rateLimitMap.delete(key);
      }
    }
  }, CLEANUP_INTERVAL).unref?.();
}

import { NextRequest, NextResponse } from "next/server";
import { WHOP_OAUTH, generatePKCE } from "@/lib/whop";

function randomHex(bytes: number): string {
  const buf = new Uint8Array(bytes);
  crypto.getRandomValues(buf);
  return Array.from(buf)
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

export async function GET(request: NextRequest) {
  const returnTo = request.nextUrl.searchParams.get("returnTo");
  const safeReturnTo =
    returnTo && returnTo.startsWith("/") && !returnTo.startsWith("//")
      ? returnTo
      : null;

  const { verifier, challenge } = await generatePKCE();
  const state = randomHex(16);
  const nonce = randomHex(16);

  const authUrl = new URL(WHOP_OAUTH.authorizationUrl);
  authUrl.searchParams.set("client_id", WHOP_OAUTH.clientId);
  authUrl.searchParams.set("redirect_uri", WHOP_OAUTH.redirectUri);
  authUrl.searchParams.set("response_type", "code");
  authUrl.searchParams.set("scope", WHOP_OAUTH.scopes.join(" "));
  authUrl.searchParams.set("code_challenge", challenge);
  authUrl.searchParams.set("code_challenge_method", "S256");
  authUrl.searchParams.set("state", state);
  authUrl.searchParams.set("nonce", nonce);

  const cookieValue = JSON.stringify({
    codeVerifier: verifier,
    state,
    ...(safeReturnTo ? { returnTo: safeReturnTo } : {}),
  });

  const response = NextResponse.redirect(authUrl.toString());
  response.cookies.set("oauth_pkce", cookieValue, {
    httpOnly: true,
    secure: WHOP_OAUTH.redirectUri.startsWith("https"),
    sameSite: "lax",
    path: "/",
    maxAge: 600, // 10 minutes
  });

  return response;
}

import { NextRequest, NextResponse } from "next/server";
import { getSession } from "@/lib/session";
import { WHOP_OAUTH } from "@/lib/whop";
import { prisma } from "@/lib/prisma";

export async function GET(request: NextRequest) {
  const code = request.nextUrl.searchParams.get("code");
  const state = request.nextUrl.searchParams.get("state");

  if (!code || !state) {
    return NextResponse.json(
      { error: "Missing authorization code or state" },
      { status: 400 }
    );
  }

  const pkceCookie = request.cookies.get("oauth_pkce");
  if (!pkceCookie?.value) {
    return NextResponse.json(
      { error: "Missing PKCE cookie. Please try logging in again." },
      { status: 400 }
    );
  }

  let storedState: string;
  let codeVerifier: string;
  let returnTo: string | undefined;
  try {
    const parsed = JSON.parse(pkceCookie.value);
    storedState = parsed.state;
    codeVerifier = parsed.codeVerifier;
    returnTo = parsed.returnTo;
  } catch {
    return NextResponse.json(
      { error: "Invalid PKCE cookie." },
      { status: 400 }
    );
  }

  if (state !== storedState) {
    return NextResponse.json(
      { error: "State mismatch — possible CSRF." },
      { status: 400 }
    );
  }

  const tokenResponse = await fetch(WHOP_OAUTH.tokenUrl, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: WHOP_OAUTH.redirectUri,
      client_id: WHOP_OAUTH.clientId,
      client_secret: WHOP_OAUTH.clientSecret,
      code_verifier: codeVerifier,
    }),
  });

  if (!tokenResponse.ok) {
    const error = await tokenResponse.text();
    console.error("Token exchange failed:", error);
    return NextResponse.json(
      {
        error: "Failed to exchange authorization code",
        detail: error,
        tokenUrl: WHOP_OAUTH.tokenUrl,
        redirectUri: WHOP_OAUTH.redirectUri,
      },
      { status: 502 }
    );
  }

  const tokenData = await tokenResponse.json();
  const accessToken: string = tokenData.access_token;

  const userInfoResponse = await fetch(WHOP_OAUTH.userInfoUrl, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  if (!userInfoResponse.ok) {
    console.error("User info fetch failed:", await userInfoResponse.text());
    return NextResponse.json(
      { error: "Failed to fetch user info" },
      { status: 502 }
    );
  }

  const userInfo = await userInfoResponse.json();

  const user = await prisma.user.upsert({
    where: { whopUserId: userInfo.sub },
    update: {
      email: userInfo.email ?? null,
      username: userInfo.preferred_username ?? null,
      displayName: userInfo.name ?? null,
      avatarUrl: userInfo.picture ?? null,
    },
    create: {
      whopUserId: userInfo.sub,
      email: userInfo.email ?? null,
      username: userInfo.preferred_username ?? null,
      displayName: userInfo.name ?? null,
      avatarUrl: userInfo.picture ?? null,
    },
  });

  const session = await getSession();
  session.userId = user.id;
  session.whopUserId = user.whopUserId;
  session.accessToken = accessToken;
  await session.save();

  const redirectPath =
    returnTo && returnTo.startsWith("/") && !returnTo.startsWith("//")
      ? returnTo
      : "/";
  const response = NextResponse.redirect(new URL(redirectPath, request.url));
  response.cookies.delete("oauth_pkce");
  return response;
}

import { NextResponse } from "next/server";
import { getSession } from "@/lib/session";

export async function GET() {
  const session = await getSession();
  session.destroy();
  return NextResponse.redirect(new URL("/", process.env.NEXT_PUBLIC_APP_URL!));
}

import { redirect } from "next/navigation";
import { getSession } from "./session";
import { prisma } from "./prisma";

export async function requireAuth(
  options?: { redirect?: boolean }
): Promise<{
  id: string;
  whopUserId: string;
  email: string | null;
  username: string | null;
  displayName: string | null;
  avatarUrl: string | null;
} | null> {
  const session = await getSession();

  if (!session.userId) {
    if (options?.redirect === false) return null;
    redirect("/api/auth/login");
  }

  const user = await prisma.user.findUnique({
    where: { id: session.userId },
  });

  if (!user) {
    session.destroy();
    if (options?.redirect === false) return null;
    redirect("/api/auth/login");
  }

  return user;
}

export async function getWriterProfile(userId: string) {
  return prisma.writer.findUnique({ where: { userId } });
}

export async function isAuthenticated(): Promise<boolean> {
  const session = await getSession();
  return !!session.userId;
}

const config = {
  framework: "nextjs" as const,
  buildCommand: "prisma generate && next build",
  regions: ["iad1"],
  headers: [
    {
      source: "/(.*)",
      headers: [
        {
          key: "X-Content-Type-Options",
          value: "nosniff",
        },
        {
          key: "X-Frame-Options",
          value: "DENY",
        },
        {
          key: "Referrer-Policy",
          value: "strict-origin-when-cross-origin",
        },
      ],
    },
  ],
};

export default config;

generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

//  Enums
enum PublicationCategory {
  TECHNOLOGY
  BUSINESS
  CULTURE
  POLITICS
  SCIENCE
  HEALTH
  FINANCE
  SPORTS
  FOOD
  TRAVEL
  MUSIC
  ART
  EDUCATION
  OTHER
}

enum PostVisibility {
  FREE
  PAID
  PREVIEW
}

enum SubscriptionStatus {
  ACTIVE
  PAST_DUE
  CANCELLED
  PAUSED
  TRIALING
}

enum NotificationType {
  NEW_POST
  NEW_SUBSCRIBER
  NEW_FOLLOWER
  PAYMENT_RECEIVED
  PAYMENT_FAILED
}

// Models
model User {
  id          String   @id @default(cuid())
  whopUserId  String   @unique
  email       String?
  username    String?
  displayName String?
  avatarUrl   String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  writer        Writer?
  subscriptions Subscription[]
  follows       Follow[]
  likes         Like[]
  notifications Notification[]
}

model Writer {
  id        String   @id @default(cuid())
  userId    String   @unique
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  handle    String
  name      String
  bio       String?
  avatarUrl String?
  bannerUrl String?
  category  PublicationCategory @default(OTHER)

  whopCompanyId     String?
  whopProductId     String?
  whopPlanId        String?
  whopChatChannelId String?

  kycCompleted      Boolean @default(false)
  monthlyPriceInCents Int?
  chatPublic        Boolean @default(true)

  posts         Post[]
  subscriptions Subscription[]
  followers     Follow[]

  @@index([handle])
  @@index([category])
}

model Post {
  id        String   @id @default(cuid())
  writerId  String
  writer    Writer   @relation(fields: [writerId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  slug          String
  title         String
  subtitle      String?
  coverImageUrl String?
  content       Json
  visibility    PostVisibility @default(FREE)
  paywallIndex  Int?

  published   Boolean   @default(false)
  publishedAt DateTime?
  viewCount   Int       @default(0)

  likes Like[]

  @@unique([writerId, slug])
  @@index([writerId, published, publishedAt])
  @@index([published, publishedAt])
  @@index([visibility])
}

model Subscription {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  writerId  String
  writer    Writer   @relation(fields: [writerId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  status             SubscriptionStatus @default(ACTIVE)
  whopMembershipId   String?            @unique
  currentPeriodEnd   DateTime?
  cancelledAt        DateTime?
  lastWebhookEventId String?

  @@unique([userId, writerId])
  @@index([writerId, status])
}

model Follow {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  writerId  String
  writer    Writer   @relation(fields: [writerId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())

  @@unique([userId, writerId])
  @@index([writerId])
}

model Like {
  id        String   @id @default(cuid())
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  postId    String
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())

  @@unique([userId, postId])
  @@index([postId])
}

model Notification {
  id        String           @id @default(cuid())
  userId    String
  user      User             @relation(fields: [userId], references: [id], onDelete: Cascade)
  type      NotificationType
  title     String
  message   String
  postId    String?
  writerId  String?
  read      Boolean          @default(false)
  createdAt DateTime         @default(now())

  @@index([userId, read, createdAt])
}

model WebhookEvent {
  id          String   @id
  eventType   String
  processedAt DateTime @default(now())
}

npx prisma db push

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { getSession } from "./session";

const f = createUploadthing();

export const uploadRouter = {
  avatarUploader: f({
    image: { maxFileSize: "2MB", maxFileCount: 1 },
  })
    .middleware(async () => {
      const session = await getSession();
      if (!session.userId) throw new Error("Unauthorized");
      return { userId: session.userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { url: file.ufsUrl, userId: metadata.userId };
    }),

  bannerUploader: f({
    image: { maxFileSize: "4MB", maxFileCount: 1 },
  })
    .middleware(async () => {
      const session = await getSession();
      if (!session.userId) throw new Error("Unauthorized");
      return { userId: session.userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { url: file.ufsUrl, userId: metadata.userId };
    }),

  coverImageUploader: f({
    image: { maxFileSize: "4MB", maxFileCount: 1 },
  })
    .middleware(async () => {
      const session = await getSession();
      if (!session.userId) throw new Error("Unauthorized");
      return { userId: session.userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      return { url: file.ufsUrl, userId: metadata.userId };
    }),

  editorImageUploader: f({
    image: { maxFileSize: "4MB", maxFileCount: 1 },
  })
    .middleware(async () => {
      const session = await getSession();
      if (!session.userId) throw new Error("Unauthorized");
      return { userId: session.userId };
    })
    .onUploadComplete(async ({ file }) => {
      return { url: file.ufsUrl };
    }),
} satisfies FileRouter;

export type UploadRouter = typeof uploadRouter;

vercel env pull .env.local

import { createRouteHandler } from "uploadthing/next";
import { uploadRouter } from "@/lib/uploadthing";

export const { GET, POST } = createRouteHandler({
  router: uploadRouter,
});

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { rateLimit } from "@/lib/rate-limit";

const createWriterSchema = z.object({
  handle: z
    .string()
    .min(3)
    .max(30)
    .regex(
      /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/,
      "Handle must be lowercase alphanumeric with optional hyphens"
    ),
  name: z.string().min(1).max(100),
  bio: z.string().max(500).optional(),
  category: z.enum([
    "TECHNOLOGY",
    "BUSINESS",
    "CULTURE",
    "POLITICS",
    "SCIENCE",
    "HEALTH",
    "FINANCE",
    "SPORTS",
    "FOOD",
    "TRAVEL",
    "MUSIC",
    "ART",
    "EDUCATION",
    "OTHER",
  ]),
  avatarUrl: z.string().url().optional(),
  bannerUrl: z.string().url().optional(),
});

export async function POST(request: NextRequest) {
  const user = await requireAuth({ redirect: false });
  if (!user) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const limited = rateLimit(`writers:create:${user.id}`, {
    interval: 60_000,
    maxRequests: 5,
  });
  if (limited) return limited;

  const existingWriter = await prisma.writer.findUnique({
    where: { userId: user.id },
  });
  if (existingWriter) {
    return NextResponse.json(
      { error: "You already have a publication" },
      { status: 409 }
    );
  }

  let body: unknown;
  try {
    body = await request.json();
  } catch {
    return NextResponse.json(
      { error: "Invalid JSON body" },
      { status: 400 }
    );
  }

  const parsed = createWriterSchema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json(
      { error: parsed.error.issues[0].message },
      { status: 400 }
    );
  }

  const { handle, name, bio, category, avatarUrl, bannerUrl } = parsed.data;

  const handleTaken = await prisma.writer.findFirst({ where: { handle } });
  if (handleTaken) {
    return NextResponse.json(
      { error: "Handle is already taken" },
      { status: 409 }
    );
  }

  const writer = await prisma.writer.create({
    data: {
      userId: user.id,
      handle,
      name,
      bio,
      category,
      avatarUrl,
      bannerUrl,
    },
  });

  return NextResponse.json(writer, { status: 201 });
}

import { PublicationCategory } from "@/generated/prisma/client";

export const CATEGORY_LABELS: Record<PublicationCategory, string> = {
  TECHNOLOGY: "Technology",
  BUSINESS: "Business",
  CULTURE: "Culture",
  POLITICS: "Politics",
  SCIENCE: "Science",
  HEALTH: "Health",
  FINANCE: "Finance",
  SPORTS: "Sports",
  FOOD: "Food",
  TRAVEL: "Travel",
  MUSIC: "Music",
  ART: "Art",
  EDUCATION: "Education",
  OTHER: "Other",
};

export const CATEGORY_OPTIONS = Object.entries(CATEGORY_LABELS).map(
  ([value, label]) => ({ value: value as PublicationCategory, label })
);

export const PLATFORM_FEE_PERCENT = 10;
export const MIN_PRICE_CENTS = 100;
export const MAX_PRICE_CENTS = 100_000;
export const POSTS_PER_PAGE = 10;
export const TRENDING_WRITERS_COUNT = 6;
export const TRENDING_WINDOW_DAYS = 14;
export const TRENDING_WEIGHTS = {
  followers: 1,
  subscribers: 3,
  recentPosts: 2,
} as const;

import { Node, mergeAttributes } from "@tiptap/core";

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    paywallBreak: {
      setPaywallBreak: () => ReturnType;
    };
  }
}

export const PaywallBreak = Node.create({
  name: "paywallBreak",
  group: "block",
  atom: true,

  parseHTML() {
    return [{ tag: 'div[data-type="paywall-break"]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      "div",
      mergeAttributes(HTMLAttributes, {
        "data-type": "paywall-break",
        class: "paywall-break",
      }),
      "Content below is for paid subscribers only",
    ];
  },

  addCommands() {
    return {
      setPaywallBreak:
        () =>
        ({ commands }) => {
          return commands.insertContent({ type: this.name });
        },
    };
  },

  addKeyboardShortcuts() {
    return {
      "Mod-Shift-p": () => this.editor.commands.setPaywallBreak(),
    };
  },
});

"use client";

import { useRef } from "react";
import { useEditor, EditorContent, type JSONContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import UnderlineExt from "@tiptap/extension-underline";
import LinkExt from "@tiptap/extension-link";
import ImageExt from "@tiptap/extension-image";
import Placeholder from "@tiptap/extension-placeholder";
import { PaywallBreak } from "./extensions/paywall-break";
import { Toolbar } from "./toolbar";

interface EditorProps {
  initialContent?: JSONContent;
  onChange: (content: JSONContent) => void;
  editable?: boolean;
}

export function Editor({
  initialContent,
  onChange,
  editable = true,
}: EditorProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const editor = useEditor({
    extensions: [
      StarterKit,
      UnderlineExt,
      LinkExt.configure({ openOnClick: false }),
      ImageExt,
      Placeholder.configure({ placeholder: "Start writing..." }),
      PaywallBreak,
    ],
    content: initialContent,
    editable,
    onUpdate: ({ editor }) => {
      onChange(editor.getJSON());
    },
  });

  if (!editor) return null;

  function handleImageUpload() {
    fileInputRef.current?.click();
  }

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file || !editor) return;

    const formData = new FormData();
    formData.append("files", file);

    try {
      const res = await fetch("/api/uploadthing", {
        method: "POST",
        headers: { "x-uploadthing-package": "uploadthing" },
        body: formData,
      });
      const data = await res.json();
      if (data?.[0]?.ufsUrl) {
        editor.chain().focus().setImage({ src: data[0].ufsUrl }).run();
      }
    } catch {
      alert("Image upload failed. Please try again.");
    }

    e.target.value = "";
  }

  return (
    <div className="rounded-lg border border-gray-200">
      {editable && (
        <Toolbar editor={editor} onImageUpload={handleImageUpload} />
      )}
      <div className="min-h-[400px] p-4">
        <EditorContent editor={editor} />
      </div>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={handleFileChange}
      />
    </div>
  );
}

let paywallIndex: number | undefined;
if (content?.content) {
  const idx = content.content.findIndex(
    (node) => node.type === "paywallBreak"
  );
  if (idx !== -1) paywallIndex = idx;
}

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireAuth, getWriterProfile } from "@/lib/auth";
import { rateLimit } from "@/lib/rate-limit";
import { POSTS_PER_PAGE } from "@/constants/config";

const createPostSchema = z.object({
  title: z.string().min(1).max(200),
  subtitle: z.string().max(400).optional(),
  content: z.unknown(),
  visibility: z.enum(["FREE", "PAID", "PREVIEW"]),
  paywallIndex: z.number().int().min(0).optional(),
  published: z.boolean(),
  coverImageUrl: z.string().url().optional(),
});

export async function POST(request: NextRequest) {
  const user = await requireAuth({ redirect: false });
  if (!user) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const limited = rateLimit(`posts:create:${user.id}`, {
    interval: 60_000,
    maxRequests: 10,
  });
  if (limited) return limited;

  const writer = await getWriterProfile(user.id);
  if (!writer) {
    return NextResponse.json(
      { error: "You must be a writer to create posts" },
      { status: 403 }
    );
  }

  let body: unknown;
  try {
    body = await request.json();
  } catch {
    return NextResponse.json(
      { error: "Invalid JSON body" },
      { status: 400 }
    );
  }

  const parsed = createPostSchema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json(
      { error: parsed.error.issues[0].message },
      { status: 400 }
    );
  }

  const { title, subtitle, content, visibility, paywallIndex, published, coverImageUrl } =
    parsed.data;

  const baseSlug = title
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-|-$/g, "");
  const slug = `${baseSlug}-${Date.now().toString(36)}`;

  const post = await prisma.post.create({
    data: {
      writerId: writer.id,
      title,
      subtitle,
      content: content as object,
      visibility,
      paywallIndex,
      published,
      publishedAt: published ? new Date() : null,
      coverImageUrl,
      slug,
    },
  });

  return NextResponse.json(post, { status: 201 });
}

"use client";

import { Suspense, useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import type { JSONContent } from "@tiptap/core";
import { Editor } from "@/components/editor/editor";
import { UploadZone } from "@/components/ui/upload-zone";
import type { PostVisibility } from "@/generated/prisma/browser";

const VISIBILITY_OPTIONS: { value: PostVisibility; label: string; description: string }[] = [
  { value: "FREE", label: "Free", description: "Visible to everyone" },
  { value: "PAID", label: "Paid", description: "Subscribers only" },
  { value: "PREVIEW", label: "Preview", description: "Free preview with paywall" },
];

export default function WritePage() {
  return (
    <Suspense fallback={<div className="flex min-h-[60vh] items-center justify-center"><p className="text-gray-500">Loading...</p></div>}>
      <WritePageInner />
    </Suspense>
  );
}

function WritePageInner() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const postId = searchParams.get("postId");

  const [title, setTitle] = useState("");
  const [subtitle, setSubtitle] = useState("");
  const [coverImageUrl, setCoverImageUrl] = useState<string | null>(null);
  const [content, setContent] = useState<JSONContent | undefined>(undefined);
  const [visibility, setVisibility] = useState<PostVisibility>("FREE");
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(!!postId);

  useEffect(() => {
    if (!postId) return;

    fetch(`/api/posts/${postId}`)
      .then((res) => {
        if (!res.ok) throw new Error("Failed to load post");
        return res.json();
      })
      .then((post) => {
        setTitle(post.title);
        setSubtitle(post.subtitle ?? "");
        setCoverImageUrl(post.coverImageUrl);
        setContent(post.content as JSONContent);
        setVisibility(post.visibility);
      })
      .catch(() => {
        router.push("/dashboard");
      })
      .finally(() => setLoading(false));
  }, [postId, router]);

  const save = useCallback(
    async (publish: boolean) => {
      if (!title.trim()) return;
      setSaving(true);

      try {
        let paywallIndex: number | undefined;
        if (content?.content) {
          const idx = content.content.findIndex(
            (node) => node.type === "paywallBreak"
          );
          if (idx !== -1) paywallIndex = idx;
        }

        const body = {
          title: title.trim(),
          subtitle: subtitle.trim() || undefined,
          content,
          visibility,
          paywallIndex,
          published: publish,
          coverImageUrl: coverImageUrl ?? undefined,
        };

        const url = postId ? `/api/posts/${postId}` : "/api/posts";
        const method = postId ? "PATCH" : "POST";

        const res = await fetch(url, {
          method,
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });

        if (!res.ok) {
          const data = await res.json();
          alert(data.error ?? "Something went wrong");
          return;
        }

        router.push("/dashboard");
      } finally {
        setSaving(false);
      }
    },
    [title, subtitle, content, visibility, coverImageUrl, postId, router]
  );

  if (loading) {
    return (
      <div className="flex min-h-[60vh] items-center justify-center">
        <p className="text-gray-500">Loading...</p>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-8">
      <div className="mb-6">
        <UploadZone
          endpoint="coverImageUploader"
          onUploadComplete={(url) => setCoverImageUrl(url)}
          label="Cover image"
        />
      </div>

      <input
        type="text"
        placeholder="Post title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="w-full border-0 bg-transparent font-serif text-4xl font-bold placeholder-gray-300 focus:outline-none focus:ring-0"
      />

      <input
        type="text"
        placeholder="Add a subtitle..."
        value={subtitle}
        onChange={(e) => setSubtitle(e.target.value)}
        className="mt-2 w-full border-0 bg-transparent text-xl text-gray-600 placeholder-gray-300 focus:outline-none focus:ring-0"
      />

      <div className="mt-6">
        <Editor
          initialContent={content}
          onChange={setContent}
        />
      </div>

      <div className="mt-8 flex flex-wrap items-center gap-4 border-t border-gray-200 pt-6">
        <div className="flex items-center gap-2">
          <label htmlFor="visibility" className="text-sm font-medium text-gray-700">
            Visibility:
          </label>
          <select
            id="visibility"
            value={visibility}
            onChange={(e) => setVisibility(e.target.value as PostVisibility)}
            className="input w-auto"
          >
            {VISIBILITY_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label} — {opt.description}
              </option>
            ))}
          </select>
        </div>

        <div className="ml-auto flex gap-3">
          <button
            onClick={() => save(false)}
            disabled={saving || !title.trim()}
            className="btn-secondary"
          >
            {saving ? "Saving..." : "Save draft"}
          </button>
          <button
            onClick={() => save(true)}
            disabled={saving || !title.trim()}
            className="btn-primary"
          >
            {saving ? "Publishing..." : "Publish"}
          </button>
        </div>
      </div>
    </div>
  );
}

let hasAccess = true;
let paywallIndex: number | undefined;

if (post.visibility !== "FREE") {
  if (!user) {
    hasAccess = false;
  } else {
    hasAccess = await canAccessPaidContent(user.id, post.writerId);
  }

  if (!hasAccess && post.visibility === "PREVIEW" && post.paywallIndex != null) {
    paywallIndex = post.paywallIndex;
  }
}

import { PaywallGate } from "./paywall-gate";

interface PostContentProps {
  content: unknown;
  paywallIndex?: number | null;
  hasAccess?: boolean;
  writerName?: string;
  writerHandle?: string;
  price?: number;
}

export function PostContent({
  content,
  paywallIndex,
  hasAccess,
  writerName = "",
  writerHandle = "",
  price = 0,
}: PostContentProps) {
  const doc = content as { type: string; content?: unknown[] };
  const nodes = doc?.content ?? [];

  let visibleNodes = nodes;
  let showPaywall = false;

  if (paywallIndex != null && !hasAccess) {
    visibleNodes = nodes.slice(0, paywallIndex);
    showPaywall = true;
  }

  return (
    <div>
      <div
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{
          __html: renderNodes(visibleNodes),
        }}
      />
      {showPaywall && (
        <PaywallGate
          writerName={writerName}
          writerHandle={writerHandle}
          price={price}
        />
      )}
    </div>
  );
}

function renderNodes(nodes: unknown[]): string {
  return nodes.map(renderNode).join("");
}

function renderNode(node: unknown): string {
  if (!node || typeof node !== "object") return "";
  const n = node as Record<string, unknown>;

  switch (n.type) {
    case "paragraph":
      return `<p>${renderChildren(n)}</p>`;
    case "heading": {
      const level = (n.attrs as Record<string, unknown>)?.level ?? 2;
      return `<h${level}>${renderChildren(n)}</h${level}>`;
    }
    case "bulletList":
      return `<ul>${renderChildren(n)}</ul>`;
    case "orderedList":
      return `<ol>${renderChildren(n)}</ol>`;
    case "listItem":
      return `<li>${renderChildren(n)}</li>`;
    case "blockquote":
      return `<blockquote>${renderChildren(n)}</blockquote>`;
    case "codeBlock":
      return `<pre><code>${renderChildren(n)}</code></pre>`;
    case "image": {
      const attrs = n.attrs as Record<string, unknown>;
      const src = attrs?.src ?? "";
      const alt = attrs?.alt ?? "";
      return `<img src="${escapeHtml(String(src))}" alt="${escapeHtml(String(alt))}" />`;
    }
    case "horizontalRule":
      return `<hr />`;
    case "hardBreak":
      return `<br />`;
    case "paywallBreak":
      return "";
    case "text": {
      let text = escapeHtml(String(n.text ?? ""));
      const marks = n.marks as Array<Record<string, unknown>> | undefined;
      if (marks) {
        for (const mark of marks) {
          switch (mark.type) {
            case "bold":
              text = `<strong>${text}</strong>`;
              break;
            case "italic":
              text = `<em>${text}</em>`;
              break;
            case "underline":
              text = `<u>${text}</u>`;
              break;
            case "strike":
              text = `<s>${text}</s>`;
              break;
            case "code":
              text = `<code>${text}</code>`;
              break;
            case "link": {
              const href = (mark.attrs as Record<string, unknown>)?.href ?? "";
              text = `<a href="${escapeHtml(String(href))}" target="_blank" rel="noopener noreferrer">${text}</a>`;
              break;
            }
          }
        }
      }
      return text;
    }
    default:
      return renderChildren(n);
  }
}

function renderChildren(node: Record<string, unknown>): string {
  const children = node.content as unknown[] | undefined;
  if (!children) return "";
  return renderNodes(children);
}

function escapeHtml(text: string): string {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

import { Lock } from "lucide-react";
import Link from "next/link";
import { formatPrice } from "@/lib/utils";

export interface PaywallGateProps {
  writerName: string;
  writerHandle: string;
  price?: number | null;
}

export function PaywallGate({
  writerName,
  writerHandle,
  price,
}: PaywallGateProps) {
  return (
    <div className="relative mt-8">
      <div className="pointer-events-none absolute -top-24 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent" />

      <div className="rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-white p-8 text-center shadow-sm">
        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
          <Lock className="h-6 w-6 text-amber-700" />
        </div>
        <h3 className="font-serif text-xl font-bold text-gray-900">
          This content is for paid subscribers
        </h3>
        <p className="mt-2 text-sm text-gray-500">
          Subscribe to {writerName}
          {price ? ` for ${formatPrice(price)}/month` : ""} to unlock this
          post and all premium content.
        </p>
        <Link href={`/${writerHandle}`} className="btn-primary mt-6 inline-flex">
          Subscribe to read
        </Link>
      </div>
    </div>
  );
}

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { requireAuth } from "@/lib/auth";
import { getPostBySlug } from "@/services/post-service";
import { canAccessPaidContent } from "@/services/subscription-service";
import { isLikedByUser } from "@/services/post-service";
import { PostContent } from "@/components/post/post-content";
import { LikeButton } from "@/components/post/like-button";
import { PaywallGate } from "@/components/post/paywall-gate";
import { formatDate, estimateReadingTime } from "@/lib/utils";

interface ArticlePageProps {
  params: Promise<{ writer: string; slug: string }>;
}

export async function generateMetadata({
  params,
}: ArticlePageProps): Promise<Metadata> {
  const { writer, slug } = await params;
  const post = await getPostBySlug(writer, slug);

  if (!post) {
    return { title: "Post not found | Penstack" };
  }

  return {
    title: `${post.title} | Penstack`,
    description: post.subtitle ?? `By ${post.writer.name}`,
    openGraph: {
      title: post.title,
      description: post.subtitle ?? `By ${post.writer.name}`,
      type: "article",
      ...(post.coverImageUrl ? { images: [post.coverImageUrl] } : {}),
    },
  };
}

export default async function ArticlePage({ params }: ArticlePageProps) {
  const { writer: writerHandle, slug } = await params;
  const post = await getPostBySlug(writerHandle, slug);

  if (!post) notFound();

  const user = await requireAuth({ redirect: false });

  let hasAccess = true;
  let paywallIndex: number | undefined;

  if (post.visibility !== "FREE") {
    if (!user) {
      hasAccess = false;
    } else {
      hasAccess = await canAccessPaidContent(user.id, post.writerId);
    }

    if (!hasAccess && post.visibility === "PREVIEW" && post.paywallIndex != null) {
      paywallIndex = post.paywallIndex;
    }
  }

  const liked = user ? await isLikedByUser(user.id, post.id) : false;
  const readingTime = estimateReadingTime(post.content);

  return (
    <article className="mx-auto max-w-3xl px-4 py-8">
      {post.coverImageUrl && (
        <img
          src={post.coverImageUrl}
          alt={post.title}
          className="mb-8 aspect-[2/1] w-full rounded-xl object-cover"
        />
      )}

      <header className="mb-8">
        <h1 className="font-serif text-4xl font-bold leading-tight">
          {post.title}
        </h1>
        {post.subtitle && (
          <p className="mt-3 text-xl text-gray-600">{post.subtitle}</p>
        )}
        <div className="mt-4 flex items-center gap-3 text-sm text-gray-500">
          <a
            href={`/${post.writer.handle}`}
            className="flex items-center gap-2 font-medium text-gray-900 hover:underline"
          >
            {post.writer.avatarUrl && (
              <img
                src={post.writer.avatarUrl}
                alt={post.writer.name}
                className="h-8 w-8 rounded-full object-cover"
              />
            )}
            {post.writer.name}
          </a>
          <span aria-hidden="true">&middot;</span>
          <time dateTime={post.publishedAt?.toISOString()}>
            {post.publishedAt ? formatDate(post.publishedAt) : "Draft"}
          </time>
          <span aria-hidden="true">&middot;</span>
          <span>{readingTime} min read</span>
        </div>
      </header>

      {hasAccess ? (
        <PostContent content={post.content} />
      ) : post.visibility === "PREVIEW" && paywallIndex != null ? (
        <PostContent
          content={post.content}
          paywallIndex={paywallIndex}
          writerName={post.writer.name}
          writerHandle={post.writer.handle}
          price={post.writer.monthlyPriceInCents ?? undefined}
        />
      ) : (
        <PaywallGate
          writerName={post.writer.name}
          writerHandle={post.writer.handle}
          price={post.writer.monthlyPriceInCents}
        />
      )}

      <footer className="mt-10 flex items-center justify-between border-t border-gray-200 pt-6">
        <LikeButton
          postId={post.id}
          initialLiked={liked}
          initialCount={post._count.likes}
          isLoggedIn={!!user}
        />
        <a
          href={`/${post.writer.handle}`}
          className="text-sm font-medium text-[var(--brand-600)] hover:underline"
        >
          More from {post.writer.name}
        </a>
      </footer>
    </article>
  );
}

"use client";

import { useState } from "react";
import { Heart } from "lucide-react";
import { formatCount } from "@/lib/utils";

interface LikeButtonProps {
  postId: string;
  initialLiked: boolean;
  initialCount: number;
  isLoggedIn?: boolean;
}

export function LikeButton({
  postId,
  initialLiked,
  initialCount,
  isLoggedIn,
}: LikeButtonProps) {
  const [liked, setLiked] = useState(initialLiked);
  const [count, setCount] = useState(initialCount);

  async function handleToggle() {
    if (!isLoggedIn) {
      window.location.href = `/api/auth/login?returnTo=${window.location.pathname}`;
      return;
    }

    setLiked(!liked);
    setCount((c) => (liked ? c - 1 : c + 1));

    try {
      const res = await fetch(`/api/posts/${postId}/like`, {
        method: "POST",
      });
      if (!res.ok) throw new Error("Failed");
      const data = await res.json();
      setLiked(data.liked);
      setCount(data.count);
    } catch {
      setLiked(liked);
      setCount(count);
    }
  }

  return (
    <button
      onClick={handleToggle}
      className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors ${
        liked
          ? "bg-red-50 text-red-600"
          : "bg-gray-100 text-gray-600 hover:bg-gray-200"
      }`}
    >
      <Heart
        className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`}
      />
      {formatCount(count)}
    </button>
  );
}

export const PLATFORM_FEE_PERCENT = 10;

import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { rateLimit } from "@/lib/rate-limit";
import { whop } from "@/lib/whop";

export async function POST(
  _request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;

  const user = await requireAuth({ redirect: false });
  if (!user) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const limited = rateLimit(`kyc:${user.id}`, {
    interval: 60_000,
    maxRequests: 5,
  });
  if (limited) return limited;

  const writer = await prisma.writer.findUnique({
    where: { id },
    include: { user: { select: { email: true } } },
  });
  if (!writer) {
    return NextResponse.json({ error: "Writer not found" }, { status: 404 });
  }
  if (writer.userId !== user.id) {
    return NextResponse.json(
      { error: "Not your publication" },
      { status: 403 }
    );
  }

  if (writer.kycCompleted) {
    return NextResponse.json({ error: "KYC already completed" }, { status: 409 });
  }

  let companyId = writer.whopCompanyId;

  if (!companyId) {
    const company = await whop.companies.create({
      title: writer.name,
      parent_company_id: process.env.WHOP_COMPANY_ID!,
      email: writer.user.email,
    });

    companyId = company.id;

    await prisma.writer.update({
      where: { id },
      data: { whopCompanyId: companyId },
    });
  }

  const setupCheckout = await whop.checkoutConfigurations.create({
    company_id: companyId,
    mode: "setup",
    redirect_url: `${process.env.NEXT_PUBLIC_APP_URL}/settings`,
  });

  return NextResponse.json({ url: setupCheckout.purchase_url });
}

import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { rateLimit } from "@/lib/rate-limit";
import { whop } from "@/lib/whop";
import { PLATFORM_FEE_PERCENT } from "@/constants/config";

const checkoutSchema = z.object({
  writerId: z.string().min(1),
});

export async function POST(request: NextRequest) {
  const user = await requireAuth({ redirect: false });
  if (!user) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const limited = rateLimit(`checkout:${user.id}`, {
    interval: 60_000,
    maxRequests: 10,
  });
  if (limited) return limited;

  let body: unknown;
  try {
    body = await request.json();
  } catch {
    return NextResponse.json(
      { error: "Invalid JSON body" },
      { status: 400 }
    );
  }

  const parsed = checkoutSchema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json(
      { error: parsed.error.issues[0].message },
      { status: 400 }
    );
  }

  const { writerId } = parsed.data;

  const writer = await prisma.writer.findUnique({ where: { id: writerId } });
  if (!writer) {
    return NextResponse.json({ error: "Writer not found" }, { status: 404 });
  }
  if (!writer.kycCompleted) {
    return NextResponse.json(
      { error: "Writer has not completed KYC" },
      { status: 400 }
    );
  }
  if (!writer.whopCompanyId) {
    return NextResponse.json(
      { error: "Writer does not have a connected account" },
      { status: 400 }
    );
  }

  const existingSub = await prisma.subscription.findUnique({
    where: { userId_writerId: { userId: user.id, writerId } },
  });
  if (existingSub && existingSub.status === "ACTIVE") {
    return NextResponse.json(
      { error: "You are already subscribed to this writer" },
      { status: 409 }
    );
  }

  const priceInCents = writer.monthlyPriceInCents ?? 0;
  const priceInDollars = priceInCents / 100;
  const applicationFee = Math.round(priceInCents * PLATFORM_FEE_PERCENT) / 10000;

  const checkout = await whop.checkoutConfigurations.create({
    plan: {
      company_id: writer.whopCompanyId,
      currency: "usd",
      renewal_price: priceInDollars,
      billing_period: 30,
      plan_type: "renewal",
      release_method: "buy_now",
      application_fee_amount: applicationFee,
      product: {
        external_identifier: `penstack-writer-${writer.id}`,
        title: `${writer.name} Subscription`,
      },
    },
    redirect_url: `${process.env.NEXT_PUBLIC_APP_URL}/${writer.handle}`,
    metadata: {
      userId: user.id,
      writerId: writer.id,
    },
  });

  return NextResponse.json({ url: checkout.purchase_url });
}

_whop = new Whop({
  appID: process.env.WHOP_APP_ID!,
  apiKey: process.env.WHOP_API_KEY!,
  webhookKey: btoa(process.env.WHOP_WEBHOOK_SECRET!),
  ...(process.env.WHOP_SANDBOX === "true" && {
    baseURL: "https://sandbox-api.whop.com/api/v1",
  }),
});

import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { whop } from "@/lib/whop";

export async function POST(request: NextRequest) {
  const rawBody = await request.text();
  const headers = Object.fromEntries(request.headers);

  let webhookData: { type: string; data: Record<string, unknown>; id?: string };
  try {
    webhookData = (await whop.webhooks.unwrap(rawBody, { headers })) as unknown as {
      type: string;
      data: Record<string, unknown>;
      id?: string;
    };
  } catch (err) {
    console.error("Webhook unwrap error:", err);
    return NextResponse.json(
      { error: "Invalid webhook signature" },
      { status: 401 }
    );
  }

  const eventId = webhookData.id ?? (webhookData.data.id as string);
  const event = webhookData.type;
  const data = webhookData.data;

  const existing = await prisma.webhookEvent.findUnique({
    where: { id: eventId },
  });
  if (existing) {
    return NextResponse.json({ received: true });
  }

  try {
    switch (event) {
      case "payment.succeeded":
        await handlePaymentSucceeded(data);
        break;
      case "payment.failed":
        await handlePaymentFailed(data);
        break;
      case "membership.activated":
        await handleMembershipActivated(data);
        break;
      case "membership.deactivated":
        await handleMembershipDeactivated(data);
        break;
      default:
        break;
    }

    await prisma.webhookEvent.create({
      data: { id: eventId, eventType: event },
    });
  } catch (error) {
    console.error(`Webhook handler error for ${event}:`, error);
    return NextResponse.json(
      { error: "Internal webhook processing error" },
      { status: 500 }
    );
  }

  return NextResponse.json({ received: true });
}

async function handlePaymentSucceeded(data: Record<string, unknown>) {
  const membershipId = data.membership_id as string | undefined;
  if (!membershipId) return;

  const subscription = await prisma.subscription.findUnique({
    where: { whopMembershipId: membershipId },
    include: { writer: true },
  });
  if (!subscription) return;

  await prisma.subscription.update({
    where: { id: subscription.id },
    data: { status: "ACTIVE" },
  });

  await prisma.notification.create({
    data: {
      userId: subscription.writer.userId,
      type: "PAYMENT_RECEIVED",
      title: "Payment received",
      message: "A subscriber payment was successfully processed.",
      writerId: subscription.writerId,
    },
  });
}

async function handlePaymentFailed(data: Record<string, unknown>) {
  const membershipId = data.membership_id as string | undefined;
  if (!membershipId) return;

  const subscription = await prisma.subscription.findUnique({
    where: { whopMembershipId: membershipId },
    include: { writer: true },
  });
  if (!subscription) return;

  await prisma.subscription.update({
    where: { id: subscription.id },
    data: { status: "PAST_DUE" },
  });

  await prisma.notification.create({
    data: {
      userId: subscription.writer.userId,
      type: "PAYMENT_FAILED",
      title: "Payment failed",
      message: "A subscriber payment failed to process.",
      writerId: subscription.writerId,
    },
  });
}

async function handleMembershipActivated(data: Record<string, unknown>) {
  const membershipId = data.id as string;
  const userId = (data.metadata as Record<string, unknown>)?.userId as
    | string
    | undefined;
  const writerId = (data.metadata as Record<string, unknown>)?.writerId as
    | string
    | undefined;
  const currentPeriodEnd = data.current_period_end as string | undefined;

  if (!userId || !writerId) return;

  const subscription = await prisma.subscription.upsert({
    where: { userId_writerId: { userId, writerId } },
    update: {
      status: "ACTIVE",
      whopMembershipId: membershipId,
      currentPeriodEnd: currentPeriodEnd
        ? new Date(currentPeriodEnd)
        : undefined,
      cancelledAt: null,
    },
    create: {
      userId,
      writerId,
      status: "ACTIVE",
      whopMembershipId: membershipId,
      currentPeriodEnd: currentPeriodEnd
        ? new Date(currentPeriodEnd)
        : undefined,
    },
  });

  const writer = await prisma.writer.findUnique({ where: { id: writerId } });
  if (writer) {
    await prisma.notification.create({
      data: {
        userId: writer.userId,
        type: "NEW_SUBSCRIBER",
        title: "New subscriber",
        message: "Someone just subscribed to your publication!",
        writerId,
      },
    });
  }

  return subscription;
}

async function handleMembershipDeactivated(data: Record<string, unknown>) {
  const membershipId = data.id as string;

  const subscription = await prisma.subscription.findUnique({
    where: { whopMembershipId: membershipId },
  });
  if (!subscription) return;

  await prisma.subscription.update({
    where: { id: subscription.id },
    data: {
      status: "CANCELLED",
      cancelledAt: new Date(),
    },
  });
}

export async function canAccessPaidContent(
  userId: string,
  writerId: string
) {
  const sub = await prisma.subscription.findUnique({
    where: { userId_writerId: { userId, writerId } },
  });
  if (!sub) return false;
  if (sub.status !== "ACTIVE" && sub.status !== "CANCELLED") return false;

  if (sub.status === "CANCELLED" && sub.currentPeriodEnd) {
    return sub.currentPeriodEnd > new Date();
  }

  return sub.status === "ACTIVE";
}

score = followers * 1 + subscribers * 3 + recent_posts_14d * 2

import { prisma } from "@/lib/prisma";
import {
  POSTS_PER_PAGE,
  TRENDING_WRITERS_COUNT,
  TRENDING_WINDOW_DAYS,
  TRENDING_WEIGHTS,
} from "@/constants/config";
import type { PublicationCategory } from "@/generated/prisma/client";

export async function getTrendingWriters(limit = TRENDING_WRITERS_COUNT) {
  const windowStart = new Date();
  windowStart.setDate(windowStart.getDate() - TRENDING_WINDOW_DAYS);

  const writers = await prisma.writer.findMany({
    include: {
      user: { select: { displayName: true, avatarUrl: true } },
      _count: { select: { followers: true, subscriptions: true } },
      posts: {
        where: { published: true, publishedAt: { gte: windowStart } },
        select: { id: true },
      },
    },
  });

  const scored = writers.map((writer) => {
    const score =
      writer._count.followers * TRENDING_WEIGHTS.followers +
      writer._count.subscriptions * TRENDING_WEIGHTS.subscribers +
      writer.posts.length * TRENDING_WEIGHTS.recentPosts;
    return { ...writer, trendingScore: score };
  });

  scored.sort((a, b) => b.trendingScore - a.trendingScore);
  return scored.slice(0, limit).map(({ posts, ...rest }) => rest);
}

export async function getRecentPosts(
  opts: { cursor?: string; limit?: number; category?: PublicationCategory } = {}
) {
  const { cursor, limit = POSTS_PER_PAGE, category } = opts;

  const posts = await prisma.post.findMany({
    where: {
      published: true,
      ...(category ? { writer: { category } } : {}),
    },
    orderBy: { publishedAt: "desc" },
    take: limit + 1,
    ...(cursor ? { cursor: { id: cursor }, skip: 1 } : {}),
    include: {
      writer: {
        include: {
          user: { select: { displayName: true, avatarUrl: true } },
        },
      },
      _count: { select: { likes: true } },
    },
  });

  const hasMore = posts.length > limit;
  const items = hasMore ? posts.slice(0, limit) : posts;
  const nextCursor = hasMore ? items[items.length - 1].id : null;

  return { items, nextCursor };
}

"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { PublicationCategory } from "@/generated/prisma/browser";
import { CATEGORY_LABELS } from "@/constants/categories";

export function CategoryFilter() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const active = searchParams.get("category");

  function handleSelect(category: string | null) {
    const params = new URLSearchParams(searchParams.toString());
    if (category) {
      params.set("category", category);
    } else {
      params.delete("category");
    }
    router.push(`/?${params.toString()}`);
  }

  return (
    <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
      <button
        onClick={() => handleSelect(null)}
        className={`shrink-0 rounded-full px-4 py-1.5 text-sm font-medium ${
          !active ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600"
        }`}
      >
        All
      </button>
      {Object.values(PublicationCategory).map((cat) => (
        <button
          key={cat}
          onClick={() => handleSelect(cat)}
          className={`shrink-0 rounded-full px-4 py-1.5 text-sm font-medium ${
            active === cat ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600"
          }`}
        >
          {CATEGORY_LABELS[cat]}
        </button>
      ))}
    </div>
  );
}

import { prisma } from "@/lib/prisma";
import type { NotificationType } from "@/generated/prisma/client";

export async function notifyFollowers(
  writerId: string,
  type: NotificationType,
  title: string,
  message: string,
  refs?: { postId?: string; writerId?: string }
) {
  const followers = await prisma.follow.findMany({
    where: { writerId },
    select: { userId: true },
  });
  if (followers.length === 0) return;

  await prisma.notification.createMany({
    data: followers.map((f) => ({
      userId: f.userId,
      type,
      title,
      message,
      postId: refs?.postId,
      writerId: refs?.writerId,
    })),
  });
}

import { NextResponse } from "next/server";
import { getSession } from "@/lib/session";
import { rateLimit } from "@/lib/rate-limit";

export async function GET() {
  const session = await getSession();
  if (!session.userId) {
    return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
  }

  const limited = rateLimit(`token:${session.userId}`, {
    interval: 60_000,
    maxRequests: 30,
  });
  if (limited) return limited;

  return NextResponse.json({ accessToken: session.accessToken ?? null });
}

"use client";

import { useEffect, useState, type CSSProperties, type FC, type ReactNode } from "react";
import { Elements } from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";

let ChatElement: FC<{ options: { channelId: string }; style?: CSSProperties }> | undefined;
let ChatSession: FC<{ token: () => Promise<string>; children: ReactNode }> | undefined;

try {
  const mod = require("@whop/embedded-components-react-js");
  ChatElement = mod.ChatElement;
  ChatSession = mod.ChatSession;
} catch {
}

interface WriterChatProps {
  channelId: string;
  className?: string;
}

async function getToken(): Promise<string> {
  const res = await fetch("/api/token");
  const data = await res.json();
  return data.accessToken;
}

export function WriterChat({ channelId, className }: WriterChatProps) {
  const [elements, setElements] =
    useState<Awaited<ReturnType<typeof loadWhopElements>>>(null);

  useEffect(() => {
    loadWhopElements().then(setElements);
  }, []);

  if (!elements || !ChatElement || !ChatSession) {
    return (
      <div className={className}>
        <div className="flex h-[500px] items-center justify-center rounded-xl border border-gray-200 bg-gray-50 text-gray-500">
          <p>Chat is loading...</p>
        </div>
      </div>
    );
  }

  return (
    <Elements elements={elements}>
      <ChatSession token={getToken}>
        <div className={className}>
          <ChatElement
            options={{ channelId }}
            style={{ height: "500px", width: "100%", borderRadius: "12px", overflow: "hidden" }}
          />
        </div>
      </ChatSession>
    </Elements>
  );
}

import type { CSSProperties, FC, ReactNode } from "react";

declare module "@whop/embedded-components-react-js" {
  export interface ChatElementOptions {
    channelId: string;
    deeplinkToPostId?: string;
    onEvent?: (event: { type: string; detail: Record<string, unknown> }) => void;
  }

  export const ChatElement: FC<{ options: ChatElementOptions; style?: CSSProperties }>;
  export const ChatSession: FC<{ token: () => Promise<string>; children: ReactNode }>;
}

export async function getWriterStats(writerId: string) {
  const [subscriberCount, followerCount, totalViews, postCount] =
    await Promise.all([
      prisma.subscription.count({ where: { writerId, status: "ACTIVE" } }),
      prisma.follow.count({ where: { writerId } }),
      prisma.post.aggregate({
        where: { writerId, published: true },
        _sum: { viewCount: true },
      }),
      prisma.post.count({ where: { writerId, published: true } }),
    ]);

  return {
    subscribers: subscriberCount,
    followers: followerCount,
    totalViews: totalViews._sum.viewCount ?? 0,
    totalPosts: postCount,
  };
}

hasCheckout={!!writer.whopCompanyId && !!writer.kycCompleted}

const Editor = dynamic(() => import("@/components/editor/post-editor"), { ssr: false });