Fuma Comment

repository·main·Indexed 19 days ago

https://github.com/fuma-nama/fuma-comment

A 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.

Tokens
26.3K
Snippets
99
Records
120
Agent score
62%

What's inside fuma-comment

  1. Overview of Fuma Comment

    main
    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.
  2. Setup Fuma Comment with Hono.js

    main

    To run Fuma Comment on a Hono.js application, use the HonoComment function from @fuma-comment/server/hono. You must provide the Hono app instance, a storage adapter, and an auth adapter 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
    });
  3. Integrate UploadThing for image uploads

    main

    Fuma Comment provides a built-in integration for UploadThing. To use it, create a storage instance using createUploadThingStorage from @fuma-comment/react/uploadthing and pass it to the storage prop of the Comments component.

    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
    				}
    			/>
    		);
    }
  4. Set up Fuma Comment backend in Next.js

    main

    To host the backend in Next.js, create a route handler at app/api/comments/[[...comment]]/route.ts and use the NextComment function 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,
    });
  5. Set up Prisma ORM adapter for Fuma Comment

    main

    To 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 createPrismaAdapter from @fuma-comment/server/adapters/prisma and 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",
    });
  6. Configure custom storage with StorageContext

    main

    If you want to use a service like Cloudinary, you must implement the StorageContext interface. The upload method is required and should return an object containing the url, width, and height of 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
    				}
    			/>
    		);
    }
  7. Configure the NextAuth adapter for Fuma Comment

    main

    To use NextAuth for user authentication in Fuma Comment, you must create an adapter using createNextAuthAdapter. This adapter requires your existing authOptions from 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);
  8. Configure the MongoDB adapter for Fuma Comment

    main

    To use MongoDB as your storage backend for Fuma Comment, use the createMongoDBAdapter function 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 the auth option 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",
    });
  9. Configure the Drizzle ORM adapter for Fuma Comment

    main

    To 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 auth option 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,
    	},
    });
  10. Setup the example-better-auth project

    main

    To run the example-better-auth project locally, follow these steps:

    1. Configure Environment Variables: Copy the template to a local file:
      cp .env.example .env.local
    2. 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.
    3. Start Database: Use Docker to run PostgreSQL:
      docker-compose up -d
      Alternatively, connect to a local or cloud PostgreSQL instance.
    4. Run Development Server: Start the Next.js development environment:
      npm run dev
      # or yarn dev, pnpm dev, or bun dev
    5. Access App: Open http://localhost:3000 in your browser.
    cp .env.example .env.local
    docker-compose up -d
    npm run dev
  11. Set up Fuma Comment backend in Express

    main

    To use Express, pass your app instance and your configured auth and storage adapters to ExpressComment from @fuma-comment/server/express. All endpoints will be automatically added under the /api/comments prefix.

    import { ExpressComment } from "@fuma-comment/server/express";
    
    ExpressComment({
      // your app
      app,
      // import from comment.config.ts
      auth,
      storage
    });