collections api - add collections dynamically

[opheliagame]

I have a list of tags and I want to create a collection for each of those dynamically, but it does not seem to be working with what I am doing currently.

Here is a stackblitz example, with line 63-84 demonstrating the issue I am having.

Is there any way to do this, or am I doing something wrong?

[pdehaan]

I've never gotten nested .addCollection() calls to work.
The way I've done it in the past is by looping over an array of items in my .eleventy.js config file and just calling .addCollection() within the loop. So not sure if you can get around the nested .addCollection() by require()ing https://stackblitz.com/edit/11ty-dteq28?file=_data%2F_github.js and then looping over the .tags property directly to add your dynamic collections.

[cfjedimaster]

Can you share your entire .eleventy.js? I struggled with getting access to data from the addCollection call available "outside".

[pdehaan]

@cfjedimaster Looks like this (with a lot of unrelated stuff cut out to avoid a ~150 line code dump). Added stuff is in the START CHANGES...END CHANGES section.

const { DateTime } = require('luxon');
const fs = require('fs');
const pluginRss = require('@11ty/eleventy-plugin-rss');
const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
const pluginNavigation = require('@11ty/eleventy-navigation');
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');

module.exports = function (eleventyConfig) {
  // ...

  // Create an array of all tags
  eleventyConfig.addCollection('tagList', function (collection) {
    let tagSet = new Set();
    collection.getAll().forEach((item) => {
      (item.data.tags || []).forEach((tag) => tagSet.add(tag));
    });

    return [...tagSet];
  });



  // ---------- START CHANGES ---------- //
  const result = require("./_data/_github");
  const tags = result.tags;
    
  tags.map((tag) => {
    eleventyConfig.addCollection(tag, (collection) => {
      return result.repos.filter(repo => repo.tags?.includes(tag));
    });
  });

  eleventyConfig.addFilter("inspect", require("node:util").inspect);
  // ---------- END CHANGES ---------- //



  // Copy the `img` and `css` folders to the output
  eleventyConfig.addPassthroughCopy('img');
  eleventyConfig.addPassthroughCopy('css');

  // ...

  return {
    // Control which files Eleventy will process
    // e.g.: *.md, *.njk, *.html, *.liquid
    templateFormats: ['md', 'njk', 'html', 'liquid'],

    // -----------------------------------------------------------------
    // If your site deploys to a subdirectory, change `pathPrefix`.
    // Don’t worry about leading and trailing slashes, we normalize these.

    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
    // This is only used for link URLs (it does not affect your file structure)
    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/

    // You can also pass this in on the command line using `--pathprefix`

    // Optional (default is shown)
    pathPrefix: '/',
    // -----------------------------------------------------------------

    // Pre-process *.md files with: (default: `liquid`)
    markdownTemplateEngine: 'njk',

    // Pre-process *.html files with: (default: `liquid`)
    htmlTemplateEngine: 'njk',

    // Opt-out of pre-processing global data JSON files: (default: `liquid`)
    dataTemplateEngine: false,

    // These are all optional (defaults are shown):
    dir: {
      input: '.',
      includes: '_includes',
      data: '_data',
      output: '_site',
    },
  };
};

[opheliagame]

this works perfectly <3

[cfjedimaster]

@opheliagame - can you update the original StackOverflow question you started with the resolution?

[opheliagame]

@cfjedimaster yes i should, thanks!

[cfjedimaster]

What if - in the eleventyConfig.addCollection('github', (collection) => { block, you only keep a list of collections to add.

Then after that call, you loop over the list and add the collections then?

[cfjedimaster]

Um nevermind - that doesn't seem to work because ad hoc code outside of Eleventy config methods run before they do.