Pretty Atom-Feed Previews with XSLT
Adding some XSLT to my Atom-Feeds to make them behave like Webpages in Browsers
Atom and XSLT what?
I'll assume you already know what Atom-Feeds and XML are and that you have some HTML skills.
As an Atom-Feed is simply an XML-File on the web-server it makes sense linking to it, unfortunately the Atom-XML in the Browser isn't pretty to look at.
This is where XSLT (Extensible Stylesheet Language Transformation) steps in. XSLT is a standardised way to turn an XML document into another and, as it turns out it is built into every major Web-Browser, meaning it works perfectly well with my static site setup.
This way one can deliver a standards compliant Atom-Feed that gets rendered into a preview for humans when viewed with a Browser.
Awesome, lets do that!
Note: If you've ever seen the message
This XML file does not appear to have any style information associated with it. The document tree is shown below. the Browser means XSLT, not CSS.
Building an Atom-Feed with a Stylesheet
To get the Browser to load a stylesheet one has to add tell it where it is by adding a line like following:
<!-- <?xml … header here -->
<!-- Rest of feed here -->
For the slatecave I've added the line to my atom feed template and put a very minimalistic stylesheet into the static files.
Note: I didn't have this template before this project so I customised Zola's builtin template a little.
Note: If you want to use XSLT 2.0 functions (mainly
tokenize()) you have to set
2.0 on the
Getting Content from the Atom-Feed
To get content from the original XML one can use an
<xsl:value-of select="/xpath/goes/here" /> tag.
This tag replaces itself with the content of the first tag returned by the XPath in the
What is XPath? XPath is a way to select tags from an XML Document, it works a bit like a Filepath and a bit like a CSS Selector.
To spare you the headache: Don't forget to declare and use the
atom namespace on the XSLT-Sheet.
Nodes in the Atom feed can then be accessed like the following:
With that out of the way you follow the the w3schools XSLT Tutorial to create such a sheet yourself.
Content Security Policy
script-src 'self'; allows loading and executing the XSLT-Sheet resulting in some pretty Atom-Feeds.
I hope that information was useful or at least interesting to you!
This is more a braindump style of post, let me know how that went.