vue-gitalk

0.5.0 • Public • Published

Vue Gitalk

npm version npm

A plugin that simplifies adding Gitalk comments to Vue apps.

Installation

# For npm
$ npm install vue-gitalk
# For yarn
$ yarn add vue-gitalk

Usage

Add the following code to your main.js

import  'vue-gitalk/dist/vue-gitalk.css';
import  Gitalk  from  'vue-gitalk';

Vue.use(Gitalk, {
  ... //Global gitalk config
});

Then simply add the following line to your Vue files.

<Gitalk :config="{
  ... // Component gitalk config
}" />

Note

  • All the gitalk config options can be used in the Global and Component configs.
  • If same config option is provided in Global and Component. Component config option will be considered.

Config 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?

  • 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.

License (MIT)

Open LICENSE file for more info

Package Sidebar

Install

npm i vue-gitalk

Weekly Downloads

1

Version

0.5.0

License

MIT

Unpacked Size

2.17 MB

Total Files

5

Last publish

Collaborators

  • nishantwrp