Group tag posts by year

[davidakennedy]

Hey everyone,

I haven't done much custom stuff with Eleventy, and am stuck on something. I'd like to group tag posts by year on the tag archive pages. I'm currently doing this with regular posts, thanks to this code. My tag archives are currently set up like the default setup in Eleventy Base Blog.

Can I use the postsByYear custom collection to paginate the tag archive? Or should I create another custom collection?

Thanks for the help!

[pdehaan]

Maybe I'm a bit uncertain on what you're trying to build.
Are you saying you want a tag archive page with year separators?
Or are you trying to do some more complex pagination where each tag archive has sub pages for each year's posts?

[pdehaan]

Ah, was a bit tricker than I expected, but here was my rough attempt at creating a year/post map with a single loop (although it also uses Object.values() and Array#sort(), so maybe it's silly):

/**
 * @typedef {import('@11ty/eleventy/src/UserConfig')} EleventyConfig
 * @typedef {ReturnType<import('@11ty/eleventy/src/defaultConfig')>} EleventyReturnValue
 * @type {(eleventyConfig: EleventyConfig) => EleventyReturnValue}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("groupByYear", function (pages = []) {
    const pagesMap = {};
    for (const page of [...pages]) {
      const pageYear = page.date.getFullYear();
      const yearlyPosts = pagesMap[pageYear] || [pageYear, []];
      yearlyPosts[1].push(page);
      pagesMap[pageYear] = yearlyPosts;
    }

    return Object.values(pagesMap)
      // Sort the year map in descending order.
      .sort(([year1], [year2]) => year2 - year1);
  });

  eleventyConfig.addFilter("toDateString", function (date) {
    return new Date(date).toLocaleDateString();
  });

  eleventyConfig.addFilter("inspect", require("node:util").inspect);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

USAGE (LiquidJS)

{%- assign groupedPosts = collections.posts | reverse | groupByYear -%}
{% for arr in groupedPosts %}
  {%- assign year = arr[0] -%}
  {%- assign posts = arr[1] -%}
  <section data-year="{{ year }}" data-count="{{ posts.length }}">
    <h1>{{ year }}</h1>
    <ul>
    {% for post in posts %}
      <li>{{ post.data.title }} on {{ post.date | toDateString }}</li>
    {% endfor %}
    </ul>
  </section>
{% endfor %}

USAGE (Nunjucks)

{% for year, posts in collections.posts | reverse | groupByYear %}
  <section data-year="{{ year }}" data-count="{{ posts.length }}">
    <h1>{{ year }}</h1>
    <ul>
    {% for post in posts -%}
      <li>{{ post.data.title }} on {{ post.date | toDateString }}</li>
    {% endfor -%}
    </ul>
  </section>
{% endfor %}

OUTPUT

  <section data-year="2023" data-count="1">
    <h1>2023</h1>
    <ul>
      <li>ThReE on 2023-03-12</li>
    </ul>
  </section>

  <section data-year="2022" data-count="2">
    <h1>2022</h1>
    <ul>
      <li>tWo on 2022-02-21</li>
      <li>oNe on 2022-01-30</li>
    </ul>
  </section>

  <section data-year="2016" data-count="1">
    <h1>2016</h1>
    <ul>
      <li>SeVeN on 2016-06-26</li>
    </ul>
  </section>

  <section data-year="2015" data-count="2">
    <h1>2015</h1>
    <ul>
      <li>SiX on 2015-06-15</li>
      <li>FiVe on 2015-05-24</li>
    </ul>
  </section>

  <section data-year="2014" data-count="2">
    <h1>2014</h1>
    <ul>
      <li>EiGhT on 2014-08-17</li>
      <li>FoUr on 2014-04-13</li>
    </ul>
  </section>

[davidakennedy]

Huge thanks, @pdehaan! I was able to use this code as intended for both my blog archive and tag archive (example tag).

I don't think I would have gotten to a solution like this on my own. Still learning the ins and outs of both JavaScript and how Eleventy manages data. It's super elegant too since I can use this with any collection. Going to study this more so I can learn!

[pdehaan]

Bah, you already had all the code, I just shuffled it slightly. #teamwork

[pdehaan]

OH, i forgot to update on reusing filters...

// .eleventy.js snippet
  eleventyConfig.addFilter("groupByYear", function (pages = []) {
    const pagesMap = {};
    for (const page of [...pages]) {
      const pageYear = page.date.getFullYear();
      const yearlyPosts = pagesMap[pageYear] || [pageYear, []];
      yearlyPosts[1].push(page);
      pagesMap[pageYear] = yearlyPosts;
    }

    return Object.values(pagesMap)
      // Sort the year map in descending order.
      .sort(([year1], [year2]) => year2 - year1);
  });

  eleventyConfig.addCollection("thingsByYear", function (collectionApi) {
    const groupByYear = eleventyConfig.getFilter("groupByYear");
    const pages = collectionApi.getFilteredByTag("thing");
    return groupByYear(pages);
  });

So above your custom collection can reuse your groupByYear filter by using the eleventyConfig.getFilter() API. Makes the code a bit more reusable if you need to share the same code between filters and collections, or multiple custom collections, etc.

Or you can go a bit further and create a helper function for your custom collections which takes a tag name and returns the collection creation function:

  function addGroupedCollection(tag = "") {
    const groupByYear = eleventyConfig.getFilter("groupByYear");
    return (collectionApi) => {
      const pages = [...collectionApi.getFilteredByTag(tag)];
      return groupByYear(pages);
    };
  }
  eleventyConfig.addCollection("a11yByYear", addGroupedCollection("a11y"));

Possibly not helpful or useful in this exact case, but can be nice to know that it's an option if you need it in the future^(tm).

[davidakennedy]

Super helpful, thanks for the explanations!