I love 11ty's data cascade

written by druskus
on the 25th of March 2025

11ty

This is an example of why I went back to 11ty after trying out Zola for a while.

The structure of my looks something like this:

txt

content
├── index.html
└── posts
    ├── index.html
    ├── posts.11tydata.js
    └── my-post
        └── index.md

I wanted to display a list of articles on the posts/index.html page, the pages should be sorted by date.

Each article has a header like this:

markdown

---
title: "Really funny joke"
date: 2015-03-14
---

The plan is to create a web component that will iterate over the articles and display them in a list.

html

<ul webc:for="year of {Object.keys(postsByYear).sort((a, b) => b - a)}">
  <li>
    <strong @text="year"></strong>
    <ul>
      <li webc:for="post of {postsByYear[year]}">
        <span @text="post.day"></span> of <span @text="post.month"></span> <span @text="post.year"></span>
        <a :href="post.url">
          <span webc:nokeep @text="post.title"></span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Now I need to feed the dates into the web component. I can do this by creating a <script> tag. Excuse my horrible JavaScript skills.

javascript

<script webc:setup>
  const postsByYear = $data.collections.post.reduce((acc, post) => {

    const post_data = {
      // TODO
    }

    const year = post.data.date_obj.year;
    if (!acc[year]) acc[year] = [];
    acc[year].push(post_data);
    return acc;
  }, {});

  Object.keys(postsByYear).forEach(year => {
    postsByYear[year].sort((a, b) => {
      // TODO
    });
  });
</script>

I could parse the date in the web component, but what if I also want to display it in my article page?. 11ty's data cascade solves this elegantly. I can add a posts.11tydata.js file in the posts directory, which will be merged with the front matter of each article. This is called a Directory Specific Data File . This file could also be YAML or any other supported format (and you can extend 11ty with your own too!).

javascript

export default function() {
  const format_day = (day) => {
    const suffixes = ["st", "nd", "rd", "th"];
    const j = day % 10;
    const k = day % 100;
    const suffix = (j === 1 && k !== 11) ? suffixes[0] : (j === 2 && k !== 12) ? suffixes[1] : (j === 3 && k !== 13) ? suffixes[2] : suffixes[3];
    return day + suffix;
  }

  return {
    eleventyComputed: {
      date_obj: (data) => {
        const date = new Date(data.page.date.toString());
        const year = date.getFullYear();
        const month_str = date.toLocaleString('en-US', { month: 'long' });
        const day = date.getDate();
        return {
          year: year,
          month_str: month_str,
          day: day,
          day_pretty: format_day(day),
        }
      }
    },

    // Other fields
    tags: "post",
    // ...
  };
}

It is important to note that we must use eleventyComputed, Computed data is a way to insert data at the end of the data cascade. We cannot do it otherwise, because our date field comes from the front matter of the article.

Now finally, we can use the date_obj field in our web component.

html

<script webc:setup>
    // ...

    const post_data = {
      title: post.data.title,
      year: post.data.date_obj.year,
      month: post.data.date_obj.month_str,
      day: post.data.date_obj.day_pretty,
      url: post.url,
      /* actual date != file creation date */
      actual_date: post.data.page.date
    }

    // ...

  Object.keys(postsByYear).forEach(year => {
    postsByYear[year].sort((a, b) => {
      return new Date(b.actual_date) - new Date(a.actual_date);
    });
  });
</script>

And voilà! My list of articles renders nicely and with a nice format like 14th of March 2015.

I love the flexibility that the data cascade provides. Everytime I try to do something, similar on a different static site generator, I find myself limited by the templating engine, and end up with a pile of half-working, hacky shortcodes.

Overall, I am very happy that I went back to 11ty.