Images import

[Djaler]

If I have image in adoc file, it results to tag with original src. And of course there are no image at this source after bundle.

[carlosvin]

Hi @Djaler, thanks for reporting it, can you provide a concrete example or point me to the repo where you are using it?

I am using an image here: https://raw.githubusercontent.com/carlosvin/carlosvin.github.io/site/static/posts/cpp-pragma-pack.en.adoc
And here is the result: https://carlosvin.github.io/posts/cpp-pragma-pack/en

[Djaler]

That's because you're using absolute path to image, not relative. I'll provide an example soon

[carlosvin]

I understand. How would you suggest this plugin should behave when there is a relative image link?

[Djaler]

Currently, in webpack I have this config:

config.module
        .rule('adoc')
        .test(/\.adoc$/)
        .use('html-loader')
        .loader('html-loader')
        .end()
        .use('adoc-loader')
        .loader(path.resolve('./webpack/adoc-loader.js'));

Where adoc-loader.js is:

const asciidoctor = require('asciidoctor')();

module.exports = function asciidoctorLoader(content) {
    this.cacheable();

    return asciidoctor.convert(content, {
        safe: 'unsafe',
        base_dir: this.context,
    });
};

As you can see, adoc-loader just converts adoc-files to html, and then html-loader doing all the rest like rewriting images paths, etc.

I don't know how to do this in rollup, or rather in vitejs (vite uses rollup plugins)

[carlosvin]

This plugin is not generating html, it is generating a javascript string that contains the converted html.

I've modified the previous example to use relative paths and it still works: https://carlosvin.github.io/posts/cpp-pragma-pack/en/

Can you point me to an example to help me understand what you are trying to achieve?

[Djaler]

https://github.com/Djaler/vite-adoc-image-import-error check this, please

[carlosvin]

I see the problem, but I don't know how to solve it yet.

Here it is a sample of what rollup-plugin-asciidoc is generating:

{
  meta: {
    title: "Post title",
    date: "2019-11-11"
  },
  html: "<p>Such a post!</p>"
}

This is just Javascript code and it doesn't know anything about the content of the generated html stored in html var, because it is a raw string. Rollup bundler doesn't know anything either about the html var content for the same reason, so none of them can parse the html content to construct the correct paths and to move the images to the assets folder in the case of vite.

I could modify the plugin to generate html, but then I will lost the meta information variable.

Any idea how to solve this issue is very welcome!

[Djaler]

Just as an idea about meta - it could be imported separetely, like import adocMeta from './post.adoc?meta'

[carlosvin]

I didn't know about the question mark in the import, can you elaborate your idea a little bit more?

[Djaler]

This is just a way to point your import to the same file, but provide an additional params to webpack loader, rollup plugin, etc.(for example https://vitejs.dev/guide/features.html#static-assets)

[Djaler]

Also, more about how it works now in webpack with html-loader: https://webpack.js.org/loaders/html-loader/#sources

By default every loadable attributes (for example - <img src="image.png">) is imported (const img = require('./image.png') or import img from "./image.png")

This is why result html contains correct path to bundled image

[carlosvin]

This is just a way to point your import to the same file, but provide an additional params to webpack loader, rollup plugin, etc.(for example https://vitejs.dev/guide/features.html#static-assets)
Sadly this won't solve the issue of loading assets from generated HTML.

I am trying to figure out how to parse handle assets from plugins, so once we have the HTML generated, we parse it again to extract the assets, but I've found an open issue in Rollup to allow to handle assets from plugins: rollup/rollup#2872

For now I can provide a couple of workarounds:
Workaround 1: If you add :data-uri: true in the test.adoc it will work by embedding the image in the generated html.

Workaround 2:
Manually save the images in an assets folder, they won't be copied by the plugin. Something similar to what I've shown at #4 (comment)

[Djaler]

I am working now on a plugin/function to process html like in html-loader

[carlosvin]

Feel free to create a PR o let me know how I can help.

[Djaler]

If anyone interested in such feature, it is implemented in my plugin https://github.com/Djaler/vite-plugin-asciidoc