Skip to content

[Feature Request] Dynamic Link Rendering #59

Open
@zojize

Description

@zojize

Clear and concise description of the problem

I'm migrating a Jeykll project to a Vue-SSG project and a common pattern I encounter in the markdown in the Jeykll project is templated links. For example:

[Foo bar]({{ site.foo }}/bar)

Which gets replaced by the foo variable defined in a config file during build/dev time by Jekyll. However, this plugin does no transformation to links like this, and markdown-it outputs them raw. It would be nice if this could be supported by this plugin directly allowing dynamically rendered links/images.

Suggested solution

[Foo bar]({{ foo }}/bar)

should be transformed to

<a :href="`${foo}/bar`">Foo bar</a>

Optional title:

[Foo bar]({{ foo }}/bar "the {{ title }}")

should be transformed to

<a :href="`${foo}/bar`" :title="`the ${title}`">Foo bar</a>

Alternative

Currently I accomplish this by using the before transformation to raw markdown to replace items at build/dev time, this solution does not work for dynamic variables but good enough for my usage:

Markdown({
  transforms: {
    before: (code) => {
      const data = {
         frontmatter: matter(code).data,
         // others
      }
      return code.replaceAll(
        new RegExp(`\{\{ *(${Object.keys(data).join('|')})( *\. *([$_\p{ID_Start}][$\p{ID_Continue}]*))+ *\}\}`, 'gu'),
        (match, key) => {
          const keys = match.slice(2, -2).split('.').slice(1).map(key => key.trim())
          let value = data[key]
          for (const key of keys) {
            if (key in value)
              value = value[key]
            else
              return match
          }
          return value === data ? match : `${value}`
        },
      )
    },
  },
})

Additional context

I'd love to help implement this feature! let me know what you think of this idea.

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions