search

remcohaszing / rehype-mermaid

A rehype plugin to render mermaid diagrams
MIT License
68 stars 8 forks source link

Support path to CSS file instead of URL #14

Closed TomerAberbach closed 4 months ago

TomerAberbach commented 4 months ago

I tried using a file URI (i.e. file://...), but Puppeteer was not pleased with that. I think what we'd need to do is first support setting the path property here in mermaid-isomorphic, and then we could update the option in this rehype plugin as well. What do you think?

TomerAberbach commented 4 months ago

Also happy to make a PR for the changes if we can agree on what the API should look like!

remcohaszing commented 4 months ago

mermaid-isomorphic uses Playwright, not Puppeteer.

What’s not working with file URLs? They are also used to load FontAwesome, with a working test fixture.

File paths were problematic. It was a deliberate choice to use URLs instead.

TomerAberbach commented 4 months ago

mermaid-isomorphic uses Playwright, not Puppeteer.

Whoops, yup, misspoke!

What’s not working with file URLs? They are also used to load FontAwesome, with a working test fixture.

File paths were problematic. It was a deliberate choice to use URLs instead.

Hmmm interesting. Let me retry on my end and let you know what happened. I think I had some error message that prevented it from working

TomerAberbach commented 4 months ago

Okayyy, so the path I am trying to pass looks something like this: file:///Users/tomer/Documents/work/code/website/public/build/_assets/fonts-WLD5NJYI.css. If I enter that URL into my browser, then it is able to load the file. So the path is correct.

However, for some reason I get this error for that URL:

page.evaluate: DOMException: A network error occurred.
    at /Users/tomer/Documents/work/code/website/node_modules/.pnpm/mermaid-isomorphic@2.1.2/node_modules/mermaid-isomorphic/src/mermaid-isomorphic.ts:251:34

Noting that using a non-file URI works fine (e.g. like a Google Fonts URL)

Does it look like I'm doing anything obviously wrong? Anything that I should look into further?

TomerAberbach commented 4 months ago

Did some research. Tried adding launchOptions: { args: ['--allow-file-access-from-files'] }, but that also doesn't seem to do anything

TomerAberbach commented 4 months ago

Okayyyy, I figured it out! So the CSS file is actually loading correctly. It's the fonts referenced by the CSS file that are not loading correctly.

I have something like this in the file:

src: url(/build/_assets/KantumruyPro-Thin-subset_9fd542e3-CDURTIBD.woff2) format("woff2")

This works correctly in my server because it's resolved relative to the public directory where my server is serving files from, but with Playwright it looks in file:///build/_assets/KantumruyPro-Thin-subset_9fd542e3-CDURTIBD.woff2 (i.e. a dir called build/ in the root of the file system), which doesn't exist.

Will think through how to get this working without having to create a new CSS file, but if I have to, then I will. Anyway, sorry for the noise! Doesn't seem like there's any issue on your end :)