# Gitalk

[![NPM][npm-version-image]][npm-version-url] 
[![CDNJS][cdnjs-version-image]][cdnjs-version-url] 
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/gitalk/badge)](https://www.jsdelivr.com/package/npm/gitalk)
[![david-dm][david-dm-image]][david-dm-url] 
[![travis][travis-image]][travis-url] 
[![coveralls][coveralls-image]][coveralls-url] 
[![gzip-size][gzip-size]][gzip-url]

Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論插件。

## 特性

- 使用 GitHub 登錄
- 支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
- 支持個人或組織
- 無干擾模式（設置 distractionFreeMode 為 true 開啟）
- 快捷鍵提交評論 （cmd|ctrl + enter）

[Readme](https://github.com/gitalk/gitalk/blob/master/readme.md)
[在線示例](https://gitalk.github.io)

## 安裝

兩種方式

- 直接引入

```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 安裝

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

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

## 使用

添加壹個容器：

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

用下面的 Javascript 代碼來生成 gitalk 插件：

```js
var 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')
```

需要 **GitHub Application**，如果沒有 [點擊這裡申請](https://github.com/settings/applications/new)，`Authorization callback URL` 填寫當前使用插件頁面的域名。

### 在React使用

使用以下代碼引入Gitalk組件

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

按以下方式在React中使用Gitalk組件

```jsx
<GitalkComponent options={{
  clientID: "...",
  // ...
  // 設置項
}} />
```

## 設置

- **clientID** `String`

  **必須**. GitHub Application Client ID.

- **clientSecret** `String`

  **必須**. GitHub Application Client Secret.

- **repo** `String`

  **必須**. GitHub repository.

- **owner** `String`

  **必須**. GitHub repository 所有者，可以是個人或者組織。

- **admin** `Array`

  **必須**. GitHub repository 的所有者和合作者 (對這個 repository 有寫權限的用戶)。

- **id** `String`

  Default: `location.href`.

  頁面的唯一標識。長度必須小於50。
  
  提示：可以使用正則從 `URL` 中提取其中一部分作為 `id`。例如：`location.href.match('/(?<=posts/)(.*)(?=/)/')[1]`

- **number** `Number` 
  
  Default: `-1`.

  頁面的 issue ID，若未定義`number`屬性則會使用`id`進行定位。  

- **labels** `Array`

  Default: `['Gitalk']`.

  GitHub issue 的標籤。

- **title** `String`

  Default: `document.title`.

  GitHub issue 的標題。

- **body** `String`

  Default: `location.href + header.meta[description]`.

  GitHub issue 的內容。

- **language** `String`

  Default: `navigator.language || navigator.userLanguage`.

  設置語言，支持 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]。

- **perPage** `Number`

  Default: `10`.

  每次加載的數據大小，最多 100。

- **distractionFreeMode** `Boolean`

  Default: false。

  類似Facebook評論框的全屏遮罩效果.

- **pagerDirection** `String`

  Default: 'last'

  評論排序方式， `last`為按評論創建時間倒敘，`first`為按創建時間正序。

- **createIssueManually** `Boolean`

  Default: `false`.

  如果當前頁面沒有相應的 isssue 且登錄的用戶屬於 admin，則會自動創建 issue。如果設置為 `true`，則顯示一個初始化頁面，創建 issue 需要點擊 `init` 按鈕。

- **proxy** `String`

  Default: `https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token`.

   GitHub oauth 請求到反向代理，為了支持 CORS。 [為什麼要這樣?](https://github.com/isaacs/github/issues/330)

- **flipMoveOptions** `Object`

  Default:
  ```js
    {
      staggerDelayBy: 150,
      appearAnimation: 'accordionVertical',
      enterAnimation: 'accordionVertical',
      leaveAnimation: 'accordionVertical',
    }
  ```

  評論列表的動畫。 [參考](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)

- **enableHotKey** `Boolean`

  Default: `true`.

  啟用快捷鍵(cmd|ctrl + enter) 提交評論.


## 實例方法

- **render(String/HTMLElement)**

  初始化渲染並掛載插件。

## TypeScript

已經包括了配置項和Gitalk類的類型定義，不包括React組件的類型定義。

## 貢獻

1. [Fork 代碼倉庫](https://github.com/gitalk/gitalk/fork) 並從 master 創建你的分支
2. 如果你添加的代碼需要測試，請添加測試！
3. 如果你修改了 API，請更新文檔。
4. 確保單元測試通過 (npm test).
5. 確保代碼風格一致 (npm run lint).
6. 提交你的代碼 (git commit) [提交信息格式參考](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines)

## 類似項目

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

## 許可

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]: https://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