-
-
Save andrewstiefel/57a0a400aa2deb6c9fe18c6da4e16e0f to your computer and use it in GitHub Desktop.
| --- | |
| --- | |
| <?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> |
| <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> |
@colindean Thanks for your note, and glad you found it useful! Love the implementation on https://codeandsupply.co/jobs as well π
Awesome! I'm slowly working this into something else. Do you consider this public domain, or would you like to put some kind of license on it?
@colindean I consider this public domain. It's a very basic example that is meant to show a few possibilities. I hope people take this further by customizing the content, styles, etc. for their own projects β and extending it further.
Thank you for that confirmation! It's going in my toolkit ;-)
Thank you very much for your blog post https://andrewstiefel.com/style-atom-xsl. It helped a lot to understand feed styling and feeds in general and styling my personal blog feed https://chris-prenissl.github.io. :)
@chris-prenissl Awesome, thanks so much for your note and for sharing your blog! Love seeing implementations out there π
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 π
Thanks for this! I've used this to style the ATOM feed at https://codeandsupply.co/jobs. I've not worked in XSL in several years after using it actively for ~8 years, so it was a fun treat to get back to into it.