gitalk / gitalk

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

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

中文说明 Demo

Install

Two ways.

• links

  <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

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:

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

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

<GitalkComponent options={{
  clientID: "...",
  // ...
  // options below
}} />

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, support [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja].

• 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.azm.workers.dev/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.

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

• gitment
• vssue

LICENSE

MIT

gitalk's Issues

请问一下已经有 owner 了， admin 属性表示 collaborators ，为啥 admin 还必须要有了？

请问一下已经有 owner 了， admin 属性表示 collaborators ，为啥 admin 还必须要有了？不能设置为选填项吗？

关于评论编辑的建议

在Gitalk评论系统中，编辑已经评论过的文字会自动跳转到Issue页面，可不可以优化一下，直接在原页面上编辑评论？

hexo next主题中如何能够在副标题显示评论数了？

next主题中如何能够在副标题显示评论数了？如下图显示的效果

特性请求：粘贴上传图片

利用github中issue的功能，粘贴上传图片并生成markdown链接。

var 那串代码放在哪个位置呢？？

出现错误：Error: Container not found, document.getElementById: gitalk-container

Error: Container not found, document.getElementById: gitalk-container

提供方法修改 perPage 屬性

現在， perPage 屬性是在 gitalk.jsx 裡面的 constructor (第56行)構建的。

我想在構建gitalk之後，可以再次手動設置屬性 perPage 屬性，再次自行定義每個頁面的評論載入量。

• 提供 setPerPage(page: number) 方法

已有评论包含图片的话，输入的时候会不停卡顿

https://gitalk.github.io 这里最下面由一个不是特别大的表情，也会重绘

可能因为输入的过程中会不断重绘 div，然后过长的图片会不停的被重新绘制，所以下面一直在跳？

请问如何完全(永久)取消某个 issue 订阅

我在 demo 中回复了一条评论，导致之后一旦有人新增评论，我就会收到邮件提醒，我想原因是评论后就会默认订阅这个 issue，即使别人不是回复你，也会收到提醒。

于是我进入到 demo 相关的具体 issue，点击了 unsubscribe，取消订阅，可是后续有人评论，仍然给我发提醒邮件了，而且我的账号再次被置为订阅了该 issue，对此十分困扰，不知如何才能完全取消评论订阅。

请问支持已有评论导入吗？支持的话该如何配置呢？

我已经有一个项目用了 gitment，但是后面发现他的局限很大，想问下是否支持已有的 issue 直接导入呢？可以的话该如何配置呢？

新增繁體中文 README.md

我覺得這個評論很實用，我會寫一篇文章，並翻譯 README.md。
// TODO:

• 翻譯為繁體中文
• 附上代碼解釋

自动化初始所有评论的脚本

昨天写了个自动化初始评论的脚本

username = "draveness" # GitHub 用户名
new_token = "xxxxxxx"  # GitHub Token
repo_name = "github-comments-repo" # 存放 issues
sitemap_url = "https://draveness.me/sitemap.xml" # sitemap
kind = "Gitalk" # "Gitalk" or "gitment"

require 'open-uri'
require 'faraday'
require 'active_support'
require 'active_support/core_ext'
require 'sitemap-parser'

sitemap = SitemapParser.new sitemap_url
urls = sitemap.to_a

conn = Faraday.new(:url => "https://api.github.com/repos/#{username}/#{repo_name}/issues") do |conn|
  conn.basic_auth(username, token)
  conn.adapter  Faraday.default_adapter
end

urls.each_with_index do |url, index|
  title = open(url).read.scan(/<title>(.*?)<\/title>/).first.first.force_encoding('UTF-8')
  response = conn.post do |req|
    req.body = { body: url, labels: [kind, url], title: title }.to_json
  end
  puts response.body
  sleep 15 if index % 20 == 0
end

详细使用可以看：https://draveness.me/git-comments-initialize

建议添加对文章点赞和评论数统计功能

评论数统计和对文章点赞都是非常有用的功能，建议 Gitalk 添加这个功能，万分谢谢。

Save the comments when login to the jump

@mogita
Typed some nice words in markdown without logging-in, then logged-in and came back here, those words were gone. Anyway, good job.

