You can style RSS feeds (so they look like web pages)

Example: https://test-forum.fish.xk.io/n/0.feed, NB: if it doesn’t work the first time, refresh the page (this should work in all modern browsers; if you are using safari then there are small styling errors if you use version < 14.1 (released april 2021)).

I had to figure out some things to make that work – if view source, or click the ‘yes, this is an rss feed’ button, then there is more info.

I did not know you could do this. The best example of a styled RSS feed I found was via Joi Ito’s blog of all places – his RSS feed is still styled. It was more a useful example than anything else (I guess that all feedburner feeds can do this, but IDK). I think I learned that you could style RSS feeds via a search about implementing rss feeds in rails, but don’t properly remember.

Aside: I like that something Ito wrote in 2003 is still accessible. (I remember @curi making some relevant comments on this at some point; like regarding links and content staying live for 20 years, and how its bad that idea is, mostly, not taken seriously)

Edit:

I think I learned that you could style RSS feeds via a search about implementing rss feeds in rails, but don’t properly remember.

I think this was actually via searching about how to style posts in an RSS feed, like so they look nice in an rss client.

edit: updated link from .rss to .feed

I clicked on the feedburner logo at the bottom of Ito’s RSS feed (linked above) and saw the following. A reminder of the significance of things being under one’s own control.

Doesn’t work for me in mobile safari. asks if i want to open the page in Reeder.

makes sense if you have an association for RSS set up already. Here’s a screenshot of what it looks like.

This explanation is in the RSS feed itself (via an unused xml tag) and comes up when you press the button in the screenshot:

Styling RSS w XLS notes

XML files can include both xml-stylesheets (XSLT) and normal stylesheets (CSS).
XSLT files are transformations, and allow you to process an XML doc into an HTML doc (among other things).
In this case, it doesn’t matter if we import the CSS here or via /rss/rss.xsl – it gets applied either way.
The XSLT will output HTML for us, but the HTML content from the RSS feed (i.e., the bodies of posts) must be unescaped.
There’s a special attribute (disable-output-escaping) which will do that.
However, we need to run some JS, too, because not every browser supports decoding html like that.

  • firefox does not seem to support disable-output-escaping="yes", so it requires the JS in rss.js
  • chrome does support disable-output-escaping="yes", so don’t remove those attrs

The JS works by testing #cometestme, and then (if needed) looping over elements matching [name=decodable] and basically el.innerHTML = el.textContent.

Note, disable-output-escaping="yes" is a legacy feature from XSLT v1.0; the new way to do it is with character maps.
When I tried those, they didn’t seem to work in firefox (which is when I tried the original JS).
IDK if chrome support character maps, but if it does, then that is a good update to implement. TODO I guess.

I think the issue is that I have .rss at the end of the URL. Here’s an alternative link: https://test-forum.fish.xk.io/rss/recent_posts. I tried this with mobile safari 13.1 (ios 13.5) and it worked. Going to patch the codebase now.

edit: by default the rss icon now links to a .feed extension: https://test-forum.fish.xk.io/n/0.feed. there are 3 equivalent formats: :rss, :xml, and :feed, so any of those extensions can be used.