Clarify how to add images to the RSS feed

[tommyp]

Description

When following the docs to add an RSS feed, I was left without any images. This PR adds some clarification around allowedTags and how to get images into your RSS feed.

Related issues & labels

• Closes Clarify how to add images to RSS #7099

First-time contributor to Astro Docs?

First time contributor, and I am on the Discord as tommypalmer 🚀

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	Mar 26, 2024 7:22pm

[astrobot-houston]

Hello! Thank you for opening your first PR to Astro’s Docs! 🎉

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any broken links you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel 🥳

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[sarah11918]

Looks great, @tommyp ! Thank you so much for this really helpful addition.

@SatanshuMishra , would you like to review this one? I'd like your approval here if you're available!

[SatanshuMishra]

Looks good and cross-checked with documentation for sanitize-html.

[SatanshuMishra]

I think this is a great addition. Everything LGTM! Great work :) @tommyp !

[sarah11918]

Alrighty, then Let's Get That Money, @tommyp ! Welcome to Team Docs! 🥳

[cworld1]

I got a problem of it. Markdown it can actually render the content, but it cannot transform img link automatically.

Example:

![image](./test.jpg)

it will render like:

<img src="./test.jpg" alt="image" />

But as we know, astro has its own img store path. when locally, it is /_image?href=???; on server, it can be /_astro/test.jpg. The incorrect src path results wrong feed. the sources link may even be changed by vercel image server, cdn, remote set, etc. I won't think it a good solution to render it just like this.

[tommyp]

@cworld1 This PR was to update the docs to explain how to parse markdown and render img tags. If you look in the docs under Images in Markdown files you'll find instructions for how to correctly link images. You can also use Astro's built in images component in MDX files to display them.

[billy-le]

Hey @cworld1 ,

I'm unsure if it works for Vercel but I took the markdown-it rendered HTML and turned that into a DOM-like object. Then I queried for all the images and reassigned the src attribute with the value return from the getImage() function. I wrote a blog post about it and I can share it here if it's allowed.

If this needs to be included in the docs, I can add a PR to include my solution so it's more available to everyone.

[sarah11918]

Hi @billy-le ! If you've written an article, then posting it in the Discord #showcase channel would be great, since that's where the most people will see it!

Also, you can make a PR to our community recipes page if you'd like to add the link there! https://docs.astro.build/en/community-resources/content/#images

[billy-le]

Hi @sarah11918 , thanks for the info! I'll do that and add a PR to include my post. So far, I have received a few positive comments in the #showcase channel and I think it will help others too.

[cworld1]

Hi @billy-le , Thank you for the solutions you have provided! I checked parts of your code and updated them along the way. I think the refined code might provide a little help in terms of aesthetics and resource usage. https://github.com/cworld1/cworld1/blob/main/src/pages/rss.xml.ts

Finally, thanks for clearing up the confusion!

[billy-le]

Awesome work @cworld1! It looks cleaner and more concise. Thanks for sharing your alteration. 😄