A Gatsby plugin to generate JSON Feed and RSS feeds for generated Gatsby sites.
To get started, install via yarn or npm:
yarn add @u-blox/custom-feed-builder-gatsby
//OR
npm i @u-blox/custom-feed-builder-gatsby
Basic setup requires the following minimum siteMetaData located in your gatsby-config.js file:
siteMetadata {
title: 'Gatsby',
description: 'A static site generator',
siteUrl: 'https://gatsbyjs.org',
author: 'Author Name'
},To activate and configure the plugin add it to the plugins array in the gatsby config as you would any other plugin.
plugins: [
{
resolve: '@u-blox/custom-feed-builder-gatsby',
options: {
//...
},
},
]Version 1 allowed for using the built-in config, but for version 2+ you'll need to provide a siteQuery, one or more feeds, and a normalize function for each feed. This tells the plugin how to map your data onto the feeds.
Here is an example using gatsby-transformer-remark's allMarkdownRemark as a source for your content:
// gatsby-config.js
siteMetadata {
title: 'Gatsby',
description: 'A static site generator',
siteUrl: 'https://gatsbyjs.org',
author: 'Author Name'
},
plugins: [
{
resolve: '@u-blox/custom-feed-builder-gatsby',
options: {
generator: `GatsbyJS`,
rss: true, // Set to true to enable rss generation
json: true, // Set to true to enable json feed generation
siteQuery: `
{
site {
siteMetadata {
title
description
siteUrl
author
}
}
}
`,
feeds: [
{
name: 'feed', // This determines the name of your feed file => feed.json & feed.xml
path: "/", //Where you want to save the output default in case of / or empty it will be public
addToHeader: false, //Push This feed to header
query: `
{
allMarkdownRemark(
sort: {order: DESC, fields: [frontmatter___date]},
limit: 100,
) {
edges {
node {
html
frontmatter {
date
path
title
}
}
}
}
}
`,
normalize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.edges.map(edge => {
return {
title: edge.node.frontmatter.title,
date: parseInt(edge.node.frontmatter.date) * 1000, // Multiply In case you have unix timestamp
url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
html: edge.node.html,
}
})
},
},
],
},The important takeaway from the normalize function is the mapping of your graphql data onto the title, date, url, and html fields. If you have a special way of building urls, this is the place to handle that transformation before sending it to the plugin.
Above we saw markdown used, however other formats should work as well. Here's an example using MDX:
//...
feeds: [
{
name: 'mdx-feed',
path: "/",
addToHeader: false,
query: `
{
allMdx(
sort: {order: DESC, fields: [frontmatter___date]},
limit: 100,
) {
edges {
node {
html
frontmatter {
date
path
title
}
}
}
}
}
`,
normalize: ({ query: { site, allMdx } }) => {
return allMdx.edges.map(edge => {
return {
title: edge.node.frontmatter.title,
date: edge.node.frontmatter.date,
url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
html: edge.node.html,
}
})
},
},
],If you're looking for something more battle-tested and only need rss, check out the official gatsby-plugin-feed.