Merge pull request #15 from welpo/feature/add-archive-screen

Feature/add archive screen

config.toml

@@ -27,6 +27,7 @@ headerImage = ""
 # The icon is display besides the menu text but is not necessary. It needs to be placed under "menu_icon" in the static "folder"
 menu = [
     { name = "home", url = "$BASE_URL/" },
+    { name = "archive", url = "$BASE_URL/archive" },
     { name = "tags", url = "$BASE_URL/tags" },
     { name = "projects", url = "$BASE_URL/projects" },
 ]

content/archive/_index.md

@@ -0,0 +1,5 @@
++++
+title = "Archive"
+path = "archive"
+template = "archive.html"
++++

sass/main.scss

@@ -3,6 +3,7 @@
   src: url('fonts/Inter.ttf');
   font-display: swap;
 }
+@import 'parts/_archive.scss';
 @import 'parts/_cards.scss';
 @import 'parts/_code.scss';
 @import 'parts/_header.scss';

sass/parts/_archive.scss

@@ -0,0 +1,25 @@
+.archive {
+  .listing-title {
+    font-size: 1.5rem;
+    opacity: 0.8;
+    margin-bottom: 1rem;
+  }
+
+  .listing-item {
+    padding: 0.2rem 1rem;
+    display: flex;
+    gap: 1rem;
+    .post-time {
+      width: 4rem;
+      .date {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}

templates/archive.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %} {% block main_content %}
+
+<div class="title-container">
+  {{ post_macros::page_header(title=section.title) }}
+</div>
+
+<div class="archive">
+  <ul class="list-with-title">
+    {% set section_item = get_section(path="_index.md") %} {% for year, posts in
+    section_item.pages | group_by(attribute="year") %} {% if posts | length > 0
+    %}
+    <li>
+      <h2 class="listing-title">{{ year }}</h2>
+      <ul class="listing">
+        {% for post in posts %}
+        <li class="listing-item">
+          <div class="post-time">
+            <span class="date">
+              {{ post.date | date(format="%b %d") }}
+            </span>
+          </div>
+          <a href="{{ post.permalink }}" title="{{ post.title }}"
+            >{{ post.title }}</a
+          >
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %} {% endfor %}
+    </li>
+  </ul>
+</div>
+{% endblock main_content %}