Merge branch 'main' into fix/style

README.md

@@ -25,9 +25,6 @@ A simple blog theme powered by [Zola](getzola.org). See a live preview [here](ht
 - [x] Tags.
 - [X] Syntax highlighting.
 
-### TODO:
-- [ ] Archive.
-
 See the project's roadmap [here](https://github.com/users/welpo/projects/1).
 
 ## Quick start

config.toml

@@ -28,6 +28,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/_index.md

@@ -6,5 +6,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-desc = {title = "Hello! I'm tabi~", img = "https://avatars.githubusercontent.com/u/6399341", text = "Tabi is a simple theme for Zola. It aims to be a personal page and home to blog posts. It features responsive design, dark and light modes, and high performance." }
+desc = {title = "Hello! I'm tabi~", img = "https://avatars.githubusercontent.com/u/6399341" }
 +++
+
+Tabi is a simple theme for Zola. It aims to be a personal page and home to blog posts. It features responsive design, dark and light modes, and high performance.

content/archive/_index.md

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

content/projects/tabi.md

@@ -4,6 +4,6 @@ description = "A cute Zola theme."
 weight = 1
 
 [extra]
-remote_image = "https://user-images.githubusercontent.com/6399341/216358758-912b47e3-03ed-4b6d-b818-37cea7c42f45.png"
+remote_image = "https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png"
 link_to = "https://github.com/welpo/tabi"
 +++

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 %}

templates/macros/macros.html

@@ -57,25 +57,28 @@
 {% endmacro tags %}
 
 {% macro page_header(title) %}
-<h1 class="title-container">
+<h2 class="title-container">
     {{ title }}
-</h1>
+</h2>
-{% endmacro content %}
+{% endmacro page_header %}
 
 
-{% macro page_desc(desc) %}
+{% macro page_desc(desc, page) %}
 <div id="banner-container-home">
     <div id="home-banner-text">
         <h3>
             {{ desc.title }}
         </h3>
-        <p id="banner-home-subtitle">{{ desc.text }}</p>
+        <section id="banner-home-subtitle">
+					{{ page.content | safe }}
+        </section>
     </div>
     <div class="image-container-home">
-        <img alt="the owner" class="banner-home-img" src="{{ desc.img }}" />
+			<img alt="the owner" class="banner-home-img" src="{{ desc.img }}" />
     </div>
 </div>
-{% endmacro content %}
+{% endmacro page_desc %}
+
 
 {% macro content(page) %}
 <main>

templates/section.html

@@ -6,7 +6,7 @@
 {% endif -%}
 
 {%- if section.extra.desc %}
-	{{ post_macros::page_desc(desc=section.extra.desc) }}
+	{{ post_macros::page_desc(desc=section.extra.desc, page=section) }}
 {% endif -%}
 
 <main class="list">