Skip to content

Injected frontmatter change #2250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jan 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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