refactor random post button to use anchor tag and set href dynamically

Author: ethmarks

assets/common.css

@@ -961,6 +961,7 @@ code {
 
         &:hover,
         &:focus {
+            text-decoration: none;
             background: var(--color-accent-dark);
             color: var(--color-accent);
             border-color: var(--color-accent);

assets/randomblog.js

@@ -1,9 +1,26 @@
-function redirectToRandomBlog() {
-    const links = document.querySelectorAll("a.post-link[href]");
-    if (!links.length) {
-        document.body.innerText = "No blog posts found.";
-        return;
+/**
+ * A function to find all post links on the page and set the 'href'
+ * of our "random post" link.
+ */
+function setRandomPostLink() {
+  const randomPostLink = document.getElementById("random-post-link");
+
+  const postLinks = document.querySelectorAll("a.post-link[href]");
+
+  if (!randomPostLink || !postLinks.length) {
+    if (randomPostLink) {
+      randomPostLink.style.display = "none";
     }
-    const random = links[Math.floor(Math.random() * links.length)];
-    window.location.href = random.getAttribute("href");
+    return;
+  }
+
+  const randomPost = postLinks[Math.floor(Math.random() * postLinks.length)];
+
+  randomPostLink.href = randomPost.getAttribute("href");
 }
+document.addEventListener("DOMContentLoaded", setRandomPostLink);
+window.addEventListener("pageshow", function (event) {
+  if (event.persisted) {
+    setRandomPostLink();
+  }
+});

layouts/blog/list.html

@@ -9,13 +9,14 @@ <h1 class="animated">Blog ({{ len (where .Pages "Params.unlisted" "ne" true) }})
     </div>
 
     <div class="random-blog-btn-container animated">
-        <button
-            onclick="redirectToRandomBlog()"
+        <a
+            href="#"
+            id="random-post-link"
             class="random-blog-btn"
             title="Go to a random blog post"
         >
             🎲 Random Post
-        </button>
+        </a>
     </div>
 
     {{ partial "post-links.html" .Pages }}