Add XSLT and image

fallback.css

@@ -0,0 +1,39 @@
+rss {
+	background-color: lightgray;
+}
+
+rss * {
+	display: none;
+}
+
+title {
+	display: block;
+	font-weight: bold;
+}
+description {
+	display: block;
+}
+
+channel {
+	display: block;
+	margin-left: 1rem;
+}
+channel > title {
+	font-size: 24pt;
+}
+
+item {
+	display: block;
+	padding-top: 1rem;
+}
+item > title {
+	font-size: 16pt;
+}
+item > pubDate {
+	display: block;
+	font-style: italic;
+}
+item > link {
+	display: block;
+	color: chocolate;
+}

feed.xml

@@ -1,18 +1,49 @@
-<?xml-stylesheet href="style.css"?>
-<rss version="2.0" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule">
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.xsl" type="text/xsl"?>
+<?xml-stylesheet href="fallback.css" type="text/css" alternate="yes"?>
+<rss
+  version="2.0"
+  xmlns:admin="http://webns.net/mvcb/"
+  xmlns:atom="http://www.w3.org/2005/Atom"
+  xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
+>
   <channel>
-    <!-- TODO: <image> -->
     <title>RSRSSS</title>
     <link>https://envs.net/~lucidiot/rsrsss/</link>
     <description>Really Simple Really Simple Syndication Syndication &#8212; An RSS feed about RSS feeds</description>
-    <language>en-us</language>
+    <language>en</language>
     <copyright>Creative Commons BY-SA 4.0 International, ~lucidiot</copyright>
-    <creativeCommons:license>https://creativecommons.org/licenses/by-sa/4.0/</creativeCommons:license>
     <managingEditor>lucidiot@envs.net (lucidiot)</managingEditor>
     <webMaster>lucidiot@envs.net (lucidiot)</webMaster>
     <generator>Vim 8.1</generator>
     <docs>https://www.rssboard.org/rss-specification</docs>
-    <ttl>1440</ttl>
+    <ttl>10080</ttl>
+
+    <admin:errorReportsTo rdf:resource="mailto:lucidiot@envs.net" />
+    <admin:generatorAgent rdf:resource="https://tildegit.org/lucidiot/rsrsss/" />
+    <atom:link href="https://envs.net/~lucidiot/rsrsss/" rel="self" type="application/rss+xml" />
+    <creativeCommons:license>https://creativecommons.org/licenses/by-sa/4.0/</creativeCommons:license>
+    <dc:publisher>lucidiot</dc:publisher>
+    <dc:creator>lucidiot</dc:creator>
+    <dc:rights>Creative Commons BY-SA 4.0 International, ~lucidiot</dc:rights>
+    <dc:format>application/rss+xml</dc:format>
+    <dc:language>en</dc:language>
+    <sy:updatePeriod>weekly</sy:updatePeriod>
+    <sy:updateFrequency>1</sy:updateFrequency>
+    <sy:updateBase>1973-01-01T12:00+01:00</sy:updateBase>
+
+    <image>
+      <link>https://envs.net/~lucidiot/rsrsss/</link>
+      <title>Animated glitchy RSS logo</title>
+      <url>https://envs.net/~lucidiot/rsrsss/image.gif</url>
+      <description>RSRSSS logo</description>
+      <width>144</width>
+      <height>144</height>
+    </image>
+
     <item>
       <title>RSRSSS</title>
       <pubDate>Tue, 15 Dec 2020 07:40:36 +0000</pubDate>
@@ -21,5 +52,16 @@
       <description>Nothing better to start off an RSS feed about RSS feeds than to make itself its first item.</description>
       <category domain="https://envs.net/~lucidiot/rsrsss/">Meta</category>
     </item>
+
+    <item>
+      <title>Who needs HTML anyway?</title>
+      <pubDate>Wed, 16 Dec 2020 07:40:22 +0000</pubDate>
+      <guid isPermaLink="false">XSLT</guid>
+      <category domain="https://envs.net/~lucidiot/rsrsss/">Meta</category>
+      <description>
+        <p>I added <a href="style.xsl">an XSLT stylesheet</a> to this RSS feed! This means that when you open this feed in a web browser that does not support subscribing to RSS feeds, you will instead get a nice looking page without me ever writing actual raw HTML. In older or less common web browsers that still support RSS subscriptions (as every good web browser should), such as Pale Moon, you will still get the default page that asks you if you want to subscribe.</p>
+        <p>Some of my friends had mentioned adding RSS to their static site generators was hard; how about turning your index page into the RSS feed, and letting browsers generate the HTML for you?</p>
+      </description>
+    </item>
   </channel>
 </rss>

