Comments: A new comments system for my static Jekyll site

[aristath]

Comments for A new comments system for my static Jekyll site

[aristath]

This is a demo comment posted on the issue on GitHub.

[muntaza]

Thanks

[sarathlal-old]

Ohh..! Thanks...

[juandpineiro]

Testing your comment section. Nicely done!

[JunkyByte]

Thank you for this!

[jackkeller]

Very cool!

[vijaypolimeru]

Looks simple and elegant

[Hatchin]

Very cool!

Could I reply?

[aristath]

Hmmm it appears I'm not formatting the comments on my site... Should be relatively easy to fix though, I'll investigate ways to do that soon.

[bitsgalore]

Thanks for posting this. After coming across various similar solutions which all failed, this actually worked for my blog (with some minor modifications)!

[jackkeller]

Thanks for posting this. After coming across various similar solutions which all failed, this actually worked for my blog (with some minor modifications)!

I’d love to hear about the modifications!

[aristath]

Minor update: the latest commit on this repo adds markdown parsing for comments. :)

---

Update: Switched to showdown.js in this updated commit.

[bitsgalore]

@aristath thanks for the update, I had noticed Markdown wasn't rendering, but with these changes it now works perfectly!

[bitsgalore]

@jackkeller only some really minor things, e.g. in the blog post the issue IDs are hardcoded, so I changed that into liquid variables. But looking at @aristath's code I now see he also use liquid variables, so that's not really a modification after all. Anyway, if you want to have a look my site is here, and this is the source repo.

[4phycs]

Thanks a lot guys: your idea is very good!, After some workaround (I am new to both html and github) I was able to add comments to one of my posts. However, my own avatar is huge, is there a way to set a standard size, like the one of this Issues ? ( this is my test post )

[ymote]

great idea!

[dfava]

Neat!

[Bnaik]

cool!

[ElectricRCAircraftGuy]

Testing this. Italics Bold

// Comment
int x = 7;
x++;

And my conclusion? Comments here work much better! https://jekyllcodex.org/blog/gdpr-compliant-comment/

[sinasadeghi83]

From old to new?! bad sort. but good idea! thank you!

[aramisentreri]

Also testing this. Thanks for the tutorial btw! This is a neat idea :)

[jhvanderschee]

Exposing your cilent secret, is that a good idea?

?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET

[horizzn]

Exposing your cilent secret, is that a good idea?

?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET

According to Github Developer docs it isn't - https://developer.github.com/v3/guides/basics-of-authentication/

"The Client Secret should not be shared! That includes checking the string into your repository."

[jhvanderschee]

After 60 reloads the page started returning this:

Request URL: https://api.github.com/repos/aristath/aristath.github.com/issues/5/comments
Request Method: GET
Status Code: 403 rate limit exceeded

The original code (https://jekyllcodex.org/blog/gdpr-compliant-comment/) took care of this by doing two things:

• agressive caching through localstorage
• showing an alternative at 'rate limit exceeded'

You can find the rate limit here: https://developer.github.com/v3/#rate-limiting

[beProsto]

neat i'm looking for a way of adding comments and this looks nice

[qfang6]

This is a demo comment posted on the issue on GitHub.

I want to see how replying comments rendering on the site. Thanks for this.

[zh]

Interesting system. The issue on github pages however become pretty unreadable... Long scroll down until reach the comment box... Still nice, maybe will try it.

[joseph-vidal-rosset]

Too bad that Mathjax is not supported...

[crguezl]

Love the power and simplicity of it! 👏

[shiraeeshi]

testing... for some reason showdown messes up three dots. what about unicode symbols? йцукенг

[devchait]

Great Work !!. I am looking for something similar. Don't know if its possible by hiding the secrets

[bensinclair]

DUDE! This is an awesome idea! Thanks a lot!

[ejdrian313]

wow

[shiraeeshi]

Can somebody fix styles in comments? A comment is supposed to appear on the right side of an avatar, and it does when the text is short, but otherwise it jumps under the avatar. I want to set avatar's width and make a comment take the rest of the available width. Here is a fiddle: https://jsfiddle.net/otmjrks6/

[shiraeeshi]

To fix the problem described in the previous post, add "flex: 1" to "#gh-comments-list li .comment-content". See this question on stackoverflow.

[mgallouin]

nice

[ghost]

Testing your comments workaround...nice solution, easy to use.

[ElectricRCAircraftGuy]

FYI all: I've discovered there's a 3rd-party GitHub plugin called Utterances which automates this ability to use GitHub issues as a commenting system for your Jekyll-based GitHub pages website. It works really well. I describe it briefly in my Stack Overflow answer here.

[NotGodOkay]

Does this work for non github users?

[beProsto]

Does this work for non github users?

I mean you have to be gh user to comment so I suppose no.

[NotGodOkay]

I mean you have to be gh user to comment so I suppose no.

:( Well can I have something else for my website?

[adelenelai]

thanks for sharing!

[PeterWhittaker]

@aristath Cool idea, well done. One editorial comment, from the second paragraph: insanely constly for the environment should probably be insanely costly for the environment.

[aristath]

Thanks @PeterWhittaker, fixed 👍

[bitsgalore]

I just found out that the current implementation only renders the first 30 comments; once you exceed that number the additional comments aren't displayed. I see that this post is also affected by this. After some searching I found this StackOverflow thread, which explains that this is due to how the Github API works. Based on this answer I simply added the per_page parameter to GH_API_URL in "comments.html" like this:

const GH_API_URL = 'https://api.github.com/repos/aristath/aristath.github.com/issues/5/comments?per_page=100';

This immediately fixed the problem for me.

[aristath]

Thank you! Fixed 👍

[shiraeeshi]

@aristath You can use the "since" parameter to implement paging, here is an example based on your solution.

[micheletriaca]

Cool

[vishnupsatish]

Nice comment system! Disqus isn't working for me and it's frustrating.

[kartikmodi]

Nice and Simple.