How can I replace frontmatter before parsing it?

[ben519]

I have a situation where I have some markdown with yaml frontmatter, like this

---
title: Blue
---
# Hello World

Now lets say I change my document's title to Red, but this change happens from an external UI element like a form input. So, my goal is to replace the frontmatter from this:

---
title: Blue
---

to this:

---
title: Red
---

and then parse it.

My Attempt

import remarkFrontmatter from "remark-frontmatter"
import remarkParse from "remark-parse"
import remarkStringify from "remark-stringify"
import { unified } from "unified"
import { EXIT, visit } from "unist-util-visit"
import { matter } from "vfile-matter"

// ==============================================================

function remarkReplaceYAML(options = { value: "" }) {
  // Find the first yaml node and replace it with the given value
  const { value } = options
  return (tree) => {
    visit(tree, "yaml", (node, index, parent) => {
      parent.children.splice(index, 1, { type: "yaml", value })
      return EXIT
    })
  }
}

// =============================================================

function remarkParseYAML() {
  // Parse yaml frontmatter and store it as vfile.data.matter
  return function (_, file) {
    matter(file, { strip: false })
  }
}

// =============================================================

const original = "---\ntitle: Blue\n---\n# Hello World"
const replacement = "---\ntitle: Red\n---"

const file = await unified()
  .use(remarkParse)
  .use(remarkFrontmatter, { type: "yaml", marker: "-" })
  .use(remarkReplaceYAML, { value: replacement })
  .use(remarkParseYAML)
  .use(remarkStringify)
  .process(original)

console.log(file.data)  // { matter: { title: 'Blue' } }

Notice the final output (file.data) shows title 'Blue', NOT title 'Red'. This tells me that remarkParseYAML is running before remarkReplaceYAML. (I guess, this makes sense because parsers run before transformers.?)

Why do I care?

My goal is to replace the frontmatter and do some data processing without having to reconstruct the AST twice. Is there a way?

Thanks!

[ChristianMurphy]

Welcome @ben519! 👋

How can I replace frontmatter before parsing it?

Taking a step back, Markdown/CommonMark is a Markup language not a templating language.
Trying to use it as a templating language is out of the scope of what the project intends to do.

If you want to replace before parsing, another templating tool could be run first.
That said, it sounds like what you want could be achieved by updating the AST.

My goal is to replace the frontmatter and do some data processing without having to reconstruct the AST twice. Is there a way?

Modify the AST itself would be the ideal approach.
I'm not immediately spotting something that looks off with the example.
If you have a moment, could you put an example of what you're seeing in a sandbox like:

• https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-vite
• or https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/remark-with-vite

So others can get a sense of the versions of dependencies you are using?

[ben519]

Hey thanks for the prompt reply Christian. Here's a demo on Stackblitz https://stackblitz.com/edit/node-ktrv8w?file=index.js

[ChristianMurphy]

Two things to note:

1. note that yaml AST nodes do not include --- in their content, adding this in the replacement makes it invalid
2. note that one of your plugins modifies the AST, the other works on vFile. these are two separate things. If you want to get the updates in the AST read the YAML from the AST.

Working example https://stackblitz.com/edit/node-ts1rqw

source from sandbox

import remarkFrontmatter from 'remark-frontmatter';
import remarkParse from 'remark-parse';
import remarkStringify from 'remark-stringify';
import { unified } from 'unified';
import yaml from 'yaml';

import { EXIT, visit } from 'unist-util-visit';

// ==============================================================

function remarkReplaceYAML(options = { value: '' }) {
  // Find the first yaml node and replace it with the given value
  const { value } = options;
  return (tree) => {
    visit(tree, 'yaml', (_, index, parent) => {
      parent.children.splice(index, 1, { type: 'yaml', value });
      return EXIT;
    });
  };
}

// =============================================================

function remarkParseYAML() {
  // Parse yaml frontmatter and store it as vfile.data.matter
  return function (tree, file) {
    visit(tree, 'yaml', (node) => {
      if (!file.data) {
        file.data = {};
      }
      file.data.matter = yaml.parse(node.value);
      return EXIT;
    });
  };
}

// =============================================================

const original = '---\ntitle: Blue\n---\n# Hello World';
const replacement = 'title: Red';

const file = await unified()
  .use(remarkParse)
  .use(remarkFrontmatter, { type: 'yaml', marker: '-' })
  .use(remarkReplaceYAML, { value: replacement })
  .use(remarkParseYAML)
  .use(remarkStringify)
  .process(original);

console.log(file.data.matter);

[ben519]

I see. You ditched vfile-matter in favor of yaml.parse(). Thanks!