feat: various markup improvements for semantic

src/_includes/macros/catalogue.njk

@@ -1,14 +1,37 @@
-{% macro list(posts) %}
-<ul class="[ catalogue-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
-    {% for post in posts %}
-        <li class="[ catalogue-list-item line-height-l ]">
-                <div>
-                    <a href="{{ post.url }}">{{ post.data.title }}</a>
-                </div>
-                <div class="[ font-size-s line-height-s ]"><p class="[ bg-surface text-primary p-0.5 radius-0.25 ]">{{ post.data.tags[1] }}</p></div>
-                <div class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</div>
-        </li>
-    {% endfor %}
-</ul>
+{% from "macros/utils.njk" import stars %}
+
+{% macro one(post, format) %}
+<article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
+    <a href="{{ post.url }}">{{ post.data.title }}</a>
+    <p class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</p>
+    <div class="[ cluster mt-0.5 ]">
+        <div class="[ font-size-s ]"><p class="[ bg-surface text-fadeText p-0.5 radius-0.25 line-height-s ]">{{ post.data.tags[1] }}</p></div>
+        {% if post.data.rating %}
+            {{ stars(post.data.rating) }}
+        {% endif %}
+    </div>
+</article>
+{% endmacro %}
+
+{% macro list(posts) %}
+<ol class="[ posts-list ] [ flow list-none p-0 ]">
+    {% for post in posts %}
+        <li>
+            {{ one(post, format) }}
+        </li>
+    {% endfor %}
+</ol>
+{% endmacro %}
+
+{% macro yearList(posts, year, format = "MM/DD") %}
+<section class="[ flow ]">
+    <header class="[ cluster gap-0.5 ]">
+        <h2>{{ year }}</h2>
+        <p class="[ bg-surface text-fadeText px-0.5 py-0.25 font-size-s line-height-s radius-0.5 ]">
+            {{ posts | length }}
+        </p>
+    </header>
+    {{ list(posts, format) }}
+</section>
 {% endmacro %}
 

src/_includes/macros/posts.njk

@@ -1,13 +1,29 @@
+{% macro one(post, format = "MM/DD") %}
+<article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
+    <a href="{{ post.url }}">{{ post.data.title }}</a>
+    <p class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</p>
+    <p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
+</article>
+{% endmacro %}
+
 {% macro list(posts, format = "MM/DD") %}
-<ul class="[ posts-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
+<ol class="[ posts-list ] [ flow list-none p-0 ]">
     {% for post in posts %}
-        <li class="[ posts-list-item line-height-l gap-1 ]">
-                <div>
-                    <a href="{{ post.url }}">{{ post.data.title }}</a>
-                    <div class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</div>
-                </div>
-                <div class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</div>
+        <li class="[ flow-space-0.5 ]">
+            {{ one(post, format) }}
         </li>
     {% endfor %}
-</ul>
+</ol>
+{% endmacro %}
+
+{% macro yearList(posts, year, format = "MM/DD") %}
+<section class="[ flow ]">
+    <header class="[ cluster gap-0.5 ]">
+        <h2>{{ year }}</h2>
+        <p class="[ bg-surface text-fadeText px-0.5 py-0.25 font-size-s line-height-s radius-0.5 ]">
+            {{ posts | length }}
+        </p>
+    </header>
+    {{ list(posts, format) }}
+</section>
 {% endmacro %}