Composable/helper that parse a query response to html string

[educkf]

Hello there!

I didn't find on the docs, and neither on other discussions, sorry if it is repeated.

Is there a way already built to programatically parse the response a query and have its html? Something like this:

const { data } = await useAsyncData(`content-${route.path}`, () => {
    return queryContent()
        .where({ _path: route.path })
        .findOne()
})

const html = someComposableThatParsesTheThingIntoHtml(data)
// result: a string like `<h1>Content parsed</h1><p>Does it exists?</p>`

Thanks in advance!

[atinux]

What would be the use case of this compared to using the ContentRenderer component?

[educkf]

I wanted to modify the HTML, running through some regex to match some patterns and change for other things. It is specifically for bibliografic references, like (CHOPIN, 2022), that I will change to <span class="ref">(CHOPIN, 2022)</span>.

[educkf]

And then with the string modified, a simple v-html works great for me. I dont know if it is achiveable in any other way using the ContentRenderer itself.

I was recomended on twitter to check the Advanced API, and I think I may find a way around using it and building something customized.

[ManUtopiK]

I see two ways to do that :

• walk through the json AST a find text that match your regex pattern.
• use 'content:file:beforeInsert' hook to wrap the regex match in the markdown file.

[ManUtopiK]

Or if you can, the simplest way is to create a MDC component for this.