├── libs ├── gitalk.styl ├── index.js └── mixin.js ├── docs ├── README.md ├── .vuepress │ ├── styles │ │ ├── index.styl │ │ └── palette.styl │ ├── enhanceApp.js │ └── config.js └── guide │ └── README.md ├── .gitignore ├── deploy.sh ├── package.json └── README.md /libs/gitalk.styl: -------------------------------------------------------------------------------- 1 | #gitalk-container 2 | padding 2rem 2.5rem 3 | margin 0 auto 4 | max-width 740px!important -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | tagline: vuepress gitalk 4 | actionText: Quick Start → 5 | actionLink: /guide/ 6 | footer: Made by xiangxiao3 with ❤️ 7 | --- 8 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom Styles here. 3 | * 4 | * ref：https://v1.vuepress.vuejs.org/config/#index-styl 5 | */ 6 | 7 | .home .hero img 8 | max-width 450px!important 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | pids 2 | logs 3 | node_modules 4 | npm-debug.log 5 | coverage/ 6 | run 7 | dist 8 | public 9 | .DS_Store 10 | .nyc_output 11 | .basement 12 | config.local.js 13 | basement_dist 14 | gitalkconfig.js 15 | -------------------------------------------------------------------------------- /libs/index.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path'); 2 | 3 | module.exports = options => ({ 4 | define: { 5 | GITALK: options.gitalkConfig || {}, 6 | }, 7 | clientRootMixin: resolve(__dirname, 'mixin.js'), 8 | }); 9 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom palette here. 3 | * 4 | * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl 5 | */ 6 | 7 | $accentColor = #3eaf7c 8 | $textColor = #2c3e50 9 | $borderColor = #eaecef 10 | $codeBgColor = #282c34 11 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | set -e 3 | yarn run build 4 | cd docs/.vuepress/dist 5 | 6 | git init 7 | git add -A 8 | git commit -m 'deploy: 发布到 gh-pages' 9 | 10 | git push -f https://github.com/xxholly32/vuepress-plugin-gitalk-maker.git master:gh-pages 11 | 12 | cd - -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Client app enhancement file. 3 | * 4 | * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements 5 | */ 6 | 7 | export default ({ 8 | Vue, // the version of Vue being used in the VuePress app 9 | options, // the options for the root Vue instance 10 | router, // the router instance for the app 11 | siteData // site metadata 12 | }) => { 13 | // ...apply enhancements for the site. 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-plugin-gitalk-maker", 3 | "version": "0.1.0", 4 | "description": "vuepress gitalk", 5 | "main": "libs/index.js", 6 | "authors": { 7 | "name": "xiangxiao3", 8 | "email": "xxholly32@163.com" 9 | }, 10 | "repository": "/vuepress-plugin-gitalk-maker", 11 | "scripts": { 12 | "dev": "vuepress dev docs", 13 | "build": "vuepress build docs", 14 | "deploy": "bash deploy.sh" 15 | }, 16 | "license": "MIT", 17 | "devDependencies": { 18 | "@vuepress/plugin-back-to-top": "^1.0.0", 19 | "@vuepress/plugin-medium-zoom": "^1.0.0", 20 | "vuepress": "^1.0.0" 21 | }, 22 | "dependencies": { 23 | "gitalk": "^1.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /libs/mixin.js: -------------------------------------------------------------------------------- 1 | import 'gitalk/dist/gitalk.css'; 2 | import Gitalk from 'gitalk'; 3 | import './gitalk.styl'; 4 | 5 | function renderGitalk(isRender, frontmatter) { 6 | const gitalk = new Gitalk( 7 | Object.assign({}, GITALK, { 8 | id: location.pathname, 9 | }), 10 | ); 11 | isRender && gitalk.render('gitalk-container'); 12 | } 13 | 14 | function intergrateGitalk(boo, frontmatter) { 15 | const commentsContainer = document.createElement('div'); 16 | commentsContainer.id = 'gitalk-container'; 17 | const $page = document.querySelector('.page'); 18 | if ($page) { 19 | $page.appendChild(commentsContainer); 20 | } 21 | renderGitalk(boo, frontmatter); 22 | } 23 | 24 | export default { 25 | mounted() { 26 | try { 27 | const router = this.$router; 28 | const frontmatter = this.$frontmatter; 29 | setTimeout(() => { 30 | document && intergrateGitalk(router.path !== '/', frontmatter); 31 | }, 500); 32 | } catch (e) { 33 | console.error(e.message); 34 | } 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const { description } = require('../../package'); 2 | const { clientID, clientSecret } = require('../../gitalkconfig'); 3 | 4 | module.exports = { 5 | /** 6 | * Ref：https://v1.vuepress.vuejs.org/config/#title 7 | */ 8 | title: 'vuepress gitalk', 9 | base: '/vuepress-plugin-gitalk-maker/', 10 | /** 11 | * Ref：https://v1.vuepress.vuejs.org/config/#description 12 | */ 13 | description: description, 14 | 15 | /** 16 | * Extra tags to be injected to the page HTML `` 17 | * 18 | * ref：https://v1.vuepress.vuejs.org/config/#head 19 | */ 20 | head: [ 21 | ['meta', { name: 'theme-color', content: '#3eaf7c' }], 22 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], 23 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], 24 | ], 25 | 26 | /** 27 | * Theme configuration, here is the default theme configuration for VuePress. 28 | * 29 | * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html 30 | */ 31 | themeConfig: { 32 | repo: '', 33 | editLinks: false, 34 | docsDir: '', 35 | editLinkText: '', 36 | lastUpdated: false, 37 | nav: [ 38 | { 39 | text: 'Guide', 40 | link: '/guide/', 41 | }, 42 | { 43 | text: 'Github', 44 | link: 'https://github.com/xxholly32/vuepress-plugin-gitalk-maker', 45 | }, 46 | ], 47 | sidebar: { 48 | '/guide/': [ 49 | { 50 | title: 'Guide', 51 | collapsable: false, 52 | children: [''], 53 | }, 54 | ], 55 | }, 56 | }, 57 | 58 | /** 59 | * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/ 60 | */ 61 | plugins: [ 62 | [ 63 | require('../../libs'), 64 | { 65 | gitalkConfig: { 66 | clientID, 67 | clientSecret, 68 | repo: 'vuepress-plugin-gitalk-maker', 69 | owner: 'xxholly32', 70 | admin: ['xxholly32'], 71 | // id: location.pathname, // Ensure uniqueness and length less than 50 72 | distractionFreeMode: false, // Facebook-like distraction free mode 73 | }, 74 | }, 75 | ], 76 | '@vuepress/plugin-back-to-top', 77 | '@vuepress/plugin-medium-zoom', 78 | ], 79 | }; 80 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # vuepress-plugin-gitalk-maker 2 | 3 | `vuepress-plugin-gitalk-maker` 是基于 [vuepress](https://v1.vuepress.vuejs.org/zh/) 的评论功能，数据源来自 github 的 issues。底层基于 [gitalk](https://github.com/gitalk/gitalk)。 4 | 5 | 效果可以点击[传送门](./#演示) 6 | 7 | ## 用法 8 | 9 | ### 安装 10 | 11 | ```js 12 | yarn add vuepress-plugin-gitalk-maker 13 | ``` 14 | 15 | ### 添加到`config.js` 16 | 17 | ```js 18 | module.exports = { 19 | plugins: [ 20 | [ 21 | 'gitalk-maker', 22 | { 23 | gitalkConfig: { 24 | clientID: 'clientID', 25 | clientSecret: 'clientSecret', 26 | repo: 'vuepress-plugin-gitalk-maker', 27 | owner: 'xxholly32', 28 | admin: ['xxholly32'], 29 | // id: location.pathname, // 无法配置默认用 location.pathname 30 | distractionFreeMode: false, // Facebook-like distraction free mode 31 | }, 32 | }, 33 | ], 34 | ], 35 | }; 36 | ``` 37 | 38 | 如果没有 github 应用可以去注册一个， [传送门](https://github.com/settings/applications/new) 39 | 40 | ### gitalkConfig 41 | 42 | [数据来源于 gitalk](https://github.com/gitalk/gitalk#options) 43 | 44 | - **clientID** `String` 45 | 46 | **Required**. GitHub Application Client ID. 47 | 48 | - **clientSecret** `String` 49 | 50 | **Required**. GitHub Application Client Secret. 51 | 52 | - **repo** `String` 53 | 54 | **Required**. GitHub repository. 55 | 56 | - **owner** `String` 57 | 58 | **Required**. GitHub repository owner. Can be personal user or organization. 59 | 60 | - **admin** `Array` 61 | 62 | **Required**. GitHub repository owner and collaborators. (Users who having write access to this repository) 63 | 64 | - **id** `String` 65 | 66 | Default: `location.href`. 67 | 68 | The unique id of the page. Length must less than 50. 69 | 70 | - **number** `Number` 71 | 72 | Default: `-1`. 73 | 74 | The issue ID of the page, if the `number` attribute is not defined, issue will be located using `id`. 75 | 76 | - **labels** `Array` 77 | 78 | Default: `['Gitalk']`. 79 | 80 | GitHub issue labels. 81 | 82 | - **title** `String` 83 | 84 | Default: `document.title`. 85 | 86 | GitHub issue title. 87 | 88 | - **body** `String` 89 | 90 | Default: `location.href + header.meta[description]`. 91 | 92 | GitHub issue body. 93 | 94 | - **language** `String` 95 | 96 | Default: `navigator.language || navigator.userLanguage`. 97 | 98 | Localization language key, `en`, `zh-CN` and `zh-TW` are currently available. 99 | 100 | - **perPage** `Number` 101 | 102 | Default: `10`. 103 | 104 | Pagination size, with maximum 100. 105 | 106 | - **distractionFreeMode** `Boolean` 107 | 108 | Default: false. 109 | 110 | Facebook-like distraction free mode. 111 | 112 | - **pagerDirection** `String` 113 | 114 | Default: 'last' 115 | 116 | Comment sorting direction, available values are `last` and `first`. 117 | 118 | - **createIssueManually** `Boolean` 119 | 120 | Default: `false`. 121 | 122 | 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`. 123 | 124 | - **proxy** `String` 125 | 126 | Default: `https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token`. 127 | 128 | GitHub oauth request reverse proxy for CORS. [Why need this?](https://github.com/isaacs/github/issues/330) 129 | 130 | - **flipMoveOptions** `Object` 131 | 132 | Default: 133 | 134 | ```js 135 | { 136 | staggerDelayBy: 150, 137 | appearAnimation: 'accordionVertical', 138 | enterAnimation: 'accordionVertical', 139 | leaveAnimation: 'accordionVertical', 140 | } 141 | ``` 142 | 143 | Comment list animation. [Reference](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md) 144 | 145 | - **enableHotKey** `Boolean` 146 | 147 | Default: `true`. 148 | 149 | Enable hot key (cmd|ctrl + enter) submit comment. 150 | 151 | ## 演示 152 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuepress-plugin-gitalk-maker 2 | 3 | `vuepress-plugin-gitalk-maker` 是基于 [vuepress](https://v1.vuepress.vuejs.org/zh/) 的评论功能，数据源来自 github 的 issues。底层基于 [gitalk](https://github.com/gitalk/gitalk)。 4 | 5 | ## 用法 6 | 7 | ### 安装 8 | 9 | ```js 10 | yarn add vuepress-plugin-gitalk-maker 11 | ``` 12 | 13 | ### 添加到`config.js` 14 | 15 | ```js 16 | module.exports = { 17 | plugins: [ 18 | [ 19 | 'gitalk', 20 | { 21 | gitalkConfig: { 22 | clientID: 'clientID', 23 | clientSecret: 'clientSecret', 24 | repo: 'vuepress-plugin-gitalk-maker', 25 | owner: 'xxholly32', 26 | admin: ['xxholly32'], 27 | // id: location.pathname, // 无法配置默认用 location.pathname 28 | distractionFreeMode: false, // Facebook-like distraction free mode 29 | }, 30 | }, 31 | ], 32 | ], 33 | }; 34 | ``` 35 | 36 | 如果没有 github 应用可以去注册一个， [传送门](https://github.com/settings/applications/new) 37 | 38 | ### gitalkConfig 39 | 40 | [数据来源于 gitalk](https://github.com/gitalk/gitalk#options) 41 | 42 | - **clientID** `String` 43 | 44 | **Required**. GitHub Application Client ID. 45 | 46 | - **clientSecret** `String` 47 | 48 | **Required**. GitHub Application Client Secret. 49 | 50 | - **repo** `String` 51 | 52 | **Required**. GitHub repository. 53 | 54 | - **owner** `String` 55 | 56 | **Required**. GitHub repository owner. Can be personal user or organization. 57 | 58 | - **admin** `Array` 59 | 60 | **Required**. GitHub repository owner and collaborators. (Users who having write access to this repository) 61 | 62 | - **id** `String` 63 | 64 | Default: `location.href`. 65 | 66 | The unique id of the page. Length must less than 50. 67 | 68 | - **number** `Number` 69 | 70 | Default: `-1`. 71 | 72 | The issue ID of the page, if the `number` attribute is not defined, issue will be located using `id`. 73 | 74 | - **labels** `Array` 75 | 76 | Default: `['Gitalk']`. 77 | 78 | GitHub issue labels. 79 | 80 | - **title** `String` 81 | 82 | Default: `document.title`. 83 | 84 | GitHub issue title. 85 | 86 | - **body** `String` 87 | 88 | Default: `location.href + header.meta[description]`. 89 | 90 | GitHub issue body. 91 | 92 | - **language** `String` 93 | 94 | Default: `navigator.language || navigator.userLanguage`. 95 | 96 | Localization language key, `en`, `zh-CN` and `zh-TW` are currently available. 97 | 98 | - **perPage** `Number` 99 | 100 | Default: `10`. 101 | 102 | Pagination size, with maximum 100. 103 | 104 | - **distractionFreeMode** `Boolean` 105 | 106 | Default: false. 107 | 108 | Facebook-like distraction free mode. 109 | 110 | - **pagerDirection** `String` 111 | 112 | Default: 'last' 113 | 114 | Comment sorting direction, available values are `last` and `first`. 115 | 116 | - **createIssueManually** `Boolean` 117 | 118 | Default: `false`. 119 | 120 | 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`. 121 | 122 | - **proxy** `String` 123 | 124 | Default: `https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token`. 125 | 126 | GitHub oauth request reverse proxy for CORS. [Why need this?](https://github.com/isaacs/github/issues/330) 127 | 128 | - **flipMoveOptions** `Object` 129 | 130 | Default: 131 | 132 | ```js 133 | { 134 | staggerDelayBy: 150, 135 | appearAnimation: 'accordionVertical', 136 | enterAnimation: 'accordionVertical', 137 | leaveAnimation: 'accordionVertical', 138 | } 139 | ``` 140 | 141 | Comment list animation. [Reference](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md) 142 | 143 | - **enableHotKey** `Boolean` 144 | 145 | Default: `true`. 146 | 147 | Enable hot key (cmd|ctrl + enter) submit comment. 148 | 149 | ## Contributors 150 | 151 | Contribution Welcome! 152 | 153 | ## License 154 | 155 | [MIT](https://github.com/vuejs/vuepress/blob/master/LICENSE) 156 | --------------------------------------------------------------------------------