[Content v2] Use frontmatter settings inside md

[Rigo-m]

Is your feature request related to a problem? Please describe

Netlify CMS provides you with the option to save frontmatter variables without touching the underlying .md file. I would love to use netlify CMS on top of content v2, but it seems that I can't reuse frontmatter vars inside the .md itself.

Describe the solution you'd like

---
some_var_inserted_by_netlify_cms: This is a test
---

# Check this title from netlify cms
## ${some_var_inserted_by_netlify_cms}

Describe alternatives you've considered

I've tried installing the remark-mdx-frontmatter plugin but didn't work.

[Tahul]

Hey @Rigo-m :)

This kind of feature is something we have in mind for MDC Syntax!

We would like to have a part of the syntax to handle using / rendering variables from front-matter or general app context to be rendered inside Markdown.

I would love to see something like that happening:

---
publishedAt: 06-06-2022
componentColor: 'blue'
componentVariant: 'primary'
componentText: 'Hello World!'
---

::my-component{color="$document.componentColor"}
---
variant: $document.componentVariant
---
{% $document.componentText %}
::

This component has been published on {% $document.publishedAt %}.

We could also imagine using this syntax to render global plugin injections (could be useful for state values coming from tools like Pinia in the long term).

Your current color mode is {% $colorMode.preference %}

@farnabaz ; WDYT ?

[Rigo-m]

Seems great! What is the piece of frontmatter code inside the MDC component?

I've actually managed to interpolate variables inside each file by using 2.0.1 nitro hooks (really handy!)

Where would you implement it inside the module code? There are many places you can do this (in the transformer, as a vite plugin, as a remark plugin etc). If you give me a hint (implementation wise) I'm happy to give it a go!

[farnabaz]

We could also imagine using this syntax to render global plugin injections (could be useful for state values coming from tools like Pinia in the long term).

Indeed 👍

Where would you implement it inside the module code? There are many places you can do this (in the transformer, as a vite plugin, as a remark plugin etc). If you give me a hint (implementation wise) I'm happy to give it a go!

@Rigo-m I believe we should implement this logic inside the remark MDC plugin.
We can have a custom tokenizer to tokenize variables so we can render them later on. I would like to postpone rendering the variable to runtime, and not inlining the data. This way we can support scoped variables, like component props.

Also, I would love to have syntax close to Vue itself. Instead of using ${...} and {% ... %} what do you think about {{ ... }}

::my-component{:color="$document.componentColor"}
---
color: red
---
The color is: {{ color }}
::