Add Blog page

_includes/styles/pages/blog.scss

@@ -0,0 +1,51 @@
+.post-list {
+  list-style: none;
+  padding-left: 0;
+  > li {
+    margin-bottom: 2rem;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .post-list-description {
+    margin: 0;
+  }
+  .post-list-title {
+    display: inline-block;
+    font-weight: bold;
+    text-decoration: none;
+    font-size: 1.5rem;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .post-list-date {
+    display: block;
+  }
+  .tag-list {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    list-style: none;
+    padding-left: 0;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    > li {
+      margin: 0;
+    }
+  }
+}
+
+.no-posts {
+  text-align: center;
+  margin: 4rem 0;
+  h2 {
+    margin: 0;
+    color: var(--color-blue);
+  }
+  img.icon {
+    width: 3rem;
+    height: 3rem;
+    filter: var(--filter-blue);
+  }
+}

blog/index.tsx

@@ -0,0 +1,39 @@
+export const title = "Blog";
+export const description = "Hello, my friend. Stay a while and listen.";
+export const nav_icon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/news.svg";
+
+export default function({ nav }) {
+  const sortPosts = (a,b) => {
+    if (a.data.date < b.data.date) {
+      return 1;
+    } else if (a.data.date > b.data.date) {
+      return -1;
+    } else {
+      return 0;
+    }
+  };
+
+  if (!nav.menu("/blog/posts")) {
+    return (
+      <div className="no-posts">
+        <img src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/square-0-filled.svg" className="icon"/>
+        <h2>No posts yet.<br/>Check back later.</h2>
+      </div>
+    );
+  }
+
+  return (
+    <ul className="post-list">
+      {nav.menu("/blog/posts").children.sort(sortPosts).map(post => (
+        <li className="post-list-item">
+          <a href={post.data.url} className="post-list-title">{post.data.title}</a>
+          <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
+          <ul className="tag-list">
+            {post.data.tags.map(tag => <li className="tag">{tag}</li>)}
+          </ul>
+          <p className="post-list-description">{post.data.description}</p>
+        </li>
+      ))}
+    </ul>
+  );
+}

styles/main.scss

@@ -7,6 +7,7 @@
 
 // Pages
 @import "styles/pages/resume";
+@import "styles/pages/blog";
 
 // Components
 @import "styles/components/navbar";