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

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

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 --> <!-- Blog -->
<a class="anchor" id="blog"></a> <a class="anchor" id="blog"></a>
<div id="blog-cat-anchors"></div>
<div class="list-display rounded"> <div class="list-display rounded">
<h1>Blog</h1> <h1>Blog</h1>
<p> <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.querySelector('meta[property="og:description"]').setAttribute("content", post.summary);
document.getElementById("nav-items").innerHTML = /*html*/ ` 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>` : ""} ${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>` : ""} ${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", url: "blog/src/posts.json",
cache: false, cache: false,
success: function (json) { success: function (json) {
let category = window.location.search.match(/cat=([^&]+)/); let category = window.location.hash.match(/#blog-(.+)/);
populateBlog(json, category && decodeURI(category[1]) || "Featured"); populateBlog(json, category && decodeURI(category[1]) || "featured");
forceToAnchor(); forceToAnchor();
} }
}); });
function populateBlog(json, currCat) { function populateBlog(json, currCat) {
let anchors = $('#blog-cat-anchors');
let archive = $('#blog-archive'); let archive = $('#blog-archive');
let list = $('#blog-list'); let list = $('#blog-list');
let cats = $('#blog-cats'); let cats = $('#blog-cats');
anchors.html("");
archive.html(""); archive.html("");
list.html(""); list.html("");
cats.html(""); cats.html("");
// force all and featured categories to be first // force all and featured categories to be first
addCatButton(json, cats, "All Posts", currCat); addCategory(json, cats, anchors, "All Posts", currCat);
addCatButton(json, cats, "Featured", currCat); addCategory(json, cats, anchors, "Featured", currCat);
for (let i = json.length - 1; i >= 0; i--) { for (let i = json.length - 1; i >= 0; i--) {
let post = json[i]; let post = json[i];
for (let cat of post.cat) for (let cat of post.cat)
addCatButton(json, cats, cat, currCat); addCategory(json, cats, anchors, cat, currCat);
if (currCat === "All Posts" || post.cat.includes(currCat)) { let catIds = post.cat.map(c => c.toLowerCase().replace(" ", "-"));
if (currCat === "all-posts" || catIds.includes(currCat)) {
let p = /*html*/ ` let p = /*html*/ `
<div class="card bg-light blog-entry rounded-0"> <div class="card bg-light blog-entry rounded-0">
<div class="card-body"> <div class="card-body">
@ -51,18 +54,20 @@ function populateBlog(json, currCat) {
} }
if (!archive.html()) 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()) if (!list.html())
populateBlog(json, "Featured"); populateBlog(json, "Featured");
} }
function addCatButton(json, cats, cat, currCat) { function addCategory(json, cats, anchors, cat, currCat) {
let catAnchor = `blog-cat-${cat.toLowerCase().replace(" ", "_")}`; let catId = cat.toLowerCase().replace(" ", "-");
let catAnchor = `blog-cat-${catId}`;
if (!$(`#${catAnchor}`).length) { 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 () { $(`#${catAnchor}`).on('click', function () {
populateBlog(json, cat); populateBlog(json, catId);
history.replaceState(null, null, `?cat=${cat}${location.hash}`); history.replaceState(null, null, `#blog-${catId}`);
}); });
anchors.append( /*html*/ `<a class="anchor" id="blog-${catId}"></a>`);
} }
} }