feat: update tags to order by count

src/_includes/partials/archive.html

@@ -1,17 +1,19 @@
 {% set itemsByYear = items | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
-<section>
+<section class="[ archive ]">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
-        <div class="[ flex ]">
+        <div class="[ flex mt-1.5 mb-0.5 ]">
             <h2>{{ year }}</h2>
         </div>
-        {% for item in itemsInYear %}
-            <div class="[ flex items-center justify-between ]">
-                <a href="{{ item.url }}">{{ item.data.title }}</a>
-                <div class="[ archive-divider ] [ mx-0.5 ]"></div>
-                <div>{{ item.date | formatDate("MM/DD") }}</div>
-            </div>
-        {% endfor %}
+        <div class="[ items ] [ flex-col gap-0.25 ]">
+            {% for item in itemsInYear %}
+                <div class="[ flex items-center justify-between ]">
+                    <a href="{{ item.url }}">{{ item.data.title }}</a>
+                    <hr class="[ archive-divider ] [ mx-0.5 ]" />
+                    <p class="[ archive-date ]">{{ item.date | formatDate("MM/DD") }}</p>
+                </div>
+            {% endfor %}
+        </div>
     {% endfor %}
 </section>

src/assets/css/blocks/archive.css

@@ -5,6 +5,7 @@
   flex: 1;
 }
 
-.archive-month {
-  margin-left: auto;
+.archive-date {
+  color: var(--color-text-soft);
+  letter-spacing: 0.05em;
 }

src/assets/css/utils/flex.css

@@ -18,3 +18,11 @@
 .justify-between {
   justify-content: space-between;
 }
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}

src/content/pages/tag.html

@@ -1,20 +1,14 @@
 ---
 eleventyComputed:
-    title: "Tag: {{ tag }}"
+    title: "Tag: {{ category.title }}"
+    permalink: "{{ category.href }}/index.html"
 layout: base
 pagination:
-    data: collections.postsByCategory
+    data: collections.categories
     size: 1
-    alias: tag
-permalink: /tag/{{ tag }}/index.html
+    alias: category
 ---
 
-{% set posts = collections.postsByCategory[tag] %}
-<h1>Tag: {{ tag }}</h1>
-<ul>
-    {% for post in posts %}
-        <li>
-            <a href="{{ post.url }}">{{ post.data.title }}</a>
-        </li>
-    {% endfor %}
-</ul>
+<h1>Tag: {{ category.title }}</h1>
+{% set items = collections.posts | filterByCategory(category.title) %}
+{% include "partials/archive.html" %}

src/content/pages/tags.html

@@ -5,14 +5,12 @@ title: All tags
 ---
 
 <section class="[ flow ]">
-    <h1>Tags</h1>
-    {% set categories = collections.categories | entries %}
-    <ol class="[ flex gap-1 list-none p-0 mb-0 ]">
-        {% for tag in categories %}
-            {% set key = tag | first %}
-            {% set count = tag | last %}
+    <h1>{{ title }}</h1>
+    <ol class="[ flex flex-wrap gap-0.5 list-none p-0 mb-0 ]">
+        {% for category in collections.categories %}
             <li>
-                <a href="/tag/{{ key }}" class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ key }} <span class="[ pill-count ]">{{ count }}</span></a>
+                <a href="{{ category.href }}"
+                   class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ category.title }} <span class="[ pill-count ]">{{ category.count }}</span></a>
             </li>
         {% endfor %}
     </ol>