Local Mermaid library not found

[frank-lenormand]

Hi,

This is a follow-up to #84.

My configuration is as follows:

plugins:
  - mermaid2:
       javascript: js/mermaid.min.js

The library is located in /docs/js.

The documentation that makes use of Mermaid is located in /docs/subdir.

At runtime, I can see in the console that runs the development server:

WARNING -  [14:11:46] "GET /site/subdir/js/mermaid.min.js HTTP/1.1" code 404

Diagrams are still rendered, however, because the plugin fetches the library from unpkg.com.

Thanks!

[fralau]

🤔 There should be a logical explanation.

Hints:

1. What does the HTML say in the page served by your development server, when calling the mermaid javascript library? (that will tell us, more or less what the plugin did).
2. Is the file is really there and is the extension correct? (min.js)?

[frank-lenormand]

When I browse to /site/subdir:

1. The injected tag is:

   <script src="js/mermaid.min.js"></script>

2. Since the current page is located in a sub-directory, there is no such site/subdir/js/mermaid.min.js file (it is present at site/js/mermaid.min.js though)

It seems that the path to the Mermaid library injected into the HTML should be prepended with BASE_URL (or whatever is valid in MkDocs).

[fralau]

Perhaps I am missing something. What is the hierarchy of your mkdocs project?

[frank-lenormand]

Here’s the general hierarchy:

docs
├── subdir
│   └── diagrams.md
├── index.md
└── js
    └── mermaid.min.js

The page generated for diagrams.md tries to load js/mermaid.min.js, which doesn’t exist.

[frank-lenormand]

Here is a change I made locally that allows the diagrams to render:

diff --git a/mermaid2/plugin.py b/mermaid2/plugin.py
index 8bbfe31..27a9673 100755
--- a/mermaid2/plugin.py
+++ b/mermaid2/plugin.py
@@ -276,7 +276,10 @@ class MarkdownMermaidPlugin(BasePlugin):
                 else:
                     # <script src="...">
                     # generally for self.mermaid_major_version < 10:
-                    new_tag['src'] = self.javascript
+                    if self.javascript.startswith("http"):
+                        new_tag['src'] = self.javascript
+                    else:
+                        new_tag['src'] = os.path.relpath(self.javascript, os.path.dirname(page.url))
                     # it's necessary to close and reopen the tag:
                     soup.body.append(new_tag)
                     new_tag = soup.new_tag("script")

[fralau]

🤔 When doing the build, the idea is that the javascript file must be copied in the subdirectory of the site directory, together with all other (html) files.

There is a test site under test/local_lib. I retested it on my site and it worked... for the first page only. Indeed that would not work for subbpages.

We do have a problem; I would have to see how MkDocs solved it with extra_javascript.

What result does it give you for new_tag['src'] = os.path.relpath(self.javascript, os.path.dirname(page.url)) ?

[frank-lenormand]

I tested with test/local_lib and got the same results.

My patch generates a relative link that fetches the root directory of the site.

In my case, it generates script tags that look like so:

<script src="../js/mermaid.min.js"></script>

It should work for arbitrarily nested subdirectories (i.e. add as many ../ as necessary).

Ideally it should probably use an absolute path, but I haven’t found how to do that rapidly enough for a PoC:

<script src="/mysite/js/mermaid.min.js"></script>

[frank-lenormand]

Any progress on this?

Maybe my workaround could be shipped in a new version, until a more robust solution is developed?

[fralau]

Fixed in 1.1.1 (github); I took inspiration from the solution you proposed.

Let me know if it works for you?

[frank-lenormand]

Looks good!

I also tried with a doubly-nested document, the script tag points at the correct file.

Feel free to close this issue once v1.1.1 has officially tagged/released!

[fralau]

Released on Pypi, as v1.1.1.