Processing markdown to replace defaults with custom components

[toddmorey]

I've looked around quite a bit in the docs, issues, and PRs of Nuxt-content, but can't quite find the right guidance. Any help would be appreciated.

Using custom components

I know I can include components from the components/global folder by typing the component names as HTML in markdown:

<my-custom-header>Header Text</my-custom-header>

As documented here: https://content.nuxtjs.org/writing#html

Replacing the markdown defaults with custom components

But I would like to be able to adjust some of the default elements (h1,h2,etc) so that given this markdown...

# Header Text

...I can have nuxt-content instead use a custom component (complete with hydration) and output:

<my-custom-header>Header Text</my-custom-header>

Any guidance on where to begin? Should I employ a remark plugin / configuration? Use a nuxt-content hook? I'm just hoping someone will kindly point me towards the right strategy or provide an example if they've achieved this before.

Thanks!!

[adrianrudnik]

Stuck at a similar problem, by replacing all images with a custom CDN component. I think the only way is to replace that stuff in beforeParse-Hook by a regex or string compare.

[toddmorey]

@adrianrudnik you made me think to look at nuxt/cloudinary as they've done some nice integration work. In their example, they are using content:file:beforeInsert to change metadata (but that's a simpler problem of course). I'll continue to experiment at different points in the lifecycle and see what I can come up with.

https://cloudinary.nuxtjs.org/usage/advanced/

[adrianrudnik]

Good for you, I've given up for now. I need encode the the image URL to the CDN, sign it and attach some meta / legal info for every single one. Getting that from frontmatter to page is just loathsome right now.

---
poster:
    src: content-beispiel-1.jpg
    copyright:
        entity: Fullname
        link: https://legallink
    alt: Picture description for screen-readers
---

<document-image :image="poster" variant="500x400"></document-image>

I see no way to solve it. Right now my hook looks like

  hooks: {
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {
        // encode cdn images
        for (const [key, value] of Object.entries(document)) {
          if ((key === 'poster' || key.endsWith('img_')) && 'src' in value) {
            document[key].src500x200 = useCdn(value.src, 500, 250)
            document[key].src1000x500 = useCdn(value.src, 1000, 500)
            document[key].srcForTwitter = useCdn(value.src, 1200, 650)
            document[key].srcForOpenGraph = useCdn(value.src, 1920, 1080)

           // symlink images in the same folder as the md into static to make it accessible to imgproxy.
            const target = '../../content/articles/' + value.src
            const path = './static/cdn/' + value.src

            fs.symlinkSync(target, path + '_temp', 'file')
            fs.renameSync(path + '_temp', path)
          }
        }
      }

But no matter how I approach it, there are limitations.

• document[key].src500x200 is accessible in vue, but is never injected into the component <document-image>, there is only the original matter available (src, copyright, alt), not the enriched/signed one.
• Trying to solve it with arrays instead was also not successful, :image="image" works, any attempt to work with subkeys or array access fails, like :image="image[0]" for poster images.

The signing can also not move out of the hooks, because otherwise the private key would've be required by the frontend browser to calculate.

I'll fall back to just upload the images manually and generate the required signed URL and use that in md.

Also tried to look at the source from cloudinary but I cant even find the place where CidImage and so on comes from, so I'll throw the towel for now.

[atinux]

Hi and thank you for the idea.

I plan to refactor @nuxt/content Markdown core into a new version of @nuxt/markdown, supporting customer renderers (like https://github.com/medfreeman/remark-vue)