feat(mdx): click-to-expand images in docs and blog#379
Open
kubeboiii wants to merge 1 commit into
Open
Conversation
Add MdxFigure for docs and blog MDX images: clickable next/image thumbnail and a Radix dialog lightbox with a viewport-fitted view. Lazy-load lightbox code (next/dynamic, ssr: false). Fix alt text to use markdown alt instead of title. Convert remaining raw img tags on the telegram bot page and one blog post. Preserve telegram bot figure widths (55% / 40%). Closes kagent-dev#362 Signed-off-by: Himanshu <kubeboiii@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #362
Summary
Adds click-to-expand for images in docs and blog MDX. Markdown images route through
MdxFigure, which renders a clickable thumbnail and opens a dialog with a larger view of the same file. Two doc/blog pages that used raw<img>tags now useMdxFigureor markdown image syntax so they get the same behavior.Changes
src/components/mdx/mdx-figure.tsx: Client component withnext/imagethumbnail, optionalfigcaptionfrom markdown title, lazy-loaded lightbox (next/dynamic,ssr: false),aria-label/ dialog attributes. Optionalstyle/classNameapply to<figure>for page-specific layout.src/components/mdx/mdx-figure-lightbox.tsx: Radix dialog; native<img>with viewport max dimensions;DialogContentusesw-autoso the modal fits the image.src/components/ui/dialog.tsx: shadcn dialog primitive.package.json:@radix-ui/react-dialog.src/mdx-components.tsx:imgmaps to<MdxFigure />; exportMdxFigurefor explicit MDX use.src/app/docs/kagent/examples/telegram-bot/page.mdx: Replace two<img>elements with<MdxFigure />(width: 55%/minWidth: 300pxandwidth: 40%/minWidth: 250pxon<figure>).src/blogContent/kagent-celebrating-100-days.mdx: Replace one HTML<img>with markdown.Default MDX images remain full width in the prose column (same as
main). The dialog provides the enlarged view. Telegram bot keeps its previous percentage-based widths.Also fixes MDX
imgalt:mainpassedprops.titletoImagealtinstead ofprops.alt.Out of scope
Homepage and other non-MDX images are unchanged.
Test plan
npm run lintnpm run build/docs/kagent/examples/slack-a2a: inline images, open dialog, close with X / Escape/docs/kagent/examples/telegram-bot: GIF and architecture diagram size; open dialog on architecture image/docs/kagent/getting-started/first-agent: sample docs page/blog/kagent-celebrating-100-days: markdown image and dialogScreenshots
Default docs (markdown images)
Inline — full prose column width; image is clickable.
Lightbox — click opens dialog; image fits viewport; close with X or Escape.
Custom layout (explicit
MdxFigure)Telegram bot page — GIF (~55%) and architecture diagram (~40%) unchanged from intended layout.
Lightbox — architecture diagram enlarged in dialog.
Blog
Markdown image — same click-to-expand behavior as docs.