Repository files navigation

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

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

中文说明Demo

Two ways.

• links

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"><scriptsrc="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script><!-- or --><linkrel="stylesheet"href="https://unpkg.com/gitalk/dist/gitalk.css"><scriptsrc="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

• npm install

npm i --save gitalk

import'gitalk/dist/gitalk.css'importGitalkfrom'gitalk'

Firstly, you need choose a public github repository (existed or create a new one) for store comments,

Then create AGitHub Application if you don't have one,Click here to register a new one.Note: You must specify the website domain url in theAuthorization callback URL field.

Lastly, you can choose how to apply to the page as below:

Add a container to your page:

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

Then use the Javascript code below to generate the gitalk plugin:

constgitalk=newGitalk({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 50distractionFreeMode:false// Facebook-like distraction free mode})gitalk.render('gitalk-container')

Import the Gitalk with

importGitalkComponentfrom"gitalk/dist/gitalk-component";

And use the component like

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

• clientIDString

  Required. GitHub Application Client ID.

• clientSecretString

  Required. GitHub Application Client Secret.

• repoString

  Required. GitHub repository.

• ownerString

  Required. GitHub repository owner. Can be personal user or organization.

• adminArray

  Required. GitHub repository owner and collaborators. (Users who having write access to this repository)

• idString

  Default:location.href.

  The unique id of the page. Length must less than 50.

  Note: You can use regex to extract certain path of the URL as the id. E.g.,location.href.match('/(?<=posts/)(.*)(?=/)/')[1]

• numberNumber

  Default:-1.

  The issue ID of the page, if thenumber attribute is not defined, issue will be located usingid.

• labelsArray

  Default:['Gitalk'].

  GitHub issue labels.

• titleString

  Default:document.title.

  GitHub issue title.

• bodyString

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

  GitHub issue body.

• languageString

  Default:navigator.language || navigator.userLanguage.

  Localization language key, support [en,zh-CN,zh-TW,es-ES,fr,ru,de,pl,ko,fa,ja].

• perPageNumber

  Default:10.

  Pagination size, with maximum 100.

• distractionFreeModeBoolean

  Default: false.

  Facebook-like distraction free mode.

• pagerDirectionString

  Default: 'last'

  Comment sorting direction, available values arelast andfirst.

• createIssueManuallyBoolean

  Default:false.

  By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to theadmin users. You can create it manually by setting this option totrue.

• proxyString

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

  GitHub oauth request reverse proxy for CORS.Why need this?

• flipMoveOptionsObject

  Default:

  {staggerDelayBy:150,appearAnimation:'accordionVertical',enterAnimation:'accordionVertical',leaveAnimation:'accordionVertical',}

  Comment list animation.Reference

• enableHotKeyBoolean

  Default:true.

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

• render(String/HTMLElement)

  Init render and mount plugin.

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

Definitions for React component usage are not included.

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

• gitment
• vssue

MIT