A comment plugin base on GitHub issues
npm install gitalk-fixdistractionFreeMode option)
html
`
- npm install
`sh
npm i --save gitalk
`
`js
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
`
Usage
Add a container to your page:
`html
`
Then use the Javascript code below to generate the gitalk plugin:
`js
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
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')
`
A GitHub Application is needed for authorization, 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.
Options
- 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 using id.
- 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, en, zh-CN and zh-TW are currently available.
- 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 and first.
- 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 to true.
- proxy String
Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.
GitHub oauth request reverse proxy for CORS. Why need this?
- flipMoveOptions Object
Default:
`js
{
staggerDelayBy: 150,
appearAnimation: 'accordionVertical',
enterAnimation: 'accordionVertical',
leaveAnimation: 'accordionVertical',
}
`
Comment list animation. Reference
- enableHotKey Boolean
Default: true`.