Fuma Comment
repository·main·Indexed 19 days ago
https://github.com/fuma-nama/fuma-commentA flexible, unopinionated commenting library for adding comment sections to blogs and documentation sites. It supports custom data storage and authentication providers, featuring adapters for Drizzle ORM, BetterAuth, Clerk, and NextAuth. The library provides a React client and server-side integrations for Next.js, Fastify, and Hono.js, as well as support for image uploads via UploadThing or custom StorageContext implementations.
What's inside fuma-comment
- Fuma Comment is a library designed for building comment sections into blogs, documentation sites, and other web applications. It is highly flexible, allowing developers to integrate it with their own existing database and authentication systems.
Setup Fuma Comment with Hono.js
mainTo run Fuma Comment on a Hono.js application, use the
HonoCommentfunction from@fuma-comment/server/hono. You must provide the Honoappinstance, astorageadapter, and anauthadapter to the configuration object.import { Hono } from "hono"; import { HonoComment } from "@fuma-comment/server/hono"; const app = new Hono(); HonoComment({ app, storage: // storage adapter auth: // auth adapter });Integrate UploadThing for image uploads
mainFuma Comment provides a built-in integration for UploadThing. To use it, create a storage instance using
createUploadThingStoragefrom@fuma-comment/react/uploadthingand pass it to thestorageprop of theCommentscomponent.import { Comments } from "@fuma-comment/react"; import { createUploadThingStorage } from "@fuma-comment/react/uploadthing"; const storage = createUploadThingStorage(); export function CommentsWithAuth() { return ( <Comments storage={storage} auth={ { // auth config } /> ); }Set up Fuma Comment backend in Next.js
mainTo host the backend in Next.js, create a route handler at
app/api/comments/[[...comment]]/route.tsand use theNextCommentfunction from@fuma-comment/server/next.import { NextComment } from "@fuma-comment/server/next"; export const { GET, DELETE, PATCH, POST } = NextComment({ // import from comment.config.ts auth, storage, });Set up Prisma ORM adapter for Fuma Comment
mainTo use Prisma ORM as the storage layer for Fuma Comment, you must first ensure the Prisma schema is included in your project. Then, initialize the adapter using
createPrismaAdapterfrom@fuma-comment/server/adapters/prismaand pass your Prisma instance and the corresponding authentication provider type.import { createPrismaAdapter } from "@fuma-comment/server/adapters/prisma"; const storage = createPrismaAdapter({ db: prisma, auth: "next-auth" | "better-auth", });Configure custom storage with StorageContext
mainIf you want to use a service like Cloudinary, you must implement the
StorageContextinterface. Theuploadmethod is required and should return an object containing theurl,width, andheightof the uploaded image.Example implementation for Cloudinary:
import type { StorageContext } from "@fuma-comment/react"; import { Comments } from "@fuma-comment/react"; const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME; const storage: StorageContext = { enabled: true, async upload(file) { const body = new FormData(); body.append("file", file); body.append("upload_preset", "fuma_comment"); const res = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, { method: "POST", body, }); if (res.ok) { const result = (await res.json()) as { secure_url: string; width: number; height: number; }; return { url: result.secure_url, width: result.width, height: result.height, }; } throw new Error("Failed to upload file"); }, }; export function CommentsWithAuth() { return ( <Comments storage={storage} auth={ { // auth config } /> ); }Configure the NextAuth adapter for Fuma Comment
mainTo use NextAuth for user authentication in Fuma Comment, you must create an adapter using
createNextAuthAdapter. This adapter requires your existingauthOptionsfrom your NextAuth configuration. This allows Fuma Comment to identify and authenticate users through your existing NextAuth session management.import { createNextAuthAdapter } from "@fuma-comment/server/adapters/next-auth"; import { authOptions } from "@/app/api/auth/[...nextauth]/options"; const auth = createNextAuthAdapter(authOptions);Configure the MongoDB adapter for Fuma Comment
mainTo use MongoDB as your storage backend for Fuma Comment, use the
createMongoDBAdapterfunction from@fuma-comment/server/adapters/mongo-db. You must provide your existing database instance (db) and specify the authentication provider being used. Supported values for theauthoption are"better-auth"or"next-auth".import { createMongoDBAdapter } from "@fuma-comment/server/adapters/mongo-db"; import { db } from "@/lib/database"; export const storage = createMongoDBAdapter({ db, auth: "better-auth" | "next-auth", });Configure the Drizzle ORM adapter for Fuma Comment
mainTo use Drizzle ORM as the storage layer for Fuma Comment, you must create a storage instance using
createDrizzleAdapter. This requires passing your Drizzle database instance, specifying your authentication provider, and providing the relevant database schemas.Note: The
authoption accepts either"next-auth"or"better-auth"as a string literal.import { createDrizzleAdapter } from "@fuma-comment/server/adapters/drizzle"; import { db } from "@/lib/database"; import { comments, rates, roles, user } from "@/lib/schema"; const storage = createDrizzleAdapter({ db, auth: "next-auth" | "better-auth", schemas: { comments, rates, roles, user, }, });Install the Fuma Comment React client
mainTo use the comment UI in a React application, install the@fuma-comment/reactpackage.@fuma-comment/reactSetup the example-better-auth project
mainTo run the
example-better-authproject locally, follow these steps:- Configure Environment Variables: Copy the template to a local file:
cp .env.example .env.local - Populate
.env.local: Ensure the following keys are set:DATABASE_URL: Your PostgreSQL connection string.GITHUB_ID: GitHub OAuth client ID.GITHUB_SECRET: GitHub OAuth client secret.BETTER_AUTH_SECRET: A random secret key for session encryption.BETTER_AUTH_URL: The base URL of your application.
- Start Database: Use Docker to run PostgreSQL:
Alternatively, connect to a local or cloud PostgreSQL instance.docker-compose up -d - Run Development Server: Start the Next.js development environment:
npm run dev # or yarn dev, pnpm dev, or bun dev - Access App: Open http://localhost:3000 in your browser.
cp .env.example .env.local docker-compose up -d npm run dev- Configure Environment Variables: Copy the template to a local file:
Set up Fuma Comment backend in Express
mainTo use Express, pass your app instance and your configured
authandstorageadapters toExpressCommentfrom@fuma-comment/server/express. All endpoints will be automatically added under the/api/commentsprefix.import { ExpressComment } from "@fuma-comment/server/express"; ExpressComment({ // your app app, // import from comment.config.ts auth, storage });