search

invertase / docs.page

Instant Open Source docs with zero configuration.
https://docs.page
Apache License 2.0
466 stars 76 forks source link

mermaid support #136

Open cabljac opened 2 years ago

cabljac commented 2 years ago

It would be really cool to support mermaid diagrams, there's a remark/rehype plugin but i believe it relies on puppeteer, not sure how this will interact with our bundler api.

kumar-kalyan commented 2 years ago

Can I work on this

SirusCodes commented 2 years ago

https://www.npmjs.com/package/mdx-mermaid

This seems like a good package for mermaid diagrams

cabljac commented 2 years ago

Sure @kumar-kalyan i'll assign you. Try to use SirusCode's suggested library. Make a PR to the branch next .

SirusCodes commented 2 years ago

If by any case @kumar-kalyan you are not able to do so let us know I would be more than happy to do it

cabljac commented 2 years ago

Thanks @SirusCodes !

Now that package is published, it might be a very simple PR of just including the plugin in our backend API. If it turns out we have to include extra CSS on the frontend, we might have to do something similar to our KaTeX plugin, where we provide an optional flag in the config to turn it on (disabled by default)

cabljac commented 2 years ago

This is where the plugin should go:

https://github.com/invertase/docs.page/blob/next/api/src/bundler/getPlugins.ts#L16

I'd love for this feature to be added :)

SirusCodes commented 2 years ago

Hey @cabljac I tried working on the issue using mdx-mermaid but it's not directly working with remarkPlugins. There are some type matching issues. I have no idea how remark/rehype plugins work will need to learn them.

cabljac commented 2 years ago

Yeah turns out it's a little complicated. I had a go just now and I think i have it working. Basically had to add a custom component on the frontend, and then transform mermaid code blocks into instances of that component. There are some merge conflicts etc i have to sort out, and it's not tested fully yet, but here's a draft PR https://github.com/invertase/docs.page/pull/242