:mailbox: A Vue-powered Issue-based Comment Plugin
Home Page: https://vssue.js.org
License: MIT License
A Vue-powered Issue-based comment plugin
📜 Feel free to open issues following the issue templates if you have any problems or ideas.
❤️ Check the Developer Guide. Contributions welcome!
💪 Thanks to all the developers who contribute to Vssue!
🖖 Thanks to @alolalo for inspiration of Logo design!
🙏 Thanks to all our sponsors and backers!
markdown 怎么添加 标签
vssue/packages/vssue/src/components/VssueComment.vue
Lines 306 to 308 in 3999dd4
I use BitBucket with VSSUE.
I noticed something strange.
My settings (options):
owner: boss
repo: vssueboss
clientID: xxx
The only property I use is title, unique title ofcourse.
The BitBucket repo for VSSUE comments owned by admin/owner is public ofcourse.
<script src="https://unpkg.com/vue/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vssue/dist/vssue.bitbucket.min.js"></script>
OK, so I have many different pages (>200) with VSSUE.
If I (boss), as admin/owner logs in to make the first comment, then comments load (or "no comments yet, be the first to comment"), and I can write/post comment successfully.
If someone else (dummy), makes the first comment, then "failed to load comments", and dummy cannot post comment.
But dummy can post a second comment, AFTER boss, admin/owner, has posted the first comment. Then dummy is successful.
How to explain this behaviour and how to fix?
在Vssue0.7.1之后，在我的vuepress主题使用，在文章页刷新或者第一次就访问的是文章页，控制台会报错，从而导致页面功能完全错乱。
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
这似乎是一个ssr常见的错误，我在开发vuepress主题时经常遇到，我的经验是让报错的地方尽可能被预渲染到html中，在nuxt.js中也常有出现 issue，我测试到在0.7.1的版本不报错，之后的版本会出现这个问题。
这里有一个例子，部署在github page的是0.7.1版本，部署在gitee page下的是0.9.1版本，直接点击链接，或者点击进去后刷新一下，gitee的会在控制台报错，页面功能也会出现各种错乱，而github的则不会。
我的主题Vssue配置，正常使用的版本号"@vssue/api-github-v3": "0.7.3", "vssue": "0.7.1"
我在我的网站中测试过
我并不清楚实际引起这个错误的原因：https://gleehub.com/?error=redirect_uri_mismatch&error_description=The redirect_uri MUST match the registered callback URL for this application.&error_uri=https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch&state=Vssue
我猜测这是空格或者中文或者其它字符引起的
这是我使用的版本
- "@vssue/api-github-v3": "^1.0.3"
- "@vssue/vuepress-plugin-vssue": "^1.0.3"
vuepress 中的使用：
<ClientOnly>
<Vssue :title="$page.title" />
</ClientOnly>GitLab provides an Implicit Grant which doesn't require to expose any clientSecret.
Netlifycms is using it for instance:
https://www.netlifycms.org/docs/authentication-backends/#gitlab-backend
网页会突然跳到github登录页，后退又跳击登录，这一点不是很友好，能不能点击才跳转？
what should I do for this
Access to XMLHttpRequest at 'https://api.github.com/repos/chenweigao/vueblog/issues/14/comments?page=1&per_page=10×tamp=1574152218174' from origin 'https://www.weigao.cc' has been blocked by CORS policy: Request header field accept is not allowed by Access-Control-Allow-Headers in preflight response.
CORS problem?
this is my site: https://weigao.cc
thank you very much~!
完全按照文档配置的，和nuxt一直整合不到一起 @meteorlxy
能否像 gitalk 那样，当我把 autoCreateIssue 设置为 false 的时候，出现的不是加载错误，而是创建 issue 的按钮
这样，是由于，不希望它自动创建一些重复/奇怪的issue，但又不想每次都到 github 中手动创建.
（目前只是在本地测试使用，如果非本地的情况下有了的话就算了...
因为考虑到速度问题打算把博客托管到Coding上，但是貌似vssue不支持？请问有什么好的解决方法或者建议吗？
gitee api near github api
https://gitee.com/api/v5/oauth_doc
https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoStargazers?ex=no
request login
there maybe has other little diff
Hello,
I think it will be a great feature if we can use Vssue in our entreprise Platforms.
Look at your GitHub API for example, in it's constructor, the API endpoint is hardcoded (https://github.com/meteorlxy/vssue/blob/master/packages/%40vssue/api-github-v3/src/index.ts#L39).
A oiding this and just using public GitHub API as default one will let's some users as me to integrate Vssue with other GitHub server deployment like it's the case for GitHub Enterprise.
If you want, I can make a pull request for these feature.
这个切换页面的，有点丑
不要打我
以下是config文件的评论配置
还有OAuth App
以及实际在博客上显示的情况，点击登录是无反应的
For GitLab: Allow to see comments without logging in. So much better user experience that way.
我是使用gitee作为测试的，在使用过程中出现两个疑问：
Gitea is an alternative to GitLab that's lightweight enough to be run on something like a Raspberry Pi. The API should have everything required to add support for it to Vssue.
This would allow anyone to self-host their comments with way lower resource requirements, or use a non-profit hosting service like codeberg.org.
hey
不同页面好像只有一个issue，有没有类似gitalk的id设置为不同的项
custom styles without building vssue.
use css variable to make it easier for user to change style.
Hello,
following this, in lunch I Started add pt-BR support.
basicaly it´s only this?
master...tgmti:ptBRSupport
If it´s ok, next i´ll start the docs change.
what you think is better? push all on finish, or create two sepparate PR´s?
Is there an option to hide "Powered by GitHub & Vssue" ? This would be a useful addon.
Thanks,
[`将博客放在了gitee上，参考了这个giteement。但是自己在修改的时候，遇到很多问题。请问作者以前有做过吗
Why does Vssue need write permissions to all my repos when I log into the demo?
Can that be turned off? Is it needed?
使用gitlab，配置redirect url比如http://localhost:4000
但是我的博客页面是http://localhost:4000/xxx/yy这样进入页面会自动跳转到
http://xxxc&redirect_uri=http://localhost:4000/xx/yy&response_type=token&state=Vssue,这个路径会直接抛出错误The redirect URI included is not valid.
因为redirect url不固定，所以我应该怎么做
post 页面指定 vssue-id => 不自动重复创建
post 页面使用 vssue-title => 重复创建
post 页面未指定 vssue 选项 => 重复创建
版本
"dependencies": {
"vuepress": "^1.0.0-alpha.44",
"vuepress-theme-meteorlxy": "^1.0.0-alpha.31"
}
可能还是这个问题还是版本太旧？ #12
Sorry for newbie question.
I have HEXO blog... https://hexo.io/
I installed npm i vssue --save in my hexo node_modules.
I installed npm install @vssue/api-bitbucket-v2 in my hexo node_modules.
In my article.ejs I added:
<template>
<Vssue
:title="title"
:options="options"
/>
</template>
<script>
import { VssueComponent } from 'vssue'
import BitbucketV2 from '@vssue/api-bitbucket-v2'
import 'vssue/dist/vssue.css'
export default {
name: 'VssueDemo',
components: {
'Vssue': VssueComponent,
},
data () {
return {
title: '<%= config.vssue.title %>',
options: {
api: BitbucketV2,
owner: '<%= config.vssue.owner %>',
repo: '<%= config.vssue.repo %>',
clientId: '<%= config.vssue.clientId %>',
clientSecret: '<%= config.vssue.clientSecret %>',
},
}
},
}
</script>
But not working. How to solve?
I do not see vssue comment box, nothing, all empty.
A clear and concise description of what the bug is.
when issue not create, user input a message and submit
message will get clear, and no any error notice tell user,
message can't submit because issue not create and he not a one of admins
If applicable, add screenshots to help explain your problem.
A clear and concise description of what you expected to happen.
Add any other context about the problem here.
1. 在我的Jekyll博客网站里，输入一个内容并发送，会发送两个。修改.2019.9.30
1. 在我的博客里打开一篇文章修改.2019.9.30
2. 看页尾，输入评论并发表
3. 发送两个
点击登录按钮没有跳转授权页面，直接跳回首页，没有任何其他效果。
控制台出现以下提示，尝试清除过 cookie，但是无效。
The "in-browser" Getting Started section here: https://vssue.js.org/guide/getting-started.html#in-browser
I've chosen:
<script> render function for vue runtime buildI would expect the client would have to log into github only when they want to, not automatically.
I have left this running at http://level3.rest
I use VSSUE and Gitlab.
<script src="https://unpkg.com/vue/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vssue/dist/vssue.gitlab.min.js"></script>
I copy/pasted each URL of my site in Gitlab URL redirect.
When I visit any page on my site, immediately the Gitlab login window shows upon URL load.
How to make Gitlab login screen appear only when user clicks the "post a comment box"?
When a user "Logs in to Github" to set a comment, they are presented with a scary access request that wants all of their data, including access to all their organizations. This is unnecessary and excessive.
Is there a subset of information that can be asked for? My readers are complaining that they don't want to give me so much access just to leave a comment.
Here is the list of github scopes: https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/#available-scopes
点击登录后，页面跳转，出现提示：登录存在错误，无效的登录回调地址
按照文档使用方法安装，评论无法加载，控制台报错如下：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Vssue> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <VE179ddd6> at docs/README.md
<Content>
<Home> at node_modules/@vuepress/theme-default/components/Home.vue
<Layout> at node_modules/@vuepress/theme-default/layouts/Layout.vue
<GlobalLayout> at node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue
<Root>
是否是我使用的方法错误？以下是我的安装过程与环境：
// 安装依赖
$ yarn add -D vssue
$ yarn add -D @vssue/vuepress-plugin-vssue
$ yarn add -D @vssue/api-github-v3
// package.json
"devDependencies": {
"@vssue/api-github-v3": "^0.10.0",
"@vssue/vuepress-plugin-vssue": "^0.10.0",
"vssue": "^0.10.0",
"vuepress": "^1.0.0-alpha.48"
}
// config.js
plugins: [
{
"@vssue/vuepress-plugin-vssue": {
platform: 'github',
owner: 'cnguu',
repo: 'blog-vssue',
clientId: 'sorry',
lientSecret: 'sorry',
}
}
]
// README.md
<Vssue title="Vssue Demo" />
sort and direction params are missed in https://developer.github.com/v3/issues/comments/#list-comments-on-an-issue我的是静态博客，之前搭建的时候也有这个问题，后来配置了一下，就好了，但是最近的又出现了这个问题。不知道为什么，大概是半个月前出现这个问题的，可以看到半个月之前的没有这个问题。
以下是我的vssue配置源码
<div id="vssue"></div>
<!-- 或： Vue 完整版 (runtime + compiler) -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!-- Vssue Github 版 -->
<script src="https://unpkg.com/vssue/dist/vssue.github.min.js"></script>
<!-- 或：对于 Vue 完整版，可以使用模板（template） -->
<script>
new Vue({
el: '#vssue',
data: {
title: function(){ return document.getElementsByClassName("title")[0].innerText},
labels: [location.pathname],
options: {
owner: 'suveng',
repo: 'blog',
clientId: '***',
clientSecret: '***',
},
},
template: `<vssue :title="title" :options="options"></vssue>`,
})
</script>
Getting "Failed to load comments" in many pages... Not sure what's wrong.
https://narenkn.com/works/verif/scemi.html
https://narenkn.com/works/verif/fsdbStimulus.html
Earlier this page was having the same trouble, but now it is letting me add comments
https://narenkn.com/works/verif/svtypes.html
Currently, if we are using GitHub, we have to hard-code clientSecret in our js/html files, which has potential risks.
There are already some discussions about that:
In brief, hard-coding clientSecret will cause some security concerns.
Yes but no.
Attackers may copy your clientId and clientSecret, but the platform will check the redirect_uri as well.
That means that, attackers can't mislead users to their fake sites with your clientId (unless something like DNS hijacking, which might be another story), so they can't get user's code on their sites with your clientSecret.
In addition, it's more convenient for "attackers" to create a new OAuth App than copy yours, and the target of the "attackers" is the platform but not your website.
From another perspective, your website is "static" and have nothing worth to be attacked...
So you don't need to worry about that.
Github: OAuth Authorizations API - for example, if attackers get your client secret, they can revoke a grant of an user, so the user have to authorize your app again when he try to login on your website next time. It's possible if someone is aiming at your website, but it might not be so critical.
In brief, it does have security concerns, but not critical. This is why gitment and gitalk didn't fix that.
But it's still an issue.
Currently:
clientSecret is only used for getting access_tokenaccess_token does not support CORS, so we have to use proxy for nowTo completely solve this issue, you can use a private proxy to get access_token, and store your clientSecret in the proxy, rather than in your client code.
An existing project is https://github.com/prose/gatekeeper, which can be deployed on Heroku/Azure by yourself easily. But it's not compatible with our current proxy option
So Vssue is planning to:
allow notice message from api
for example, if api request fail, and we can return message form api class to vssue, then vssue can notice user
async postComment({
accessToken,
issueId,
content,
}: {
accessToken: VssueAPI.AccessToken
issueId: string | number
content: string
}): Promise<VssueAPI.Comment>
{
const { data } = await this.$http.post(`repos/${this.owner}/${this.repo}/issues/${issueId}/comments`, {
body: content,
}, {
//...
})
.catch(e => {
if (e && e.response && e.response.data)
{
setTimeout(() => {
window.alert(e.response.data.message);
}, 100);
}
return Promise.reject(e)
})Describe what you want to happen, and the solution you'd like.
async postComment({
accessToken,
issueId,
content,
}: {
accessToken: VssueAPI.AccessToken
issueId: string | number
content: string
}): Promise<VssueAPI.Comment>
{
const { data } = await this.$http.post(`repos/${this.owner}/${this.repo}/issues/${issueId}/comments`, {
body: content,
}, {
//...
})
.catch(e => {
if (e && e.response && e.response.data)
{
// by api choose, if didn't set vssueNotice , then like current vssue do
e.vssueNotice = e.response.data.message
}
return Promise.reject(e)
})then
if vssue see api is fail and has vssueNotice, will show this message to user
Any alternative solutions or features you've considered.
Add any other context or screenshots about the feature request here.
Hi peoples!
My name is Guus, and I created a fancy logo for vssue! 🖖
I like to keep things simple; the logo is created out of one shape, five colors, and fully vector for any post-processing in code.
Feel free to comment! It's a work in progress 👍🏻
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.