{"id":3539,"date":"2024-11-02T22:52:06","date_gmt":"2024-11-02T21:52:06","guid":{"rendered":"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/"},"modified":"2024-11-02T22:52:06","modified_gmt":"2024-11-02T21:52:06","slug":"eleventy-11ty-year-year-month-and-year-month-day-indexes","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/","title":{"rendered":"Eleventy (11ty) year, year-month, and year-month-day indexes"},"content":{"rendered":"\n\t\t\t<p>I love hackable URLs. A hackable URL is a URL that makes sense to a human reader, and where the human reader can guess what to change to get to another page. For example, if you look at the URL of this very blog post, <a href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/\"><code>https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/<\/code><\/a>, what would you expect happens if you hack the URL to any of the following values?<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/\"><code>https:\/\/blog.tomayac.com\/2024\/11\/02\/<\/code><\/a> lists all posts that were published on November 2, 2024.<\/li>\n<li><a href=\"https:\/\/blog.tomayac.com\/2024\/11\/\"><code>https:\/\/blog.tomayac.com\/2024\/11\/<\/code><\/a> lists all posts that were published in November, 2024.<\/li>\n<li><a href=\"https:\/\/blog.tomayac.com\/2024\/\"><code>https:\/\/blog.tomayac.com\/2024\/<\/code><\/a> lists all posts that were published in 2024.<\/li>\n<li><a href=\"https:\/\/blog.tomayac.com\/\"><code>https:\/\/blog.tomayac.com\/<\/code><\/a> leads to this blog's home.<\/li>\n<\/ul>\n<h2 id=\"eleventy-js\" tabindex=\"-1\"><code>.eleventy.js<\/code> <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#eleventy-js\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>If you have a URL structure that's similar to mine, feel free to copy the relevant excerpts quoted in the following snippet from <a href=\"https:\/\/github.com\/tomayac\/blogccasion\/blob\/main\/.eleventy.js\">my <code>.eleventy.js<\/code><\/a> and add them to your <code>.eleventy.js<\/code>:<\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">\/\/ Year collection<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addCollection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'postsByYear'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collection<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> _<span class=\"token punctuation\">.<\/span><span class=\"token function\">chain<\/span><span class=\"token punctuation\">(<\/span>collection<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAllSorted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'tags'<\/span> <span class=\"token keyword\">in<\/span> item<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">&amp;&amp;<\/span> item<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>tags<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'posts'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">groupBy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">post<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getFullYear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">toPairs<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">reverse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">value<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Year \/ Month collection<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addCollection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'postsByYearMonth'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collection<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> _<span class=\"token punctuation\">.<\/span><span class=\"token function\">chain<\/span><span class=\"token punctuation\">(<\/span>collection<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAllSorted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'tags'<\/span> <span class=\"token keyword\">in<\/span> item<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">&amp;&amp;<\/span> item<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>tags<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'posts'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">groupBy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">post<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> year <span class=\"token operator\">=<\/span> post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getFullYear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> month <span class=\"token operator\">=<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getMonth<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>year<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>month<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">toPairs<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">reverse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">value<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Year \/ Month \/ Day collection<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addCollection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'postsByYearMonthDay'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collection<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> _<span class=\"token punctuation\">.<\/span><span class=\"token function\">chain<\/span><span class=\"token punctuation\">(<\/span>collection<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAllSorted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">item<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token string\">'tags'<\/span> <span class=\"token keyword\">in<\/span> item<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">&amp;&amp;<\/span> item<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>tags<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'posts'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">groupBy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">post<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">const<\/span> year <span class=\"token operator\">=<\/span> post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getFullYear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> month <span class=\"token operator\">=<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getMonth<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">const<\/span> day <span class=\"token operator\">=<\/span> <span class=\"token function\">String<\/span><span class=\"token punctuation\">(<\/span>post<span class=\"token punctuation\">.<\/span>date<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'0'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>year<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>month<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>day<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">toPairs<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">reverse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">value<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Helper filter to format month names<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addFilter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'monthName'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">monthNum<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> date <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2000<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">parseInt<\/span><span class=\"token punctuation\">(<\/span>monthNum<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">-<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> date<span class=\"token punctuation\">.<\/span><span class=\"token function\">toLocaleString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'en-US'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">month<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'long'<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Helper filters for parsing date parts<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addFilter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getYear'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">dateStr<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> dateStr<span class=\"token punctuation\">.<\/span><span class=\"token function\">split<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addFilter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getMonth'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">dateStr<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> dateStr<span class=\"token punctuation\">.<\/span><span class=\"token function\">split<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\neleventyConfig<span class=\"token punctuation\">.<\/span><span class=\"token function\">addFilter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'getDay'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">dateStr<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> dateStr<span class=\"token punctuation\">.<\/span><span class=\"token function\">split<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<h2 id=\"nunjucks-templates\" tabindex=\"-1\">Nunjucks templates <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#nunjucks-templates\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>Then, in your blog's root, add three files:<\/p>\n<ul>\n<li><code>year-index.njk<\/code><\/li>\n<li><code>year-month-index.njk<\/code><\/li>\n<li><code>year-month-day-index.njk<\/code><\/li>\n<\/ul>\n<p>They're all three pretty similar, but for the sake of completeness, here are all three.<\/p>\n<h3 id=\"year-index-njk\" tabindex=\"-1\"><code>year-index.njk<\/code>: <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#year-index-njk\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<pre class=\"language-nunjucks\"><code class=\"language-nunjucks\"><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n<span class=\"token variable\">pagination<\/span><span class=\"token punctuation\">:<\/span>\n  <span class=\"token variable\">data<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYear<\/span>\n  <span class=\"token variable\">size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span>\n  <span class=\"token variable\">alias<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">year<\/span>\n<span class=\"token variable\">layout<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">layouts<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">home<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">njk<\/span>\n<span class=\"token variable\">permalink<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token operator\">\/<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">year<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">\/<\/span>\n<span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n\n<span class=\"token operator\">&lt;<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">year<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token variable\">Archive<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span>\n\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">postedYear<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">yearPosts<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYear<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">postedYear<\/span> <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> <span class=\"token variable\">year<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">ul<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">post<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">yearPosts<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">reverse<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">li<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-item{% if post.url == url %} postlist-item-active{% endif %}\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">a<\/span> <span class=\"token variable\">href<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.url | url }}\"<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-link\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">url<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">a<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">time<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-date\"<\/span> <span class=\"token variable\">datetime<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.date | htmlDateString }}\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">date<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">readableDate<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">time<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">li<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">ul<\/span><span class=\"token operator\">><\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h3 id=\"year-month-index-njk\" tabindex=\"-1\"><code>year-month-index.njk<\/code>: <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#year-month-index-njk\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<pre class=\"language-nunjucks\"><code class=\"language-nunjucks\"><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n<span class=\"token variable\">pagination<\/span><span class=\"token punctuation\">:<\/span>\n  <span class=\"token variable\">data<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYearMonth<\/span>\n  <span class=\"token variable\">size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span>\n  <span class=\"token variable\">alias<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">yearMonth<\/span>\n<span class=\"token variable\">layout<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">layouts<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">home<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">njk<\/span>\n<span class=\"token variable\">permalink<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token operator\">\/<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonth<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">\/<\/span>\n<span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n\n<span class=\"token operator\">&lt;<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonth<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">getMonth<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">monthName<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonth<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">getYear<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token variable\">Archive<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span>\n\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">postedYearMonth<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">monthPosts<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYearMonth<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">postedYearMonth<\/span> <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> <span class=\"token variable\">yearMonth<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">ul<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">post<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">monthPosts<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">reverse<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">li<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-item{% if post.url == url %} postlist-item-active{% endif %}\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">a<\/span> <span class=\"token variable\">href<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.url | url }}\"<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-link\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">url<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">a<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">time<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-date\"<\/span> <span class=\"token variable\">datetime<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.date | htmlDateString }}\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">date<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">readableDate<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">time<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">li<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">ul<\/span><span class=\"token operator\">><\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h3 id=\"year-month-day-index-njk\" tabindex=\"-1\"><code>year-month-day-index.njk<\/code>: <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#year-month-day-index-njk\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<pre class=\"language-nunjucks\"><code class=\"language-nunjucks\"><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n<span class=\"token variable\">pagination<\/span><span class=\"token punctuation\">:<\/span>\n  <span class=\"token variable\">data<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYearMonthDay<\/span>\n  <span class=\"token variable\">size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span>\n  <span class=\"token variable\">alias<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">yearMonthDay<\/span>\n<span class=\"token variable\">layout<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token variable\">layouts<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">home<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">njk<\/span>\n<span class=\"token variable\">permalink<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token operator\">\/<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonthDay<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">\/<\/span>\n<span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">-<\/span>\n\n<span class=\"token operator\">&lt;<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonthDay<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">getMonth<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">monthName<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonthDay<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">getDay<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">yearMonthDay<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">getYear<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token variable\">Archive<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">h2<\/span><span class=\"token operator\">><\/span>\n\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">postedYearMonthDay<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">dayPosts<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">collections<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">postsByYearMonthDay<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">postedYearMonthDay<\/span> <span class=\"token operator\">==<\/span><span class=\"token operator\">=<\/span> <span class=\"token variable\">yearMonthDay<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">ul<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">for<\/span> <span class=\"token variable\">post<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token variable\">dayPosts<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">reverse<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">li<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-item{% if post.url == url %} postlist-item-active{% endif %}\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">a<\/span> <span class=\"token variable\">href<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.url | url }}\"<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-link\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">data<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">title<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">url<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">code<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">a<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token variable\">time<\/span> <span class=\"token variable\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"postlist-date\"<\/span> <span class=\"token variable\">datetime<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"{{ post.date | htmlDateString }}\"<\/span><span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token variable\">post<\/span><span class=\"token punctuation\">.<\/span><span class=\"token variable\">date<\/span> <span class=\"token operator\">|<\/span> <span class=\"token variable\">readableDate<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">time<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">li<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span><span class=\"token variable\">ul<\/span><span class=\"token operator\">><\/span>\n  <span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endif<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">{<\/span><span class=\"token operator\">%<\/span> <span class=\"token variable\">endfor<\/span> <span class=\"token operator\">%<\/span><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<h2 id=\"helped-by-ai\" tabindex=\"-1\">Helped by AI <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#helped-by-ai\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>And here's my dirty, little secret \ud83e\udd2b: I only actually coded <code>year-index.njk<\/code> myself, and then asked <a href=\"https:\/\/claude.ai\/\">Claude<\/a> to code the rest for me.<\/p>\n<h3 id=\"initial-prompt\" tabindex=\"-1\">Initial prompt <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#initial-prompt\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<pre><code>I have a blog built with Eleventy. It uses a URL structure\nthat is https:\/\/blog.tomayac.com\/$year\/$month\/$day\/$title\/.\nFor example, https:\/\/blog.tomayac.com\/2024\/08\/26\/my-response-to-the-cma\/.\n\nI already have a way to list all posts published in a year by\nnavigating to https:\/\/blog.tomayac.com\/$year\/. Now I want two\nlevels deeper and get first https:\/\/blog.tomayac.com\/$year\/$month\/,\nthat is, all posts published in a given month, and\nhttps:\/\/blog.tomayac.com\/$year\/$month\/$day\/, that is, all posts\npublished on a given year.\n\nFor the year index, this is how I got it to work:\n\nIn .eleventy.js:\neleventyConfig.addCollection('postsByYear', (collection) =&gt; {\n    return _.chain(collection.getAllSorted())\n      .filter((item) =&gt; 'tags' in item.data &amp;&amp; item.data.tags.includes('posts'))\n      .groupBy((post) =&gt; post.date.getFullYear())\n      .toPairs()\n      .reverse()\n      .value();\n  });\n\nAnd then a Nunjucks file year-index.njk:\n\n---\npagination:\n  data: collections.postsByYear\n  size: 1\n  alias: year\nlayout: layouts\/home.njk\npermalink: \/{{ year[0] }}\/\n---\n&lt;h2&gt;{{ year[0] }} Archive&lt;\/h2&gt;\n{% for postedYear, yearPosts in collections.postsByYear %}\n  {% if postedYear === year[0] %}\n  &lt;ul class=&quot;postlist&quot;&gt;\n    {% for post in yearPosts | reverse %}\n      &lt;li class=&quot;postlist-item{% if post.url == url %} postlist-item-active{% endif %}&quot;&gt;\n        &lt;a href=&quot;{{ post.url | url }}&quot; class=&quot;postlist-link&quot;&gt;{% if post.data.title %}{{ post.data.title }}{% else %}&lt;code&gt;{{ post.url }}&lt;\/code&gt;{% endif %}&lt;\/a&gt;\n        &lt;time class=&quot;postlist-date&quot; datetime=&quot;{{ post.date | htmlDateString }}&quot;&gt;{{ post.date | readableDate }}&lt;\/time&gt;\n      &lt;\/li&gt;\n    {% endfor %}\n  &lt;\/ul&gt;\n  {% endif %}\n{% endfor %}\n\nCan you create the rest?\n<\/code><\/pre>\n<h3 id=\"correcting-prompt\" tabindex=\"-1\">Correcting prompt <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#correcting-prompt\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h3>\n<p>It worked on the second attempt. In the first attempt, it invented a <code>split<\/code> Nunjucks filter, so I just told it about the error, and after that it just worked.<\/p>\n<pre><code>This fails now:\nError: filter not found: split (via Template render error)\n<\/code><\/pre>\n<h2 id=\"conclusion\" tabindex=\"-1\">Conclusion <a class=\"direct-link\" href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/#conclusion\" aria-hidden=\"true\">\ud83d\udd17<\/a><\/h2>\n<p>There may be more elegant ways to achieve this, but this approach is what worked for me, and, hey, it all happens on the server at build time, so you, dear reader, get just the optimized HTML. Happy URL hacking! Oh, and whatever happened on <a href=\"https:\/\/blog.tomayac.com\/2009\/03\/03\">March 3, 2009<\/a>?<\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2024%2F11%2F02%2Feleventy-11ty-year-year-month-and-year-month-day-indexes%2F&dp=%2F2024%2F11%2F02%2Feleventy-11ty-year-year-month-and-year-month-day-indexes%2F&dt=Eleventy%20(11ty)%20year%2C%20year-month%2C%20and%20year-month-day%20indexes\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/\">https:\/\/blog.tomayac.com\/2024\/11\/02\/eleventy-11ty-year-year-month-and-year-month-day-indexes\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tI love hackable URLs. A hackable URL is a URL that makes sense to a human reader, and where the human reader can guess what to change to get to another page. For example, if you look at the URL of this very blog post, https:\/\/blog.tomayac.com\/2024\/&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3539","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3539"}],"version-history":[{"count":3,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3539\/revisions"}],"predecessor-version":[{"id":3559,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3539\/revisions\/3559"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}