Fix images in the RSS feed

gatsby-config.js

@@ -7,6 +7,7 @@ require('./config/prismjs/usage')
 
 const apiMiddleware = require('./src/server/middleware/api')
 const redirectsMiddleware = require('./src/server/middleware/redirects')
+const makeFeedHtml = require('./plugins/utils/makeFeedHtml')
 const { BLOG } = require('./src/consts')
 
 const title = 'Data Version Control · DVC'
@@ -126,27 +127,28 @@ const plugins = [
           description,
           output: '/blog/rss.xml',
           query: `
-              {
-                allBlogPost(
-                  sort: { fields: [date], order: DESC }
-                ) {
-                  nodes {
-                    html
-                    slug
-                    title
-                    date
-                    description
-                  }
+            {
+              allBlogPost(
+                sort: { fields: [date], order: DESC }
+              ) {
+                nodes {
+                  htmlAst
+                  slug
+                  title
+                  date
+                  description
                 }
               }
-            `,
+            }
+          `,
           serialize: ({ query: { site, allBlogPost } }) => {
             return allBlogPost.nodes.map(node => {
+              const html = makeFeedHtml(node.htmlAst, site.siteMetadata.siteUrl)
               return Object.assign(
                 {},
                 {
                   /* eslint-disable-next-line @typescript-eslint/camelcase */
-                  custom_elements: [{ 'content:encoded': node.html }],
+                  custom_elements: [{ 'content:encoded': html }],
                   title: node.title,
                   date: node.date,
                   description: node.description,
@@ -170,7 +172,7 @@ const plugins = [
               }
             }
           }
-        `
+    `
     },
     resolve: `gatsby-plugin-feed`
   },

plugins/utils/makeFeedHtml.js

@@ -0,0 +1,53 @@
+const { imageWrapperClass } = require('gatsby-remark-images/constants')
+const unified = require('unified')
+const { convertHastToHtml } = require('./convertHast.js')
+const { select, selectAll } = require('hast-util-select')
+
+const rootToAbsolute = siteUrl => tree => {
+  selectAll('a', tree).forEach(node => {
+    if (node.properties.href.startsWith('/')) {
+      node.properties.href = siteUrl + node.properties.href
+    }
+  })
+  selectAll('img', tree).forEach(node => {
+    if (node.properties.src.startsWith('/')) {
+      node.properties.src = siteUrl + node.properties.src
+    }
+  })
+  return tree
+}
+
+const unwrapImages = () => tree => {
+  selectAll(`.${imageWrapperClass}`, tree).forEach(node => {
+    // Set the fallback image as the wrapper's only child, and then
+    // give that image the wrapper's original style.
+    const fallbackImg = select('img', node)
+    node.children = [
+      {
+        ...fallbackImg,
+        properties: {
+          ...fallbackImg.properties,
+          style: 'max-width: 100%; margin: auto;'
+        }
+      }
+    ]
+  })
+  return tree
+}
+
+function makeFeedHtml(htmlAst, siteUrl) {
+  // We add the rootToAbsolute processor before usage because it depends on siteUrl.
+  return convertHastToHtml(
+    unified()
+      /*
+         All images processed by Gatsby to be responsive are "unwrapped" into
+         their fallback 'img' nodes, as RSS doesn't work with the tricks that
+         true HTML does.
+       */
+      .use(unwrapImages)
+      .use(rootToAbsolute, siteUrl)
+      .runSync(htmlAst)
+  )
+}
+
+module.exports = makeFeedHtml