登录跳转时保存填写的评论

移动端输入框上显示Error：Network Error

感谢作者的gitalk，在将gitalk集成到hexo的next主题中时，发现在移动端会出现下面的情况

不知这是为何？

是否存在页面其他位置获取评论的接口？

比如我想在每个文章的标题下面显示这个文章有几条评论，请问gitalk有这个功能吗？

use gitalk in docsify

insert code in index.html

<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">

<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  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
  })
</script>

有加入Hexo博客的简单方法么

之前用的来必力，这两天貌似挂了。后来试了一下Gitment，不过有些麻烦，每篇文章得手动初始化才能创建一个Issue，才能评论。这个我看了下demo，感觉界面不错，不过有加入hexo博客的比较方便的方法么，像Next主题那种的？

在登录后如果注销再登录的话会报错 error: no access token

error: no access token

判断 admin 时增加 github login 的大小写处理

在 Github 上删除评论后，页面上显示评论数量不会变化

没有-1

issue重复

每点击(刷新)文章页面一次，就会新建一个issue，结果就是相同的文章会有很多issue

评论自动订阅issue的问题

我看了下 #15 里面有了一些讨论，现在有个想法不知道能不能实现

首先在gitalk里面有一个“回复”按钮
点击回复后会@该用户

另外如果我们取消订阅，被@还是会收到提醒，不被@则不会收到提醒
那么按照这个逻辑，只要我们取消了订阅，就是正常的评论提醒功能了

1.如果有人@你，你会收到邮件提醒，因为他是回复你的，你应该收到提醒
2.没有人@你，直接评论的，你不会收到提醒，因为这条评论和你没关系

所以只需要在评论后，自动取消订阅就可以不被*扰了。
可以实现自动取消订阅么，或者在页面添加一个选项？

将 Preact 替换为 Nerv

Nerv 介绍

Gitalk Demo

https://gitalk.github.io/

This is just a demo, and welcome your comments. If you have any questions or suggestions, please make another issue. Thank you.

这里只是作为演示，欢迎大家留言体验。如果有任何问题或者建议，请另外提 issue，谢谢。

与require-2.1.6,jquery-1.9.1.min.js冲突，报错Error: Mismatched anonymous define() module:

我引用的是：<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>，具体冲突的js文件为https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js，
Mismatched anonymous define() module这里的解决方案是将冲突的js文件先引用，但由于我使用的主题的原因没办法做到这点，这还有其他的解决方法不？

目前无法点击评论的问题

我按照read me中指示的那样，在hexo的主题中使用，但是无法点击评论这个按钮，手机页面可以点击。设备是mac chrome

关于回复评论的建议

能不能将回复做到评论的下面，否则如果评论很多的话，回复和原问题都连不到一块，很难找

另外这是一个非常好的 repo，谢谢 👍

构建项目报错

参数id不希望成为labels的参数。于是下载了项目修改代码重新构建。构建过程如下:

$ git clone xx
$ npm i
$ npm run dev

出现如下报错:

ERROR in ./src/index.js
Module parse failed: ~/gitalk/src/index.js Unexpected token (23:18)
You may need an appropriate loader to handle this file type.
|     }
|
|     return render(<GitalkComponent options={this.options}/>, node)
|   }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./index.js

Gitalk支持组织了！

新的页面，登陆后显示如题报错，评论不了。是因为没有初始化新建issue吗？需要自己建吗？

是否需要为每篇文章都初始化新建一个issue呢？

刚试了一下，结果请求404了。

我是先建了一个repo 来给gitalk用的。看请求404，是需要给每篇文章都做初始化么？

貌似截图发不上来，直接放博客文章链接好了。

实例链接：
http://shellphon.wang/githublog/2017/08/svg-draw.html

issue 自动创建问题

只有配置的 admin 成员打开页面才会自动创建 issue 吗？能设置不管是谁打开如果不存在就创建吗? 不然得把之前所有博文都点击一次太麻烦了

Error: no access token

我按照readme的步骤去尝试，但是每次都是这样，求指点

有什么办法可以不自动订阅，发邮件通知吗

只要有一个新的回复，在这个回复里的所有人都会收到邮件，有点太干扰人了

Error: Not Found.

