From 621b9f00498a8c5f96d839db4abd9fea7f202094 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 3 Jan 2023 18:23:30 -0500 Subject: [PATCH] Injected frontmatter change (#2250) Co-authored-by: Sarah Rainsberger --- src/pages/en/guides/content-collections.mdx | 20 ++++++++++++-------- src/pages/en/guides/markdown-content.mdx | 11 +++++++++-- src/pages/en/reference/api-reference.mdx | 4 ++-- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/pages/en/guides/content-collections.mdx b/src/pages/en/guides/content-collections.mdx index fe87b5600edc9..c409bf6ad27d0 100644 --- a/src/pages/en/guides/content-collections.mdx +++ b/src/pages/en/guides/content-collections.mdx @@ -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 `` 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 `` 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(); --- ``` @@ -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

{post.data.title} — {injectedFrontmatter.readingTime}

+ const { remarkPluginFrontmatter } = await post.render(); + return

{post.data.title} — {remarkPluginFrontmatter.readingTime}

})} ``` -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`. +:::
**🙋 Why don't `getCollection()` and `getEntry()` contain these values?** diff --git a/src/pages/en/guides/markdown-content.mdx b/src/pages/en/guides/markdown-content.mdx index a94841b6db103..d53d95ea60c5a 100644 --- a/src/pages/en/guides/markdown-content.mdx +++ b/src/pages/en/guides/markdown-content.mdx @@ -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. @@ -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). @@ -483,6 +484,12 @@ You can add frontmatter properties to all of your Markdown and MDX files by usin } ``` + :::tip + + + `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]," diff --git a/src/pages/en/reference/api-reference.mdx b/src/pages/en/reference/api-reference.mdx index b881e43d89113..0bc4aa7387f0b 100644 --- a/src/pages/en/reference/api-reference.mdx +++ b/src/pages/en/reference/api-reference.mdx @@ -830,14 +830,14 @@ A function to compile a given Markdown or MDX document for rendering. This retur - `` - 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(); --- ```