quarto-dev / quarto-dev/quarto-cli
Support styling RSS stylesheets by adding a `index.xsl` file
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Discussed in https://github.com/quarto-dev/quarto-cli/discussions/4787
Originally posted by kdheepak March 12, 2023
By adding a index.xsl with appropriate styling, you can make the RSS feed the same style as the webpage. You'll need to add the following to the index.xml file.
<?xml-stylesheet type="text/xsl" media="screen" href="/index.xsl"?>
Here's an example of a index.xsl file:
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
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/"
version="1.0"
>
<xsl:output method="xml" />
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title><xsl:value-of select="rss/channel/title" /> (RSS)</title>
<link rel="stylesheet" href="/_quarto/style.css" />
<link href="/site_libs/quarto-html/tippy.css" rel="stylesheet"/>
<link href="/site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles"/>
<script src="/site_libs/bootstrap/bootstrap.min.js"></script>
<link href="/site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet"/>
<link href="/site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light"/>
<link rel="icon" href="/favicon.svg" />
</head>
<body>
<article>
<header>
<h1>
<abbr title="Really Simple Syndication">RSS</abbr> feed for
<a>
<xsl:attribute name="href">
<xsl:value-of select="rss/channel/link" />
</xsl:attribute>
<xsl:value-of select="rss/channel/title" />
</a>
</h1>
</header>
<section>
<p>You may use the <acronym
title="Uniform Resource Locater"
>URL</acronym> of this document or copy the address below and paste it for any RSS purposes.
<br />
<label for="address">RSS address: </label>
<input style="width:300px">
<xsl:attribute name="id">address</xsl:attribute>
<xsl:attribute name="spellcheck">false</xsl:attribute>
<xsl:attribute name="value">
<xsl:value-of select="rss/channel/atom:link[@rel='self']/@href" />
</xsl:attribute>
</input>
</p>
<p>New to feeds? You can find out more about the RSS file format at <a
href="http://en.wikipedia.org/wiki/RSS_(file_format)"
>Wikipedia's RSS entry</a> or by clicking <a
target="_blank"
href="https://duckduckgo.com/?q=how+to+get+started+with+rss+feeds"
>here</a> to search on the web to learn more.</p>
<h3>Recent blogs:</h3>
<xsl:for-each select="rss/channel/item">
<p>
<a>
<xsl:attribute name="href"><xsl:value-of
select="link"
/></xsl:attribute><xsl:value-of select="title" />
</a>
</p>
</xsl:for-each>
</section>
</article>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
I haven't fixed the styling for my page yet, but this is what the index.xml page would look like with some styling:
It'd be ideal if this was autogenerated.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the code that generates index.xml and determine how generated site assets are exposed. Add generation of index.xsl and the xml-stylesheet reference using the supplied RSS layout, then verify that a built RSS page displays with the site's styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100