Components auto-import and shortcodes

[flikteoh]

Currently as per documentation, we can use components in markdown without importing which is pretty cool.

But what is the recommended approach if we need to replace certain markdown elements via import and mapping?

For example: Mdx Shortcodes

// Post template

import Image from '../components/Image';
import Paragraph from '../components/Paragraph';
import Youtube from '../components/Youtube';

const Components = {
  img: (props) => <Image {...props} />,
  p: (props) => <Paragraph {...props} />,
  Video: (props) => <Youtube {...props} client:idle />,
}

...

<MDXProvider components={...Components}>

  {{ content }}

</MDXProvider>

...

// somewhere in content.mdx

## Title

![image](/src/image/image.jpg)

some contents

...

This will allow developers to have better controls of hydration directives like:

import Image from '../components/Image';

const Components = {
  img: (props) => <Image {...props}  client:visible />
}

[ElMassimo]

Hi @flikteoh!

Currently there is no global mechanism to replace the standard HTML tags (though it can be achieved by using remark plugins). As you mentioned, you can explicitly use <Image> without importing.

I'm currently exploring a way to avoid the vue-jsx babel transform (for performance reasons), which brings an opportunity to add something like global shortcodes.

I'll let you know when that happens. Thanks for stopping by!

[flikteoh]

Hi @flikteoh!

Currently there is no global mechanism to replace the standard HTML tags (though it can be achieved by using remark plugins). As you mentioned, you can explicitly use <Image> without importing.

I'm currently exploring a way to avoid the vue-jsx babel transform (for performance reasons), which brings an opportunity to add something like global shortcodes.

I'll let you know when that happens. Thanks for stopping by!

Looking forward to that!

The concern is more of to end user of markdown that are not developers.

Especially on other more complex components or simply remapping link say an internal/external link.

More ideal for non-developer user to use standard markdown instead of having to use between < ExternalLink /> for example.

Or cases like images with figcaption where we could use standard markdown and display alt text as caption.

Great work on iles, thank you!

[ElMassimo]

I agree, and I definitely see the value of keeping the markdown content agnostic to where it's rendered.

Have plans to allow dynamic markdown rendering (non-local files), where this feature would definitely shine.

[ElMassimo]

Added support for MDX "shortcodes" in [email protected] and it's now well documented.

@flikteoh Let me know if you have any suggestions! I might expose a public provideMDXComponents composition API method that can be used in layouts (instead of passing them using props, which does have the advantage of being combined with the globally provided ones instead of overriding them).

[flikteoh]

🔥🔥

Thank you! You're extremely fast @ElMassimo !

I will try it out and let you know.

I suppose the client:directives would still work like so?

<script setup>
import Introduction from '~/pages/introduction.mdx'

import Image from '~/components/Image.vue'
import SmartLink from '~/components/SmartLink.vue'

const components = {
  b: strong,
  img: Image,
  a: SmartLink,
+ Video: (props) => <Youtube {...props} client:visible />
}
</script>

<template>
  <h1>{{ Introduction.title }}</h1>
  <Introduction :components="components"/>
</template>

[ElMassimo]

Currently you can only use client directives in MDX files, or in the template of a Vue file.

You can achieve the example above by creating a new Vue component:

<template>
  <Youtube client:visible/>
</template>

[flikteoh]

Got it! Thank you!