diff --git a/config/collections/index.js b/config/collections/index.js index cc559a4..74854ec 100644 --- a/config/collections/index.js +++ b/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; }; diff --git a/config/filters/index.js b/config/filters/index.js index 95df1d2..092f858 100644 --- a/config/filters/index.js +++ b/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, diff --git a/config/utils.js b/config/utils.js new file mode 100644 index 0000000..0f9e87d --- /dev/null +++ b/config/utils.js @@ -0,0 +1,11 @@ +const slugify = require("slugify"); + +const slugifyString = (string) => { + return slugify(string, { + lower: true, + }); +}; + +module.exports = { + slugifyString, +}; diff --git a/eleventy.config.js b/eleventy.config.js index a2daa55..9ea20be 100644 --- a/eleventy.config.js +++ b/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); diff --git a/package.json b/package.json index b3e409f..dc909d0 100644 --- a/package.json +++ b/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" } } diff --git a/src/_includes/partials/archive.html b/src/_includes/partials/archive.html index dd3546d..41c2c30 100644 --- a/src/_includes/partials/archive.html +++ b/src/_includes/partials/archive.html @@ -1,17 +1,19 @@ {% set itemsByYear = items | organizeByDate %} {% set years = itemsByYear | keys | sort("desc") %} -
+
{% for year in years %} {% set itemsInYear = itemsByYear[year] %} -
+

{{ year }}

- {% for item in itemsInYear %} -
- {{ item.data.title }} -
-
{{ item.date | formatDate("MM/DD") }}
-
- {% endfor %} +
+ {% for item in itemsInYear %} +
+ {{ item.data.title }} +
+

{{ item.date | formatDate("MM/DD") }}

+
+ {% endfor %} +
{% endfor %}
diff --git a/src/assets/css/blocks/archive.css b/src/assets/css/blocks/archive.css index dc6d0fb..e03b119 100644 --- a/src/assets/css/blocks/archive.css +++ b/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; } diff --git a/src/assets/css/utils/flex.css b/src/assets/css/utils/flex.css index 7808059..e9a6f4b 100644 --- a/src/assets/css/utils/flex.css +++ b/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; +} diff --git a/src/content/pages/tag.html b/src/content/pages/tag.html index d63ffcd..7fab49a 100644 --- a/src/content/pages/tag.html +++ b/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] %} -

Tag: {{ tag }}

- +

Tag: {{ category.title }}

+{% set items = collections.posts | filterByCategory(category.title) %} +{% include "partials/archive.html" %} diff --git a/src/content/pages/tags.html b/src/content/pages/tags.html index 1e50202..00d3608 100644 --- a/src/content/pages/tags.html +++ b/src/content/pages/tags.html @@ -5,14 +5,12 @@ title: All tags ---
-

Tags

- {% set categories = collections.categories | entries %} -
    - {% for tag in categories %} - {% set key = tag | first %} - {% set count = tag | last %} +

    {{ title }}

    +
      + {% for category in collections.categories %}
    1. - {{ key }} {{ count }} + {{ category.title }} {{ category.count }}
    2. {% endfor %}