` with a `
Note:
` as the first child.
The `Note` component can be defined as so:
```ts [utils/markdown.ts]
import { h } from 'hastscript';
import type { ComponentFunction } from 'rehype-components';
const Note: ComponentFunction = (_, children) => h('div', [
h('p', h('strong', 'Note:')),
...children,
]);
```
For example, the following `Note` block in Markdown
```mdc
::note
This is a note
::
```
Will be transformed into the following HTML:
```html
```
As you might have guessed, you will need to do that for each custom Vue component you use in your Markdown files.
With the function completed, we can put the result into each feed item:
```ts [feed.xml.get.ts]
feed.item({
title: post.title,
guid: `${url}/post/${slug}`,
url: `${url}/post/${slug}`,
description: post.description,
date: new Date(post.created_at),
categories: post.category ? [post.category] : undefined,
custom_elements: [
{ 'dc:creator': { _cdata: 'John Doe' } },
{ 'content:encoded': { _cdata: await markdownToHtml(post.path) } }, // [!CODE ++]
],
});
```
Now the RSS feed is fully complete with your posts' content as well.
## Other approach I have considered
The alternative idea I had to solve this issue was using one of the Nuxt hooks after the build. You can write a custom script to parse the `/blog` generated HTML to get the links, and then parse the each post generated file to get the text part.
This will likely do the job, but depending on your custom components, you might get a dirty HTML than just parsing the Markdown. For example, some of the `
` blocks I use here are customized to include a fancier window around it with the file name and also a button to copy the code content. If you don't handle these edge cases, the RSS readers might not render the content in a desirable way.
## Conclusion
Would be nice if the Nuxt team provides an easier way to do this, as RSS feeds are still very helpful and used by some people. Maybe with a potential rewrite of the module to use Comark they implement it? Who knows.