I’m a big fan of RSS 1, as well as a very large consumer of these types of feeds. I’ve had some RSS feeds exposed on this site for some time but only recently learned about some new ways to spruce up how these feeds are displayed. I came across this post from Andre Franca about how to apply styles to a .xml file and used it as a guide to create my own simple .xslt-based style doc (provided below).
<?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:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><xsl:value-of select="/rss/channel/title"/> RSS Feed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="/assets/css/style.css"/>
<link rel="stylesheet" href="/assets/css/feed.css"/>
</head>
<body>
<header>
<div class="sitetitle">
<a href="/"><img src="/assets/img/shellsharks.gif" alt="Shellsharks title gif" height="30" /></a>
</div>
<div class="head">
<div class="description">
<p><xsl:value-of select="/rss/channel/description"/></p>
</div>
</div>
<div class="aboutfeeds">
<p>This is a web feed that can be viewed in the browser. <strong>Subscribe for free</strong> by copying the URL <code><mark>shellsharks.com/feeds/feed.xml</mark></code> into your RSS reader. Learn more <a href="https://aboutfeeds.com">about feeds here</a>. A full listing of this site's feeds can be found <a href="/feeds">here</a>.</p>
</div>
</header>
<main>
<h2><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 455.731 455.731" xml:space="preserve"><path style="fill:#f78422" d="M0 0h455.731v455.731H0z"/><path style="fill:#fff" d="M296.208 159.16C234.445 97.397 152.266 63.382 64.81 63.382v64.348c70.268 0 136.288 27.321 185.898 76.931 49.609 49.61 76.931 115.63 76.931 185.898h64.348c-.001-87.456-34.016-169.636-95.779-231.399z"/><path style="fill:#fff" d="M64.143 172.273v64.348c84.881 0 153.938 69.056 153.938 153.939h64.348c0-120.364-97.922-218.287-218.286-218.287z"/><circle style="fill:#fff" cx="109.833" cy="346.26" r="46.088"/></svg> Latest 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>
<footer id="pubdate">Published: <time><xsl:value-of select="pubDate" /></time></footer>
<p id="postdescription"><xsl:value-of select="description"/></p>
</article>
</xsl:for-each>
</main>
<footer>
<center>
<img id="sharkfooter" src="/assets/img/sharks-circling.png" alt="Circling Sharks" style="width:150px;"></img>
</center>
</footer>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
You can view the styled feed by going directly to my Posts RSS file*. I applied similar styles to my Notes feed and Logs feed.
* This should be done on desktop and may not work using Safari as the default behavior seems to be attempting to download the linked .xml file rather than opening it up in the browser. I think this can be addressed by modifying some server headers but since I am on GitHub Pages I don’t have that ability. YMMV.
Since I have a number of feeds, I wanted to aggregate them in a single spot, so I created a /Feeds page. Coupling ideas from a pair of posts (Feeds | Cory Dransfeldt & RSS in HTML | Jim Nielsen), I created a single spot to share all my web feeds in every format they are available (which for now is RSS or HTML). The HTML Feed is a pretty neat idea as a way to display a typical RSS feed in HTML-form. One of my favorite sites, by Robb Knight has also inspired me to generate Atom and JSON feeds which I will be adding in the near future!
@shellsharks
I recently went through all of my follows (mostly infosec folks) to find their blogs/sites so I could add them to this list ( https://shellsharks.com/infosec-blogs ) I maintain as well as subscribe to their respective RSS feeds. The amount of awesome blogs I found that did NOT have an RSS feed was very concerning. If you write, and you want people to see your work, please have an RSS feed!!
#infosec #rss