Gitalk
Gitalk is a modern comment component based on GitHub Issue and Preact.
Features
- 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]
- Facebook-like distraction free mode (Can be enabled via the
distractionFreeModeoption) - Hotkey submit comment (cmd, ctrl + enter)
Install
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'
Usage
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',
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
StringRequired. GitHub Application Client ID.
-
clientSecret
StringRequired. GitHub Application Client Secret.
-
repo
StringRequired. GitHub repository.
-
owner
StringRequired. GitHub repository owner. Can be personal user or organization.
-
admin
ArrayRequired. GitHub repository owner and collaborators. (Users who having write access to this repository)
-
id
StringDefault:
location.href.The unique id of the page. Length must less than 50.
-
number
NumberDefault:
-1.The issue ID of the page, if the
numberattribute is not defined, issue will be located usingid. -
labels
ArrayDefault:
['Gitalk'].GitHub issue labels.
-
title
StringDefault:
document.title.GitHub issue title.
-
body
StringDefault:
location.href + header.meta[description].GitHub issue body.
-
language
StringDefault:
navigator.language, navigator.userLanguage.Localization language key,
en,zh-CNandzh-TWare currently available. -
perPage
NumberDefault:
10.Pagination size, with maximum 100.
-
distractionFreeMode
BooleanDefault: false.
Facebook-like distraction free mode.
-
pagerDirection
StringDefault: 'last'
Comment sorting direction, available values are
lastandfirst. -
createIssueManually
BooleanDefault:
false.By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the
adminusers. You can create it manually by setting this option totrue. -
proxy
StringDefault:
https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.GitHub oauth request reverse proxy for CORS. Why need this?
-
flipMoveOptions
ObjectDefault:
{ staggerDelayBy: 150, appearAnimation: 'accordionVertical', enterAnimation: 'accordionVertical', leaveAnimation: 'accordionVertical', }Comment list animation. Reference
-
enableHotKey
BooleanDefault:
true.Enable hot key (cmd, ctrl + enter) submit comment.
Instance Methods
-
render(String/HTMLElement)
Init render and mount plugin.
Contributing
- 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
Similar Projects
LICENSE
MIT