hello everybody!
i think styled RSS feeds are a really nice feature, so i’m trying to implement it on my own site, but running into a minor issue.
on chromium browsers, everything displays as expected (or at least how i intended). nice, human-readable feed. however, in firefox, the html inside the <![CDATA[]]> is displayed as a string instead of being parsed as html like i want it to be.
search engine results keep leading me to decade-old forum threads where people describe the same issue and get “that’s just how it is” as an answer. but i see sites today where the feed’s html is getting parsed and displayed in firefox. i’ve compared the code to mine and have changed at least a dozen things about the formatting of both the .xml and the .xsl, but i can’t seem to figure it out.
what am i missing?
my feed is at https://ribo.zone/feed.xml and the stylesheet is at https://ribo.zone/style.xsl
i’ve also included the code below:
xml code
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<?xml-stylesheet href="style.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>ribo.zone</title>
<category>Homepage</category>
<language>en-US</language>
<link>https://ribo.zone</link>
<atom:link href="http://ribo.zone/feed.xml" rel="self" type="application/rss+xml" />
<description>Updates from the lab...</description>
<image>
<url>https://ribo.zone/img/favicon.png</url>
<title>ribo.zone</title>
<link>https://ribo.zone</link>
</image>
<item>
<title>Summer updates</title>
<link>https://ribo.zone/sunday/</link>
<pubDate>Sun, 01 Sep 2024 18:37:00 EST</pubDate>
<guid isPermaLink="false">002</guid>
<description>
<![CDATA[
<p>Yesterday was the final <a href="https://qtzfest.com/">Queer/Trans Zinefest</a> in Providence. I've attended the past two years, and each time I've left with a rush of creative inspiration and an armful of zines, prints, and other ephemera. It's an event that means a lot to me, and I'm sad that it's over. But that's just the way of things; everything ends. As I write, summer is ending too. The message displayed on the LED matrix signs above the highways in Rhode Island is stuck in my mind:</p>
<p style="text-transform:uppercase;">Slow down<br>and savor the<br>end of summer</p>
<p>Since my last update, the "<a href="https://ribo.zone/sunday/">sunday</a>" section of my site (where I put the pages I've made for community events) has grown the most, and it houses a lot of the work I'm most happy with. I have a lot of fun working from prompts, and having a community to share pages with keeps me motivated. (Deadlines help too.) June was a big one; I participated in three jams!</p>
<ul>
<li>32-Bit Cafe Code Jam (theme: destination vacation)
-> <a href="https://ribo.zone/sunday/fish/">Fishing minigame world tour</a>
</li>
<li>Indieweb Carnival (theme: DIY)
-> <a href="https://ribo.zone/sunday/diy/">Making and mending</a>
</li>
<li>Glitch Code Jam (theme: rainbow)
-> <a href="https://eight-stripes.glitch.me">Eight stripes</a>
</li>
</ul>
<p>In July, I made my first video game. I had a free weekend, so I started messing around in <a href="https://bitsy.org/">bitsy</a>, a tiny and beginner-friendly game engine. I recommend it! From Saturday afternoon to Sunday morning (with a healthy amount of sleep in the middle), I worked out some of the ideas that rattle around in my head all the time. The result is a 5-7 minute adventure game called Eukaryote Story; you can play it on <a href="https://ribo.zone/eukaryote-story/">my site</a> or <a href="https://ribozone.itch.io/eukaryote-story">itch.io</a>. I would love for you to check it out and let me know what you think. I would also love to make more games! There's a <a href="https://itch.io/jam/bitsy-83-temporary">bitsy jam</a> happening <em>right now</em>, so I'm brainstorming... We'll see.</p>
<p>In August, I was in the mood to make 88x31 buttons, so my <a href="https://ribo.zone/free/graphics/">free graphics page</a> is finally starting to take shape. I'm <em>still</em> in that mood, so I'm happy to <a href="https://discourse.32bit.cafe/t/microscopic-graphics-by-ribose-requests-open/1208">take requests</a> if you've got 'em. Recreating logos at a tiny, crunchy scale is especially fun to me, but I'm open to other ideas.</p>
<p>My site turns two at the end of this month, but I won't make any promises to do something extravagant to celebrate. Instead, I think I'll just slow down and savor the end of summer.</p>
]]>
</description>
</item>
<item>
<title>Primordial web feed</title>
<link>https://ribo.zone/info</link>
<pubDate>Thu, 27 Jul 2023 15:29:00 EST</pubDate>
<guid isPermaLink="false">001</guid>
<description>
<![CDATA[
<p>In two days, it will have been ten months since I created this site! Wauw. To celebrate, here's the first real entry in my shiny new RSS feed. All written by hand and—</p>
<p>"Wait, how is this different than the changelog?"<br>
I update the changelog every time I make an update to the site, no matter how minor, and those entries are typically as brief as possible. I don't think it's neccessary to broadcast all of those changes, so I won't. This feed will be less frequent, focus on major site updates, and feature more detailed commentary from me.</p>
<p>"Erm, why not just put this stuff in your blog?"<br>
While I'd like my blog to cover a wide range of topics, what I really don't want to do is clog it up with site meta. I'm not particularly interested in building a website about building a website, y'know? Site news, plans, and the motivations behind them (sometimes! no guarantees) will stay confined to this feed, so the blog can be full of whatever else.</p>
<p>Unil now, only neocities users could opt in to recieving site updates from me, and while I love the community here and I'm really grateful for all of the feedback I've received so far, I'm also interested in connecting with people and sites outside of the neocities ecosystem. With an RSS feed, anyone with an RSS reader can get updates if they want to. If you're one such person, hello!</p>
<p>I'm proud of what I've put together these past ten months, and I'm planning to write up a restrospective of my first year of webmastery for the site's first birthday. Thanks for looking and reading and scrolling and clicking. Bye!</p>
]]>
</description>
</item>
</channel>
</rss>
xsl code
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/" >
<xsl:output method="html"
version="5.0"
encoding="UTF-8"
indent="yes"
doctype-system="about:legacy-compat" />
<xsl:template match="/">
<html lang="en">
<head>
<title>RSS feed | ribose</title>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-language" content="en_US" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no" />
<meta name="referrer" content="none" />
<style type="text/css">
body {
color: #222;
font-family: monospace;
font-size: 1.2em;
}
.container {
align-item: center;
display: flex;
justify-content: center;
}
.item {
max-width: 48em;
}
article div {
line-height: 1.2;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<header>
<h1><xsl:value-of select="/rss/channel/title"/></h1>
<p>
Description: <xsl:value-of select="/rss/channel/description"/><br />
Category: <xsl:value-of select="/rss/channel/category"/><br />
Language: <xsl:value-of select="/rss/channel/language"/><br />
<a hreflang="en">
<xsl:attribute name="href">
<xsl:value-of select="/rss/channel/link"/>
</xsl:attribute>
Visit website
</a>
</p>
</header>
<main>
<h2>Recent Posts</h2>
<xsl:for-each select="/rss/channel/item">
<article>
<h3>
<a hreflang="en">
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</a>
</h3>
<small><p>Published:
<time>
<xsl:value-of select="pubDate" />
</time>
</p></small>
<div>
<xsl:value-of select="description" disable-output-escaping="yes" />
</div>
</article>
</xsl:for-each>
</main>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>