Bug: blog RSS feed generation failures with MDX posts

🐛 Bug Report

With https://github.com/facebook/docusaurus/pull/4330, we now render the full blog posts in the RSS feed, as HTML.

The way we currently do it is “good enough” but has several limitations:

MDX components replaced by divs

Using this MDX:

# title

import SomeCompent from "@site/src/someComponent"

<SomeCompent>Hello</SomeCompent>

Will render as:

<h1>title</h1>

<div>Hello</div>

The logic of <SomeComponent> is never evaluated.

For layout/wrapper components, it’s not a big deal as the content remains in the RSS feed, but in some cases, it can be worst.

Not having a global MDX config and giving themes the ability to “register” some MDX comps and scope can help solve this problem. Related to https://github.com/facebook/docusaurus/issues/4625

No ```mdx-code-block support

```mdx-code-block is an escape hatch we added so that external tools (like Crowdin) do not mess-up with unsupported MDX markup.

The MDX content in these code blocks must be evaluated, as if it was not a code block

No relative image path support

MD referencing co-located assets such as:

![Docusaurus beta party](./img/image_cropped.png)

will be transformed as

<img src="./img/image_cropped.png" alt="Docusaurus beta party"/>

Unfortunately, the image is not hosted at ./img/image_cropped.png in the production site due to using Webpack’s file-loader.

The real image URL in prod is /assets/images/image_cropped-2744c01b1fc0b451dbdb65a1d568fbff.png

We need a way to ensure such MD image declarations work in the RSS feed properly (ideally without changing the existing image asset URL or duplicating the asset in final site build)

[Josh-Cena]

Regressions that make sites fail to build at all:

• styles is not defined when import styles from './styles.module.css';
• require is not defined when require('./assets/img.png').default.

The missing Webpack infra is more severe than missing MDX features

[wooorm]

You do need to have the metadata about blog posts again, and where they were rendered. And a class or ID on the body of the text. But I don’t really find it hack if it’s then very close to what instapaper or safari reader or so do, too. Alnternatively: do it when you render the content into the body. Perhaps render it twice, once with a “this is for the static website” and once with “this is for the static feed”, so components can switch and return different markup for each “media query”?