Skip to content

Commit 621b9f0

Browse files
Injected frontmatter change (#2250)
Co-authored-by: Sarah Rainsberger <[email protected]>
1 parent c065903 commit 621b9f0

File tree

3 files changed

+23
-12
lines changed

3 files changed

+23
-12
lines changed

src/pages/en/guides/content-collections.mdx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -341,14 +341,14 @@ const { post } = Astro.props;
341341

342342
## Rendering entry content
343343

344-
Every collection entry includes a `render()` function that gives you access to the contents of the Markdown or MDX file. This includes a `<Content />` component for rendering the document body, as well as the document headings and injected frontmatter.
344+
Every collection entry includes a `render()` function that gives you access to the contents of the Markdown or MDX file. This includes a `<Content />` component for rendering the document body, as well as the document headings and frontmatter modified via remark or rehype.
345345

346346
```astro {5}
347347
---
348348
// src/pages/render-example.astro
349349
import { getEntry } from 'astro:content';
350350
const entry = await getEntry('blog', 'post-1.md');
351-
const { Content, headings, injectedFrontmatter } = await entry.render();
351+
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
352352
---
353353
```
354354

@@ -390,23 +390,27 @@ const blogPosts = await getCollection('blog');
390390
})}
391391
```
392392

393-
### Access injected frontmatter from `render()`
393+
### Access modified frontmatter from `render()`
394394

395-
Astro allows you to [inject frontmatter using remark or rehype plugins.](/en/guides/markdown-content/#example-injecting-frontmatter) You can access these values using the `injectedFrontmatter` property from `render()`:
395+
Astro allows you to [modify frontmatter using remark or rehype plugins](/en/guides/markdown-content/#modifying-frontmatter-programmatically). You can access this modified frontmatter using the `remarkPluginFrontmatter` property from `render()`:
396396

397-
```astro "{ injectedFrontmatter }"
397+
```astro "{ remarkPluginFrontmatter }"
398398
---
399399
import { getCollection } from 'astro:content';
400400
const blogPosts = await getCollection('blog');
401401
---
402402
403403
{blogPosts.map(async (post) => {
404-
const { injectedFrontmatter } = await post.render();
405-
return <p>{post.data.title} — {injectedFrontmatter.readingTime}</p>
404+
const { remarkPluginFrontmatter } = await post.render();
405+
return <p>{post.data.title} — {remarkPluginFrontmatter.readingTime}</p>
406406
})}
407407
```
408408

409-
Assuming `readingTime` was injected ([see our reading time example](/en/guides/markdown-content/#example-calculate-reading-time)), it will be available on the `injectedFrontmatter` object.
409+
Assuming `readingTime` was injected ([see our reading time example](/en/guides/markdown-content/#example-calculate-reading-time)), it will be available on the `remarkPluginFrontmatter` object.
410+
411+
:::caution
412+
Remark and rehype plugins will have access to the _raw_ Markdown or MDX document frontmatter. This means frontmatter will not reflect any changes or defaults applied by your `schema`.
413+
:::
410414

411415
<details>
412416
<summary>**🙋 Why don't `getCollection()` and `getEntry()` contain these values?**</summary>

src/pages/en/guides/markdown-content.mdx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ layout: ~/layouts/MainLayout.astro
33
title: Markdown & MDX
44
description: Learn how to create content using Markdown or MDX with Astro
55
i18nReady: true
6-
setup: import Since from '~/components/Since.astro'
76
---
87

8+
import Since from '~/components/Since.astro'
9+
910
[Markdown](https://daringfireball.net/projects/markdown/) is commonly used to author text-heavy content like blog posts and documentation. Astro includes built-in support for standard Markdown files.
1011

1112
With the [@astrojs/mdx integration](/en/guides/integrations-guide/mdx/) installed, Astro also supports [MDX](https://mdxjs.com/) (`.mdx`) files which bring added features like support for JavaScript expressions and components in your Markdown content.
@@ -468,7 +469,7 @@ export default {
468469
}
469470
```
470471

471-
#### Example: Injecting frontmatter
472+
### Modifying frontmatter programmatically
472473

473474
You can add frontmatter properties to all of your Markdown and MDX files by using a [remark or rehype plugin](#markdown-plugins).
474475

@@ -483,6 +484,12 @@ You can add frontmatter properties to all of your Markdown and MDX files by usin
483484
}
484485
```
485486

487+
:::tip
488+
<Since v="2.0.0" />
489+
490+
`data.astro.frontmatter` contains all properties from a given Markdown or MDX document. This allows you to modify existing frontmatter properties, or compute new properties from this existing frontmatter.
491+
:::
492+
486493
2. Apply this plugin to your `markdown` or `mdx` integration config:
487494

488495
```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"

src/pages/en/reference/api-reference.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -830,14 +830,14 @@ A function to compile a given Markdown or MDX document for rendering. This retur
830830

831831
- `<Content />` - A component used to render the document's contents in an Astro file.
832832
- `headings` - A generated list of headings, [mirroring Astro's `getHeadings()` utility](/en/guides/markdown-content/#exported-properties) on Markdown and MDX imports.
833-
- `injectedFrontmatter ` - An object of frontmatter [injected via remark or rehype plugins](/en/guides/markdown-content/#example-injecting-frontmatter). Set to type `any`.
833+
- `remarkPluginFrontmatter ` - The modified frontmatter object after any [remark or rehype plugins have been applied](/en/guides/markdown-content/#modifying-frontmatter-programmatically). Set to type `any`.
834834

835835
```astro
836836
---
837837
import { getEntry } from 'astro:content';
838838
const entry = await getEntry('blog', 'entry-1.md');
839839
840-
const { Content, headings, injectedFrontmatter } = await entry.render();
840+
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
841841
---
842842
```
843843

0 commit comments

Comments
 (0)