Web/scripts/blog.js
Ell 5de5fba62a
All checks were successful
Web/pipeline/head This commit looks good
added a featured category to the blog
2021-03-31 02:48:13 +02:00

65 lines
No EOL
2.3 KiB
JavaScript

$("#blog-archive-button").on("click", function () {
let archive = $('#blog-archive');
archive.toggle();
$(this).html((archive.is(":visible") ? "Hide" : "Show") + " archived posts");
});
$.ajax({
dataType: "json",
url: "blog/src/posts.json",
cache: false,
success: function (json) {
populateBlog(json, getCookie("category") || "Featured");
forceToAnchor();
}
});
function populateBlog(json, currCat) {
let archive = $('#blog-archive');
let list = $('#blog-list');
let cats = $('#blog-cats');
archive.html("");
list.html("");
cats.html("");
// force all and featured categories to be first
addCatButton(json, cats, "All", currCat);
addCatButton(json, cats, "Featured", currCat);
for (let i = json.length - 1; i >= 0; i--) {
let post = json[i];
for (let cat of post.cat)
addCatButton(json, cats, cat, currCat);
if (currCat === "All" || post.cat.includes(currCat)) {
let p = /*html*/ `
<div class="card bg-light blog-entry rounded-0">
<div class="card-body">
<h4 class="card-title blog-title"><a class="blog-button" href="./blog/${post.id}">${post.name}</a></h4>
<div class="card-text blog-summary">${post.summary}</div>
<span class="text-muted project-status">${post.date}</span>
<span class="text-muted blog-cat">${post.cat.join(", ")}</span>
</div>
</div>
`;
if (post.archived) {
archive.append(p);
} else {
list.append(p);
}
}
}
if (!archive.html())
archive.html(`<em>There are no archived ${currCat} posts.</em>`);
}
function addCatButton(json, cats, cat, currCat) {
let catAnchor = `blog-cat-${cat.toLowerCase().replace(" ", "_")}`;
if (!$(`#${catAnchor}`).length) {
cats.append( /*html*/ `<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor} ${cat === currCat ? "disabled" : ""}>${cat}</button>`);
$(`#${catAnchor}`).on('click', function () {
populateBlog(json, cat);
setCookie("category", cat, 365);
});
}
}