How to use with Docusaurus?

[mavam]

I would like to use this plugin with Docusaurus, specifically, as an MDX plugin.

IIUC, this is not possible because Docusaurus doesn't have ESM support. Is this right? Or is there a way around that?

[mavam]

Turns out Docusaurus describes how to do it.

I can confirm that this works:

const inlineSVG = (await import('remark-inline-svg')).default;

Plus using it like this:

docs: {
  // ...
  beforeDefaultRemarkPlugins: [inlineSVG],
}

I just haven't figured out how to adapt the options.

EDIT: I found out that option passing requires a nested array:

  beforeDefaultRemarkPlugins: [[inlineSVG, { suffix: '.svg' }]],

[mavam]

Now I'm faced with the next issue, which is path resolution. While the plugin works successfully for SVGs in the same directory as the source file, it fails when the URL is relative to the root. Consider this snippet:

  return async (tree, file) => {
    const svgs = [];

    const markdownFileDir = dirname(file.history[0]);

    visit(tree, 'image', (node) => {
      const { url } = node;

      if (url.endsWith(suffix)) {
        // Debugging here....
        console.log(url);
        console.log(markdownFileDir);

This prints:

/img/actor-distribution.svg
.../web/docs/understand/architecture

The second line is the location of the Markdown file, whereas the first line is the image relative to static image directory .../web/static/.

Any ideas how to make this work?

(Sorry for the noob'ish style of unrolling this, my frontend fu is rather limited.)

[alvinometric]

Hey Matthias, Thank you so much for your comments and the solutions!

Can you try updating tov1.1.0? I think I found a fix and I just released it in 1.1.0

[mavam]

Thanks for shipping a fix! Unfortunately, it didn't work for me:

$ docusaurus start
[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

✖ Client
  Compiled with some errors in 3.18s

Error: ENOENT: no such file or directory, open '/Users/mavam/code/tenzir/vast-docs/web/img/actor-distribution.svg'
client (webpack 5.74.0) compiled with 1 error

There are three paths involved here:

1. The web "root" at /Users/mavam/code/tenzir/vast-docs/web/
2. /img/actor-distribution.svg: the location of static images, relative to the project root
3. The path to the Markdown file within the web root: docs/...

A bit more context. In the Markdown file located in docs/..., I include the image as follows:

![Actor Distribution](/img/actor-distribution.svg)

Is there perhaps some missing piece that tells remark where to look for files that start with /? Is this a Docusaurus thing?

Grand context: I am working on https://vast.io/docs/understand/architecture/actor-model. I want to replace all PNGs with inlined SVGs with your plugin, so that I get the right fonts in the SVG to show and can stop the export-twice-for-dark-and-light-mode madness and finally use CSS.