generate json feed

config.js

@@ -1,7 +1,7 @@
 module.exports = {
   siteTitle: 'kremalicious',
   siteTitleShort: 'krlc',
-  siteDescription: 'Blog of designer & developer Matthias Kretschmann.',
+  siteDescription: 'Blog of designer & developer Matthias Kretschmann',
   siteUrl: 'https://kremalicious.com',
   themeColor: '#88bec8',
   backgroundColor: '#e7eef4',

gatsby-config.js

@@ -12,6 +12,7 @@ if (!process.env.GITHUB_TOKEN) {
 
 const siteConfig = require('./config')
 const sources = require('./gatsby/sources')
+const { feedContent } = require('./gatsby/feeds')
 
 // required for gatsby-plugin-meta-redirect
 require('regenerator-runtime/runtime')
@@ -164,15 +165,18 @@ module.exports = {
         feeds: [
           {
             serialize: ({ query: { allMarkdownRemark } }) => {
-              return allMarkdownRemark.edges.map(edge => ({
-                title: edge.node.frontmatter.title,
-                date: edge.node.fields.date,
-                description: feedContent(edge),
-                url: siteConfig.siteUrl + edge.node.fields.slug,
-                categories: edge.node.frontmatter.tags,
-                author: siteConfig.author.name,
-                guid: siteConfig.siteUrl + edge.node.fields.slug
-              }))
+              return allMarkdownRemark.edges.map(edge => {
+                return Object.assign({}, edge.node.frontmatter, {
+                  title: edge.node.frontmatter.title,
+                  date: edge.node.fields.date,
+                  description: edge.node.excerpt,
+                  url: siteConfig.siteUrl + edge.node.fields.slug,
+                  categories: edge.node.frontmatter.tags,
+                  author: siteConfig.author.name,
+                  guid: siteConfig.siteUrl + edge.node.fields.slug,
+                  custom_elements: [{ 'content:encoded': feedContent(edge) }]
+                })
+              })
             },
             query: `
               {
@@ -184,6 +188,7 @@ module.exports = {
                     node {
                       html
                       fields { slug, date }
+                      excerpt
                       frontmatter {
                         title
                         image {
@@ -218,14 +223,3 @@ module.exports = {
     'gatsby-plugin-offline'
   ]
 }
-
-const feedContent = edge => {
-  const { image } = edge.node.frontmatter
-  const { html } = edge.node
-  const footer =
-    '<hr />This post was published on <a href="https://kremalicious.com">kremalicious.com</a>'
-
-  return image
-    ? `<img src="${image.childImageSharp.resize.src}" /><br />${html}${footer}`
-    : `${html}${footer}`
-}

gatsby-node.js

@@ -6,6 +6,7 @@ const {
   generateTagPages,
   generateRedirectPages
 } = require('./gatsby/createPages')
+const { generateJsonFeed } = require('./gatsby/feeds')
 const { itemsPerPage } = require('./config')
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
@@ -50,13 +51,52 @@ exports.createPages = async ({ graphql, actions }) => {
   // Generate posts & posts index
   generatePostPages(createPage, posts, numPages)
 
-  // Generate Tag Pages
+  // Generate tag pages
   generateTagPages(createPage, posts, numPages)
 
-  // create manual redirects
+  // Create manual redirects
   generateRedirectPages(createRedirect)
 }
 
+exports.onPostBuild = async ({ graphql }) => {
+  // JSON Feed query
+  const result = await graphql(`
+    {
+      allMarkdownRemark(sort: { order: DESC, fields: [fields___date] }) {
+        edges {
+          node {
+            html
+            fields {
+              slug
+              date
+            }
+            excerpt
+            frontmatter {
+              title
+              tags
+              updated
+              image {
+                childImageSharp {
+                  resize(width: 940, quality: 85) {
+                    src
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  if (result.errors) throw result.errors
+
+  // Generate json feed
+  await generateJsonFeed(result.data.allMarkdownRemark.edges)
+
+  return Promise.resolve()
+}
+
 // Fix web3
 // https://github.com/ethereum/web3.js/issues/1105#issuecomment-446039296
 exports.onCreateWebpackConfig = ({ actions }) => {

gatsby/feeds.js

@@ -0,0 +1,66 @@
+const fs = require('fs')
+const path = require('path')
+const pify = require('pify')
+const { siteUrl, siteTitle, siteDescription, author } = require('../config')
+const writeFile = pify(fs.writeFile)
+
+const feedContent = edge => {
+  const { image } = edge.node.frontmatter
+  const { html } = edge.node
+  const footer =
+    '<hr />This post was published on <a href="https://kremalicious.com">kremalicious.com</a>'
+
+  return image
+    ? `<img src="${image.childImageSharp.resize.src}" /><br />${html}${footer}`
+    : `${html}${footer}`
+}
+
+const generateJsonFeed = async posts => {
+  const jsonItems = await posts.map(edge => {
+    const { frontmatter, fields, excerpt } = edge.node
+    const { slug, date } = fields
+
+    return {
+      id: path.join(siteUrl, slug),
+      url: path.join(siteUrl, slug),
+      title: frontmatter.title,
+      summary: excerpt,
+      date_published: new Date(date).toISOString(),
+      date_modified: frontmatter.updated
+        ? new Date(frontmatter.updated).toISOString()
+        : new Date(date).toISOString(),
+      tags: [frontmatter.tags],
+      content_html: feedContent(edge)
+    }
+  })
+
+  const jsonFeed = {
+    version: 'https://jsonfeed.org/version/1',
+    title: siteTitle,
+    description: siteDescription,
+    home_page_url: siteUrl,
+    feed_url: path.join(siteUrl, 'feed.json'),
+    user_comment:
+      'This feed allows you to read the posts from this site in any feed reader that supports the JSON Feed format. To add this feed to your reader, copy the following URL — https://kremalicious.com/feed.json — and add it your reader.',
+    favicon: path.join(siteUrl, 'favicon.ico'),
+    icon: path.join(siteUrl, 'apple-touch-icon.png'),
+    author: {
+      name: author.name,
+      url: author.uri
+    },
+    items: jsonItems
+  }
+
+  await writeFile(
+    path.join('./public', 'feed.json'),
+    JSON.stringify(jsonFeed),
+    'utf8'
+  ).catch(err => {
+    throw Error('\nFailed to write JSON Feed file: ', err)
+  })
+
+  // eslint-disable-next-line no-console
+  console.log('\nsuccess Generating JSON feed')
+}
+
+module.exports = { generateJsonFeed, feedContent }

package.json

@@ -98,6 +98,7 @@
     "markdownlint-cli": "^0.15.0",
     "npm-run-all": "^4.1.5",
     "ora": "^3.2.0",
+    "pify": "^4.0.1",
     "prettier": "^1.17.0",
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^10.0.0",

src/components/atoms/SEO.jsx

@@ -120,6 +120,13 @@ const MetaTags = ({
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={image} />
+
+    <link
+      rel="alternate"
+      title="JSON Feed"
+      type="application/json"
+      href={`${siteMeta.siteUrl}/feed.json`}
+    />
   </Helmet>
 )