From e6f0ae6e8af78c0fea2b26775f47de8b003ad3e6 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Thu, 29 May 2025 11:54:10 +0100 Subject: [PATCH 1/3] Add docs for renderMarkdown --- .../en/reference/content-loader-reference.mdx | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/reference/content-loader-reference.mdx b/src/content/docs/en/reference/content-loader-reference.mdx index 28591b78d6084..895a4a7788e96 100644 --- a/src/content/docs/en/reference/content-loader-reference.mdx +++ b/src/content/docs/en/reference/content-loader-reference.mdx @@ -351,6 +351,45 @@ export function feedLoader({ url }): Loader { } ``` +#### `renderMarkdown` + +

+**Type**: `(markdown: string) => Promise` +

+ + +Renders a Markdown string to HTML, returning a `RenderedContent` object. This allows the entry to be rendered in a page using the [`render()` function and `` component](/en/guides/content-collections/#rendering-body-content). To enable this, assign the rendered content to the [`rendered`](#rendered) field of the [`DataEntry`](#dataentry) object. + +```ts title=loader.ts {21-22} +import type { Loader } from "astro/loaders"; +import { loadFeed } from "./feed.js"; +export function feedLoader({ url }): Loader { + const feedUrl = new URL(url); + return { + name: "feed-loader", + load: async ({ store, logger, parseData, renderMarkdown }) => { + logger.info("Loading posts"); + const feed = loadFeed(feedUrl); + store.clear(); + + for (const item of feed.items) { + const data = await parseData({ + id: item.guid, + data: item, + }); + + store.set({ + id, + data, + // Render the Markdown content to HTML + rendered: await renderMarkdown(data.content), + }); + } + }, + }; +} +``` + #### `generateDigest`

@@ -618,7 +657,7 @@ The format of the `RenderedContent` object is: /** Rendered HTML string. If present then `render(entry)` will return a component that renders this HTML. */ html: string; metadata?: { - /** Any images that are present in this entry. Relative to the {@link DataEntry} filePath. */ + /** Any images that are present in this entry. Relative to the DataEntry filePath. */ imagePaths?: Array; /** Any headings that are present in this file. Returned as `headings` from `render()` */ headings?: MarkdownHeading[]; @@ -629,3 +668,5 @@ The format of the `RenderedContent` object is: }; } ``` + +If the entry has Markdown content then you can use the [`renderMarkdown()`](#rendermarkdown) function to generate this object from the Markdown string. From 9540eec6299821ec67c14f7bfdbb86de343c9266 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Thu, 29 May 2025 12:11:03 +0100 Subject: [PATCH 2/3] Simpler example --- .../en/reference/content-loader-reference.mdx | 35 ++++++++----------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/content/docs/en/reference/content-loader-reference.mdx b/src/content/docs/en/reference/content-loader-reference.mdx index 895a4a7788e96..c2eaff8018445 100644 --- a/src/content/docs/en/reference/content-loader-reference.mdx +++ b/src/content/docs/en/reference/content-loader-reference.mdx @@ -360,29 +360,24 @@ export function feedLoader({ url }): Loader { Renders a Markdown string to HTML, returning a `RenderedContent` object. This allows the entry to be rendered in a page using the [`render()` function and `` component](/en/guides/content-collections/#rendering-body-content). To enable this, assign the rendered content to the [`rendered`](#rendered) field of the [`DataEntry`](#dataentry) object. -```ts title=loader.ts {21-22} -import type { Loader } from "astro/loaders"; -import { loadFeed } from "./feed.js"; -export function feedLoader({ url }): Loader { - const feedUrl = new URL(url); +```ts title=loader.ts {16-17} +import type { Loader } from 'astro/loaders'; +import { loadFromCMS } from './cms.js'; + +export function myLoader(settings): Loader { return { - name: "feed-loader", - load: async ({ store, logger, parseData, renderMarkdown }) => { - logger.info("Loading posts"); - const feed = loadFeed(feedUrl); - store.clear(); + name: 'cms-loader', + async load({ renderMarkdown, store }) { + const entries = await loadFromCMS(); - for (const item of feed.items) { - const data = await parseData({ - id: item.guid, - data: item, - }); + store.clear(); - store.set({ - id, - data, - // Render the Markdown content to HTML - rendered: await renderMarkdown(data.content), + for (const entry of entries) { + store.set(entry.id, { + id: entry.id, + data: entry, + // Assume each entry has a 'content' field with markdown content + rendered: await renderMarkdown(entry.content), }); } }, From 4b1a4e3b4575bba9eb3555447748a2cd2f1b17c5 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 3 Jun 2025 18:44:00 +0100 Subject: [PATCH 3/3] Update src/content/docs/en/reference/content-loader-reference.mdx Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- src/content/docs/en/reference/content-loader-reference.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/reference/content-loader-reference.mdx b/src/content/docs/en/reference/content-loader-reference.mdx index c2eaff8018445..f4f9d3023cabd 100644 --- a/src/content/docs/en/reference/content-loader-reference.mdx +++ b/src/content/docs/en/reference/content-loader-reference.mdx @@ -358,7 +358,11 @@ export function feedLoader({ url }): Loader {

-Renders a Markdown string to HTML, returning a `RenderedContent` object. This allows the entry to be rendered in a page using the [`render()` function and `` component](/en/guides/content-collections/#rendering-body-content). To enable this, assign the rendered content to the [`rendered`](#rendered) field of the [`DataEntry`](#dataentry) object. +Renders a Markdown string to HTML, returning a `RenderedContent` object. + +This allows allows you to render Markdown content directly within your loaders using the same Markdown processing as Astro's built-in `glob` loader and provides access to the `render()` function and `` component for [rendering body content](/en/guides/content-collections/#rendering-body-content). + +Assign this object to the [rendered](https://github.com/withastro/docs/pull/11801#rendered) field of the [DataEntry](https://github.com/withastro/docs/pull/11801#dataentry) object to allow users to [render the content in a page](https://github.com/en/guides/content-collections/#rendering-body-content). ```ts title=loader.ts {16-17} import type { Loader } from 'astro/loaders';