URLs relative to the markdown file

[mattjennings]

Is there a way to use URLs to assets relative to the .md file, essentially treating them as imports?

Here's an example of what I'm trying to achieve. This is a SvelteKit project with mdsvex:

├── src
│   └── routes
│       ├── blog
│       │   └── my-first-post
│       │       ├── index.md
│       │       └── my-image.png
│       └── index.svelte

I want to group my posts and assets together, rather than putting all assets in a public or static folder. So my-first-post/index.md could look something like:

Hello, this is an image

![my image](./my-image.png)

of course, this doesn't work. A workaround is to do this:

<script>
import myImage from './my-image.png'
</script>

Hello, this is an image

<img src={myImage} />

but I'd like to use the markdown syntax.

I wrote a remark plugin that transform relative URLs in links, but the bundler is not aware of the file so it doesn't get included in the build. Ideally, it would transform relative URLs into imports and then return however the bundler processes them (in SvelteKit/Vite's case, a valid URL), but within the context of a remark/rehype plugin I don't think you can do that.

[babichjacob]

but I'd like to use the markdown syntax.

<script>
import myImage from './my-image.png'
</script>

Hello, this is an image

![my image]({myImage})

Markdown syntax everywhere except the import.

[mattjennings]

This is good, but worth noting it causes problems with remark/rehype plugins that utilize the URL (which admittedly is an edge case and maybe is a separate issue).

For example, I have this plugin that renders video tags when the URL ends in .mp4:

import { visit } from 'unist-util-visit'

export default function videosPlugin(options = {}) {
  return function transformer(tree, file) {
    visit(tree, 'image', (node, index, parent) => {
      if (node.url.endsWith('mp4')) {
        node.type = 'html'
        node.value = `
            <video src="${node.url}"
              autoplay
              loop
              title="${node.alt}"/>
          `
      }
    })
  }
}

However, node.url will be {myImage} instead of the transformed URL (or more appropriately {myVideo}), so it doesn't work.

[pngwn]

Technically possible in a plugin but relatively complex.

The simplest way I could think to do it is to transform:

Hello, this is an image

![my image](./my-image.png)

Into:

<script>
  import MyImage from './my-image.png';
</script>

<img src="{MyImage}" title="my image" />

Then, assuming your bundler is set up to handle images, it will take care of copying across the necessary files. You can then continue using image paths relative to your files as you do with javascript etc.

The other alternative is to resolve the files manually and copy them across to the static folder, but at this point you are pretending to be a bundler. Vite will handle this for us and getting images into your JS toolchain can be useful for hashing/ optimisations/ etc.

I put together a quick example here: https://runkit.com/pngwn/mdsvex-url-to-import

This example handles the case when there is no script and when a script already exists.

It will also handle collisions (like when you have two files that would be 'camel cased' to the same value ie './my-image.png' and './MyImage.png') but ensure that duplicate imports are never generated (if you used the same file twice).

I have no idea if it conflicts with other plugins or what happens if there is a context module script block present, but it doesn't look too bad for a quick implementation.

[mattjennings]

Finally got around to trying this. The only problem I had was with my video plugin, everything else worked perfectly.

If I ran the video plugin before this one, then it would already be transformed to an html node type and no longer be an image. If I ran it afterwards, then the video plugin would receive {MyVideoMp4} as the node's URL.

My quick and dirty solution was to handle html nodes by getting the URL from src attributes. I figured it'd be a bonus to support relative links inside html tags anyway, but if this ever became a core feature/plugin, I'm not sure it would be worth caring about.

Here's the end result:

import { visit } from 'unist-util-visit'
import toCamel from 'just-camel-case'

// forgive me
const RE_SCRIPT_START = /<script(?:\s+?[a-zA-z]+(=(?:["']){0,1}[a-zA-Z0-9]+(?:["']){0,1}){0,1})*\s*?>/
const RE_SRC = /src\s*=\s*"(.+?)"/

export default function relativeUrlsPlugin() {
  return function transformer(tree) {
    const urls = new Map()
    const url_count = new Map()

    function transformUrl(url) {
      if (url.startsWith('.')) {
        let camel = toCamel(url)
        const count = url_count.get(camel)
        const dupe = urls.get(url)

        if (count && !dupe) {
          url_count.set(camel, count + 1)
          camel = `${camel}_${count}`
        } else if (!dupe) {
          url_count.set(camel, 1)
        }

        urls.set(url, {
          path: url,
          id: camel
        })

        return `{${camel}}`
      }

      return url
    }

    // transform urls in images
    visit(tree, 'image', (node) => {
      node.url = transformUrl(node.url)
    })

    // transform src in html nodes
    visit(tree, 'html', (node) => {
      if (node.value) {
        const [, url] = node.value.match(RE_SRC) ?? []
        if (url) {
          const transformed = transformUrl(url)
          node.value = node.value.replace(`"${url}"`, transformed)
        }
      }
    })

    let scripts = ''
    urls.forEach((x) => (scripts += `import ${x.id} from "${x.path}";\n`))

    let is_script = false

    visit(tree, 'html', (node) => {
      if (RE_SCRIPT_START.test(node.value)) {
        is_script = true
        node.value = node.value.replace(RE_SCRIPT_START, (script) => {
          return `${script}\n${scripts}`
        })
      }
    })

    if (!is_script) {
      tree.children.push({
        type: 'html',
        value: `<script>\n${scripts}</script>`
      })
    }
  }
}

[michaeloliverx]

This works good @pngwn !

I have been using vite-image-tools in my markdown like this:

<script>
  import srcsetAvif from "./cover.webp?w=500;700;900;1200&avif&srcset";
  import srcsetWebp from "./cover.webp?w=500;700;900;1200&webp&srcset";
  import { src as placeholder, width, height } from "./cover.webp?width=300&metadata";
</script>

<picture>
  <source scrset={srcsetAvif} type="image/avif" />
  <source srcset={srcsetWebp} type="image/webp" />
  <img
    src={placeholder}
    {width}
    {height}
    alt="Women Lying Near to a Multicolored Glass Window Close-up Photography"
  />
</picture>

Which works and optimises images at build time using sharp.

A good usecase for a plugin would be to automatically transform markdown image syntax ![alt text](./cover.webp "Cover Photo") into the script above.

[eur2]

Indeed it would be great to have a plugin to optimize markdown images with vite-imagetools. On that specific use case, Gatsby is still doing the job better than SvelteKit. I didn't find any SvelteKit repo working with markdown images and vite-imagetools

[KoljaL]

@eur2
I found this, but did not use it yet: https://github.com/rdela/sveltekit-imagetools

[eur2]

this is doing the job fine:
https://github.com/divriots/jampack

[benallfree]

@mattjennings @pngwn I took inspiration from you and made https://www.npmjs.com/package/mdsvex-enhanced-images. The plugin will make MDsveX process normal Markdown images using enhanced-images.

Prior art:
sveltejs/kit#11132
#550