add blog please tell me this works online too

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!*

blog/posts.json

@@ -0,0 +1,5 @@
+[{
+    "name": "Blogs are cool, I think",
+    "id": "blogs_are_cool",
+    "date": "2/17/2019"
+}]

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.

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);
+    });
+}

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) {

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;