How to obtain parsed frontmatter using micromark

[Xananax]

Here's my current code:

import { micromark } from "https://esm.sh/micromark@3?bundle";
import {frontmatter, frontmatterHtml} from 'https://esm.sh/micromark-extension-frontmatter@1?bundle'


export const strToMarkdown = (value) => {
  const markup = micromark(value, {
    extensions: [frontmatter()],
    htmlExtensions: [frontmatterHtml()]
  })
  return { markup }
}

My output is valid HTML, no problems, and my YAML is being stripped out. But I do not understand how to obtain the stripped out YAML?

Looking at the source it doesn't seem like there is a YAML parser built-in, so I understand I should bring my own; but how do I get the yaml to parse? Should I independently re-parse the raw text to extract the yaml?

[wooorm]

• You can use an AST: https://github.com/syntax-tree/mdast-util-from-markdown/tree/main
• You can handle the events, the way the HTML extension does, but this is complex
• You can use vfile-matter
• Some YAML parsers can support multiple documents, where the first is YAML and the rest isn’t, that’s where the idea of frontmatter comes from

[Xananax]

Thank you!

I'm not sure if any of the below is the best way of doing things.

Here's mdast-util-from-markdown:

import {fromMarkdown} from 'https://esm.sh/mdast-util-from-markdown@1?bundle'
import {toMarkdown} from 'https://esm.sh/mdast-util-to-markdown@1?bundle'
import {frontmatter} from 'https://esm.sh/micromark-extension-frontmatter@1?bundle'
import {frontmatterFromMarkdown, frontmatterToMarkdown} from 'https://esm.sh/mdast-util-frontmatter@1?bundle'
import yaml from 'https://esm.sh/js-yaml@1?bundle'
 

export const strToMarkdown = (value) => {
  const presets = ['yaml']
  const tree = fromMarkdown(value, {
    extensions: [frontmatter(presets)],
    mdastExtensions: [frontmatterFromMarkdown(presets)]
  })
  const frontMatter = tree.children[0]?.type === 'yaml' ? yaml.safeLoad(tree.children[0].value) : {}
  const markup = toMarkdown(tree, {extensions: [frontmatterToMarkdown(presets)]})
  return { frontMatter, markup }
}

Here's v-file:

import { micromark } from "https://esm.sh/micromark@3?bundle";
import {frontmatter, frontmatterHtml} from 'https://esm.sh/micromark-extension-frontmatter@1?bundle'
import {VFile} from 'https://esm.sh/vfile@5?bundle'
import {matter} from 'https://esm.sh/vfile-matter@4?bundle'


export const strToMarkdown = (value) => {
  const file = new VFile({
    path: '~/thing.md',
    value
  })
  const { data:{matter: frontMatter} } = matter(file, {strip: true})
  const markup = micromark(value, {
    extensions: [frontmatter()],
    htmlExtensions: [frontmatterHtml()]
  })
  return { frontMatter, markup }
}

js-yaml doesn't work for multi-documents in the browser, so I used yaml. Not sure which is better for this use.

import { micromark } from "https://esm.sh/micromark@3?bundle";
import {frontmatter, frontmatterHtml} from 'https://esm.sh/micromark-extension-frontmatter@1?bundle'
import Yaml from 'https://esm.sh/yaml@2?bundle'


export const strToMarkdown = (value) => {
  const markup = micromark(value, {
    extensions: [frontmatter()],
    htmlExtensions: [frontmatterHtml()]
  })
  const frontMatter = Yaml.parseAllDocuments(value)[0]?.toJS()
  return { markup, frontMatter }
}

Any opinion about the best way to go about this? Specially in the browser.

[wooorm]

I like ASTs, so mdast. You probably will need to do more things later anyway. If you don’t, vfile.

[Xananax]

Ok, thanks!