Eleventy - Convert a RSS Feed to a collection
I want to create an archive of my tech writing from across the web. One source is the author RSS feeds of blogs I wrote for. How about I transform it into an eleventy collection?
My use case - Creating an archive of my tech writing from across the web
This tutorial follows on from my previous eleventy tutorial where my objective was to create an archive of my tech writing from across the web. In this instance, I am creating a collection of the articles I wrote for LogRocket’s blog sourced from the author RSS feed for myself.
I will list the LogRocket articles on the “Other Writing” page as per screenshot below to demonstrate using the collection.
Without further ado, let’s walk through the code.
The code
This is an abbreviated view of the project structure:
The _data/rss.js
file is the global data file that will do the fetching and transformation of the RSS feed into a collection.
The content/other-writing.njk
file is the Nunjucks template for the “Other Writing” webpage.
Let’s look at the code for each of these.
The global data file - rss.js
Install the eleventy fetch eleventy plugin. We will use it to fetch the RSS feed.
Fetch the RSS feed weekly
The eleventy fetch takes 2 parameter: a URL and an options
object. To fetch the LogRocket RSS feed once a week. I provide the property duration: 1w
to the plugin’s options
object.
The plugin can save any kind of asset — we choose “text” as the content type when it is not JSON or a media format. I provide the property type: "text"
to the plugin’s options
object.
Now we have the RSS feed saved and cached locally. Next we can manipulate the XML content of the feed.
Validate the XML and transform the XML to a JavaScript object
I looked through a few JavaScript XML libraries, I found the documentation was poor for most. And maybe its just me, but the APIs are odd and hard to figure out. I settled on fast-xml-parse
. I found it was the easiest to figure out for my use cases. The library can validate XML and transform XML to a JavaScript object.
The following functions cover my use cases:
- The
parser.XMLValidator.validate()
function will return a boolean or aValidationError
object to indicate if the RSS feed is valid. - The
parser.XMLParser.parse()
function will parse the XML content and return a JavaScript Object. You must create a newparser.XMLParser()
object to use this function.
Here is the code for validating the XML and transforming it to a JavaScript Object:
The object returned from the parse()
function looks like this:
Transform the articles to a custom collection
We can reference the array of articles through feed.rss.channel.item
. Now it is just a case of transforming that array into a form that satisfies your usage.
One field you will want to manipulate is pubDate
, it is a string and needs to be converted a Date
object to be used a date. I find it is best to be consistent and follow the same structure as the collection item object that Eleventy uses internally. Your templates are consistent then.
Here I use the map()
method of Array
to create a new array with the fields transformed:
That’s it. Now the data file will make our transformed posts available as a global collection that can be referenced as rss
in our templates.
You can find the full code for the file at: https://github.com/robole/eleventy-tutorials/blob/main/rss-feed-to-collection/_data/rss.js.
Using the collection in a nunjucks template - other-writing.njk
Here I loop through the rss
collection and generate an ordered list of posts for the “Other Writing” page.
This is how the page looks:
Source code
The source code is available in this GitHub repo – https://github.com/robole/eleventy-tutorials. You can find it as an independent project in the rss-feed-to-collection folder.
Can you give the repo a star to indicate that this was a worthwhile tutorial please? 🌟
Conclusion
If you want to transform a RSS feed and use it as a collection, you should be able to adapt this code with minimal effort. This method enabled me to create an archive of my tech writing from across the web. If I publish more articles on the LogRocket blog in future, they will be automatically picked from the RSS feed.