# gitalk-fix

> A comment plugin base on GitHub issues

Latest version **1.5.2** (published 2019-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install gitalk-fix
pnpm add gitalk-fix
yarn add gitalk-fix
bun add gitalk-fix
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2019-06-14 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Author | Liucw |
| Maintainers | godbmw |
| Keywords | comment, plugin, lib, GitHub |

## Links

- npm: https://www.npmjs.com/package/gitalk-fix
- npm.io page: https://npm.io/package/gitalk-fix

## Dependencies (9)

- [axios](https://npm.io/package/axios.md) 0.16.2
- [preact](https://npm.io/package/preact.md) 8.1.0
- [autosize](https://npm.io/package/autosize.md) 3.0.21
- [date-fns](https://npm.io/package/date-fns.md) 1.28.5
- [es6-promise](https://npm.io/package/es6-promise.md) 4.1.1
- [node-polyglot](https://npm.io/package/node-polyglot.md) 2.2.2
- [preact-compat](https://npm.io/package/preact-compat.md) 3.16.0
- [react-flip-move](https://npm.io/package/react-flip-move.md) 2.9.14
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) 2.8.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.5.2 (latest) — 2019-06-14

## README

# Gitalk

[![NPM][npm-version-image]][npm-version-url] [![CDNJS][cdnjs-version-image]][cdnjs-version-url] [![david-dm][david-dm-image]][david-dm-url] [![travis][travis-image]][travis-url] [![coveralls][coveralls-image]][coveralls-url] [![gzip][gzip-size]][gzip-url]

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 `distractionFreeMode` option)
- Hotkey submit comment (cmd|ctrl + enter)

[中文说明](https://github.com/gitalk/gitalk/blob/master/readme-cn.md)
[Demo](https://gitalk.github.io)

## Install

Two ways.

- links

```html
  <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

```sh
npm i --save gitalk
```

```js
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
```

## Usage

Add a container to your page:

```html
<div id="gitalk-container"></div>
```

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](https://github.com/settings/applications/new) 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?](https://github.com/isaacs/github/issues/330)

- **flipMoveOptions** `Object` 
  
  Default:
  ```js
    {
      staggerDelayBy: 150,
      appearAnimation: 'accordionVertical',
      enterAnimation: 'accordionVertical',
      leaveAnimation: 'accordionVertical',
    }
  ```

  Comment list animation. [Reference](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)

- **enableHotKey** `Boolean` 
  
  Default: `true`.

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


## Instance Methods

- **render(String/HTMLElement)**

  Init render and mount plugin.

## Contributing

1. [Fork the repository](https://github.com/gitalk/gitalk/fork) 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](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines)

## Similar Projects

- [gitment](https://github.com/imsun/gitment)
- [vssue](https://vssue.js.org)

## LICENSE

MIT

[npm-version-image]: https://img.shields.io/npm/v/gitalk.svg?style=flat-square
[npm-version-url]: https://www.npmjs.com/package/gitalk
[cdnjs-version-image]: https://img.shields.io/cdnjs/v/gitalk.svg?style=flat-square
[cdnjs-version-url]: https://cdnjs.com/libraries/gitalk
[david-dm-image]: https://david-dm.org/gitalk/gitalk.svg?style=flat-square
[david-dm-url]: https://david-dm.org/gitalk/gitalk
[travis-image]: https://img.shields.io/travis/gitalk/gitalk/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/gitalk/gitalk
[coveralls-image]: https://img.shields.io/coveralls/gitalk/gitalk/master.svg?style=flat-square
[coveralls-url]: https://coveralls.io/github/gitalk/gitalk
[gzip-size]: http://img.badgesize.io/https://unpkg.com/gitalk/dist/gitalk.min.js?compression=gzip&style=flat-square
[gzip-url]: https://unpkg.com/gitalk/dist/gitalk.min.js

---
_Source: https://npm.io/package/gitalk-fix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._