Setup RSS correctly

Author: deadcoder0904

next.config.js

@@ -78,6 +78,15 @@ module.exports = withBundleAnalyzer({
             }),
           ],
         },
+        {
+          resourceQuery: /rss/,
+          use: [
+            ...mdx,
+            createLoader(function (src) {
+              return this.callback(null, src)
+            }),
+          ],
+        },
         {
           use: [
             ...mdx,

package-lock.json

@@ -23,8 +23,8 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^9.4.4",
+    "feed": "^4.2.1",
     "file-loader": "^6.0.0",
-    "rss": "^1.2.2",
     "simple-functional-loader": "^1.2.1"
   }
 }

package.json

@@ -1,22 +1,69 @@
 import fs from 'fs'
-import RSS from 'rss'
-import getAllPostPreviews from '../src/getAllPostPreviews'
+import path from 'path'
+import ReactDOMServer from 'react-dom/server'
+import { MDXProvider } from '@mdx-js/react'
+import { Feed } from 'feed'
 
-const feed = new RSS({
+import { mdxComponents } from '../src/components/Post'
+import { getAllPosts } from '../src/getAllPostPreviews'
+
+const siteUrl = 'https://blog.tailwindcss.com'
+
+const feed = new Feed({
   title: 'Blog – Tailwind CSS',
-  site_url: 'https://blog.tailwindcss.com',
-  feed_url: 'https://blog.tailwindcss.com/feed.xml',
+  description: 'All the latest Tailwind CSS news, straight from the team.',
+  id: siteUrl,
+  link: siteUrl,
+  language: 'en',
+  image: `${siteUrl}/favicon-32x32.png`,
+  favicon: `${siteUrl}/favicon.ico`,
+  copyright: 'All rights reserved 2020, Tailwind Labs',
+  feedLinks: {
+    json: `${siteUrl}/json`,
+    atom: `${siteUrl}/atom`,
+  },
+  author: {
+    name: 'Adam Wathan',
+    email: 'adam.wathan@gmail.com',
+    link: 'https://twitter.com/@adamwathan',
+  },
 })
 
-getAllPostPreviews().forEach(({ link, module: { meta } }) => {
-  feed.item({
+getAllPosts().forEach(({ link, module: { meta, default: Content } }) => {
+  const mdx = (
+    <MDXProvider components={mdxComponents}>
+      <Content />
+    </MDXProvider>
+  )
+  const html = ReactDOMServer.renderToStaticMarkup(mdx)
+  const postText = `<div style="margin-top=55px; font-style: italic;">(The post <a href="${
+    siteUrl + link
+  }">${meta.title}</a> appeared first on <a href="${siteUrl}">Tailwind CSS Blog</a>.)</div>`
+  feed.addItem({
     title: meta.title,
-    guid: link,
-    url: `https://blog.tailwindcss.com${link}`,
-    date: meta.date,
+    id: meta.title,
+    link,
+    comments: meta.discussion,
     description: meta.description,
-    custom_elements: [].concat(meta.authors.map((author) => ({ author: [{ name: author.name }] }))),
+    content: html + postText,
+    author: meta.authors.map(({ name, twitter }) => ({
+      name,
+      link: `https://twitter.com/${twitter}`,
+    })),
+    date: new Date(meta.date),
+    image: siteUrl + meta.image,
+    extensions: [
+      {
+        name: '_comments',
+        objects: {
+          about: 'link to discussions forum',
+          comments: meta.discussion,
+        },
+      },
+    ],
   })
 })
 
-fs.writeFileSync('./out/feed.xml', feed.xml({ indent: true }))
+fs.writeFileSync('./out/feed.xml', feed.rss2())
+fs.writeFileSync('./out/atom.xml', feed.atom1())
+fs.writeFileSync('./out/feed.json', feed.json1())

scripts/build-rss.js

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { MDXProvider } from '@mdx-js/react'
 
-const mdxComponents = {
+export const mdxComponents = {
   pre: ({ className, ...props }) => (
     <pre className={`${className} rounded-md bg-gray-800 py-3 px-4 overflow-x-auto`} {...props} />
   ),

src/components/Post.js

@@ -18,3 +18,9 @@ export default function getAllPostPreviews() {
     dateSortDesc(a.module.meta.date, b.module.meta.date)
   )
 }
+
+export function getAllPosts() {
+  return importAll(require.context('./pages/?rss', true, /\.mdx$/)).sort((a, b) =>
+    dateSortDesc(a.module.meta.date, b.module.meta.date)
+  )
+}

src/getAllPostPreviews.js

@@ -14,7 +14,9 @@ export default function App({ Component, pageProps }) {
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <meta name="msapplication-TileColor" content="#00aba9" />
         <meta name="theme-color" content="#ffffff" />
-        <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed.xml" />
+        <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/atom.xml" />
+        <link rel="alternate" type="application/json" title="JSON Feed" href="/feed.json" />
       </Head>
       <SectionContainer>
         <Header />