nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.1k stars 624 forks source link

How do I have .md files return a regular hast tree? #854

Open AaronBeaudoin opened 3 years ago

AaronBeaudoin commented 3 years ago

I've found that the compiler at /packages/content/parsers/markdown/compilers/json.js causes .md files to return a body property that cannot be run straight through hast-util-to-html to programmatically generate html.

To get around this (I need to generate my own html), I've currently written my own simple recursive function to rename the tag property for each node back to tagName like the original spec. However, now I'm realizing I need to do the same with the props property, which is supposed to be called properties.

I can't help but feel like I'm hacking around this when there's some core, supported way of doing it. All I need is for the body property returned in the content object for .md files to be a standard hast tree so I can do whatever I want with it. How can I accomplish that?

atinux commented 3 years ago

Why do you want to transform it to HTML in the first place @AaronBeaudoin ?

AaronBeaudoin commented 3 years ago

Several reasons for different purposes. I don't know that it's particularly relevant, but if you're interested, here are several:

  1. For the purpose of branding, I want a particular word to be automatically italicized every place where it is used, without requiring that to be done throughout the actual markdown files to eliminate missing the word in some places by accident.
  2. I also like to programmatically wrap several special characters (®, for example) in a span so I can style them more like a superscript for the sake of visual appeal.
  3. In some .md files, I do things like take the first paragraph and use it for a special purpose in the final page separately from the rest of the text.

For me, the easiest way to accomplish these and other things would be to have a normal hast tree to work with so I can easily plug them into remark or rehype as I need. I'd like to do this without having to write manual code to transform Nuxt Content's modified AST back into a regular one by essentially reversing what I see being done in the source code at the path I mentioned above.

AaronBeaudoin commented 3 years ago

Hi @Atinux just following up to see if you happen to know whether there is a way to accomplish my original question? Thanks!

ManasMadrecha commented 3 years ago

You can use some remark plugin, can't you? For e.g., you may use remark's textr plugin to replace some word with something else. Or, you may directly add <i></i> tags around some words inside hook content:file:beforeParse using regex.

For example, I am doing this for Sanskrit articles,

'content:file:beforeParse': (file) => {
  if (file.extension !== '.md') {
    return
  }
  else {
    // S to avagrah "ऽ" in Devanagari word
    file.data = file.data.replace(/(?<=\p{sc=Deva})S(?=\p{sc=Deva})/gu, 'ऽ')
  }
}

Yes, for your other reasons, what you are needing is justified.