style.css

@@ -1,39 +1,27 @@
-rss {
-	background-color: lightgray;
+body {
+    background-color: lightgray;
 }
 
-rss * {
-	display: none;
+article {
+    clear: both;
+    background-color: whitesmoke;
+    border-radius: 5px;
+    padding: 3px 10px;
 }
 
-title {
-	display: block;
-	font-weight: bold;
+.timestamp {
+    font-style: italic;
 }
-description {
-	display: block;
+.category {
+    display: inline-block;
+    padding: 2px 4px;
+    background-color: lightgray;
+    border-radius: 3px;
 }
 
-channel {
-	display: block;
-	margin-left: 1rem;
+a {
+    color: chocolate;
 }
-channel > title {
-	font-size: 24pt;
-}
-
-item {
-	display: block;
-	padding-top: 1rem;
-}
-item > title {
-	font-size: 16pt;
-}
-item > pubDate {
-	display: block;
-	font-style: italic;
-}
-item > link {
-	display: block;
-	color: chocolate;
+a:visited {
+    color: brown;
 }

style.xsl

@@ -0,0 +1,81 @@
+<?xml version="1.0"?>
+<xsl:stylesheet
+  version="1.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns:admin="http://webns.net/mvcb/">
+  <xsl:output method="html" />
+
+  <xsl:template match="/">
+    <html>
+      <head>
+        <title><xsl:value-of select="/rss/channel/title" /></title>
+        <link rel="stylesheet" type="text/css" href="style.css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </head>
+      <body>
+        <xsl:apply-templates />
+      </body>
+    </html>
+  </xsl:template>
+
+  <xsl:template match="channel">
+    <a href="{image/link/text()}" target="_blank" style="float: right">
+      <img src="{image/url/text()}" alt="{image/title/text()}" title="{image/description/text()}" />
+    </a>
+
+    <h1><xsl:value-of select="title" /></h1>
+    <p><xsl:value-of select="description" /></p>
+
+    <xsl:apply-templates select="item" />
+
+    <xsl:if test="creativeCommons:license">
+      <p>
+        <a href="{creativeCommons:license/text()}" target="_blank">
+          <img
+            src="{concat('https://licensebuttons.net/l/', substring-after(creativeCommons:license, 'licenses/'), '88x31.png')}"
+            alt="{copyright/text()}"
+          />
+        </a>
+      </p>
+    </xsl:if>
+
+    <xsl:if test="admin:errorReportsTo">
+      <p><a href="{admin:errorReportsTo/@rdf:resource}">Report errors with this feed</a></p>
+    </xsl:if>
+  </xsl:template>
+
+  <xsl:template match="item">
+    <article>
+      <xsl:if test="title">
+        <h2><xsl:value-of select="title" /></h2>
+      </xsl:if>
+
+      <xsl:if test="pubDate or link or category">
+        <p>
+          <xsl:if test="pubDate">
+            <span class="timestamp"><xsl:value-of select="pubDate" /></span>
+          </xsl:if>
+          <xsl:if test="pubDate and (category or link)">
+            <xsl:text> &#8212; </xsl:text>
+          </xsl:if>
+          <xsl:for-each select="category">
+            <span class="category"><xsl:value-of select="." /></span>
+            <xsl:if test="position() != last()"><xsl:text>, </xsl:text></xsl:if>
+          </xsl:for-each>
+          <xsl:if test="category and link">
+            <xsl:text> &#8212; </xsl:text>
+          </xsl:if>
+          <xsl:if test="link">
+            <a href="{link}" target="_blank"><xsl:value-of select="link" /></a>
+          </xsl:if>
+        </p>
+      </xsl:if>
+
+      <xsl:if test="description">
+        <p><xsl:copy-of select="description" /></p>
+      </xsl:if>
+    </article>
+  </xsl:template>
+</xsl:stylesheet>