Using the plugin as a filter (working outside .md files)

[patrulea]

The plugin works like a charm. Though, I can’t seem to wield it outside actual Markdown (.md) files. In my case, I’m pulling data from my CMS’s API.

How can I use the plugin in a way that it takes a URL string and transform it into its corresponding embed?

I’m thinking it could work like a filter. For example:

{{ "https://www.instagram.com/p/CB-yYetJ4ky/" | embedEverything }}

[gfscott]

[We spoke about this offline but just summarizing again for the record!]

I haven't personally experimented with a headless CMS/11ty setup, but I think in principle the plugin should work; how it works in practice I'm not totally sure. Might take a little experimentation.

Some details about the plugin architecture and how it works on 11ty templates that might help:

1. The plugins are all based on 11ty transforms, which operate on the HTML output produced by 11ty templates. Transforms happen fairly late in the input-to-output pipeline.
2. Therefore, to work as expected, your 11ty/CMS setup, whatever it is, would need to produce HTML output that the plugin will recognize — a <p> tag that (ideally) contains only the URL. (This is what 11ty's markdown library produces by default).

So, some things to investigate:

• Check how the CMS/11ty integration runs its input-to-output pipeline, what HTML the templates produce, even the order in which the 11ty configuration file processes data?
• How does your CMS store its content? Does it do some sort of pre-processing that produces output the plugin wouldn't recognize?

Finally, regarding the idea of a filter: The original purpose of this family of plugins was to remove the need for filters and, in particular, the need to remember any filter syntax, which I constantly forget and always have to look up. I wanted a purely fire-and-forget experience — just paste a URL and keep going.

In any case, I'll look into this a little more, because I feel like it should be workable, I just haven't tried it. Let's keep this thread open to share anything we find!

[patrulea]

In my environment, I fetch the CMS data as Eleventy global data. Plain JSON key-value pairs. In the case of the URLs to be transformed into embedded content I get an array of objects, each containing a source and a url key.

Contrived example:

[
  {
    "source": "twitter",
    "url": "https://twitter.com/imagi_ro/status/1742945962551644653"
  },
  {
    "source": "instagram",
    "url": "https://www.instagram.com/p/CB-yYetJ4ky/"
  },
  {
    "source": "youtube",
    "url": "https://youtube.com/watch?v=axi8GQVhaVE"
  },
  {
    "source": "twitch",
    "url": "https://www.twitch.tv/auronplay"
  }
]

[patrulea]

The original purpose of this family of plugins was to remove the need for filters and, in particular, the need to remember any filter syntax, which I constantly forget and always have to look up.

I think the filter makes the plugin much more flexible as it can be used outside the context of rendering .md files stored in the codebase.

[gfscott]

OK, using your example array, I've put together an extremely basic proof of concept. You can check out the cms branch and run the demo locally with npm run dev, then open /posts to see the index of generated post pages. Example:

How you're handling data-fetching, collections, pagination, etc. will be up to your particular use case. The trick is to make sure your layout templates produce HTML markup that the plugin will recognize and transform. In this contrived case, that just meant wrapping the url value in <p> tags.

Let me know if this helps!

[patrulea]

…turns out it was that easy! You saved my life.

This is my minimal test:
https://github.com/patrulea/eleventy-plugin-embed-everything-test