docs: add zoom functionality on images

[aniketh-varma]

Closes #2393

Added zoom functionality on images in the documentation page using the docusaurus-plugin-image-zoom plugin.

The changes will install the docusaurus-plugin-image-zoom plugin and configure the same.

I have tested the changes locally and did not encounter anything breaking.

Please feel free to suggest any changes. Thanks!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9a0bc12

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[shahednasser]

Thanks for your contribution! In addition to the comments I added below, can you change the z-index of .medium-zoom-overlay and .medium-zoom-image--opened to z-index: var(--ifm-z-index-overlay);? You should be able to add it in src/css/custom.css. That way the sidebar doesn't appear when the pic is zoomed.

[shahednasser]

Why is this necessary? I removed it and nothing changed

[aniketh-varma]

I had done this to zoom in the image inside the text container and not overflow over the sidebar, but I will make the appropriate changes in the z-index

[aniketh-varma]

Thanks for your contribution! In addition to the comments I added below, can you change the z-index of .medium-zoom-overlay and .medium-zoom-image--opened to z-index: var(--ifm-z-index-overlay);? You should be able to add it in src/css/custom.css. That way the sidebar doesn't appear when the pic is zoomed.

Sure! I will make the changes

[aniketh-varma]

Hi @shahednasser, I have done the suggested changes. Please have a look.

[shahednasser]

@aniketh-varma there seems to be an issue with yarn.lock. Can you try removing node_modules in www/docs, running yarn install, and pushing any changes?

[aniketh-varma]

@aniketh-varma there seems to be an issue with yarn.lock. Can you try removing node_modules in www/docs, running yarn install, and pushing any changes?

Sure! I will do the same.

[shahednasser]

Awesome thanks a lot! 🙏🏻 @aniketh-varma