Docs | Introduction

In development

This package is not production ready yet.

A less-configuration, flexible library that integrates a comment area into your blog. It doesn't handle Authentication, you can use your own Auth system with Fuma Comment (ex: integrates with Auth.js).

Note that it is not a SaaS, you will need a database (PostgreSQL & MySQL) to continue.

Client

Currently, we only provide React.js client API. You have to pass authentication data into the component, there's an example for NextAuth.

import { signIn } from "next-auth/react";
import { Comments } from "@fuma-comment/react";
 
export function CommentsWithAuth() {
  return (
    <Comments
      auth={{
        // function to sign in
        signIn: () => void signIn("github"),
      }}
    />
  );
}

Styling

All components are pre-styled with Tailwind CSS, notice that it also normalizes your CSS (Preflight).

import "@fuma-comment/react/style.css";

For Tailwind CSS projects, use the official Tailwind CSS plugin.

import { createPreset } from "@fuma-comment/react/theme";
 
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  presets: [createPreset()],
  content: [
    "./node_modules/@fuma-comment/react/dist/**/*.js",
 
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./content/**/*.{js,ts,jsx,tsx,mdx}",
  ],
};

Database

You need a database to persist comments. Fuma Comment has built-in support for Prisma ORM, you may implement your own storage adapter following the instructions in TSDoc of StorageAdapter.

Prisma

First, update your schema to include following tables:

// optional for Role System based on database
model Role {
  userId    String  @id @db.VarChar(256)
  name      String  @db.VarChar(256)
  canDelete Boolean
}
 
model Comment {
  id        Int      @id @default(autoincrement())
  page      String   @db.VarChar(256)
  thread    Int?
  author    String   @db.VarChar(256)
  content   Json     @db.Json
  timestamp DateTime @default(now()) @db.Timestamp()
 
  rates Rate[]
 
  @@index([page])
}
 
model Rate {
  userId    String  @db.VarChar(256)
  commentId Int
  like      Boolean
 
  comment Comment @relation(fields: [commentId], references: [id], onDelete: Cascade)
 
  @@id([userId, commentId])
  @@index([commentId])
}

Then, create the adapter.

import { createAdapter } from "@fuma-comment/prisma-adapter";
import { PrismaClient } from "@prisma/client";
 
const prisma = new PrismaClient();
 
const adapter = createAdapter({
  db: prisma,
  getUsers(userIds) {
    // Fetch user profile from the user id
  },
});

Server

Fuma Comment supports several web/backend frameworks, including Next.js and Express.

Next.js

Create app/api/comments/[[...comment]]/route.ts.

app/api/comments/[[...comment]]/route.ts

import { getServerSession } from "next-auth";
import { NextComment } from "@fuma-comment/next";
 
export const { GET, DELETE, PATCH, POST } = NextComment({
  adapter, // storage adapter
  async getSession() {
    const session = await getServerSession();
    if (!session?.user?.id) return null;
 
    return {
      id: session.user.id,
    };
  },
});

Express

Pass your express app as a parameter, all the endpoints will be added under /api/comments.

import { ExressComment } from "@fuma-comment/server/express";
 
ExressComment({ app, adapter, getSession });

Introduction