Can I programmatically compose tags as front-matter?

[ed-ponce]

I want to create collections for every pagination page based on the pagination template fileSlug. For that, I’m setting a tag based on the template’s file name as front-matter defaults through the directory data file, like so:

/src
  └─ /collections
      ├─ collections.json
      └─ articles.liquid

// collections.json
{
  "eleventyComputed": {
    "tags": "{{ page.fileSlug }}"
  }
}

// articles.liquid
---
pagination:
  alias: article
  data: shop.articles
  size: 1
  addAllPagesToCollections: true
eleventyComputed:
  title: "{{ article.title }}"
permalink: "/{{ page.fileSlug }}/{{ article.id }}/"
---

The page.fileSlug variable won’t render anything when put in the directory data front-matter defaults context. A problem not present for the template’s front-matter; title and permalink compute properly.

[pdehaan]

Hhmm, good questions!
Yes, you should be able to set tags dynamically in eleventyComputed with a few notable catches:

1. Dynamically set tags won't automatically create collections.
2. JSON data files might not support page variables, you might need to use a collections.11tydata.js data file and use the function version of eleventyComputed variables.

Let me see if I can create a quick sample which might get you started…

[pdehaan]

.eleventy.js

/**
 * @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("keys", Object.keys);

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

src/_data/shop/articles.json

[
  {
    "id": "One",
    "title": "Page One",
    "tags": ["possum"]
  },
  {
    "id": "Two",
    "title": "Page Two"
  }
]

src/collections/articles.liquid

---
pagination:
  alias: article
  data: shop.articles
  size: 1
  addAllPagesToCollections: true
eleventyComputed:
  title: "{{ article.title }}"
permalink: "/{{ page.fileSlug }}/{{ article.id }}/"
---

title={{ article.title }}
id={{ article.id }}
tags={{ tags | json }}
page.fileSlug={{ page.fileSlug }}

collections={{ collections | keys | json }}

src/collections/collections.11tydata.js

module.exports = {
  eleventyComputed: {
    tags(data) {
      const aliasName = data.pagination?.alias;
      const tagSet = new Set(data[aliasName]?.tags);
      tagSet.add(data.page.fileSlug);
      return [...tagSet].sort();
    }
  }
};

OUTPUT

www/articles/One/index.html

title=Page One
id=One
tags=["articles","possum"]
page.fileSlug=articles

collections=["all"]

www/articles/Two/index.html

title=Page Two
id=Two
tags=["articles"]
page.fileSlug=articles

collections=["all"]

---

As mentioned earlier, dynamically set tags won't auto-create collections, so when we output collections={{ collections | keys | json }}, we only see a collections.all and no collections.articles (or collections.possum, since we also dynamically set article One's tags to ["possum"] in src/_data/shop/articles.json (and then merged it with ["articles"] in our directory data file.

[pdehaan]

If you WANT the auto collection creation, you could also set the tags[] directly in src/collections/articles.liquid:

---
pagination:
  alias: article
  data: shop.articles
  size: 1
  addAllPagesToCollections: true
eleventyComputed:
  title: "{{ article.title }}"
permalink: "/{{ page.fileSlug }}/{{ article.id }}/"
+tags:
+  - articles
---
...

That way you should get the following output:

title=Page One
id=One
tags=["articles"]
page.fileSlug=articles

collections=["all","articles"]

[ed-ponce]

Thank you Peter 🙏

In such case, we’re back to square one. Not creating collections based on computed tags should either be reported as a bug or disclaimed as a feature in the documentation, probably.

[pdehaan]

Pretty sure there are multiple issues already for dynamic tags not auto-creating collections; #1059 for example.

But the workaround for your case is pretty easy, just add tags: ["articles"] front matter to your articles.liquid file and it will add all the paginated articles to an "collections.articles" collection.