Help authors with invalid feeds containing custom properties

[pepelsbey]

(a feature request)

I’m generating article feeds using Eleventy, and I constantly have to deal with a problem:

1. If your feed contains self-closing tags like <img>, you need to wrap the content into <!--[CDATA[ … ]]--> to get valid XML.
2. But once you have custom properties var(--color-grey-dark), your feed becomes invalid because you can’t have -- inside CDATA since it’s an XML comment.

Here’s an example feed with such an error: web-standards.ru/articles/feed

The simplest solution would be to XML-ify your HTML into <img/> and remove the CDATA. I learned it from the @zachleat’s feed. Other solutions might also exist.

Anyway, I think Eleventy’s feed plugin could also help us with that 😉

[zachleat]

XML-ify your HTML into and remove the CDATA

You lost me at this part—can you elaborate? 🫣

[zachleat]

Oop, I just got it after I posted the comment, nevermind!

[zachleat]

Cross referencing this posthtml plugin option for closingSingleTag, which is exposed in the plugin! https://github.com/11ty/eleventy-plugin-rss/blob/f6a88ada303e9f69b5982274362fdf177f209954/.eleventy.js#L29C7-L29C32

[zachleat]

I think the secret sauce may lie in Nunjucks escaping of the HTML though:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Zach Leatherman</title>
    <subtitle>A web development blog written by @zachleat.</subtitle>
    <link href="https://www.zachleat.com/web/feed/" rel="self"/>
    <link href="https://www.zachleat.com/web/"/>
    <updated>2024-05-31T00:00:00Z</updated>
    <id>http://www.zachleat.com/</id>
    <author>
        <name>Zach Leatherman</name>
        <email>zachleat@zachleat.com</email>
    </author>

    <entry>
        <title>11ty Goes Fully Independent—JS Party #325</title>
        <link href="https://www.zachleat.com/web/jsparty-indie-11ty/"/>
        <updated>2024-05-31T00:00:00Z</updated>
        <id>http://www.zachleat.com/web/jsparty-indie-11ty/</id>
        <content type="html">
            &lt;p&gt;I was on the JS Party podcast to talk about the &lt;a href=&quot;https://www.zachleat.com/web/independent-sustainable-11ty/&quot;&gt;push to make 11ty independent and sustainability in 2024&lt;/a&gt;!&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;11ty creator Zach Leatherman is taking the open source site generator fully independent in 2024 and he’s back on the pod to tell us why, how &amp;amp; what we all can do to help.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I’ve been blown away by the response so far, y’all are amazing. At time of this post we’re currently at 56% of the goal.&lt;/p&gt;
&lt;a href=&quot;https://opencollective.com/11ty&quot;&gt;
    &lt;fundraising-status min=&quot;0&quot; max=&quot;6000&quot; value=&quot;3486.69&quot; style=&quot;--fs-color: #e23c2f;&quot;&gt;
        &lt;img src=&quot;https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/&quot; width=&quot;30&quot; height=&quot;30&quot; alt=&quot;11ty Logo&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; /&gt;
    &lt;/fundraising-status&gt;
&lt;/a&gt;
&lt;p&gt;&lt;em&gt;(The above graph will update daily with the current status.)&lt;/em&gt;&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Listen at &lt;a href=&quot;https://changelog.com/jsparty/325&quot;&gt;&lt;code&gt;https://changelog.com/jsparty/325&lt;/code&gt;&lt;/a&gt; or below:&lt;/p&gt;
&lt;iframe loading=&quot;lazy&quot; src=&quot;https://changelog.com/jsparty/325/embed?theme=night&quot; width=&quot;100%&quot; height=&quot;220&quot; scrolling=&quot;no&quot; frameborder=&quot;no&quot;&gt;&lt;/iframe&gt;
&lt;h2 id=&quot;even-more-jsparty:&quot; tabindex=&quot;-1&quot;&gt;Even More JSParty: &lt;a class=&quot;direct-link&quot; href=&quot;https://www.zachleat.com/web/jsparty-indie-11ty/#even-more-jsparty:&quot; aria-hidden=&quot;true&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.zachleat.com/web/jsparty-eleventy-2/&quot;&gt;Celebrating Eleventy 2.0 🎉—JS Party #266&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.zachleat.com/web/jsparty-eleventy/&quot;&gt;Going full-time on Eleventy—JS Party #217&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.zachleat.com/web/jsparty/&quot;&gt;Spicy fonts and static sites 🌶️—JS Party #79&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

        </content>
    </entry>
</feed>

The above entry works as expected with <img/> or <img> and an --fs-color: #e23c2f; in there too.

[zachleat]

This is the default behavior in the new virtual template method provided in this plugin (#47)

[pepelsbey]

Other solutions might also exist

They exist, indeed!

I wonder how RSS readers are treating such escaped HTML, though.