This commit is contained in:
30
css/feed.css
Normal file
30
css/feed.css
Normal file
@ -0,0 +1,30 @@
|
||||
main {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.rss-explainer {
|
||||
background: var(--color-bg-alt);
|
||||
padding: 1rem;
|
||||
margin-block: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.rss-explainer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rss-explainer p + p {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.feed-url {
|
||||
font-family: var(--font-family-code);
|
||||
font-size: .9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p:has(small) {
|
||||
display: block;
|
||||
margin: .25rem 0 0 .75rem;
|
||||
color: var(--color-grey);
|
||||
}
|
||||
@ -66,6 +66,7 @@ export default async function(eleventyConfig) {
|
||||
eleventyConfig.addPlugin(feedPlugin, {
|
||||
type: "atom", // or "rss", "json"
|
||||
outputPath: "/feed.xml",
|
||||
stylesheet: "/feed.xsl",
|
||||
collection: {
|
||||
name: "posts", // iterate over `collections.posts`
|
||||
limit: 10, // 0 means no limit
|
||||
|
||||
93
src/meta/feed.xsl.njk
Normal file
93
src/meta/feed.xsl.njk
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
permalink: feed.xsl
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!--
|
||||
|
||||
# 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" xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
|
||||
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
|
||||
<xsl:template match="/">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<title>feed | <xsl:value-of select="atom:feed/atom:title"/></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<style>{% include "css/main.css" %}</style>
|
||||
<style>{% include "css/feed.css" %}</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="rss-explainer">
|
||||
<p>
|
||||
<strong>This is a web feed,</strong> also known as an RSS or Atom feed. <strong>Subscribe</strong>
|
||||
by copying the URL below or from the address bar into your newsreader.
|
||||
</p>
|
||||
<p class="feed-url">https://leecat.art/feed.xml</p>
|
||||
<p>
|
||||
Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and subscribing. It’s free.
|
||||
</p>
|
||||
</div>
|
||||
<h1>
|
||||
<!-- https://commons.wikimedia.org/wiki/File:Feed-icon.svg -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" id="RSSicon" viewBox="0 0 256 256" role="presentation">
|
||||
<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: <xsl:value-of select="atom:feed/atom:title"/>
|
||||
</h1>
|
||||
<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>
|
||||
<p><a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="/atom:feed/atom:link[not(@rel)]/@href"/>
|
||||
</xsl:attribute>
|
||||
Visit website →
|
||||
</a></p>
|
||||
<h2>recent items</h2>
|
||||
<xsl:apply-templates select="atom:feed/atom:entry" />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
<xsl:template match="atom:feed/atom:entry">
|
||||
<div>
|
||||
<h3>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</a>
|
||||
</h3>
|
||||
<p><small>
|
||||
Published: <xsl:value-of select="atom:updated" />
|
||||
</small></p>
|
||||
</div>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
Reference in New Issue
Block a user
