Created
January 24, 2022 18:43
-
-
Save andrewstiefel/57a0a400aa2deb6c9fe18c6da4e16e0f to your computer and use it in GitHub Desktop.
Simple XSL boilerplate for styling Atom feeds in Jekyll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- | |
--- | |
<?xml version="1.0" encoding="utf-8"?> | |
<?xml-stylesheet href="/feed.xsl" type="text/xsl"?> | |
<feed xmlns="http://www.w3.org/2005/Atom"> | |
<title>{{ site.title }}</title> | |
<link href="{{ site.url }}{{ site.baseurl }}/feed.xml" rel="self"/> | |
<link href="{{ site.url }}{{ site.baseurl }}/" rel="alternate"/> | |
<subtitle>{{ site.description }}</subtitle> | |
<updated>{{ site.time | date_to_xmlschema }}</updated> | |
<id>{{ site.url }}/</id> | |
<author> | |
<name>{{ site.author.name }}</name> | |
<email>{{ site.author.email }}</email> | |
</author> | |
<rights type="text">Copyright © {{ site.time | date: "%Y" }} {{ site.author }}. All rights reserved.</rights> | |
{% for post in site.posts %} | |
<entry> | |
<title>{{ post.title }}</title> | |
<link rel="alternate" href="{{ site.url }}{{ post.url }}"/> | |
<updated>{{ post.date | date_to_xmlschema }}</updated> | |
<id>{{ site.url }}{{ site.baseurl }}{{ post.id }}</id> | |
<summary>{{ post.description }}</summary> | |
<content type="html">{{ post.content | xml_escape }}</content> | |
</entry> | |
{% endfor %} | |
</feed> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<xsl:stylesheet | |
version="1.0" | |
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" | |
xmlns:atom="http://www.w3.org/2005/Atom" | |
exclude-result-prefixes="atom" | |
> | |
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/> | |
<xsl:template match="/"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> | |
<title>Web Feed • <xsl:value-of select="atom:feed/atom:title"/></title> | |
<style type="text/css"> | |
body{max-width:768px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5em}section{margin:30px 15px}h1{font-size:2em;margin:.67em 0;line-height:1.125em}h2{border-bottom:1px solid #eaecef;padding-bottom:.3em}.alert{background:#fff5b1;padding:4px 12px;margin:0 -12px}a{text-decoration:none}.entry h3{margin-bottom:0}.entry p{margin:4px 0} | |
</style> | |
</head> | |
<body> | |
<section> | |
<div class="alert"> | |
<p><strong>This is a web feed</strong>, also known as an RSS feed. <strong>Subscribe</strong> by copying the URL from the address bar into your newsreader app.</p> | |
</div> | |
</section> | |
<section> | |
<xsl:apply-templates select="atom:feed" /> | |
</section> | |
<section> | |
<h2>Recent Items</h2> | |
<xsl:apply-templates select="atom:feed/atom:entry" /> | |
</section> | |
</body> | |
</html> | |
</xsl:template> | |
<xsl:template match="atom:feed"> | |
<h1><xsl:value-of select="atom:title"/>'s Web Feed Preview</h1> | |
<p>This RSS feed provides the latest posts from <xsl:value-of select="atom:title"/>'s blog. | |
<a class="head_link" target="_blank"> | |
<xsl:attribute name="href"> | |
<xsl:value-of select="atom:link[@rel='alternate']/@href"/> | |
</xsl:attribute> | |
Visit Website → | |
</a> | |
</p> | |
<h2>What is an RSS feed?</h2> | |
<p>An RSS feed is a data format that contains the latest content from a website, blog, or podcast. You can use feeds to <strong>subscribe</strong> to websites and get the <strong>latest content in one place</strong>.</p> | |
<ul> | |
<li><strong>Feeds put you in control.</strong> Unlike social media apps, there is no algorithm deciding what you see or read. You always get the latest content from the creators you care about.</li> | |
<li><strong>Feed are private by design.</strong> No one owns web feeds, so no one is harvesting your personal information and profiting by selling it to advertisers.</li> | |
<li><strong>Feeds are spam-proof.</strong> Had enough? Easy, just unsubscribe from the feed.</li> | |
</ul> | |
<p>All you need to do to get started is to add the URL (web address) for this feed to a special app called a newsreader. Visit <a href="https://aboutfeeds.com/">About Feeds</a> to get started with newsreaders and subscribing. It’s free. </p> | |
</xsl:template> | |
<xsl:template match="atom:entry"> | |
<div class="entry"> | |
<h3> | |
<a target="_blank"> | |
<xsl:attribute name="href"> | |
<xsl:value-of select="atom:id"/> | |
</xsl:attribute> | |
<xsl:value-of select="atom:title"/> | |
</a> | |
</h3> | |
<p> | |
<xsl:value-of select="atom:summary" disable-output-escaping="yes" /> | |
</p> | |
<small> | |
Published: <xsl:value-of select="atom:updated" /> | |
</small> | |
</div> | |
</xsl:template> | |
</xsl:stylesheet> |
I too wanted to thank you for your blog post. I had previously attempted to use CSS but your XSL is much nicer! I am using your template for https://www.redblobgames.com/blog/posts.xml
@redblobgames Hey, thanks for sharing! Love how you took the example and customized it to match your site's styles 🙌
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@chris-prenissl Awesome, thanks so much for your note and for sharing your blog! Love seeing implementations out there 😍