add ui features

templates/global-style.ejs

@@ -15,20 +15,30 @@
     color:white;
     font-family: 'Arial', sans-serif;
   }
-  #main-content a {
-    font-size: 20px;
-  }
   a {
     text-decoration: none;
     decoration: none;
     color: orange;
   }
+  table td {
+    color: orange;
+  }
+  table {
+    width: 100%;
+  }
+  #date-header, .date-item {
+    text-align: right;
+  }
+  #title-header, .post-item {
+    text-align: left;
+  }
   #footer-content {
     position: fixed;
     bottom: 5;
+    left: 0;
     text-align: center;
+    width: 100%;
   }
-
   body {
     background-color: #171717;
   }

templates/index.ejs

@@ -1,8 +1,24 @@
 <%- include('header') %>
 <div id="main-content">
+  <table>
+  <!---
+    <tr>
+      <th id="title-header">Title</th>
+      <th id="date-header">Last Edited</th>
+    </tr>
+  --->
+  <% posts = posts.sort((a,b) => {return new Date(b.metadata.mtime) - new Date(a.metadata.mtime)}) %>
   <% for(const post of posts) { %>
-    <a class="post" href="/post/<%= post.file %>"><%= post.title %></a><br>
+    <tr>
+      <td class="post-item"><a class="post" href="/post/<%= post.file %>"><%= post.title %></a></td>
+      <td class="date-item"><%= new Date(post.metadata.mtime).toDateString() %></td>
+    </tr>
   <% } %>
 </div>
+<style>
+  #main-content {
+    font-size: 15px;
+  }
+</style>
 <%- include('global-style'); %>
 <%- include('footer') %>

templates/post.ejs

@@ -1,6 +1,6 @@
 <%- include('header') %>
 <div id="main-content">
-  <%- parsedPost %>
+  <%- post['parsedPost'] %>
 </div>
 <%- include('global-style') %>
 <%- include('footer') %>