Allow full markdown support/compilation in frontmatter

[k16e-me]

I love the list bullet so much how it beautifies my lists, so I moved a list up to the front matter. Turns out a couple items had words emphasized. I was using italic to emphasize like "What *really* Is Good Design?" "What *Is* Design?" I've put the emphasis asterisk portion in code just to retain the mark.

What happens is that, apparently Nuxt processes frontmatter values as plain text. So, the output came out as is.

I also, for reason of testing, tried <i>really</> and the entire thing with the tags got printed.

So, my question is is there a way, if already exists or if not, to support compiling either or both markdown and HTML in frontmatter as markup just as the rest of the markdown file's content is converted to HTML?

[k16e-me]

Additionally, I'm listing websites as a reference and would love to make them direct links. I'd love to link the text like normal markdown 👉 [Awesome Website](https://Dont.Click/me) you get the idea. But then the whole thing comes out raw. That's not good. So, a way to compile frontmatter as MD/HTML would be really great.

[jochemkeller]

I figured out how to do this! (… albeit in a pretty hacky way)

I wanted to use this in my personal website to render excerpts for blogs, so it's derived from my use-case. Pretty straightforward to modify to your needs, I think? Assuming my following markdown file example:

---
markdownField: "I'm _italic_ and I'm **bold**"
---

...

You have to hook via 'content:file:beforeInsert' in nuxt.config.js:

export default {
    hooks: {
        'content:file:beforeInsert': async (document, database) => {
            if (document.markdownField) {
                document.markdownField = {
                    body: await database.markdown.generateBody(document.markdownField),
                };
            }
        },
    },
}

This enables you to use a <nuxt-content> component to render it in your template:

<template>
    <div>
        <nuxt-content :document="document.markdownField" />
    </div>
</template>
<script>
export default {
    async asyncData({ $content }) {
        const document = await $content('document')
            .only(['markdownField'])
            .fetch();

        return {
            document,
        };
    },
};
</script>

<nuxt-content> expects an object with the singular body key. This uses the database.markdown parser with the function generateBody; you can read more about parsers here

Hope this helps!

[k16e-me]

Hi, @jochemkeller, thanks for taking the time to document and share your approach. I'm not sure I should use it though. Doesn't seem to too specific/tied to the variable markdownField referenced/used in frontmatter in the .md file? But I want a very flexible system, where every frontmatter property will behave rather like the typical .md body, the document itself with full support for all transformations, or especially key ones like links, italic, bold, etc. Thanks all the same.

[Billybobbonnet]

@jochemkeller thank you mate for sharing. await database.markdown.generateBody(document.markdownField), It was the right fit for me and solved an issue I add (adding a block number to the document body).

Cheers!