Integrating Gitalk: A GitHub‑Based Comment System for Your Site

What is Gitalk?

Gitalk is a comment component built with Preact that stores comments as GitHub Issues.

Features

Login with GitHub

Supports multiple languages (en, zh-CN, zh-TW)

Works with personal or organization repositories

Distraction‑free mode (enable by setting distractionFreeMode to true)

Keyboard shortcut (cmd|ctrl + enter) to submit comments

Comment sorting via GitHub V4 GraphQL API

Installation

Two methods are available:

Direct inclusion using CDN links

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

npm installation

npm i --save gitalk

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

Usage

You need a GitHub Application. If you don’t have one, create it and fill the Authorization callback URL with the domain of the page where the plugin is used.

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  owner: 'GitHub repo owner',
  admin: ['GitHub repo collaborators'],
});

gitalk.render('gitalk-container');

Configuration Options

clientID String – Required. GitHub Application Client ID.

clientSecret String – Required. GitHub Application Client Secret.

repo String – Required. GitHub repository name.

owner String – Required. Repository owner (user or organization).

admin Array – Required. Repository collaborators with write access.

id String – Default: location.href. Unique identifier for the page.

labels Array – Default: ['Gitalk']. Labels applied to the GitHub issue.

title String – Default: document.title. Issue title.

body String – Default: location.href + header.meta[description]. Issue body content.

language String – Default: navigator.language || navigator.userLanguage. Supported values: en, zh-CN, zh-TW.

perPage Number – Default: 10. Number of comments loaded per request (max 100).

distractionFreeMode Boolean – Default: false. Enables a full‑screen overlay similar to Facebook comments.

pagerDirection String – Default: 'last'. Sorting order: 'last' for newest first, 'first' for oldest first.

createIssueManually Boolean – Default: false. If true, shows an initialization page requiring the user to click an init button to create an issue.

proxy String – Default:

https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token

. Proxy URL for GitHub OAuth to bypass CORS.

flipMoveOptions Object – Default animation settings for comment list transitions.

{
  staggerDelayBy: 150,
  appearAnimation: 'accordionVertical',
  enterAnimation: 'accordionVertical',
  leaveAnimation: 'accordionVertical'
}

enableHotKey Boolean – Default: true. Enables the cmd|ctrl + enter shortcut for submitting comments.

Instance Methods

render(String/HTMLElement) – Initializes and mounts the Gitalk plugin onto the specified container.

Contributing

Create an issue describing your idea.

Fork the repository.

Create a new branch (e.g., git checkout -b my-new-branch).

Commit your changes (follow the commit message format).

Push the branch ( git push origin my-new-branch).

Open a Pull Request.

Similar Projects

gitment