let converter = new showdown.Converter();
$.getJSON("blog/posts.json", function (json) {
    let list = $('#blog-list');
    for (let i = json.length - 1; i >= 0; i--) {
        var obj = json[i];
        let id = obj["id"];

        let p = "";
        p += '<a class="blog-anchor" id="blog-' + id + '"></a>';
        p += '<div class="card bg-light blog-entry rounded-0">';
        p += '<div class="card-body">';
        p += '<a class="blog-button" id="blog-button-' + id + '"><h2 class="card-title">' + obj["name"] + '</h2></a>';
        p += '<span class="text-muted project-status">' + obj["date"] + "</span>";
        p += '<div class="card-text" id="blog-post-' + id + '"></div>';
        p += '</div></div>';
        list.append(p);

        $("#blog-button-" + id).on('click', function () {
            var post = $("#blog-post-" + id);
            if (post.html() !== "") {
                post.html("");
                history.pushState(null, null, "#blog");
            } else {
                openBlogPost(id);
                history.pushState(null, null, "#blog-" + id);
            }
        });
    }

    if (window.location.hash.startsWith("#blog-")) {
        var anchor = $(window.location.hash);
        if (anchor.length) {
            openBlogPost(window.location.hash.substring(6));
            $('html, body').animate({
                scrollTop: anchor.offset().top
            }, 0)
        }
    }
});

function openBlogPost(id) {
    $.get("blog/" + id + ".md", function (markdown) {
        let html = converter.makeHtml(markdown);
        $("#blog-post-" + id).html(html);
    });
}