Access a collection in an "eleventy.after"-function

[erikkroes]

Hey all,

I was trying something and I'm not sure if it's actually impossible, or just my tinkering-skills that fall short.

When I create a function in .eleventy.js with eleventyConfig.on("eleventy.after"..., can I access a collection in it?

The idea
I want to post notes to my eleventy-site, and syndicate them to other platforms: https://indieweb.org/POSSE

I thought I'd write the notes on my website with a boolean publish set to true. Using addCollection and filter, I can then create a collection of only those notes that I want to publish. Pretty much exactly like the example: https://www.11ty.dev/docs/collections/#getall()
So far so good.

Next step would be to trigger an action on eleventy.after. The action could then send the contents of the collection to edge functions.

The thing is, I don't know how to access the collection I create outside of a template. Is this data even reachable? I don't know.
I'm aware there are other routes to reach the goal of POSSE like:

• https://mxb.dev/blog/syndicating-content-to-twitter-with-netlify-functions/
• https://nicolas-hoizey.com/articles/2023/01/07/let-s-posse-to-mastodon-with-a-feed-and-a-github-action/

But both these syndicate from an export, and it feels weird for me to first export data to a format, and then process that export. If possible, I'd rather take the data at the source (inside eleventy) and syndicate that!

Thanks for any feedback on this!

[pdehaan]

I found a workaround, but not sure I like it. It involves manually [re]creating collections via .addCollection() and caching the values in a global object which you can access in eleventy.after event.

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  const collectionData = {};

  const tags = ["blog"];
  for (const t of tags) {
    eleventyConfig.addCollection(t, function (collectionApi) {
      collectionData[t] = collectionApi.getFilteredByTag(t);
      return collectionData[t];
    });
  }

  eleventyConfig.addCollection("docs", function (collectionApi) {
    collectionData.docs = collectionApi.getFilteredByGlob("src/docs/*.njk");
    return collectionData.docs;
  });

  eleventyConfig.on("eleventy.after", function (cfg) {
    console.log(collectionData);
  });

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

Where ./src/docs/page-2.njk looks like this masterpiece:

---
title: Page Two
---

<h1>{{ title }}</h1>

And my blog posts directory data file look like this:

module.exports = {
  layout: "blog.njk",
  tags: ["blog"],
  eleventyComputed: {
    title(data) {
      return data.page.fileSlug;
    },
  },
};

So basically one auto-collection via tags[] and another collection created manually in the eleventy.config.js file.
I couldn't really figure out what to pass for the callback fn to eleventyConfig.collections.blog or when inspecting the collections via eleventyConfig.getCollections(). Both just seem to return my anonymous functions when creating the collection, but not sure what I'm supposed to pass as the callback function in that context, or how to access the merged data since I thought that might all be cached in the internals somewhere by the time we hit the eleventy.after event.

In my case, it will return a big-ol object looking something like this:

{
  blog: [
    {
      template: [Template],
      data: [Object],
      page: [Object],
      inputPath: './src/blog/post-1.md',
      fileSlug: 'post-1',
      filePathStem: '/blog/post-1',
      date: 2023-09-08T04:17:28.266Z,
      outputPath: 'www/blog/post-1/index.html',
      url: '/blog/post-1/',
      templateContent: [Getter/Setter],
      content: [Getter]
    },
    {
      template: [Template],
      data: [Object],
      page: [Object],
      inputPath: './src/blog/post-10.md',
      fileSlug: 'post-10',
      filePathStem: '/blog/post-10',
      date: 2023-09-08T04:17:28.266Z,
      outputPath: 'www/blog/post-10/index.html',
      url: '/blog/post-10/',
      templateContent: [Getter/Setter],
      content: [Getter]
    },
    ...,
    {
      template: [Template],
      data: [Object],
      page: [Object],
      inputPath: './src/blog/post-9.md',
      fileSlug: 'post-9',
      filePathStem: '/blog/post-9',
      date: 2023-09-08T04:17:28.266Z,
      outputPath: 'www/blog/post-9/index.html',
      url: '/blog/post-9/',
      templateContent: [Getter/Setter],
      content: [Getter]
    }
  ],
  docs: [
    {
      template: [Template],
      data: [Object],
      page: [Object],
      inputPath: './src/docs/page-1.njk',
      fileSlug: 'page-1',
      filePathStem: '/docs/page-1',
      date: 2023-09-08T04:18:07.188Z,
      outputPath: 'www/docs/page-1/index.html',
      url: '/docs/page-1/',
      templateContent: [Getter/Setter],
      content: [Getter]
    },
    ...
  ]
}

[pdehaan]

Anyways, not sure if it's a viable solution, but it might spark a better idea/approach.

[erikkroes]

Sounds pretty good to me, thanks!

[erikkroes]

I continued with this train of thoughts and am now at this:

  let selectedNote = {};
  
  eleventyConfig.addCollection("newestNote", function(collectionApi) {
    selectedNote = collectionApi.getAll().filter(function(item) {   
      return "publish" in item.data;
    });
    return selectedNote;
  });

  eleventyConfig.on("eleventy.after", function (cfg) {
    console.log(selectedNote[0].template.frontMatter.data.title);
  });

It selects a note with publish defined. From that note I can get the title and some other (parsed) data that is enough for me to use (I think).