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]
• Facebook-like distraction free mode (Can be enabled via the distractionFreeMode option)
• Hotkey submit comment (cmd|ctrl + enter)

中文说明 Demo

Two ways.

• links

 <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'

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.

const gitalk = new Gitalk({ clientID: 'Github Application Client ID', clientSecret: 'Github Application Client Secret', repo: 'Github repo', owner: 'Github repo owner', admin: ['Github repo collaborators, only these guys can initialize github issues'], // facebook-like distraction free mode distractionFreeMode: false }) gitalk.render('gitalk-container')

• 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 collaborators. (Ensure having write access to this repository)

• id String

  Default: location.href.

  The unique id of the page.

• 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:

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

  Comment list animation. Reference

• enableHotKey Boolean

  Default: true.

  Enable hot key (cmd|ctrl + enter) submit comment.

• render(String/HTMLElement)

  Init render and mount plugin.

1. Fork the repository and create your branch from master
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (npm test).
5. Make sure your code lints (npm run lint).
6. Commit your changes (git commit) Commit Message Format Reference

• gitment

MIT