I followed the tutorial's advice to create an RSS feed with the pagesGlobToRssItems helper. However this feed does not include the full post content. How do I do that?
#Creating RSS feeds with full content using pagesGlobToRssItems
lime kiln
cobalt chasmBOT
Hi @lime kiln. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To include the full post content in your RSS feed, you can use the content key which contains the full content of the post as HTML. This allows you to make your entire post content available to RSS feed readers.
Here is an example of how you can do this:
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
const parser = new MarkdownIt();
export async function GET(context) {
const blog = await getCollection('blog');
return rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: context.site,
items: blog.map((post) => ({
link: `/blog/${post.slug}/`,
content: sanitizeHtml(parser.render(post.body)),
...post.data,
})),
});
}
In this example, the content key is used to include the full post content in the RSS feed. The sanitize-html package is used to ensure that the content is properly sanitized, escaped, and encoded. The markdown-it package is used to render the post body using a standard Markdown parser.
Please note that this will not process components or JSX expressions in MDX files. If you are using glob imports with Markdown, you may use the compiledContent() helper to retrieve the rendered HTML for sanitization. However, this feature is not supported for MDX files.
For more information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/rss#including-full-post-content).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
lime kiln
@cobalt chasm yes, I am using glob imports with Markdown. Please show me how to use the compiledContent() helper to retrieve the rendered HTML.
cobalt chasmBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the extracts, it seems that the compiledContent() function was previously available for fetching the rendered HTML of a Markdown file. However, recent changes in Astro have led to the removal of this function from the Astro.glob() response. This change was intentional to improve performance on larger sites (source (https://github.com/withastro/astro/issues/3072)).
As an alternative, you can use the render() function available for type: 'content' collections only. This function compiles a given Markdown or MDX document for rendering and returns a Content component used to render the document’s contents in an Astro file (source (https://docs.astro.build/en/reference/api-reference#render)).
Here's an example of how you can use it:
import { getEntryBySlug } from 'astro:content';
const entry = await getEntryBySlug('blog', 'entry-1');
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
In this example, Content is a component that returns the full, rendered contents of the file.
Please note that this approach might not be directly applicable to your use case of creating an RSS feed. You might need to adjust it according to your specific requirements.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
lime kiln
@cobalt chasm I am not using content collections currently for my blog. What are some reasons why I'd want to start using them?
cobalt chasmBOT
Let me check the knowledge base for you. One moment! :books:
Content collections in Astro offer several benefits that can enhance your blog management experience:
-
Organized Content: Content collections allow you to group similar content, such as blog posts, into collections. This makes it easier to manage and find your content (source (https://docs.astro.build/en/guides/content-collections#_top)).
-
Schema Validation: You can define a schema for your collection, which enforces consistent frontmatter or entry data within a collection. This guarantees that your data exists in a predictable form when you need to reference or query it (source (https://docs.astro.build/en/guides/content-collections#defining-a-collection-schema)).
-
Type Safety: Astro automatically generates TypeScript types for your content when you define a schema for your collection. This provides full TypeScript support when you query your collection, including property autocompletion and type-checking (source (https://docs.astro.build/en/guides/content-collections#defining-a-collection-schema)).
-
Improved Developer Experience: Content collections provide better guidance and autocompletion in your code editor. They also help in catching many mistakes sooner, with descriptive error messages telling you exactly what the problem is (source (https://docs.astro.build/en/tutorials/add-content-collections#pages-vs-collections)).
-
SEO Best Practices: Astro 2.0 provides SEO best practices and informative error messages for your content collections (source (https://astro.build/blog/astro-2#automatic-type-safety-for-markdown--mdx)).
- Performance: Moving your blog posts to the special
src/content/folder allows you to use more powerful and performant APIs to generate your blog post index and display your individual blog posts (source (https://docs.astro.build/en/tutorials/add-content-collections#pages-vs-collections)).