feat: update tags to order by count

config/collections/index.js

@@ -1,5 +1,6 @@
 const path = require("path").posix;
 const { dir } = require("../constants.js");
+const { slugifyString } = require("../utils.js");
 
 const getAllPosts = (collection) => {
   const posts = collection.getFilteredByGlob(
@@ -13,7 +14,7 @@ const getAllPostCategories = (collection) => {
 
   const allCategories = posts.flatMap((post) => post.data.categories);
 
-  const categories = allCategories.reduce((acc, category) => {
+  const categoryCounts = allCategories.reduce((acc, category) => {
     if (acc[category]) {
       acc[category]++;
     } else {
@@ -23,6 +24,15 @@ const getAllPostCategories = (collection) => {
     return acc;
   }, {});
 
+  const categories = Object.entries(categoryCounts)
+    .map(([category, count]) => ({
+      key: slugifyString(category),
+      title: category,
+      href: `/tags/${slugifyString(category)}`,
+      count: count,
+    }))
+    .sort((a, b) => b.count - a.count);
+
   return categories;
 };
 
@@ -30,14 +40,12 @@ const getPostsByCategory = (collection) => {
   const posts = getAllPosts(collection);
   const categories = Object.keys(getAllPostCategories(collection));
 
-  const postsByCategory = {};
-  categories.forEach((category) => {
-    const categoryPosts = posts.filter((post) => {
-      return post.data.categories.includes(category);
-    });
-
-    postsByCategory[category] = categoryPosts;
-  });
+  const postsByCategory = categories
+    .map((category) => ({
+      category,
+      posts: posts.filter((post) => post.data.categories.includes(category)),
+    }))
+    .sort((a, b) => b.posts.length - a.posts.length);
 
   return postsByCategory;
 };

config/filters/index.js

@@ -36,8 +36,13 @@ const organizeByDate = (collection) => {
   return collectionByDate;
 };
 
+const filterByCategory = (collection, category) => {
+  return collection.filter((item) => item.data.categories.includes(category));
+};
+
 module.exports = {
   entries,
+  filterByCategory,
   formatDate,
   keys,
   minifyCss,

config/utils.js

@@ -0,0 +1,11 @@
+const slugify = require("slugify");
+
+const slugifyString = (string) => {
+  return slugify(string, {
+    lower: true,
+  });
+};
+
+module.exports = {
+  slugifyString,
+};

eleventy.config.js

@@ -12,6 +12,7 @@ const {
   values,
   organizeByDate,
   keys,
+  filterByCategory,
 } = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
@@ -31,6 +32,7 @@ module.exports = (eleventyConfig) => {
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("entries", entries);
+  eleventyConfig.addFilter("filterByCategory", filterByCategory);
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("keys", keys);
   eleventyConfig.addFilter("minifyCss", minifyCss);

package.json

@@ -28,5 +28,8 @@
     "postcss-import": "^16.0.0",
     "postcss-import-ext-glob": "^2.1.1",
     "prettier": "3.2.4"
+  },
+  "dependencies": {
+    "slugify": "^1.6.6"
   }
 }

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>