Gitalk is a modern comment component based on GitHub Issue and Preact.
- Authentication with github account
- Serverless, all comments will be stored as github issues
- Both personal and organization github projects can be used to store comments
- Localization, support multiple languages [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
- Facebook-like distraction free mode (Can be enabled via the
distractionFreeMode
option) - Hotkey submit comment (cmd|ctrl + enter)
Two ways.
- links
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
- npm install
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
WARNING
If you install gitalk by methods above, you can't use the upload function. So you must download thedist/gitalk.min.js
anddist/gitalk.css
.
These files in dist are the newest, then you can import them.
Firstly, you need choose a public github repository (existed or create a new one) for store comments,
Then create A GitHub Application if you don't have one, Click here to register a new one.
Note: You must specify the website domain url in the Authorization callback URL
field.
Lastly, you can choose how to apply to the page as below:
Add a container to your page:
<div id="gitalk-container"></div>
Then use the Javascript code below to generate the gitalk plugin:
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo', // The repository of store comments,
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
Import the Gitalk with
import GitalkComponent from "gitalk/dist/gitalk-component";
And use the component like
<GitalkComponent options={{
clientID: "...",
// ...
// options below
}} />
-
clientID
String
Required. GitHub Application Client ID.
-
clientSecret
String
Required. GitHub Application Client Secret.
-
repo
String
Required. GitHub repository.
-
owner
String
Required. GitHub repository owner. Can be personal user or organization.
-
admin
Array
Required. GitHub repository owner and collaborators. (Users who having write access to this repository)
-
id
String
Default:
location.href
.The unique id of the page. Length must less than 50.
-
number
Number
Default:
-1
.The issue ID of the page, if the
number
attribute is not defined, issue will be located usingid
. -
labels
Array
Default:
['Gitalk']
.GitHub issue labels.
-
title
String
Default:
document.title
.GitHub issue title.
-
body
String
Default:
location.href + header.meta[description]
.GitHub issue body.
-
language
String
Default:
navigator.language || navigator.userLanguage
.Localization language key, support [
en
,zh-CN
,zh-TW
,es-ES
,fr
,ru
,de
,pl
,ko
,fa
,ja
]. -
perPage
Number
Default:
10
.Pagination size, with maximum 100.
-
distractionFreeMode
Boolean
Default: false.
Facebook-like distraction free mode.
-
pagerDirection
String
Default: 'last'
Comment sorting direction, available values are
last
andfirst
. -
createIssueManually
Boolean
Default:
false
.By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the
admin
users. You can create it manually by setting this option totrue
. -
proxy
String
Default:
https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
.GitHub oauth request reverse proxy for CORS. Why need this?
-
flipMoveOptions
Object
Default:
{ staggerDelayBy: 150, appearAnimation: 'accordionVertical', enterAnimation: 'accordionVertical', leaveAnimation: 'accordionVertical', }
Comment list animation. Reference
-
enableHotKey
Boolean
Default:
true
.Enable hot key (cmd|ctrl + enter) submit comment.
-
upload
Object
Default:
{ enable: false, // default config is disabled url: '', // api url method: 'POST', // request method name: 'file', // the formData's name headers: { // request header 'Content-Type': 'multipart/form-data' }, responseType: 'json', // response type timeout: 10000, // timeout (ms) multiple: false, // whether uploading multiple files is permitted accept: 'image/*', // accepted file types fileMaxSize: 1024 * 1024 * 10, // file max size successCode: 0, // success code value (not httpStatusCode) successCodeKey: ['code'], // If the file is uploaded successfully, it will find this current code (res)=> res.code (res is the response content) errorMsgKey: ['msg'], // upload failed key. such as(res)=> res.msg errorMsg: '', // When the file uploads failed, it will show this message. successUrlKey: ['data','url'], // If the file is uploaded successfully, it will find this current url. such as res.data.url proxy: '', // proxy url (for cors). You can write https://cors-anywhere.azm.workers.dev/ ,so the real request's url is https://cors-anywhere.azm.workers.dev/APIURL }
-
render(String/HTMLElement)
Init render and mount plugin.
TypeScript definitions for options and Gitalk class come with the package and should be automatically detected.
Definitions for React component usage are not included.
- Fork the repository and create your branch from master
- If you've added code that should be tested, add tests!
- If you've changed APIs, update the documentation.
- Ensure the test suite passes (npm test).
- Make sure your code lints (npm run lint).
- Commit your changes (git commit) Commit Message Format Reference
MIT