Trying to make binding-data-in-markdown work with markdown links

[xalunda]

Environment

• Operating System: Darwin
• Node Version: v18.20.4
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, future, extends, alias, i18n, css, vite
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-ysynij?file=content%2Findex.md

Describe the bug

Hi everyone!

I'm not sure if this is a bug or a misuse on my part.

I'm trying to make a simple link in markdown containing binding-data-in-markdown

[text](url)

I have two variables websiteName and websiteLink in the :data prop of ContentRenderer.

I'm tried lots of syntax combinations, I'm trying to:

[{{$doc.websiteName}}]({{$doc.websiteLink}})

The text part is correctly replaced but the link part is not:

%7B%7B$doc.websiteLink%7D%7D

Here is a reproduction.

Let me know if I can help in any way.

Additional context

I also tried to override the ProseA component to check for debug. By the time it reaches this component, the href prop is already this one:

%7B%7B$doc.websiteLink%7D%7D

Logs

No response

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[spyesx]

Hello @xalunda. Have you found a solution?

[xalunda]

@spyesx I did not, unfortunately...

[spyesx]

@xalunda Thx for the reply.

I can believe we're the only ones with this issue. Maybe I'm doing something wrong. Does a dev have an recommendation?

[xalunda]

We might be doing something "not meant to do". My "sanity check" answer to that.

I also tried to post on Reddit, no answers.

It'd be great if someone from the team could take a look.

[HugoRCD]

The team has already provided an answer to the problem! https://github.com/nuxt/content/issues/2637

[HugoRCD]

But I agree it would be a great feature!

[brospars]

I found a simple way using hooks that should work in v3 aswell. Here is a snippet:

v2:

// server/plugins/content.ts
export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('content:file:beforeParse', (file: { _id: string; body: string; }) => {
        const data: Data = {
            name: 'Alice',
            age: 30
        };
        if (file._id.endsWith('.md')) {
            file.body = file.body.replace(/{{\s*\$data\.(\w+)\s*(?:\|\|\s*'([^']*)'\s*)?}}/g, (_, variable, defaultValue) =>
                appConfig.shadcnDocs?.data?.[variable] ?? defaultValue ?? ''
            );
        }
    })
})

v3 (no tested):

export default defineNuxtConfig({
  hooks: {
    'content:file:beforeParse' ( {file} ) {
        const data: Data = {
            name: 'Alice',
            age: 30
        };
        if (file._id.endsWith('.md')) {
            file.body = file.body.replace(/{{\s*\$data\.(\w+)\s*(?:\|\|\s*'([^']*)'\s*)?}}/g, (_, variable, defaultValue) =>
                appConfig.shadcnDocs?.data?.[variable] ?? defaultValue ?? ''
            );
        }
    }
  }
})

usage:

Hello, {{ $data.name }}! You are {{ $data.age || 'unknown age' }} years old. 

Your country is {{ $data.country || 'unknown' }}.