GlobalDataFile -> to pages with diferent tags each?

[VanEpicOfficial]

I would like to generate pages based on a global data file.
My global datafile is an array with metadata about each page which also includes the tags for each page.
How can i generate pages with tags? from a global data file?
I don't think that is possible? i am not sure so please let me know how you would do this.

Here is what I am thinking:
Use a process outside of 11ty to generate a bunch of .md or .njk files based on a master JSON file, that way each file generated will be populated with appropriate tag for each .md file, then run 11ty to generate the html and all re corresponding tags folder.

I know is kindda crazy to create a process/script outside of 11ty, but i am hopping there is a way to do what i want inside 11ty itself.

Thank you.

[pdehaan]

You can't easily set tags dynamically. Or more accurately, they get set, but the collections won't get automatically created/populated.
One "solution" I've used is to dynamically set the tags using pagination and then create the collections manually in my .eleventy.js (or eleventy.config.js) file using addCollection() and looping over the tags I want to create collections for.

[VanEpicOfficial]

how do i dynamically set the tags using pagination?

[pdehaan]

I'd need to create a test repo, but something along the lines of this [hopefully close] pseudo code:

eleventyConfig.addCollection("blog", function (collectionApi) {
  return collectionApi.getFilteredByTags("blog");
});

So the trick might be finding the unique set of tags from your global data file, then looping over the above code to set a dynamic collection name and tag list for each entry.

[pdehaan]

OK, here's a rough example of a concept of an idea:

eleventy.config.js

const posts = require("./src/_data/posts");

const tagSet = posts.reduce((acc, p) => {
  p.tags?.forEach(t => acc.add(t));
  return acc;
}, new Set());

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  for (const t of tagSet) {
    eleventyConfig.addCollection(t, (collectionApi) => collectionApi.getFilteredByTags(t));
  }

  // eleventyConfig.addFilter("keys", Object.keys);
  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

src/_pagination.njk

---
# see _pagination.11tydata.js
---

<h1>{{ p.title }}</h1>

src/_pagination.11tydata.js

module.exports = {
  pagination: {
    data: "posts",
    size: 1,
    alias: "p",
    addAllPagesToCollections: true,
  },
  // Dynamically set some data based on the paginated data file...
  eleventyComputed: {
    permalink(data) {
      return this.slugify(data.p.title) + "/";
    },
    tags(data) {
      return data.p.tags ?? [];
    },
    title(data) {
      return data.p.title;
    }
  },
};

src/index.njk

collections=<pre>{{ collections | keys | sort }}</pre>

<h2>{{ collections.b | length }}</h2>
{% for p in collections.b %}
  <p>{{ p.data.title }}</p>
{% endfor %}

src/_data/posts.js

module.exports = [
  {title: "One", tags: ["a", "b", "c"]},
  {title: "Two", tags: ["c", "d"]},
  {title: "Three", tags: ["a", "d"]},
  {title: "Four", tags: ["b"]},
];

OUTPUT

> eleventy

[11ty] Writing www/index.html from ./src/index.njk
[11ty] Writing www/one/index.html from ./src/_pagination.njk
[11ty] Writing www/two/index.html from ./src/_pagination.njk
[11ty] Writing www/three/index.html from ./src/_pagination.njk
[11ty] Writing www/four/index.html from ./src/_pagination.njk
[11ty] Wrote 5 files in 0.04 seconds (v2.0.1)

www/index.html

collections=<pre>a,all,b,c,d</pre>

<h2>2</h2>

<p>One -- ["a","b","c"]</p>
<p>Four -- ["b"]</p>