Self-deployed GitHub-style Reactions Like Feature

Introduction#

Various experts have implemented article liking functionality in various ways.
Some are built-in to the blogging system;
Some are integrated into the commenting system;
Some are implemented through API of statistical code;
Some are implemented through third-party SaaS services.

Until recently, I learned about Blank Expert's Memos, which introduced emaction/emaction.frontend.
This project also provides backend code, emaction/emaction.backend.

Although the backend code does not currently provide initialization code for the database, the command to initialize Cloudflare D1 was reverse-engineered from the source code.

Why this?#

Why choose this liking functionality.
This is an imitation of GitHub's liking functionality, which is basically a 1:1 reproduction.
GitHub is justice!

Steps#

1. Deploy the backend (optional)#

Deploying the backend is not necessary, you can use the API provided by the official.

Prerequisites:

Need a Cloudflare account
Need Node.js environment on the computer

First, go to Cloudflare and create a D1 database named: emaction
Copy the id of this database, such as: acf6da62-7777-4459-a579-123456789012

Then clone the code on your local computer:

git clone https://github.com/emaction/emaction.backend.git

Install dependencies:

cd emaction.backend

# Install packages
npm install

# Install Wrangler globally
npm install -g wrangler

PS: Some students have reported that they need to install Wrangler globally with -g, but I don't understand why.

Modify the wrangler.toml file in the cloned code to your own database_id:

name = "api-emaction"
main = "src/worker.js"
compatibility_date = "2023-07-25"
usage_model = "bundled"
env = { }

[[d1_databases]]
binding = "d1" # i.e. available in your Worker on env.DB
database_name = "emaction"
database_id = "acf6da62-7777-4459-a579-123456789012" # Modify to your own

[triggers]
crons = [ ]

wrangler login

In the popped-up browser page, click Allow to authorize.

Create a data table for the database (assuming the name is: emaction) on your own computer's terminal in the current project (not on the Cloudflare web page):

wrangler d1 execute emaction \
  '--command=CREATE TABLE reactions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    target_id TEXT NOT NULL,
    reaction_name TEXT NOT NULL,
    count INTEGER NOT NULL DEFAULT 0, 
    created_at INTEGER NOT NULL,
    updated_at INTEGER NOT NULL
  )'

Deploy the project to Cloudflare Worker:

wrangler deploy

Then log in to Cloudflare Worker, and you will find a Worker named api-emaction.
This name corresponds to the name in the package.json file in the cloned code, and you can choose whether to modify it.
Remember the domain of this Worker: https://api-emaction.xxxxxxx.workers.dev.
If most of the users are in China, you may need to bind a custom domain name to access it more friendly.

2. Frontend Usage#

When using the frontend, follow the instructions in emaction/emaction.frontend documentation.
Just pass the custom endpoint as a parameter to the JS code.

Import the JS Module in HTML.
This JS can be downloaded, modified, and deployed by yourself:

<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/[email protected]/bundle.js"></script>

Use this Module in HTML:

<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>

This endpoint does not have any error handling, do not enter a trailing "/" slash.
The custom ID reacttargetid is optional to modify, when there are multiple Reactions on the same page, try to use it.