From 2e1bca75e36371f4531f0b322dffdbe5f05ac2c1 Mon Sep 17 00:00:00 2001
From: Ellpeck <megamaximal@gmail.com>
Date: Sun, 17 Feb 2019 01:46:41 +0100
Subject: [PATCH] add blog please tell me this works online too

---
 blog/blogs_are_cool.md |  6 ++++++
 blog/posts.json        |  5 +++++
 index.html             | 25 ++++++++++++++++++++-----
 scripts/blog.js        | 36 ++++++++++++++++++++++++++++++++++++
 scripts/main.js        | 16 ++++++++++++++--
 style.css              | 15 +++++++++++++++
 6 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 blog/blogs_are_cool.md
 create mode 100644 blog/posts.json
 create mode 100644 scripts/blog.js

diff --git a/blog/blogs_are_cool.md b/blog/blogs_are_cool.md
new file mode 100644
index 0000000..b44c579
--- /dev/null
+++ b/blog/blogs_are_cool.md
@@ -0,0 +1,6 @@
+So I've been wanting to make a blog for a while, but never found the motivation to do so. Especially with all of the blog softwares out there, it was hard to figure out which one to use to make it fit this website and its design nicely.  
+I didn't really want to make a whole different page just for the blog because it would kind of throw the design off, so I took some inspiration from [Vazkii's blog](https://vazkii.us/#blog) and made mine work in a similar fashion. This still made it work with the single page design.
+
+Now because I'm not good with PHP at all, I actually made this entire thing using only JavaScript. It's.. a bit of a mess, honestly, but it works.
+
+So here it is. Expect me to, very occasionally, do a post about one or the other random thing. *Enjoy!*
\ No newline at end of file
diff --git a/blog/posts.json b/blog/posts.json
new file mode 100644
index 0000000..786a4a0
--- /dev/null
+++ b/blog/posts.json
@@ -0,0 +1,5 @@
+[{
+    "name": "Blogs are cool, I think",
+    "id": "blogs_are_cool",
+    "date": "2/17/2019"
+}]
\ No newline at end of file
diff --git a/index.html b/index.html
index 06c601d..8995580 100644
--- a/index.html
+++ b/index.html
@@ -22,9 +22,10 @@
     <meta name="twitter:site" content="@Ellpeck">
     <meta name="twitter:creator" content="@Ellpeck">
 
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
     <script src="scripts/main.js"></script>
 </head>
 
@@ -49,6 +50,7 @@
                 <a class="nav-item nav-link" href="#projects">Projects</a>
                 <a class="nav-item nav-link" href="#social">Social</a>
                 <a class="nav-item nav-link" href="#about">About</a>
+                <a class="nav-item nav-link" href="#blog">Blog</a>
                 <a class="nav-item nav-link" href="#support">Support Me</a>
             </div>
             <span class="navbar-text">
@@ -85,7 +87,7 @@
         <!-- Projects -->
         <a class="anchor" id="projects"></a>
         <div class="list-display rounded">
-            <h2>Projects</h2>
+            <h1>Projects</h1>
             <p>
                 Here is a list of some of my main projects. Check them out if you want!<br> For a full list of my programming projects, you can check out my GitHub page linked <a href="#social">below</a>.
             </p>
@@ -98,7 +100,7 @@
         <!-- Social -->
         <a class="anchor" id="social"></a>
         <div class="list-display rounded">
-            <h2>Social</h2>
+            <h1>Social</h1>
             <p>
                 Below is a list of the social networks and websites that I regularly use (and my email address). The closer to the front of the list they are, the more frequently I use them, generally.
             </p>
@@ -111,7 +113,7 @@
         <!-- About -->
         <a class="anchor" id="about"></a>
         <div class="list-display rounded">
-            <h2>About</h2>
+            <h1>About</h1>
             <p>
                 Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be intersting to
                 you!
@@ -122,10 +124,23 @@
             <script src="scripts/about.js"></script>
         </div>
 
+        <!-- Blog -->
+        <a class="anchor" id="blog"></a>
+        <div class="list-display rounded">
+            <h1>Blog</h1>
+            <p>
+                Sometimes, I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to expand the post.
+            </p>
+            <div id="blog-list">
+                <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
+            </div>
+            <script src="scripts/blog.js"></script>
+        </div>
+
         <!-- Support -->
         <a class="anchor" id="support"></a>
         <div class="list-display rounded">
-            <h2>Support Me</h2>
+            <h1>Support Me</h1>
             <p>
                 If you think any of the stuff I work on is interesting, especially my game or one of my Minecraft mods, a great way to show me your appreciation and help me out is to throw me a bit of your precious money!
                 <br>If you want, you can do so using one of the ways below.
diff --git a/scripts/blog.js b/scripts/blog.js
new file mode 100644
index 0000000..05cdd23
--- /dev/null
+++ b/scripts/blog.js
@@ -0,0 +1,36 @@
+let converter = new showdown.Converter();
+$.getJSON("blog/posts.json", function (json) {
+    let list = $('#blog-list');
+    for (let i = json.length - 1; i >= 0; i--) {
+        var obj = json[i];
+        let id = obj["id"];
+
+        let p = "";
+        p += '<a class="blog-anchor" id="blog-' + id + '"></a>';
+        p += '<div class="card bg-light blog-entry rounded-0">';
+        p += '<div class="card-body">';
+        p += '<a class="blog-button" id="blog-button-' + id + '"><h2 class="card-title">' + obj["name"] + '</h2></a>';
+        p += '<span class="text-muted project-status">' + obj["date"] + "</span>";
+        p += '<div class="card-text" id="blog-post-' + id + '"></div>';
+        p += '</div></div>';
+        list.append(p);
+
+        $("#blog-button-" + id).on('click', function () {
+            var post = $("#blog-post-" + id);
+            if (post.html() !== "") {
+                post.html("");
+                history.pushState(null, null, "#blog");
+            } else {
+                openBlogPost(id);
+                history.pushState(null, null, "#blog-" + id);
+            }
+        });
+    }
+});
+
+function openBlogPost(id) {
+    $.get("blog/" + id + ".md", function (markdown) {
+        let html = converter.makeHtml(markdown);
+        $("#blog-post-" + id).html(html);
+    });
+}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index b61b302..aeb9075 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -13,10 +13,12 @@ $(function () {
             }
         }
     }
-    openModals(window.location.hash);
+
+    let hash = window.location.hash;
+    openModals(hash);
     $('a').on('click', function () {
         openModals($(this).attr('href'));
-    });
+    });;
 
     $('.navbar-collapse a').on('click', function () {
         $('.navbar-collapse').collapse('hide');
@@ -33,6 +35,16 @@ $(function () {
         window.location.hash = "";
         location.reload();
     });
+
+    if (hash.startsWith("#blog-")) {
+        var anchor = $(hash);
+        if (anchor.length) {
+            openBlogPost(hash.substring(6));
+            $('html, body').animate({
+                scrollTop: anchor.offset().top
+            }, 0)
+        }
+    }
 });
 
 function getCookie(key) {
diff --git a/style.css b/style.css
index a311ac9..10eba44 100644
--- a/style.css
+++ b/style.css
@@ -81,6 +81,21 @@ body {
     visibility: hidden;
 }
 
+.blog-anchor {
+    display: block;
+    position: relative;
+    top: -80px;
+    visibility: hidden;
+}
+
+.blog-button {
+    cursor: pointer;
+}
+
+.blog-entry {
+    margin-top: 20px;
+}
+
 .footer {
     bottom: 0;
     line-height: 30px;