Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify how to add images to the RSS feed #7570

Merged
merged 2 commits into from
Mar 26, 2024

Conversation

tommyp
Copy link
Contributor

@tommyp tommyp commented Mar 25, 2024

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

First-time contributor to Astro Docs?

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

Copy link

vercel bot commented Mar 25, 2024

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
Copy link
Contributor

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
Copy link
Member

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!

@@ -183,7 +183,9 @@ export async function GET(context) {
items: blog.map((post) => ({
link: `/blog/${post.slug}/`,
// Note: this will not process components or JSX expressions in MDX files.
content: sanitizeHtml(parser.render(post.body)),
content: sanitizeHtml(parser.render(post.body), {
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@SatanshuMishra SatanshuMishra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sarah11918 sarah11918 added improve documentation Enhance existing documentation (e.g. add an example, improve description) code snippet update Updates a code sample: typo, outdated code etc. Merge Queue Approved and ready to be merged (wait for feature release if also labelled M-O-R)! labels Mar 26, 2024
@sarah11918 sarah11918 merged commit 4deaf16 into withastro:main Mar 26, 2024
7 checks passed
@cworld1
Copy link

cworld1 commented May 13, 2024

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
Copy link
Contributor Author

tommyp commented May 14, 2024

@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.

@tommyp tommyp deleted the explain-rss-with-images branch May 14, 2024 06:57
@billy-le
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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
Copy link

cworld1 commented Jun 27, 2024

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
Copy link
Contributor

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

@sarah11918 sarah11918 added the feedback-improvement Response to widget/Discord feedback label Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
code snippet update Updates a code sample: typo, outdated code etc. feedback-improvement Response to widget/Discord feedback improve documentation Enhance existing documentation (e.g. add an example, improve description) Merge Queue Approved and ready to be merged (wait for feature release if also labelled M-O-R)!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Clarify how to add images to RSS
6 participants