How to customize the RSS Feed in Gatsby

gatsby-plugin-feed

The plugin allows you to customize the fields, add new fields, etc. Great for adding, for instance, Podcast fields (Apple iTunes information). Check it out on Github.

Add a new field

On my Reviews site I initially wanted to add a new field.

It is rather easy to add a new custom field, like so:

return allMarkdownRemark.edges.map(edge => { return Object.assign({}, edge.node.frontmatter, { description: edge.node.excerpt, date: edge.node.frontmatter.date, url: site.siteMetadata.siteUrl + edge.node.fields.slug, guid: site.siteMetadata.siteUrl + edge.node.fields.slug, custom_elements: [ { "content:encoded": edge.node.html }, { "my-custom-field": 'Hello World' } ], })

IFTTT

On my particular case the problem I encounted with the custom item field is that IFTTT does not support them. At the time of this writting you can not use cusotm fields as ingredient for your actions. I wanted to have a custom field and use that to post to Mastodon.

Custom description

The solution ended up being customize the output of the "content" or "entryContent", the feed item decription. Then any RSS Feed reader would take the same content, the well known content field.

Directly on the gatsby-plugin-feed settings in the gatsby-config.js:

{ resolve: `gatsby-plugin-feed`, options: { query: ` { site { siteMetadata { title description siteUrl site_url: siteUrl } } } `, feeds: [ { serialize: ({ query: { site, allMarkdownRemark } }) => { return allMarkdownRemark.edges.map(edge => { return Object.assign({}, edge.node.frontmatter, { description: `📺 Just watched: ${edge.node.frontmatter.title}\n\nRating: ${edge.node.frontmatter.ratingEmoji}\n\nReview 👉 ${site.siteMetadata.siteUrl + edge.node.fields.slug}`, date: edge.node.frontmatter.date, url: site.siteMetadata.siteUrl + edge.node.fields.slug, guid: site.siteMetadata.siteUrl + edge.node.fields.slug, }) }) }, query: ` { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] }, ) { edges { node { excerpt html fields { slug } frontmatter { title date, ratingEmoji } } } } } `, output: "/rss.xml", }, ], }, },

Notice I have a custom field in my GraphQL query "ratingEmoji", which I'm using in the new description output.

Now, instead of the regular post content, the description field when posted to Mastodon looks like:

Conclusion

It is super easy to customize the feed output with new fields but you need to consider who will be consuming that feed. Do you have control over that? If not, you need to fallback to the standard fields and adapt those.

About Ricard Torres

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*