From 4920725c295e359524876ba83b919e12ac7a029c Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Wed, 30 Sep 2020 00:24:37 +0200
Subject: [PATCH] added a way to show archived posts

---
 index.html      |  4 ++++
 scripts/blog.js | 17 +++++++++++++----
 style/style.css | 13 +++++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index a6b15b7..d5c2468 100644
--- a/index.html
+++ b/index.html
@@ -166,6 +166,10 @@
                     <div id="blog-list">
                         <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
                     </div>
+                    <button type="button" class="btn btn-link" id="blog-archive-button">Show archived posts</button>
+                    <div id="blog-archive">
+                        <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
+                    </div>
                     <script src="scripts/blog.js"></script>
                 </div>
             </div>
diff --git a/scripts/blog.js b/scripts/blog.js
index 7f9a32d..2c55889 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -1,15 +1,20 @@
+$("#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/posts.json",
     cache: false,
     success: function (json) {
         let list = $('#blog-list');
+        let archive = $('#blog-archive');
         list.html("");
+        archive.html("");
         for (let i = json.length - 1; i >= 0; i--) {
             var obj = json[i];
-            if (obj.archived)
-                continue;
-
             let p = "";
             p += '<div class="card bg-light blog-entry rounded-0">';
             p += '<div class="card-body">';
@@ -17,7 +22,11 @@ $.ajax({
             p += '<div class="card-text text-muted blog-summary">' + obj.summary + '</div>';
             p += '<span class="text-muted project-status">' + obj.date + "</span>";
             p += '</div></div>';
-            list.append(p);
+            if (obj.archived) {
+                archive.append(p);
+            } else {
+                list.append(p);
+            }
         }
     }
 });
\ No newline at end of file
diff --git a/style/style.css b/style/style.css
index 9824cf2..ad13412 100644
--- a/style/style.css
+++ b/style/style.css
@@ -72,6 +72,19 @@ body {
     text-align: center;
 }
 
+#blog-archive-button {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: 0;
+    padding: 0;
+}
+
+#blog-archive {
+    display: none;
+}
+
 .anchor {
     display: block;
     position: relative;