Mdx: Feature request for RSS feed for mdx blog

[trevordmiller]

Subject of the issue

I use a feed reader to stay up to date on the tools and technology I use. Could https://mdxjs.com/blog enable an RSS feed?

[jnielson94]

Looks like the awesome @ChristopherBiscardi just added this to Kent's site, so it might be possible to convince him to do it here as well 👍 https://github.com/kentcdodds/kentcdodds.com/pull/127/files

[johno]

Definitely, we'll add this to the roadmap. 👍

[ChristopherBiscardi]

This should work:

const mdxFeed = require("gatsby-mdx/feed");
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-feed`,
      options: mdxFeed
    }
  ]
};

If not then the query can be grabbed from that file and modified (most likely modification is to put a filter on the query to only include blog posts)

module.exports = {
  feeds: [
    {
      serialize: ({ query: { site, allMdx } }) => {
        return allMdx.edges.map(edge => {
          return {
            ...edge.node.frontmatter,
            description: edge.node.excerpt,
            url: site.siteMetadata.siteUrl + edge.node.fields.slug,
            guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
            custom_elements: [{ "content:encoded": edge.node.html }]
          };
        });
      },
      query: `
      {
        allMdx(
          limit: 1000,
          sort: {
            order: DESC,
            fields: [frontmatter___date]
          }
        ) {
          edges {
            node {
              frontmatter {
                title
                date
              }
              fields {
                slug
              }
              excerpt
              html
            }
          }
        }
      }
    `,
      output: `rss.xml`
    }
  ]
};

[johno]

Going to close this since we’re using the official twitter account to share updates and blog posts: https://twitter.com/mdx_js

[deadcoder0904]

Would love to know how to do this for Next.js?

Currently, I am having an issue with converting MDX to HTML.

I'm doing it for Tailwind Blog

Here's the code:

import fs from 'fs'
import path from 'path'
import getAllPostPreviews from '../src/getAllPostPreviews'

import RSS from 'rss'

const siteUrl = 'https://blog.tailwindcss.com'

const feed = new RSS({
  title: 'Blog – Tailwind CSS',
  site_url: siteUrl,
  feed_url: `${siteUrl}/feed.xml`,
})

getAllPostPreviews().forEach(({ link, module: { meta, default: html } }) => {
  console.log(html)
  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.item({
    title: meta.title,
    guid: link,
    url: `https://blog.tailwindcss.com${link}`,
    date: meta.date,
    description: meta.description,
    custom_elements: [{
      "content:encoded": html + postText
    }].concat(meta.authors.map((author) => ({ author: [{ name: author.name }] }))),
  })
})

fs.writeFileSync('./out/feed.xml', feed.xml({ indent: true }))

The html variable logs to the console:

[Function: MDXContent] { isMDXComponent: true }

How do I get plain HTML?

[ChristianMurphy]

@deadcoder0904 your question seems unrelated to the MDX blog?
You may want to start a thread at https://github.com/mdx-js/mdx/discussions to ask your question

[deadcoder0904]

Oops sorry, I just saw Gatsby + RSS thing so thought I'd ask Next + RSS. Anyways I asked a new question here → https://github.com/mdx-js/mdx/discussions/1295