Skip to content

Commit

Permalink
Injected frontmatter change (withastro#2250)
Browse files Browse the repository at this point in the history
Co-authored-by: Sarah Rainsberger <[email protected]>
  • Loading branch information
bholmesdev and sarah11918 authored Jan 3, 2023
1 parent c065903 commit 621b9f0
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 12 deletions.
20 changes: 12 additions & 8 deletions src/pages/en/guides/content-collections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -341,14 +341,14 @@ const { post } = Astro.props;

## Rendering entry content

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

```astro {5}
---
// src/pages/render-example.astro
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'post-1.md');
const { Content, headings, injectedFrontmatter } = await entry.render();
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
---
```

Expand Down Expand Up @@ -390,23 +390,27 @@ const blogPosts = await getCollection('blog');
})}
```

### Access injected frontmatter from `render()`
### Access modified frontmatter from `render()`

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()`:
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()`:

```astro "{ injectedFrontmatter }"
```astro "{ remarkPluginFrontmatter }"
---
import { getCollection } from 'astro:content';
const blogPosts = await getCollection('blog');
---
{blogPosts.map(async (post) => {
const { injectedFrontmatter } = await post.render();
return <p>{post.data.title} — {injectedFrontmatter.readingTime}</p>
const { remarkPluginFrontmatter } = await post.render();
return <p>{post.data.title} — {remarkPluginFrontmatter.readingTime}</p>
})}
```

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

:::caution
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`.
:::

<details>
<summary>**🙋 Why don't `getCollection()` and `getEntry()` contain these values?**</summary>
Expand Down
11 changes: 9 additions & 2 deletions src/pages/en/guides/markdown-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ layout: ~/layouts/MainLayout.astro
title: Markdown & MDX
description: Learn how to create content using Markdown or MDX with Astro
i18nReady: true
setup: import Since from '~/components/Since.astro'
---

import Since from '~/components/Since.astro'

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

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.
Expand Down Expand Up @@ -468,7 +469,7 @@ export default {
}
```

#### Example: Injecting frontmatter
### Modifying frontmatter programmatically

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

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

:::tip
<Since v="2.0.0" />

`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.
:::

2. Apply this plugin to your `markdown` or `mdx` integration config:

```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"
Expand Down
4 changes: 2 additions & 2 deletions src/pages/en/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -830,14 +830,14 @@ A function to compile a given Markdown or MDX document for rendering. This retur

- `<Content />` - A component used to render the document's contents in an Astro file.
- `headings` - A generated list of headings, [mirroring Astro's `getHeadings()` utility](/en/guides/markdown-content/#exported-properties) on Markdown and MDX imports.
- `injectedFrontmatter ` - An object of frontmatter [injected via remark or rehype plugins](/en/guides/markdown-content/#example-injecting-frontmatter). Set to type `any`.
- `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`.

```astro
---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'entry-1.md');
const { Content, headings, injectedFrontmatter } = await entry.render();
const { Content, headings, remarkPluginFrontmatter } = await entry.render();
---
```

Expand Down

0 comments on commit 621b9f0

Please sign in to comment.