Closed TomerAberbach closed 4 months ago
Also happy to make a PR for the changes if we can agree on what the API should look like!
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.
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
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?
Did some research. Tried adding launchOptions: { args: ['--allow-file-access-from-files'] }
, but that also doesn't seem to do anything
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 :)
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 thepath
property here inmermaid-isomorphic
, and then we could update the option in this rehype plugin as well. What do you think?