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>
+{% 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>
-                <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>
+</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 list(posts, format = "MM/DD") %}
-<ul class="[ posts-list ] [ flow list-none m-0 p-0 flow-space-0.5 ]">
-    {% for post in posts %}
-        <li class="[ posts-list-item line-height-l gap-1 ]">
-                <div>
+{% 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>
-                    <div class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</div>
-                </div>
-                <div class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</div>
+    <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") %}
+<ol class="[ posts-list ] [ flow list-none p-0 ]">
+    {% for post in posts %}
+        <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 %}

src/catalogue-type.html

@@ -12,7 +12,7 @@ eleventyComputed:
     title: Catalogue - {{ type | pluralize | capitalize }}
 ---
 
-{% from "macros/catalogue.njk" import list %}
+{% from "macros/catalogue.njk" import yearList %}
 <h1>{{ type | pluralize | capitalize }}</h1>
 {% set catalogueTypes = collections.catalogueByType | keys %}
 <ul class="[ cluster p-0 gap-0.5 ]" role="list">
@@ -28,9 +28,6 @@ eleventyComputed:
 <section class="[ flow ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <h2>{{ year }}</h2>
-        <section class="[ items ] [ flex-col gap-0.25 ]">
-            {{ list(itemsInYear) }}
-        </section>
+        {{ yearList(itemsInYear, year) }}
     {% endfor %}
 </section>

src/catalogue.html

@@ -4,7 +4,7 @@ permalink: /catalogue/index.html
 title: Catalogue
 ---
 
-{% from "macros/catalogue.njk" import list %}
+{% from "macros/catalogue.njk" import yearList %}
 <h1>Catalogue</h1>
 <p>A collection of my thoughts on various forms of media that I consume.</p>
 {% set catalogueTypes = collections.catalogueByType | keys %}
@@ -21,9 +21,6 @@ title: Catalogue
 <section class="[ flow ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <h2>{{ year }}</h2>
-        <section>
-            {{ list(itemsInYear) }}
-        </section>
+        {{ yearList(itemsInYear, year) }}
     {% endfor %}
 </section>

src/css/blocks/posts.css

@@ -1,4 +1,4 @@
 .posts-list-item {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto auto;
 }

src/css/utilities/fonts.css

@@ -29,3 +29,7 @@
 .line-height-l {
   line-height: 1.5rem;
 }
+
+.line-height-xl {
+  line-height: 2rem;
+}

src/index.html

@@ -13,14 +13,18 @@ permalink: /
 <p>
     If you're interested, I have an <a href="/about">about page</a> all about me!
 </p>
+<section>
+    <header class="[ flow ]">
         <h2>Favourite posts</h2>
         <p>Hand-picked, curated selection of my favourite posts!</p>
+    </header>
     {% set favouritePosts = collections.post | filterFavourites | reverse %}
-<section>
     {{ list(favouritePosts, "MM/DD/YYYY") }}
 </section>
-<h2>Recent posts</h2>
-{% set recentPosts = collections.post | reverse | limit(5) %}
 <section>
+    <header>
+        <h2>Recent posts</h2>
+    </header>
+    {% set recentPosts = collections.post | reverse | limit(5) %}
     {{ list(recentPosts, "MM/DD/YYYY") }}
 </section>

src/posts.html

@@ -4,7 +4,7 @@ permalink: /posts/index.html
 title: Posts
 ---
 
-{% from "macros/posts.njk" import list %}
+{% from "macros/posts.njk" import yearList %}
 <h1>All posts</h1>
 <p>
     Browse all of my posts, or narrow things down <a href="/tags">via tags</a>.
@@ -14,9 +14,6 @@ title: Posts
 <section class="[ flow ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <h2>{{ year }}</h2>
-        <section>
-            {{ list(itemsInYear) }}
-        </section>
+        {{ yearList(itemsInYear, year) }}
     {% endfor %}
 </section>

src/tag.html

@@ -9,7 +9,7 @@ pagination:
 permalink: /tags/{{ tag | slugify }}/index.html
 ---
 
-{% from "macros/posts.njk" import list %}
+{% from "macros/posts.njk" import yearList %}
 <h1>Tag: {{ tag }}</h1>
 <p>
     All posts tagged with "{{ tag }}", or go back to <a href="/tags">all tags</a>.
@@ -19,9 +19,6 @@ permalink: /tags/{{ tag | slugify }}/index.html
 <section class="[ flow ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <h2>{{ year }}</h2>
-        <section>
-            {{ list(itemsInYear) }}
-        </section>
+        {{ yearList(itemsInYear, year) }}
     {% endfor %}
 </section>