如题，而且点击登陆也登陆不了，直接刷新页面，不知道怎么解决，有知道的可以帮忙解决一下吗。谢谢！~

给用hexo的小伙伴一点福利

在comments文件夹下新建一个文件 gitalk.ejs

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://yiyeti.cc/usr/themes/veryse/css/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '<%= theme.gitalk.clientID %>',
        clientSecret: '<%= theme.gitalk.clientSecret %>',
        id: window.location.pathname,
        repo: '<%= theme.gitalk.repo %>',
        owner: '<%= theme.gitalk.owner %>',
        admin: '<%= theme.gitalk.admin %>',
        distractionFreeMode: '<%= theme.gitalk.on %>'
    })
    gitalk.render('gitalk-container')
</script>

在配置文件 disqus 下面添加新的配置

gitalk:
  on: true
  owner: 你的github账户名
  repo: 你要作为评论系统的repo
  admin: ['github用户名']
  clientID: 你的clientId
  clientSecret: 你的clientSecret

在article.ejs里引用评论

<% if (!index && post.comments){ %>
<% if (theme.duoshuo.on) { %>
<%- partial('comments/duoshuo', {
    key: post.path,
    title: post.title,
    url: config.url + url_for(post.path),
}) %>
<% } else if (theme.changyan.on) { %>
<%- partial('comments/changyan') %>
<% } else if (theme.gitalk.on) { %>
<%- partial('comments/gitalk') %>
<% } else if (config.disqus_shortname) { %>
<%- partial('comments/disqus', {
    shortname: config.disqus_shortname
}) %>
<% } %>

gitak获取不到评论...?

刚开始再博客上评论可以显示评论内容，过一段时间就不能显示评论内容了。而存放评论的issues下有评论，但博客上获取不到......

IE 下无法显示gitalk ，有解吗？

打开官网的demo，在最新的IE下都无法显示，其他浏览器（包括Edge）都正常。有解决办法不？

gitalk 对同一篇博文重复创建 issue

gitalk 会对同一篇博文创建多个tag。

例如： 对于这篇博文，管理员使用小标题的链接进入这篇博文，gitalk 会自动创建一个新issure，而不是关联至原有issue。如此则会重复创建issue，如 #10、#17、#18、#19。

非管理员使用小标题的链接进入则会提示 Related Issues not found。

labels 是否可以考虑去除id

id如果默认为location.href，也看到凹凸博客的加密的字符串，去看issus的时候长长的的label显得很不雅观，建议使用tags(当然这个可以自行配置)

此项目是否抄袭 gitment ？

gitment 项目地址： https://github.com/imsun/gitment

当前评论框所在页面的 URI 中存在中文时无法登陆

当前评论框所在页面的 URI 中存在中文时，点击登陆后会跳转到网站首页，URI 中有如下错误信息

?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdeveloper.github.com%2Fv3%2Foauth%2F%23redirect-uri-mismatch```

关于更新文章题目后的ISSUE不更新问题

发现Gitalk新建的Issue页面，通常是以文章标题为issue的title，但是改变文章标题后，评论页面的title并没有更新。
希望后面能解决一下这个问题。

提高移动端兼容性

我在自己手机上测试了

• 安卓UC最新版浏览器
• 魅族自带浏览器

均不显示评论区...和gitment一样

但是我曾使用别人修改后的版本，解决了这个问题
可以参考下：imsun/gitment#52

【需求】建议添加点赞功能

有回复功能，非常不错！
但是还缺一个对整个文章或者某条评论点赞的按钮。建议添加对页面、对每条评论的点赞按钮，按钮链接到 issue 中 Add your reaction 功能。

请问可以从 gitment 迁移过来吗？

请问可以从 gitment 迁移过来吗？

目前还不支持回复功能吗

评论不支持删除和更新，是github做了跨域限制吗

如题，如果没有，可以继续开发下。而且下一步开发可以增强编辑器功能

缺乏开发环境文档说明

要开发新功能的时候发现缺乏开发环境文档说明，希望在wiki上能补充

好像gitalk的css有些问题,评论框获得焦点之后会闪并且会产生一个遮罩

https://blog.xiaomo.info/2017/GameServerType/