Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

made blog category links a lot nicer
All checks were successful
Web/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Ell 2021-04-04 01:54:29 +02:00
parent 9561ef22e9
commit 23785fbb8e
3 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -164,6 +164,7 @@
<!-- Blog -->
<a class="anchor" id="blog"></a>
<div id="blog-cat-anchors"></div>
<div class="list-display rounded">
<h1>Blog</h1>
<p>

2
node/blog.js
View file

@ -42,7 +42,7 @@ fs.readFile(`${folder}index.html`, function (_, html) {
document.querySelector('meta[property="og:description"]').setAttribute("content", post.summary);
document.getElementById("nav-items").innerHTML = /*html*/ `
<a class="nav-item nav-link" href="../?cat=${post.cat[0]}#blog">Back to Main Page</a>
<a class="nav-item nav-link" href="../#blog-${post.cat[0].toLowerCase().replace(" ", "-")}">Back to Main Page</a>
${last ? /*html*/ `<a class="nav-item nav-link" href="./${last.id}">Previous ${post.cat[0]} Post</a>` : ""}
${next ? /*html*/ `<a class="nav-item nav-link" href="./${next.id}">Next ${post.cat[0]} Post</a>` : ""}
`;

29
scripts/blog.js
View file

@ -9,29 +9,32 @@ $.ajax({
url: "blog/src/posts.json",
cache: false,
success: function (json) {
let category = window.location.search.match(/cat=([^&]+)/);
populateBlog(json, category && decodeURI(category[1]) || "Featured");
let category = window.location.hash.match(/#blog-(.+)/);
populateBlog(json, category && decodeURI(category[1]) || "featured");
forceToAnchor();
}
});
function populateBlog(json, currCat) {
let anchors = $('#blog-cat-anchors');
let archive = $('#blog-archive');
let list = $('#blog-list');
let cats = $('#blog-cats');
anchors.html("");
archive.html("");
list.html("");
cats.html("");
// force all and featured categories to be first
addCatButton(json, cats, "All Posts", currCat);
addCatButton(json, cats, "Featured", currCat);
addCategory(json, cats, anchors, "All Posts", currCat);
addCategory(json, cats, anchors, "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 Posts" || post.cat.includes(currCat)) {
addCategory(json, cats, anchors, cat, currCat);
let catIds = post.cat.map(c => c.toLowerCase().replace(" ", "-"));
if (currCat === "all-posts" || catIds.includes(currCat)) {
let p = /*html*/ `
<div class="card bg-light blog-entry rounded-0">
<div class="card-body">
@ -51,18 +54,20 @@ function populateBlog(json, currCat) {
}
if (!archive.html())
archive.html(`<em>There are no archived ${currCat} posts.</em>`);
archive.html(`<em>There are no archived posts in this category.</em>`);
if (!list.html())
populateBlog(json, "Featured");
}
function addCatButton(json, cats, cat, currCat) {
let catAnchor = `blog-cat-${cat.toLowerCase().replace(" ", "_")}`;
function addCategory(json, cats, anchors, cat, currCat) {
let catId = cat.toLowerCase().replace(" ", "-");
let catAnchor = `blog-cat-${catId}`;
if (!$(`#${catAnchor}`).length) {
cats.append( /*html*/ `<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor} ${cat === currCat ? "disabled" : ""}>${cat}</button>`);
cats.append( /*html*/ `<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor} ${catId === currCat ? "disabled" : ""}>${cat}</button>`);
$(`#${catAnchor}`).on('click', function () {
populateBlog(json, cat);
history.replaceState(null, null, `?cat=${cat}${location.hash}`);
populateBlog(json, catId);
history.replaceState(null, null, `#blog-${catId}`);
});
anchors.append( /*html*/ `<a class="anchor" id="blog-${catId}"></a>`);
}
}