A static comment system for Jekyll using Github Issues API

5 minute read

I looked few times for such solution and found a pretty satisfying one and easy to install on a github page. All the comment will stay on your website and you will still have access to it since they are coming from comments in your repository via Issues.

All the information present here come from aristaht blog post. What I am describing here is only how I install it and modified few things to make it work how I wanted.

So to be clear all what I explain here is what I did to make it work. However they may exist better solution for this. You may now use comments to share your point of view :)

What you need to understand is that :

comments are coming from replies in an issue of your repository
a post is linked to an issue via a tag comments_id: 3 in your Jekyll Front matter. Here this is issue number 3 (#3)
you will have to modify or create few files
- you will have to have a _includes/comments.html (code below)
- insert the comments in your layout by creating _layouts/post.html (code below)
- create your scss if needed in _sass/_comments.scss
  - load it in your assets/main.scss by adding the line @import "comments"; (for more info)
Github Issue API will get the comments, information about the user, avatar and so on
showdown.js will render all of this by its own

_includes/comments.html

<script src="  https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script>
const GH_API_URL = 'https://api.github.com/repos/DGrv/dorian.gravier.github.io/issues/35/comments' //?client_id=&client_secret=';
// To use this follow instruction in https://aristath.github.io/blog/static-site-comments-using-github-issues-api
// the gh_api key where place in the settings.yml of this website : https://github.com/aristath/aristath.github.com/blob/f1b80c1202ed9edd3d5b8b9ba7cf15f347d4bfc6/_data/settings.yml

let request = new XMLHttpRequest();
request.open( 'GET', GH_API_URL, true );
request.onload = function() {
	if ( this.status >= 200 && this.status < 400 ) {
		let response = JSON.parse( this.response );

		for ( var i = 0; i < response.length; i++ ) {
			document.getElementById( 'gh-comments-list' ).appendChild( createCommentEl( response[ i ] ) );
		}

		if ( 0 === response.length ) {
			document.getElementById( 'no-comments-found' ).style.display = 'block';
		}
	} else {
		console.error( this );
	}
};

function createCommentEl( response ) {
	let user = document.createElement( 'a' );
	user.setAttribute( 'href', response.user.url );
	user.classList.add( 'user' );

	let userAvatar = document.createElement( 'img' );
	userAvatar.classList.add( 'avatar' );
	userAvatar.setAttribute( 'src', response.user.avatar_url );

	user.appendChild( userAvatar );

	let commentLink = document.createElement( 'a' );
	commentLink.setAttribute( 'href', response.html_url );
	commentLink.classList.add( 'comment-url' );
	commentLink.innerHTML = '#' + response.id + ' - ' + response.created_at;

	let commentContents = document.createElement( 'div' );
	commentContents.classList.add( 'comment-content' );
	commentContents.innerHTML = response.body;

	let comment = document.createElement( 'li' );
	comment.setAttribute( 'data-created', response.created_at );
	comment.setAttribute( 'data-author-avatar', response.user.avatar_url );
	comment.setAttribute( 'data-user-url', response.user.url );

	comment.appendChild( user );
	comment.appendChild( commentContents );
	comment.appendChild( commentLink );

	return comment;
}
request.send();
</script>


<hr>

<div class="github-comments">
	<br>
	<h2>Comments</h2>
	<ul id="gh-comments-list"></ul>
	<p id="leave-a-comment">Join the discussion for this article on <a href="https://github.com/DGrv/dorian.gravier.github.io/issues/35">this ticket</a>. Comments appear on this page instantly.
	<br>Thanks to <a href="https://aristath.github.io/blog/static-site-comments-using-github-issues-api">aristaht</a> for making this static comment system possible.</p>
</div>

_layouts/post.html

---
layout: default
---

<section class="intro">
	<div class="wrap">
		<h1>A static comment system for Jekyll using Github Issues API</h1>
		<p>02 April 2020</p>
	</div>
</section>

<section class="single">
	<div class="wrap">
		I looked few times for such solution and found a pretty satisfying one and easy to install on a github page.
All the comment will stay on your website and you will still have access to it since they are coming from comments in your repository via Issues.

All the information present here come from [aristaht blog post](https://aristath.github.io/blog/static-site-comments-using-github-issues-api). What I am describing here is only how I install it and modified few things to make it work how I wanted.

So to be clear all what I explain here is what I did to make it work. However they may exist better solution for this. You may now use comments to share your point of view :)

What you need to understand is that :
- comments are coming from replies in an issue of your repository
- a post is linked to an issue via a tag `comments_id: 3` in your [Jekyll Front matter](https://jekyllrb.com/docs/front-matter/). Here this is issue number 3 (#3)
- you will have to modify or create few files
  - you will have to have a `_includes/comments.html` (code below)
  - insert the comments in your layout by creating `_layouts/post.html`  (code below)
  - create your scss if needed in `_sass/_comments.scss` 
	- load it in your `assets/main.scss` by adding the line `@import "comments";` ([for more info](https://jekyllrb.com/docs/step-by-step/07-assets/))
- [Github Issue API](https://developer.github.com/v3/issues/) will get the comments, information about the user, avatar and so on
- [showdown.js](https://github.com/showdownjs/showdown) will render all of this by its own


# _includes/comments.html

Comments

Join the discussion for this article on this ticket. Comments appear on this page instantly.
Thanks to aristaht for making this static comment system possible.


# _layouts/post.html

layout: default —

{{ page.content }} {% if page.comments_id %} {% include comments.html %} {% endif %}


# _sass/comments.scss

#gh-comments-list { list-style: none; list-style-type: none;

li {
    margin: 0;
    padding: 1.5em 0;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #aaa;

    >a.user {
        width: 200px;
        /* height: 200px; */
        overflow: hidden;
        padding: 3px;

        img {
            border-radius: 50%;
            /* border: 1px solid #fff; */
            /* box-shadow: 0 0 3px #aaa; */
        }
    }

    >a.comment-url {
        width: 100%;
        text-align: right;
        font-size: .6em;
        opacity: .5;

        &:hover {
            opacity: 1;
        }
    }

    .comment-content {
        padding: 0 1.5em;
    }
} }

#leave-a-comment { background: #504945; /* color: #fff; */ border: 1px solid #fff; padding: 1rem;

/* a { */
    /* color: #fff; */
    /* border-bottom-color: #fff; */
    /* outline-color: #fff; */
/* } */ }

#no-comments-found { font-size: .8rem; display: none; }

END OF THE POST

END OF THE POST

END OF THE POST

END OF THE POST

		 <!-- To add the comments. Found on https://aristath.github.io/blog/static-site-comments-using-github-issues-api
			and https://github.com/aristath/aristath.github.com/blob/f1b80c1202ed9edd3d5b8b9ba7cf15f347d4bfc6/_layouts/post.html#L22-L24
			Need a comments.html in the _includes folder, an issue, take care of the id and a tag in the post (comment_id)-->
		
			<div class="page__comments">
  
</div>

	</div>
</section>

_sass/comments.scss

#gh-comments-list {
    list-style: none;
    list-style-type: none;

    li {
        margin: 0;
        padding: 1.5em 0;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #aaa;

        >a.user {
            width: 200px;
            /* height: 200px; */
            overflow: hidden;
            padding: 3px;

            img {
                border-radius: 50%;
                /* border: 1px solid #fff; */
                /* box-shadow: 0 0 3px #aaa; */
            }
        }

        >a.comment-url {
            width: 100%;
            text-align: right;
            font-size: .6em;
            opacity: .5;

            &:hover {
                opacity: 1;
            }
        }

        .comment-content {
            padding: 0 1.5em;
        }
    }
}

#leave-a-comment {
    background: #504945;
    /* color: #fff; */
	border: 1px solid #fff;
    padding: 1rem;

    /* a { */
        /* color: #fff; */
        /* border-bottom-color: #fff; */
        /* outline-color: #fff; */
    /* } */
}

#no-comments-found {
    font-size: .8rem;
    display: none;
}

END OF THE POST

Share on

Twitter Facebook LinkedIn

Dorian Gravier

A static comment system for Jekyll using Github Issues API

_includes/comments.html

_layouts/post.html

Comments

{{ page.title }}

_sass/comments.scss

Share on

You May Also Enjoy

Create_UML_diagram_with_d2

Read_json_in_bash_and_extract_in_csv

View read and export Access mdb on Linux or WSL

Rename_in_bash_with_perl_or_sed_with_for_loop