backstage / mkdocs-techdocs-core

The core MkDocs plugin used by Backstage's TechDocs as a wrapper around multiple MkDocs plugins and Python Markdown extensions
Apache License 2.0
83 stars 61 forks source link

Add mkdocs-glightbox to allow images to be zoom #75

Closed kenny-chow-my closed 1 year ago

kenny-chow-my commented 1 year ago

As some users publish architecture diagrams in png or jpg format, they are very tiny to view in the default content area. Allowing a Lightbox experience will greatly improve the readability of such content.

Mkdocs already supports using the glightbox plugin here: https://squidfunk.github.io/mkdocs-material/reference/images/#lightbox

Can we enable this in TechDocs?

iamEAP commented 1 year ago

👋 Hey! I responded with this in a relevant thread in discord, but here's a copy:

TechDocs is kind of unique in that, unlike a standard mkdocs site that is built and hosted at some location, the built HTML content gets rendered within the context of a broader application (Backstage). Any JavaScript that gets loaded and run would therefore have access to a lot more than a typical mkdocs site (e.g. local storage values, cookies, access tokens, that might be tied to a source code provider, a cloud provider, etc).

...To mitigate the risk associated with that, we filter out all scripts by default. This includes scripts added by mkdocs plugins like this underlying feature exposed by mkdocs-material

...

...the only solution to achieve this functionality (open a lightbox to increase the image size) is via an addon, right?

Correct! Folks have wanted this from time to time as well, see https://github.com/backstage/backstage/issues/10270

One possible approach would be to create an addon that loads in and instantiates the equivalent of that glightbox within the Addon code itself. ...This is not too dissimilar to how this mermaid diagram addon works: https://github.com/johanneswuerbach/backstage-plugin-techdocs-addon-mermaid

Given the above, I'll be closing this specific issue, as it's not technically feasible to add/enable this particular plugin.

Instead, I encourage you or anyone looking for this functionality to create a TechDocs Addon that achieves the same effect. The best place to coordinate that would likely be in this issue: https://github.com/backstage/backstage/issues/10270

connorads commented 1 year ago

Looks like a lightbox TechDocs Addon was added in https://github.com/backstage/backstage/pull/16122 https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.lightbox/