How to have *.11tydata.js file define different data for its different sub-folders?

[BorisAnthony]

Hi, first time asker. Second time wrangling an 11ty site. 😅

I'm hoping to have a content folder structure like this:

content
- studio
-- writing
-- readings
-- about

The files (templates) in each of the 3 subdirs of studio should get their own tags, permalinks and (especially) templates values which of course affect them at build time beyond just being available in the templates.

The reason for this is I don't want to (can't?) have *.11tydata.js files in those directories.

Ideally, I'd have content.11tydata.js define different data (tags, permalinks, templates) for each folder.

I had hoped it'd be as simple as

module.exports = {
  writing: {
    tags: ["writing"],
    layout: "layouts/writing.njk",
    permalink: "{{ page.filePathStem }}/index.htm",
  }
};

But that wasn't the case. I'm guessing some sort of function? But what can I pass in and match against? Each directory also has a collection configured via CollectionsAPI so perhaps that? But… how?

I tried

module.exports = function (collections) {
  if (collections.writing) {
    return {
      tags: ["writing"],
      layout: "layouts/writing.njk",
      permalink: "{{ page.filePathStem }}/index.htm",
    };
  }
};

But that didn't do anything either (didn't error out either though heh)

(Ideally, I wouldn't do this with if/else or case switching but just taking the collection name and inserting it. That alone would serve my purposes probably).

I'm just getting my legs with JS, so, sorry if this is dead obvious! Thanks in advance for any help!

[pdehaan]

I think it's possible, but it's overly complex and I'd suggest just using nested directory data files since it is a lot clearer and requires significantly less code/workarounds:

content/studio/about/about.11tydata.js
content/studio/readings/readings.11tydata.js
content/studio/writing/writing.11tydata.js

In my src/content/content.11tydata.js file I had to use eleventyComputed and then try and infer the directory from the filePathStem, and then dynamically set the tags[], layout, and permalink:

module.exports = {
  eleventyComputed: {
    tags(data) {
      // This will dynamically create `tags[]` like `["content", "studio", "about"]`
      // (although see caveats about dynamically set tags not auto-creating collections).
      return baseDirFromFilePathStem(data.page.filePathStem);
    },

    layout(data) {
      // If the template specified a specific `layout` use that and exit early.
      if (data.layout) {
        return data.layout;
      }
      // `baseDirFromFilePathStem()` will return at most the first 4 directories/files,
      // but we only want the last one.
      const _layout = baseDirFromFilePathStem(data.page.filePathStem).at(-1);
      switch (_layout) {
        case "about":
        case "readings":
        case "writing":
          return _layout;
      }
      // HACK: Fall back to a default template if we didn't get our expected layout.
      return "base";
    },

    permalink(data) {
      // Had to special case this because sometimes your `page.filePathStem` is
      // `./src/content/studio/readings/index` which was causing unwanted filenames like 
      // `www/content/studio/readings/index/index.php`.
      if (data.page.filePathStem.endsWith("/index")) {
        return `${data.page.filePathStem}.php`;
      }
      return `${data.page.filePathStem}/index.php`;
    }
  },
};

function baseDirFromFilePathStem(filePathStem = "") {
  return filePathStem.split("/", 4).filter(Boolean);
}

But it gets weird fast since the site started breaking when I added a src/content/index.njk file since then it starts looking for a layout file named "_includes/layouts/index.njk" which didn't exist. So then I needed to do an explicit check for expected layouts based on directories and then default to a fallback layout.
Also, while you can dynamically set tags, they won't automatically create a collection. So you'll need to manually create collections in your eleventy.config.js file:

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  // Add layout alias for "_includes/layouts/base.njk" which is our default layout and is
  // extended by _includes/layouts/about.njk, etc.
  eleventyConfig.addLayoutAlias("base", "layouts/base.njk");

  ["about", "readings", "writing"].forEach(dir => {
    // Alias a layout named "about" to "_includes/layouts/about.njk".
    eleventyConfig.addLayoutAlias(dir, `layouts/${dir}.njk`);
    // Manually create our custom collections based on dynamically set tags. 
    // This will create collections named "about" based on templates that have both "content" and "about" tags.
    eleventyConfig.addCollection(dir, collectionApi => collectionApi.getFilteredByTags("content", dir));
  });

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

---

Sample repo: https://github.com/pdehaan/11ty-2997

Build log:

[11ty] Writing www/content/index.php from ./src/content/index.njk
[11ty] Writing www/content/studio/readings/books/index.php from ./src/content/studio/readings/books.njk
[11ty] Writing www/content/studio/readings/index.php from ./src/content/studio/readings/index.njk
[11ty] Writing www/content/studio/about/index.php from ./src/content/studio/about/index.njk
[11ty] Writing www/content/studio/writing/index.php from ./src/content/studio/writing/index.njk
[11ty] Wrote 5 files in 0.04 seconds (v2.0.1)

tree -A --gitignore

.
├── eleventy.config.js
├── package-lock.json
├── package.json
├── src/
│   ├── _includes/
│   │   └── layouts/
│   │       ├── about.njk
│   │       ├── base.njk
│   │       ├── readings.njk
│   │       └── writing.njk
│   └── content/
│       ├── content.11tydata.js
│       ├── index.njk
│       └── studio/
│           ├── about/
│           │   └── index.njk
│           ├── readings/
│           │   ├── books.njk
│           │   └── index.njk
│           └── writing/
│               └── index.njk
└── www/
    └── content/
        ├── index.php
        └── studio/
            ├── about/
            │   └── index.php
            ├── readings/
            │   ├── books/
            │   │   └── index.php
            │   └── index.php
            └── writing/
                └── index.php

15 directories, 18 files

[BorisAnthony]

Firstly: wow. Thank you!

So yeah I ended up with pretty much the same approach only without the elegance, thoroughness and robustness of what you've done here (due to my my lack of general programming skills, JS chops and intimate knowledge of the arcane and poorly documented 11ty inner workings).

For the context of this project I don't really need to be so careful as this will only ever be run by me, locally, to turn a few Markdown files into a section of an existing webapp. But yes, the "index" issue I noticed as well and hacked around it.

FWIW, here's what I ended up with after hours of picking up little tricks in other threads, and trial and error.

module.exports = {
  eleventyComputed: {
    permalink: function (data) {
      const slug = data.page.fileSlug ?? this.slugify(data.title);
      const typeFromPath = data.page.filePathStem.split("/")[2];
      if (data.page.filePathStem.includes("index")) {
        return `/${typeFromPath}/index.php`;
      }
      return `/${typeFromPath}/${slug}/index.php`;
    },
    layout: function (data) {
      const typeFromPath = data.page.filePathStem.split("/")[2];
      if (data.page.filePathStem.includes("index")) {
        return `layouts/${typeFromPath}-index.njk`;
      }
      return `layouts/${typeFromPath}.njk`;
    },
    type: function (data) {
      const typeFromPath = data.page.filePathStem.split("/")[2];
      return `${typeFromPath}`;
    },
  },
};

However, I will definitely take the time to try and fully understand your version and apply it.
Really appreciate your help and what you've shared here, and so many other posts of yours! Learned a lot!!

[pdehaan]

Looks good. I think instead of repeatedly calling const typeFromPath = data.page.filePathStem.split("/")[2];, you can refer to data.type from within permalink and layout:

-      const typeFromPath = data.page.filePathStem.split("/")[2];
+      const typeFromPath = data.type;

module.exports = {
  eleventyComputed: {
    permalink(data) {
      const slug = data.page.fileSlug ?? this.slugify(data.title);
      const typeFromPath = data.type;
      if (data.page.filePathStem.includes("index")) {
        return `/${typeFromPath}/index.php`;
      }
      return `/${typeFromPath}/${slug}/index.php`;
    },

    layout(data) {
      if (data.layout) {
        return data.layout;
      }
      const typeFromPath = data.type;
      if (data.page.filePathStem.includes("index")) {
        return `layouts/${typeFromPath}-index.njk`;
      }
      return `layouts/${typeFromPath}.njk`;
    },

    type(data) {
      return data.page.filePathStem.split("/")[2];
    },
  },
};