Organising content into a set of pages with a calendar type structure

[mjgs]

I'm trying to figure out a way to create a set of pages that organise content into a calendar type structure.

/archives/2020/01/01/index.html - Has all the posts from that day /archives/2020/01/index.html - Has all the posts from that month /archives/2020/index.html - Has all the posts from that year

I've tried using pagination with permalinks to specify the output path, but only got as far as generating the pages for the years because I don't see a way to do multi-level pagination, so there isn't a way to set the month or day in the permalink.

My ejs template front matter looks like this:

---
permalink: "/archives/<%= pagination.items[pagination.pageNumber] %>/index.html"
pagination:
  data: archives
  size: 1
---

Posts info is in a _data global called archives that looks like:

archives: {
  '2020': {
    '01': {
      '01': [ {}, {} ]
    },
  }
}

I could change the post data structure if that makes it easier in some way.

Is pagination the way to do this or should I be using tags or collections or something else?

[edwardhorsford]

Hi @mjgs, I do this on my personal website. You can see an example here.

I documented how I achieved it in this post. Essentially I create a custom collection for posts grouped by year, and for posts grouped by month. And then paginate on each. Individual posts are then rendered at foo.com/yyyy/mm/post-name. I don't go down to the day of the month as I don't post so often to need it.

With your data, I think you'll want to create at least 3 custom collections - one for years, one for months, and one with days.

You'll want to remap your data so it's not so nested. Something like:

yearArchives: {
  '2020': [{},{}],
  '2019': [{},{}]
}

monthArchives: {
  '2020/02': [{},{}],
  '2020/01': [{},{}]
}

dayArchives: {
  '2020/01/02': [{},{}],
  '2020/01/01': [{},{}]
}

Hope this helps.

[mjgs]

@edwardhorsford Thanks for the tips and code samples, and especially how to structure the data, using the full date including the slashes as the key hadn't occurred to me, which is why I had all the nesting...but of course they are just strings after all. Your technique which I had read in another 11ty github issue, now makes a lot more sense to me.

In the interim I've gone ahead and written my own mini static site generator for my specific use case, but if I get a chance I'll circle back around and try this out because 11ty has quite a lot of interesting features that I'd like to use.

[edwardhorsford]

@mjgs cool, no worries.

One other thing - Eleventy supports using filters within permalinks. So instead of having slashes within the key, you could have some other date format that you then use a filter to convert to yyyy/mm, etc.

[nhoizey]

You now have this solution provided by @tomayac: https://blog.tomayac.com/2024/11/02/eleventy-11ty-year-year-month-and-year-month-day-indexes/