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' }
    ],
  })Code language: JavaScript (javascript)

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",
      },
    ],
  },
},Code language: JavaScript (javascript)

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.

Leave a Reply

Your email address will not be published. Required fields are marked *