utterance / utterances Goto Github PK
View Code? Open in Web Editor NEW:crystal_ball: A lightweight comments widget built on GitHub issues
Home Page: https://utteranc.es
License: MIT License
:crystal_ball: A lightweight comments widget built on GitHub issues
Home Page: https://utteranc.es
License: MIT License
I really love the GitHub-powered feedback integration on docs.microsoft.com which allows multiple issues (each with their own comments) to be attached to a single content page, rather than just individual comments on a single issue.
This sort of organization works particularly well for documentation sites since issues can be addressed and then removed from the default view and allowing those responsible for the documentation to ensure they've responded to each request! It's even more valuable when the content itself lives on GitHub since issues that resolve the problems can be linked directly to the commits which resolve them!
It seems that Utterances is the open-source version of the Microsoft docs commenting implementation, but currently lacks the additional dimension (unless I'm missing something).
I'm curious if this is on the roadmap for utterances!
I've been testing this tool for a while. It looks great and it's incredible simple, but I have some ideas that could be interesting to have as a blogger.
First, would it be possible to hide the 'new comment' section using, for example, a parameter? I would like to show only the current comments, but I you want to write a new comment, you have to go to the GitHub issue page.
In this case, it would be great if using another parameter you could show a button to open the Github issue page. I mean, a meaningful button that links to the same page that opens the current number of comments link. It could be valid too if it were somethig like [1] at the begining and/or the end of the comments section.
Lastly, I would like to modify slightly the style of the iframe
content. Maybe an optional paramater (yes, one more) to send the changes in the style of the generated page, like font size, background color, maximum width, etc.
These are only some ideas that I have been thinking about while using this tool. For me is fully functional right now - Nice work! -, but I would love to have some of these features at some point.
Thanks.
Utterances currently forces the iframe that is being injected to have a white
background color, which makes it possibly not-so-pretty on pages that do not share the plain white background:
It would be relatively trivial to make body
have background-color: transparent
and .comment
have background-color: white
(as seen here), but I would assume this is an unwanted breaking change for others.
Are there established ways of doing this yet? In case not, would you be open to adding some customization options to the script? Maybe something like adding data-background-color
to the script tag itself?
For better versioning and code delivering maybe you will use service https://www.jsdelivr.com/
for client.js
?
Service is ree for all ;)
First, Thank you for this amazing work.
Environment
I just added utterances into my blog and it works very well,
except on mobile browsers.
When I click on "Sign in to comment", a webview opened up and it seems not does redirect me to callback url properly.
appearance:none
Hi @jdanyow
I just changed may blog comments from Disqus to Utterances and got several problems:
Cloudeflare while trying to logon:
https://twitter.com/davepermen/status/1064450165057167360
Is this a new problem? Didn't get this errors last week while trying it out.
Did I forget something?
Here is my blog with the new Utterances comments:
https://asp.net-hacker.rocks/
EDIT:
The CORS error happens on this site as well:
https://www.swifttalking.com/writing-mocks-manually-in-swift/
Thanks,
Juergen
2 different pages have the same comments
there is only 1 issue rain-1/rain-1.github.io#3 and both pages display it. I guess it's because of the "-2" bit?
My site uses a dark theme, how can I style utterances to be dark?
Hi,
I'm using Utterances on my personal blog on it's all good. I decided to use on a second website (static).
I'm confused about this behavior. Both have the exact same code.
Do you see why something would prevent the loading on the root of my site?
Thanks!
As an example, on this page there are comments:
https://dennisdel.com/blog/
However, when we look at the comment, it should be associated with a different page:
https://dennisdel.com/blog/building-docs-for-nuget-packages-with-vsts-and-github-pages/
can i change default english language of github to my Mother tongue ?
Firefox is complaining about an operation being insecure, but I'm not sure what. Haven't had time to debug yet, but I'm using FF 55.0.2 (64-bit). I've attached a screenshot of the error output as well.
Happy to share the blog URL if that's helpful at all - it's entirely possible (read: likely) that I'm being a doofus. Really nice idea though, and nice execution - love the idea of GH issues as comments.
I got an error if I build the project. It happens in optimize
step:
yarn run optimize
[...]
$ inliner --skip-absolute-urls debug/utterances.html > dist/utterances.html
fs.js:584
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/tmp/utterances/node_modules/svgo/lib/svgo/../../.svgo.yml'
at Error (native)
at Object.fs.openSync (fs.js:584:18)
at Object.fs.readFileSync (fs.js:431:33)
at module.exports (/tmp/utterances/node_modules/svgo/lib/svgo/config.js:31:48)
at new module.exports (/tmp/utterances/node_modules/svgo/lib/svgo.js:21:19)
Please check svg/svgo#622 , maybe it's the solution.
PS: THANK you for opening the source code - you did a great job!
You're able to ensure the integrity of any scripts you load by making use of SRI:
<script src="https://utteranc.es/client.js"
repo="cryptolosophy/cryptolosophy.org"
issue-term="pathname"
integrity="sha384-DPph3TeQWMfa+DwFjWGnI1hGXuOXw4Kpg3Uk/m+qAlgnQJ0njBscbs8AT11PFwZB" crossorigin="anonymous"
async>
</script>
But if the script you're loading changes, then SRI breaks and browsers will refuse to load it completely. I could just host the script locally to ensure that it doesn't change but then I'd lose the benefits of CDN caching and also I don't really understand the intricacies of utterances to be sure that it'd work perfectly that way.
So what do you recommend?
Specifying issue-term="title"
gives both the title of the post and the whole blog, which for me is something like You're up and running! – Isaac Woods – 17 year-old student, building low-level stuff in Rust
, which is really long as an issue name. Could we maybe have a issue-term="posttitle"
or something to just use the title of the post?
First of all: Thanks for Utterances. Its exactly what I need for my blog. 👍
There is just one single line of code that's bugging me a little bit:
Line 2 in 7c518a0
It would be great if the width css rule of the timeline
class could be unset with an additional script tag parameter (or be set to 100%
by default).
With kind regards,
Philip Trauner
Email replies to issues currently show the comments to which the emailer replied without any styling. I would like to ask if it is possible to hide the comment history behind an expand link (...) like on Github and to render it like quoted text similar to Github, or to just completely hide the comment history in the Utterances comment.
Example reply:
https://github.com/PhilipVis/philipvis.github.io/issues/3#issuecomment-430946403
To see how this is currently rendered by Utterances, look at the comments section on page https://verummeum.com/blog/2018/10/14/portable-package-formats/.
<script src="https://utteranc.es/client.js" repo="ergo9ine/sfdb_tracker" issue-term="index" theme="github-dark" crossorigin="anonymous" async></script>
SyntaxError: An invalid or illegal string was specified utterances.10cca43d.js:1
Add page with links to integrations like react-utterances.
Hello, I have a question to ask. Your server is blocked in my area, how can I copy your program to my own server?
virtualize?
Add page with self-hosting instructions.
Current instructions:
#42 (comment)
I wonder if there could be a way to allow anonymous comments. This could allow someone to comment who doesn't have a GitHub account. Maybe it would trigger a GitHub bot to post the comment on their behalf.
Need to polyfill promise and fetch
2 different pages have the same comments
there is only 1 issue starifly/blog-comments#1 and both pages display it.
Even though utterances successfully authorized as GitHub App, it doesn't work on mobile Chrome (Android).
On the regular desktop browser, everything works as expected, the mobile version still shows "Sign in to comment".
When clicking the sign-in button, following screen is shown:
Environment:
Though I hid comments on the corresponding GitHub Issue page (because they are abusive), utterances still continues to show those comments on my blog post.
Since the comments are posted with utterances, I (owner) cannot just delete them (the ... button does not appear in the comments posted with third-party apps).
How can I remove them from the blog post? Thanks in advance!
Update: I contacted to GitHub and thankfully they deleted the comments that were a problem. Though I think it is better to hide comments on blog posts that are hidden in the corresponding issue pages (is it possible?).
Implement reactions
I use autogenerated anchors for every heading on my site for a table of contents. When clicking such an anchor link the URL changes to example.com#anchor-title
. When I now refresh the page (i.e hit F5), the comment section stays empty because utterances looks for an issue title with the correct #anchor-title
. If I now post a comment a new issue is created for the same page.
To fix this, I would propose to just ignore any anchors when doing URL matching, or at least providing an option to do so. What do you think?
Add the ability to preview the markdown entered into the comment box.
I recently add this on my site, and discovered that outer div's height style is not set automatically. So it remains 0px height, and I cannot see anything. If I manually change height to some value like 500px, then the content is showed.. Can't know why 😢
Hi!
I would like to own the data (comments) posted on my website by using the self-hosted Gitlab instance. So is it possible to use Gitlab issues instead of Github issues?
Thanks!
I'm using utterances on a couple of sites, but is it GDPR compliant? I wasn't able to find any signs.. and isn't it necessary to offer anonymous comments?
First i want to thank you, this is awesome and easy to implement.
I want to know if there is a way to reference the number of comments in a post to use it in another section of the page (say, in the list of posts titles).
Thank you
Please provide more info at https://github.com/apps/utterances, since this page is linked to as "Learn more about utterances" in the permissions flow. Users not familiar with utterances or the concept of blog comments hosted by github will need a better orientation to decide whether they want to grant permissions.
Thank you for considering
Hello I wanted to use this but when I went to send a comment it says it needs full access to edit my repos?
utterances by utterance wants to access your rain-1 account

Repositories: Public only
This application will be able to read and write all public repository data. This includes the following:
Enable pasting images via CTRL+V.
Make ⌘ + ENTER submit comment
function utteranc(index){
$(".blockquote-footer>cite:nth-child(1)").html(index); //dummy
$("#dolldiscussion")
.html(`<script src='https://utteranc.es/client.js' repo='ergo9ine/sfdb_tracker' issue-term='${index}' theme='github-dark' crossorigin='anonymous' async><\/script>`);
};
Error: "issue-term" or "issue-number" must be specified.
${index} is number. but, This is not the threads number.
Number unique to the document.
Would it be possible to provide a custom/additional message to the initial post created by the bot?
<script src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="[ENTER TERM HERE]"
issue-body="[CUSTOM MESSAGE HERE]"
async>
</script>
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.