astro/.changeset/beige-pumpkins-pump.md
Ben Holmes e2019be6ff
Change frontmatter injection ordering (#5687)
* feat: make user frontmatter accessible in md

* test: new frontmatter injection

* refactor: move injection utils to remark pkg

* fix: add dist/internal to remark exports

* feat: update frontmater injection in mdx

* tests: new mdx injection

* chore: changeset

* chore: simplify frontmatter destructuring

* fix: remove old _internal references

* refactor: injectedFrontmatter -> remarkPluginFrontmatter

* docs: add content collections change

* chore: changeset heading levels
2023-01-03 16:31:19 -05:00

1.8 KiB

astro @astrojs/markdown-remark @astrojs/mdx
major major minor

Give remark and rehype plugins access to user frontmatter via frontmatter injection. This means data.astro.frontmatter is now the complete Markdown or MDX document's frontmatter, rather than an empty object.

This allows plugin authors to modify existing frontmatter, or compute new properties based on other properties. For example, say you want to compute a full image URL based on an imageSrc slug in your document frontmatter:

export function remarkInjectSocialImagePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
    frontmatter.socialImageSrc = new URL(
      frontmatter.imageSrc,
      'https://my-blog.com/',
    ).pathname;
  }
}

Content Collections - new remarkPluginFrontmatter property

We have changed inject frontmatter to modify frontmatter in our docs to improve discoverability. This is based on support forum feedback, where "injection" is rarely the term used.

To reflect this, the injectedFrontmatter property has been renamed to remarkPluginFrontmatter. This should clarify this plugin is still separate from the data export Content Collections expose today.

Migration instructions

Plugin authors should now check for user frontmatter when applying defaults.

For example, say a remark plugin wants to apply a default title if none is present. Add a conditional to check if the property is present, and update if none exists:

export function remarkInjectTitlePlugin() {
  return function (tree, file) {
    const { frontmatter } = file.data.astro;
+    if (!frontmatter.title) {
      frontmatter.title = 'Default title';
+    }
  }
}

This differs from previous behavior, where a Markdown file's frontmatter would always override frontmatter injected via remark or reype.