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

中文说明

Install

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'

Usage

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

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

Instance Methods

• render(String/HTMLElement)

  Init render and mount plugin.

Contributing

1. Create an issue and describe your idea
2. [Fork it] (https://github.com/gitalk/gitalk/fork)
3. Create your branch (git checkout -b my-new-branch)
4. Commit your changes (git commit) Commit Message Format Reference
5. Publish the branch (git push origin my-new-branch)
6. Create a new Pull Request

Similar Project

• gitment

LICENSE

MIT