CodeReviewChecklist OpenSource SideProject

Embedding GitHub Issues on Your Site

I've recently launched a new open source project to help people conduct code reviews (www.CodeReviewChecklist.com) and have a dedicated page stating how people can get involved in helping make it better (https://www.codereviewchecklist.com/opensource/).

Initially things were pretty sparse on that page with just a heading and paragraph stating the site was open source with a link to the Git repository.

So I wondered if GitHub had some kind of widget that would let people embed GitHub issues onto a webpage. Alas I couldn't find such a widget (perhaps I wasn't looking hard enough). What I did find and extend however, was a code sample that calls the GitHub api and displays issues from your chose repository on a page all from client side code.

Here is the code snippet:

<div id="github-issues"></div>


<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    var urlToGetAllOpenBugs = "https://api.github.com/repos/leeenglestone/codereviewchecklist/issues?state=open";


    $(document).ready(function () {
        $.getJSON(urlToGetAllOpenBugs, function (allIssues) {
            $("div#github-issues").append("There are " + allIssues.length + " outstanding issues:</br>");
            $.each(allIssues, function (i, issue) {


                // Get assignee (if applicable)
                var assigneeName = "Unassigned";
                if (issue.assignee) {
                    assigneeName = issue.assignee.login;
                }


                // Calculate number of days ago created
                var today = new Date();
                var timeDifference = today - Date.parse(issue.created_at);
                var daysAgo = (timeDifference / (1000 * 3600 * 24)).toFixed();


                $("div#github-issues")
                    .append("<div style=\"margin-bottom:20px;\">")
                    .append("<strong><a href=\"" + issue.html_url + "\">" + issue.title + "</a></strong></br>")
                    .append("#" + issue.number + " opened " + daysAgo + " days ago by " + issue.user.login + "</br>")
                    .append("Assigned to: " + assigneeName)
                    .append("</div>");
            });
        });
    });
</script>

Which can obviously be seen on GitHub.

And here is the resulting page (and I've just noticed the 'suggests' spelling mistake).