TIL you can style Atom feeds with XSLT
January 10, 2024
2 min read
Elixir
Phoenix
Add an <?xml-stylesheet?> processing instruction to your Atom feed pointing at an XSL file, and browsers will render it as styled HTML instead of raw XML.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
...
</feed>
The XSL template transforms the feed into HTML with inline styles:
<xsl:stylesheet version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<html>
<head>
<style>
body { font-family: sans-serif; max-width: 48rem; margin: 0 auto; }
</style>
</head>
<body>
<h1><xsl:value-of select="/atom:feed/atom:title" /></h1>
<xsl:for-each select="/atom:feed/atom:entry">
<a href="{atom:link/@href}">
<xsl:value-of select="atom:title" />
</a>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
All modern browsers support it, and those that don’t just show the raw XML.
