React JavaScript plugin HTML preact comment github-issues GitHub
Need help with gitalk?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
gitalk

Description

Gitalk is a modern comment component based on Github Issue and Preact.

4.9K Stars 482 Forks MIT License 164 Commits 96 Opened issues

Services available

Need anything else?

Gitalk

NPM CDNJS jsdelivr david-dm travis coveralls gzip-size

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

中文说明 Demo

Install

Two ways.

  • links
  
  

  

  
  
  • npm install
npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

Usage

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:

Method One

Add a container to your page:

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

Method Two: Use in React

Import the Gitalk with

import GitalkComponent from "gitalk/dist/gitalk-component";

And use the component like


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
,
zh-TW
,
es-ES
,
fr
,
ru
,
de
,
pl
and
ko
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
.

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

Instance Methods

  • render(String/HTMLElement)

Init render and mount plugin.

TypeScript

TypeScript definitions for options and Gitalk class come with the package and should be automatically detected.

Definitions for React component usage are not included.

Contributing

  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

Similar Projects

LICENSE

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.