Add & configure RSS, add RSS button to Footer

Author: avrtt

gatsby-config.js

@@ -10,6 +10,60 @@ module.exports = {
     facebookUsername: `@vladaverett`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-feed`,
+      options: {
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
+          }
+        `,
+        feeds: [
+          {
+            serialize: ({ query: { site, allMdx } }) => {
+              return allMdx.nodes.map(node => {
+                return Object.assign({}, node.frontmatter, {
+                  description: node.excerpt,
+                  date: node.frontmatter.date,
+                  title: node.frontmatter.titleDetailed || node.frontmatter.title,
+                  url: site.siteMetadata.siteUrl + node.frontmatter.slug,
+                  guid: site.siteMetadata.siteUrl + node.frontmatter.slug,
+                  custom_elements: [{ "content:encoded": node.excerpt }],
+                })
+              })
+            },
+            query: `
+              {
+                allMdx(
+                  sort: { frontmatter: { index: DESC } }
+                  limit: 20
+                ) {
+                  nodes {
+                    excerpt
+                    frontmatter {
+                      titleDetailed
+                      title
+                      date
+                      slug
+                      index
+                    }
+                  }
+                }
+              }
+            `,
+            output: "/rss.xml",
+            title: "avrtt.blog RSS Feed",
+          },
+        ],
+      },
+    },
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
@@ -163,4 +217,4 @@ module.exports = {
       },
     },
   ],
-}
+}

package-lock.json

@@ -46,6 +46,7 @@
     "d3": "^7.9.0",
     "framer-motion": "^11.3.31",
     "gatsby": "^5.13.7",
+    "gatsby-plugin-feed": "^5.14.0",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.13.1",

package.json

@@ -6,6 +6,7 @@ import Email from "./email.svg";
 import Map from "./map.svg";
 import YouTube from "./youtube.svg";
 import Facebook from "./facebook.svg";
+import RSS from "./rss.svg";
 import { footerYear } from "../../data/lastUpdated";
 import { freelanceStatus, location } from "../../data/announcements"
 import { startHoursUTC, endHoursUTC } from '../../utils/freelance';
@@ -57,6 +58,9 @@ const Footer = () => {
           <a className={styles.footerLink} href="https://www.google.com/maps/d/viewer?mid=1X9b0bo11WcY9on87ZQXoB3YUkccwnK49&ll=0.3349379679001004%2C0&z=2">
             <img src={Map} className={styles.linkImg} alt="map-logo"/>
           </a>
+          <a className={styles.footerLink} href="/rss.xml">
+            <img src={RSS} className={styles.linkImg} alt="rss-logo"/>
+          </a>
         </div>
 
         {/* badges on the left */}