From 23785fbb8e22a7d169e0cf1605d6bc0bd05f320f Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Sun, 4 Apr 2021 01:54:29 +0200
Subject: [PATCH] made blog category links a lot nicer

---
 index.html      |  1 +
 node/blog.js    |  2 +-
 scripts/blog.js | 29 +++++++++++++++++------------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index fdfae4a..963d136 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/node/blog.js b/node/blog.js
index 74a8faf..099a3e9 100644
--- a/node/blog.js
+++ b/node/blog.js
@@ -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>` : ""}
                 `;
diff --git a/scripts/blog.js b/scripts/blog.js
index b489012..b8ea61c 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -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>`);
     }
 }
\ No newline at end of file