mayx
4 months ago
1 changed files with 77 additions and 74 deletions
Unified View
Diff Options
-
+77 -74feed.xslt.xml
+ 77
- 74
feed.xslt.xml
View File
| @ -1,89 +1,92 @@ | |||||
| <?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||||
| <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"/> | |||||
| <!-- | |||||
| # Pretty Atom Feed | |||||
| Based on "Pretty RSS Feed": https://github.com/genmon/aboutfeeds/issues/26 | |||||
| Styles an Atom feed, making it friendly for humans viewers, and adds a link | |||||
| to aboutfeeds.com for new user onboarding. See it in action: | |||||
| https://nicolas-hoizey.com/feeds/all.xml | |||||
| --> | |||||
| <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="4.0" encoding="UTF-8" indent="yes"/> | |||||
| <xsl:template match="/"> | <xsl:template match="/"> | ||||
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> | <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> | ||||
| <head> | <head> | ||||
| <title> | |||||
| Atom Feed | | |||||
| <xsl:value-of select="/atom:feed/atom:title"/> | |||||
| </title> | |||||
| <meta charset="utf-8"/> | <meta charset="utf-8"/> | ||||
| <meta http-equiv="content-type" content="text/html; charset=utf-8"/> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | <meta name="viewport" content="width=device-width, initial-scale=1"/> | ||||
| <title><xsl:value-of select="atom:feed/atom:title"/></title> | |||||
| <style type="text/css">*{box-sizing:border-box}body{background-color:#fff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height:1.5}a{color:#0366d6;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:40rem;margin:1rem auto;padding:1rem}nav{margin-top:2rem;margin-bottom:2rem}p{margin-top:0;margin-bottom:1rem}h1,h2,h3{margin-top:0;margin-bottom:1rem;font-weight:600;line-height:1.25}h1{padding-bottom:.3em;font-size:2em}h1 svg{padding-right:.25rem;vertical-align:text-bottom;width:1.2em;height:1.2em}h2{margin-top:1.5rem;padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #eaecef}h3{font-size:1.25em;margin-bottom:0}.about{background-color:#fff5b1;margin:.25rem -.25rem;padding:.25rem}header{padding-top:2rem;padding-bottom:2rem}.item{padding-bottom:2rem}.gray{color:#586069}</style> | |||||
| </head> | </head> | ||||
| <body class="feed-preview"> | |||||
| <p> | |||||
| <strong>This is an Atom feed (similar to RSS)</strong>. Subscribe by copying | |||||
| the URL from the address bar into your newsreader. Visit <a | |||||
| href="https://aboutfeeds.com">About Feeds | |||||
| </a> to learn more and get started. It's free. | |||||
| <body> | |||||
| <nav class="container"> | |||||
| <p class="about"> | |||||
| <strong>This is a web feed,</strong> also known as an RSS or Atom feed.<br /><strong>Subscribe</strong> by copying the URL from the address bar into your newsreader. | |||||
| </p> | </p> | ||||
| <h1 class="flex items-start"> | |||||
| <!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg --> | |||||
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" | |||||
| class="mr-5" | |||||
| style="flex-shrink: 0; width: 1em; height: 1em;" | |||||
| viewBox="0 0 256 256"> | |||||
| <defs> | |||||
| <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" | |||||
| id="RSSg"> | |||||
| <stop offset="0.0" stop-color="#E3702D"/> | |||||
| <stop offset="0.1071" stop-color="#EA7D31"/> | |||||
| <stop offset="0.3503" stop-color="#F69537"/> | |||||
| <stop offset="0.5" stop-color="#FB9E3A"/> | |||||
| <stop offset="0.7016" stop-color="#EA7C31"/> | |||||
| <stop offset="0.8866" stop-color="#DE642B"/> | |||||
| <stop offset="1.0" stop-color="#D95B29"/> | |||||
| </linearGradient> | |||||
| </defs> | |||||
| <rect width="256" height="256" rx="55" ry="55" x="0" y="0" | |||||
| fill="#CC5D15"/> | |||||
| <rect width="246" height="246" rx="50" ry="50" x="5" y="5" | |||||
| fill="#F49C52"/> | |||||
| <rect width="236" height="236" rx="47" ry="47" x="10" y="10" | |||||
| fill="url(#RSSg)"/> | |||||
| <circle cx="68" cy="189" r="24" fill="#FFF"/> | |||||
| <path | |||||
| d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" | |||||
| fill="#FFF"/> | |||||
| <path | |||||
| d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" | |||||
| fill="#FFF"/> | |||||
| </svg> | |||||
| Feed Preview | |||||
| </h1> | |||||
| <h2>Feed from <xsl:value-of select="/atom:feed/atom:title"/></h2> | |||||
| <p> | |||||
| <xsl:value-of select="/atom:feed/atom:subtitle"/> | |||||
| <p class="gray"> | |||||
| Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and subscribing. It’s free. | |||||
| </p> | </p> | ||||
| <a> | |||||
| <xsl:attribute name="href"> | |||||
| <xsl:value-of select="/atom:feed/atom:link[2]/@href"/> | |||||
| </xsl:attribute> | |||||
| Visit Website → | |||||
| </a> | |||||
| <hr /> | |||||
| <h3>Recent posts</h3> | |||||
| <xsl:for-each select="/atom:feed/atom:entry"> | |||||
| <h4> | |||||
| <xsl:value-of select="substring(atom:published, 0, 11)" /> | |||||
| » | |||||
| <a> | |||||
| <xsl:attribute name="href"> | |||||
| <xsl:value-of select="atom:link/@href"/> | |||||
| </xsl:attribute> | |||||
| <xsl:value-of select="atom:title"/> | |||||
| </a> | |||||
| </h4> | |||||
| <p><xsl:value-of select="atom:summary"/></p> | |||||
| </xsl:for-each> | |||||
| <hr /> | |||||
| </nav> | |||||
| <div class="container"> | |||||
| <header> | |||||
| <h1> | |||||
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256"> | |||||
| <defs> | |||||
| <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg"> | |||||
| <stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/> | |||||
| <stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/> | |||||
| <stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/> | |||||
| <stop offset="1.0" stop-color="#D95B29"/> | |||||
| </linearGradient> | |||||
| </defs> | |||||
| <rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/> | |||||
| <rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/> | |||||
| <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/> | |||||
| <circle cx="68" cy="189" r="24" fill="#FFF"/> | |||||
| <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/> | |||||
| <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/> | |||||
| </svg> | |||||
| Web Feed Preview | |||||
| </h1> | |||||
| <h2><xsl:value-of select="atom:feed/atom:title"/></h2> | |||||
| <p><xsl:value-of select="atom:feed/atom:description"/></p> | |||||
| <p>This preview only shows titles, but the actual feed contains the full content.</p> | |||||
| <a> | |||||
| <xsl:attribute name="href"> | |||||
| <xsl:value-of select="/atom:feed/atom:link[not(@rel)]/@href"/> | |||||
| </xsl:attribute> | |||||
| Visit Website → | |||||
| </a> | |||||
| </header> | |||||
| <h2>Recent Items</h2> | |||||
| <xsl:apply-templates select="atom:feed/atom:entry" /> | |||||
| <footer> | <footer> | ||||
| <small><p>Made with ❤ by Mayx</p></small> | |||||
| <small><p>Made with ❤ by Mayx</p></small> | |||||
| </footer> | </footer> | ||||
| </div> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||
| </xsl:template> | </xsl:template> | ||||
| <xsl:template match="atom:feed/atom:entry"> | |||||
| <div class="item"> | |||||
| <h3> | |||||
| <a> | |||||
| <xsl:attribute name="href"> | |||||
| <xsl:value-of select="atom:link/@href"/> | |||||
| </xsl:attribute> | |||||
| <xsl:value-of select="atom:title"/> | |||||
| </a> | |||||
| </h3> | |||||
| <small class="gray"> | |||||
| Published at <xsl:value-of select="substring(atom:published, 0, 11)" /> | |||||
| </small> | |||||
| <p><xsl:value-of select="atom:summary"/></p> | |||||
| </div> | |||||
| </xsl:template> | |||||
| </xsl:stylesheet> | </xsl:stylesheet> | ||||