So how the hack should I parse frontmatter and markdown to html?

[gentlee]

I have .md file with frontmatter. How it should be parsed so that I got first as js object and second as html?

Example:

---
title: Title
---

# This is a heading

Usage:

const {frontmatter: { title }, html} = // ?

Docs seem to be very frustrating (softly speaking).

[ChristianMurphy]

Welcome @gentlee! 👋
I'd recommend starting with reading the introduction guide https://unifiedjs.com/learn/
Syntax trees can be intimidating at first, but make a lot of sense with some context on what they are and why they're used.

To your direct question:

1. the first part, how do you get HTML is described here: https://unifiedjs.com/learn/recipe/remark-html/
2. the second part, how to access frontmatter can be done with https://github.com/mrzmmr/remark-extract-frontmatter

[gentlee]

@ChristianMurphy syntax trees are trivial, problem is in API and docs.

Finally managed to get that, thanks, this is how:

import remarkExtractFrontmatter from 'remark-extract-frontmatter'
import remarkFrontmatter from 'remark-frontmatter'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'
import yaml from 'yaml'

const parsedArticle = await unified()
  .use(remarkParse)
  .use(remarkFrontmatter)
  .use(remarkExtractFrontmatter, { yaml: yaml.parse, remove: true })
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(await fs.readFile(`article.md`, 'utf-8'))
  
const frontmatter = parsedArticle.data
const articleHtml = parsedArticle.toString()