feat: adds support for rendering markdown in loaders

.changeset/dark-bees-stand.md

@@ -0,0 +1,45 @@
+---
+'astro': minor
+---
+
+Provides a markdown renderer to content loaders
+
+When creating a content loader, you will now have access to a `renderMarkdown` function that allows you to render markdown content directly within your loaders. It uses the same settings and plugins as renderer used for markdown files in Astro, and follows any markdown settings you have configured in your Astro project.
+
+This allows you to render markdown content from various sources, such as CMS or other data sources, directly in your loaders without needing to preprocess the markdown content separately.
+
+```ts
+import type { Loader } from 'astro/loaders';
+import { loadFromCMS } from './cms';
+
+export function myLoader(settings): Loader {
+  return {
+    name: 'my-loader',
+    async load({ renderMarkdown, store }) {
+      const entries = await loadFromCMS();
+
+      store.clear();
+
+      for (const entry of entries) {
+        // Assume each entry has a 'content' field with markdown content
+        store.set(entry.id, {
+          id: entry.id,
+          data: entry,
+          rendered: await renderMarkdown(entry.content),
+        });
+      }
+    },
+  };
+}
+```
+
+The return value of `renderMarkdown` is an object with two properties: `html` and `metadata`. These match the `rendered` property of content entries in content collections, so you can use them to render the content in your components or pages.
+
+```astro
+---
+import { getEntry, render } from 'astro:content';
+const entry = await getEntry('my-collection', Astro.params.id);
+const { Content } = await render(entry);
+---
+<Content />
+```

packages/astro/src/content/content-layer.ts

@@ -1,4 +1,9 @@
 import { promises as fs, existsSync } from 'node:fs';
+import {
+	type MarkdownProcessor,
+	type MarkdownProcessorRenderOptions,
+	createMarkdownProcessor,
+} from '@astrojs/markdown-remark';
 import PQueue from 'p-queue';
 import type { FSWatcher } from 'vite';
 import xxhash from 'xxhash-wasm';
@@ -14,6 +19,7 @@ import {
 	DATA_STORE_FILE,
 	MODULES_IMPORTS_FILE,
 } from './consts.js';
+import type { RenderedContent } from './data-store.js';
 import type { LoaderContext } from './loaders/types.js';
 import type { MutableDataStore } from './mutable-data-store.js';
 import {
@@ -46,7 +52,7 @@ class ContentLayer {
 	#watcher?: WrappedWatcher;
 	#lastConfigDigest?: string;
 	#unsubscribe?: () => void;
-
+	#markdownProcessor?: MarkdownProcessor;
 	#generateDigest?: (data: Record<string, unknown> | string) => string;
 
 	#queue: PQueue;
@@ -127,6 +133,7 @@ class ContentLayer {
 			logger: this.#logger.forkIntegrationLogger(loaderName),
 			config: this.#settings.config,
 			parseData,
+			renderMarkdown: this.#processMarkdown.bind(this),
 			generateDigest: await this.#getGenerateDigest(),
 			watcher: this.#watcher,
 			refreshContextData,
@@ -137,6 +144,18 @@ class ContentLayer {
 		};
 	}
 
+	async #processMarkdown(
+		content: string,
+		options?: MarkdownProcessorRenderOptions,
+	): Promise<RenderedContent> {
+		this.#markdownProcessor ??= await createMarkdownProcessor(this.#settings.config.markdown);
+		const { code, metadata } = await this.#markdownProcessor.render(content, options);
+		return {
+			html: code,
+			metadata,
+		};
+	}
+
 	/**
 	 * Enqueues a sync job that runs the `load()` method of each collection's loader, which will load the data and save it in the data store.
 	 * The loader itself is responsible for deciding whether this will clear and reload the full collection, or

packages/astro/src/content/loaders/types.ts

@@ -1,8 +1,10 @@
+import type { MarkdownProcessorRenderOptions } from '@astrojs/markdown-remark';
 import type { FSWatcher } from 'vite';
 import type { ZodSchema } from 'zod';
 import type { AstroIntegrationLogger } from '../../core/logger/core.js';
 import type { AstroConfig } from '../../types/public/config.js';
 import type { ContentEntryType } from '../../types/public/content.js';
+import type { RenderedContent } from '../data-store.js';
 import type { DataStore, MetaStore } from '../mutable-data-store.js';
 
 export type { DataStore, MetaStore };
@@ -29,6 +31,12 @@ export interface LoaderContext {
 	/** Validates and parses the data according to the collection schema */
 	parseData<TData extends Record<string, unknown>>(props: ParseDataOptions<TData>): Promise<TData>;
 
+	/** Renders markdown content to HTML and metadata */
+	renderMarkdown(
+		content: string,
+		options?: MarkdownProcessorRenderOptions,
+	): Promise<RenderedContent>;
+
 	/** Generates a non-cryptographic content digest. This can be used to check if the data has changed */
 	generateDigest(data: Record<string, unknown> | string): string;
 

packages/astro/src/content/utils.ts

@@ -88,6 +88,7 @@ const collectionConfigParser = z.union([
 								config: z.any(),
 								entryTypes: z.any(),
 								parseData: z.any(),
+								renderMarkdown: z.any(),
 								generateDigest: z.function(z.tuple([z.any()], z.string())),
 								watcher: z.any().optional(),
 								refreshContextData: z.record(z.unknown()).optional(),

packages/astro/test/content-layer.test.js

@@ -90,6 +90,11 @@ describe('Content Layer', () => {
 			]);
 		});
 
+		it('can render markdown in loaders', async () => {
+			const html = await fixture.readFile('/index.html');
+			assert.ok(cheerio.load(html)('section h1').text().includes('heading 1'));
+		})
+
 		it('handles negative matches in glob() loader', async () => {
 			assert.ok(json.hasOwnProperty('probes'));
 			assert.ok(Array.isArray(json.probes));

packages/astro/test/fixtures/content-layer/src/content.config.ts

@@ -173,10 +173,18 @@ const images = defineCollection({
 		}),
 });
 
+const markdownContent = `
+# heading 1
+hello
+## heading 2
+![image](./image.png)
+![image 2](https://example.com/image.png)
+`
+
 const increment = defineCollection({
 	loader: {
 		name: 'increment-loader',
-		load: async ({ store, refreshContextData, parseData }) => {
+		load: async ({ store, refreshContextData, parseData, renderMarkdown }) => {
 			const entry = store.get<{ lastValue: number }>('value');
 			const lastValue = entry?.data.lastValue ?? 0;
 			const raw = {
@@ -192,6 +200,7 @@ const increment = defineCollection({
 			store.set({
 				id: raw.id,
 				data: parsed,
+				rendered: await renderMarkdown(markdownContent)
 			});
 		},
 		// Example of a loader that returns an async schema function

packages/astro/test/fixtures/content-layer/src/pages/index.astro

@@ -1,10 +1,11 @@
 ---
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry, render } from 'astro:content';
 
 const blog = await getCollection('blog');
 const first = await getEntry('blog', 1);
 const dogs = await getCollection('dogs');
 const increment = await getEntry('increment', 'value');
+const { Content } = await render(increment);
 ---
 <html>
 <head>
@@ -19,6 +20,9 @@ const increment = await getEntry('increment', 'value');
 			<li><a href={`/dogs/${dog.id}`}>{ dog.data?.breed }</a></li>
 		))}
 	</ul>
+	<section>
+		<Content />
+	</section>
 	<h1>Blog Posts</h1>
 
 	<h2>{first.data.title}</h2>