Readable RSS

Hey there folks, I know I said I wouldn't do it but damn it all, we're doing it because this is cool and is a part of one of my favorite web technologies, RSS!

After doing the huge sprint that was converting my website to 11ty, I sat back and clicked through each page. Homepage? Beautiful. Blog posts? functional and readable. Games pages? Fantastic. RSS feed..? Oof. This thing was ugly. Just raw, naked XML sitting on the page... but it didn't have to be.

I first saw a themed RSS feed when I was subscribing to the wonderful Shellsharks's Scrolls feed. I didn't know it at the time, but I was looking at an XML file that had been themed using something called Extensible Stylesheet Language, or XSL. XSL works kind of similarly to CSS. It tells the browser how it should render the raw XML of the feed. The one key differentiator here is that XSL includes both HTML and CSS elements in the same file. The HTML gives the page structure while the CSS gives the page styling.

I did some looking into XSL and found this post from Cedric Bonhomme. The post itself is pretty light, but gave me the key information I needed to get started, as well as links to examples of both a template and an RSS feed using that template. Now that I'm writing about it, I'm sure I could have looked at Shellsharks's site, but that doesn't really matter. Since the layout uses real CSS, I was able to just copy over most of the css straight from the stylesheet used for the main site, although stripped down to make it a little smaller and easier to work in, since I wouldn't need 88x31 buttons, for example. The rest of the layout was relatively simple, just applying the correct classes to everything and consistently checking to make sure all the little tweaks were working correctly.

This is what the html portion of the xsl looks like.

<body>
  <header>
    <div class="site-brand__link">
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="/rss/channel/link" />
        </xsl:attribute>
        TK's Web Quest
      </a>
    </div>
    <div class="site-nav">
      <a class="site-nav__link" href="/">Home</a>
      <a class="site-nav__link" href="/blog/">Blog</a>
      <a class="site-nav__link" href="/games/">Games</a>
      <a class="site-nav__link" href="/webring/">Webring</a>
      <a class="site-nav__link" href="/about/">About</a>
      <a class="site-nav__link" href="/search/">Search</a>
      <a class="site-nav__link" href="/tags/">Tags</a>
      <a class="site-nav__link" href="/changelog/">Changelog</a>
    </div>
  </header>
  <div class="content-grid--single">
    <div class="stack-rows">
      <div class="breadcrumbs">
        <ul class="breadcrumbs__list">
          <li>
            <a>
              <xsl:attribute name="href">
                <xsl:value-of select="/rss/channel/link" />
              </xsl:attribute>
              Home
            </a>
          </li>
          <li>
            RSS Feed
          </li>
        </ul>
      </div>
      <div class="retro-panel">
        <span class="retro-panel__chrome">
          <div class="retro-panel__title">
            feed-info.txt
          </div>
          <div class="retro-panel__lights">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </span>
        <div class="retro-panel__eyebrow">
        </div>
          // ABOUT RSS
        <div class="retro-panel__header">
          TK's Web Quest RSS Feed
        </div>
        <div class="retro-panel__body">
          <p>
            RSS (Really Simple Syndication) is a classic internet technology for the distribution of content across the web. It powers all kinds of things, from the homepage at <a href="https://overworld.vg">Overworld</a> to podcast feeds, to blogs, just like this one! RSS is a fetch based protocol. While some RSS readers will go fetch new posts automatically in the background and notify you, the intended experience (at least on this site) is for the RSS reader to go get new posts <i>when you want them</i>. When you pull to refresh or open your reader, it scans through your subscriptions to look at feeds just like this one. If there's a new post, then it pulls the content straight from the XML. It's an indie-web friendly way to follow and read my posts as well as the posts of many other creators. I try to make my posts look as nice as I can on the main site, but if you are more likely to read them if they exist in the same place as other RSS subscriptions, then I would greatly appreciate you subscribing to this feed!
          </p>
          <h2>About this page:</h2>
            <p>
              This is the RSS feed for TK's Web Quest. No, really, I'm serious! Look at the url in your browser. That "feed.xml" on the end means this is a real RSS feed and you can copy that link straight into your reader to subscribe. The feed on this page is styled using eXtensible Stylesheet Language, a relatively uncommon styling format specificially designed to allow XML to render like HTML with CSS. Like RSS, this is nothing new, but has fallen by the wayside as people hand-make their websites less and trust platforms to design everything for them more. 
            </p>
          </div>
        </div>
        <div class="retro-panel">
          <span class="retro-panel__chrome">
          <div clas="retro-panel__title">
            feed.xml
          </div>
          <div class="retro-panel__lights">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </span>
        <div class="retro-panel__header">
          Recent Entries
        </div>
        <div class="retro-panel__body">
          <p>
            Entries from the blog, sorted by date (newest first)
          </p>
        </div>
        <div class="panel-grid">
          <xsl:for-each select="/rss/channel/item">
            <article class="post-card">
              <p class="post-card__meta">
                <span aria-hidden="true">// </span>
                <span><time class="dt-published"><xsl:value-of select="pubDate" /></time></span>
              </p>
              <h3 class="post-card__title">
                <a>
                  <xsl:attribute name="href">
                    <xsl:value-of select="link" />
                  </xsl:attribute>
                  <xsl:value-of select="title" />
                </a>
              </h3>
            </article>
          </xsl:for-each>
        </div>
      </div>           
    </div>
  </div>
</body>

As you can see, it's very standard html. There's a couple of tags that probably look unusual though.

<a>
  <xsl:attribute name="href">
    <xsl:value-of select="link" />
  </xsl:attribute>
  <xsl:value-of select="title" />
</a>

These are pulling attributes from the XML to inject into the page. In this case, it's an html anchor tag, but without the usual href="" to point the anchor anywhere. The first xsl tag, <xsl:attribute name="href"> tells the browser to put the contents of this tag into the href attribute in the preceeding anchor tag. Then, we get the actual link with another little piece of xsl. <xsl:value-of select="link"> tells the browser to grab the link from the given post. After we close the attribute tag, we do the same thing, just getting the title instead. The other thing xsl gives us in this template is iteration.

<xsl:for-each select="/rss/channel/item">
</xsl:for-each>

This code, which is wrapped around the HTML that creates the entries in the feed, iterates through every "item" inside the "channel" tag in the XML to generate the html elements needed for each entry to show up in the list. Coding one entry ends up coding the entire list.

Alright, that's it for this one. If you'd like to view the RSS feed page, click here. If you'd like to view the xsl template, click here then press ctrl+U.