How to handle interactive elements in posts when using the feed plugin

[ajzeigert]

Hi, I have a site set up using theme-simple-blog and I occasionally want to create posts that have interactive elements in them, for example a web map. However, these interactive elements are not supported in RSS feeds. Is there a way to strip out script tags and/or provide image fallbacks for them?

Here is the specific article on my site that I'm speaking to: https://zeigert.com/posts/where-to-find-obsidian-colors-at-glass-buttes/

It contains a <div> and a <script> tag that builds the web map in that div on the client. It builds and renders fine on the web and there are no errors when building the feed. However, when I view the feed it's clear that the feed includes some unsupported content:

rss_compressed.mov

This might be be more broad than Lume, but thanks anyway for any suggestions. ❤️

[oscarotero]

A solution is to place this code in the head of the page (using the extra_head value of the post).

I guess you're already using this value for your custom styles, so if you set it again in the post, the previous value is overridden.

I'm thinking this value should have the stringArray merge strategy: instead of overriding the value, it creates an array with the two values (the same as how tags work). Now we only had to edit the layout to iterate this array and print all values.

what do you think?

[ajzeigert]

Actually, never mind, of course it does, I've already done it in another post. I was trying to get clever with <noscript> elements, but I think instead I might have to do some DOM manipulation to show/hide some things on the web version using my extra_head script.

It's not as tidy as I'd like, but it's a simple workaround.

[oscarotero]

I'm thinking of including an option in the plugin to modify the feed object before exporting. For example:

site.use(feed({
  transform(feed) {
    feed.items.forEach(item => item.content = modify(item.content));
  }
});

This will allow to do anything with it, for example, you can include a comment in the content:

<!-- <img src="/fallback_image.jpg"> -->

and uncomment it with this function. What do you think?

[ajzeigert]

I like this idea. That might actually be cleaner than the extra_head solution, because I could leave the scripts in the body and remove them at feed transform time. I could see using classes like nofeed or feedonly to make selection easier.

[oscarotero]

Okay. I just made a couple of changes:

• The new version of simple_blog theme (0.14.0) allows to configure the feed plugin. I've changed also the extra_head value to an array of strings.
• In the new version of Lume, it will be possible to use functions to retrieve the value of a specific field. For example:

site.use(blog({
  feed: {
    items: {
      content(data) {
        return myCustomFunction(data.children);
      }
    }
  }
}));

This wasn't released yet but can upgrade lume to the latest development version with deno task lume upgrade --dev.

[ajzeigert]

Thanks for the fast update!

I tested this locally and it works well for my purposes. I'm using a simple nofeed class on elements to be removed, then passing each item content through this script:

export default function (domString) {
    const doc = new DOMParser().parseFromString(domString, "text/html")
    doc.querySelectorAll('.nofeed').forEach(node => node.remove());
    return doc.querySelector('body').innerHTML;
}

I'm using deno dom to make the changes, although I could probably do this with a clever regex. It seems weird to add a class to a <script> element, but it inherits all global attributes, so it's technically valid.

Additionally I have a feedonly class that just applies display: none for now.

Thank you so much for your help.