feat(blog): add feed XSLT options to render beautiful RSS and Atom feeds

[Xebec19]

Motivation

Adding XSLT / CSS support for the blog feeds permits to style them instead of printing XML markup:

This PR adds a new feedOptions.xslt attribute that permits to:

• conveniently turn on (true} default XSLT/CSS styling using our built-in .xsl/.css
  files
• provide your own .xsl / .css files for custom styling

const blog = {
  feedOptions: {
    xslt: true, // Easily turn the option on
  }
};

const blog = {
  feedOptions: {
    xslt: {
      rss: "custom-rss.xsl", // use custom .xsl for the RSS feed 
      atom: true, // use the built-in .xsl for the Atom feed
    },
  }
};

Test Plan

CI / unit test / argos / dogfood

Test links

Before:

• https://docusaurus.io/blog/atom.xml
• https://docusaurus.io/blog/rss.xml

After (Default xslt):

• https://deploy-preview-9252--docusaurus-2.netlify.app/blog/atom.xml
• https://deploy-preview-9252--docusaurus-2.netlify.app/blog/rss.xml

After (Custom xslt)

• https://deploy-preview-9252--docusaurus-2.netlify.app/tests/blog/rss.xml
• https://deploy-preview-9252--docusaurus-2.netlify.app/tests/blog/atom.xml

Related issues/PRs

Fix #9197

Related links

Feature inspired by these resources:

• https://darekkay.com/blog/rss-styling/
• https://rknight.me/blog/styling-rss-and-atom-feeds/
• https://x.com/stefanjudis/status/1672230720536756224

Examples of other styled RSS feeds:

• https://darekkay.com/atom.xml
• https://rknight.me/subscribe/posts/rss.xml
• https://www.stefanjudis.com/rss.xml

[facebook-github-bot]

Hi @Xebec19!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	3e55314
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/66ad0c6ef7edf40008559f69
😎 Deploy Preview	https://deploy-preview-9252--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	Report
/	🟠 60	🟢 98	🟢 96	🟢 100	Report
/docs/installation	🟠 51	🟢 97	🟢 100	🟢 100	Report
/docs/category/getting-started	🟠 75	🟢 100	🟢 100	🟠 86	Report
/blog	🟠 67	🟢 96	🟢 100	🟠 86	Report
/blog/preparing-your-site-for-docusaurus-v3	🔴 49	🟢 92	🟢 100	🟢 100	Report
/blog/tags/release	🟠 69	🟢 96	🟢 100	🟠 86	Report
/blog/tags	🟠 74	🟢 100	🟢 100	🟠 86	Report

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ Reference build (Review)	2 changed	Aug 2, 2024, 4:49 PM

[slorber]

Thanks

That looks like a good start but is not enough to be merged for a few reasons.

---

In case it wasn't clear: the goal is not to add XSLT just for our own website, but to build it as a feature for any Docusaurus site to have by default.

It needs to be modular and it needs to work well out of the box on any Docusaurus site, without conflicting with existing user static assets. My suggestion would be to output the xslt/css next to the feeds, under /blog/ for example, so that it is namespaced and we can use 2 blogs with different CSS/XSLT files.

---

The Atom feed is broken, see:

• Before https://docusaurus.io/blog/atom.xml
• After: https://deploy-preview-9252--docusaurus-2.netlify.app/blog/atom.xml

---

Also I don't think it looks super great as is. My suggestion would be to steal/adapt XSLT/CSS from what https://darekkay.com/blog/rss-styling/ is using. We'll improve from there.

[Xebec19]

OK I will do the requested changes

[OzakIOne]

During the refactor of my review I've thought about the customization.

Original files are in the plugin content blog (I don't think its the right place though it works)

• in each build docusaurus website there will be those original files even if the feature is not used (no big deal but still)
• the customization is done in the static directory which works but i guess would be better if it's in blog directory (like authors.yml)
• it might be possible to avoid code duplication in the addXslt function, and just call the function for each feed in the switch case