From aaf839b1e673a94c36f66749327d4a7574bb9fb9 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Wed, 3 Jun 2026 01:29:25 +0530 Subject: [PATCH] feat(mdx): click-to-expand images in docs and blog 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 #362 Signed-off-by: Himanshu --- package-lock.json | 102 ++++++++------- package.json | 1 + .../kagent/examples/telegram-bot/page.mdx | 12 +- .../kagent-celebrating-100-days.mdx | 2 +- src/components/mdx/mdx-figure-lightbox.tsx | 39 ++++++ src/components/mdx/mdx-figure.tsx | 81 ++++++++++++ src/components/ui/dialog.tsx | 122 ++++++++++++++++++ src/mdx-components.tsx | 10 +- 8 files changed, 312 insertions(+), 57 deletions(-) create mode 100644 src/components/mdx/mdx-figure-lightbox.tsx create mode 100644 src/components/mdx/mdx-figure.tsx create mode 100644 src/components/ui/dialog.tsx diff --git a/package-lock.json b/package-lock.json index 239a5922..1812c421 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@mdx-js/react": "^3.1.1", "@next/mdx": "^15.5.4", "@next/third-parties": "^15.5.4", + "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", @@ -203,7 +204,6 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.48.0.tgz", "integrity": "sha512-RB9bKgYTVUiOcEb5bOcZ169jiiVW811dCsJoLT19DcbbFmU4QaK0ghSTssij35QBQ3SCOitXOUrHcGgNVwS7sQ==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.48.0", "@algolia/requester-browser-xhr": "5.48.0", @@ -2016,7 +2016,6 @@ "version": "1.8.1", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz", "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -2736,7 +2735,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -2759,7 +2757,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -2782,7 +2779,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2799,7 +2795,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2816,7 +2811,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2833,7 +2827,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2850,7 +2843,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2867,7 +2859,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2884,7 +2875,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2901,7 +2891,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2918,7 +2907,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2935,7 +2923,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2952,7 +2939,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -2975,7 +2961,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -2998,7 +2983,6 @@ "cpu": [ "ppc64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3021,7 +3005,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3044,7 +3027,6 @@ "cpu": [ "s390x" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3067,7 +3049,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3090,7 +3071,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3113,7 +3093,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "Apache-2.0", "optional": true, "os": [ @@ -3136,7 +3115,6 @@ "cpu": [ "wasm32" ], - "dev": true, "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", "optional": true, "dependencies": { @@ -3156,7 +3134,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "Apache-2.0 AND LGPL-3.0-or-later", "optional": true, "os": [ @@ -3176,7 +3153,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "Apache-2.0 AND LGPL-3.0-or-later", "optional": true, "os": [ @@ -3196,7 +3172,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "Apache-2.0 AND LGPL-3.0-or-later", "optional": true, "os": [ @@ -3293,7 +3268,6 @@ "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.1.tgz", "integrity": "sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==", "license": "MIT", - "peer": true, "dependencies": { "@mdx-js/mdx": "^3.0.0", "source-map": "^0.7.0" @@ -3353,7 +3327,6 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", - "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -3563,7 +3536,6 @@ "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": "^14.21.3 || >=16" }, @@ -3965,6 +3937,60 @@ } } }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz", + "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.3", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", + "@radix-ui/react-focus-scope": "1.1.7", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-portal": "1.1.9", + "@radix-ui/react-presence": "1.1.5", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-slot": "1.2.3", + "@radix-ui/react-use-controllable-state": "1.2.2", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-direction": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz", @@ -5451,7 +5477,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz", "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -5462,7 +5487,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -5518,7 +5542,6 @@ "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.55.0", "@typescript-eslint/types": "8.55.0", @@ -6037,7 +6060,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -6089,7 +6111,6 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.48.0.tgz", "integrity": "sha512-aD8EQC6KEman6/S79FtPdQmB7D4af/etcRL/KwiKFKgAE62iU8c5PeEQvpvIcBPurC3O/4Lj78nOl7ZcoazqSw==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/abtesting": "1.14.0", "@algolia/client-abtesting": "5.48.0", @@ -7095,7 +7116,6 @@ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", "license": "MIT", - "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" @@ -7663,7 +7683,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -7837,7 +7856,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -9929,7 +9947,6 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "license": "MIT", - "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -11537,7 +11554,6 @@ "resolved": "https://registry.npmjs.org/next/-/next-15.5.12.tgz", "integrity": "sha512-Fi/wQ4Etlrn60rz78bebG1i1SR20QxvV8tVp6iJspjLUSHcZoeUXCt+vmWoEcza85ElZzExK/jJ/F6SvtGktjA==", "license": "MIT", - "peer": true, "dependencies": { "@next/env": "15.5.12", "@swc/helpers": "0.5.15", @@ -12140,7 +12156,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -12427,7 +12442,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -12437,7 +12451,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -13722,7 +13735,6 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", "license": "MIT", - "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -14080,7 +14092,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -14131,7 +14142,6 @@ "integrity": "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "pathe": "^2.0.3" } @@ -14597,7 +14607,6 @@ "dev": true, "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "bin": { "workerd": "bin/workerd" }, @@ -14618,7 +14627,6 @@ "integrity": "sha512-0PBiVEbshQT4Av/KLHbOAks4ioIKp/eAO7Xr2BgAX5v7cFYYgeOvudBrbtZa/hDDIA6858QuJnTQ8mI+cm8Vqw==", "dev": true, "license": "MIT OR Apache-2.0", - "peer": true, "dependencies": { "@cloudflare/kv-asset-handler": "0.4.2", "@cloudflare/unenv-preset": "2.12.1", diff --git a/package.json b/package.json index 6773d686..bd2183a8 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@mdx-js/react": "^3.1.1", "@next/mdx": "^15.5.4", "@next/third-parties": "^15.5.4", + "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", diff --git a/src/app/docs/kagent/examples/telegram-bot/page.mdx b/src/app/docs/kagent/examples/telegram-bot/page.mdx index 9b3c9780..8ed392c5 100644 --- a/src/app/docs/kagent/examples/telegram-bot/page.mdx +++ b/src/app/docs/kagent/examples/telegram-bot/page.mdx @@ -22,7 +22,11 @@ No webhooks. No public endpoints. Just polling from inside the cluster.
- Telegram Demo +
## Architecture Overview @@ -30,7 +34,11 @@ No webhooks. No public endpoints. Just polling from inside the cluster. Here’s what we’re building:
- Architecture +
--- diff --git a/src/blogContent/kagent-celebrating-100-days.mdx b/src/blogContent/kagent-celebrating-100-days.mdx index fec5a9c7..9c8669c0 100644 --- a/src/blogContent/kagent-celebrating-100-days.mdx +++ b/src/blogContent/kagent-celebrating-100-days.mdx @@ -16,7 +16,7 @@ Fast forward 100 days, and today we’re celebrating a major milestone: **100 da What began as a tool to address our own customer challenges has grown into a thriving open-source project. Kagent is now a **CNCF Sandbox project**, and it's evolving into a powerful **declarative agentic AI framework**—enabling like-minded engineers to run AI agents in Kubernetes, automating complex operations and streamlining troubleshooting workflows. -LinkedIn post from Peter Jausovec +![LinkedIn post from Peter Jausovec](/images/blog/100days/cncf-sandbox.png) ## 🌟 100 contributors & 1000+ GitHub stars! diff --git a/src/components/mdx/mdx-figure-lightbox.tsx b/src/components/mdx/mdx-figure-lightbox.tsx new file mode 100644 index 00000000..582efc64 --- /dev/null +++ b/src/components/mdx/mdx-figure-lightbox.tsx @@ -0,0 +1,39 @@ +"use client" + +import { + Dialog, + DialogContent, + DialogTitle, +} from "@/components/ui/dialog" + +export type MdxFigureLightboxProps = { + open: boolean + onOpenChange: (open: boolean) => void + src: string + alt: string + label: string +} + +export function MdxFigureLightbox({ + open, + onOpenChange, + src, + alt, + label, +}: MdxFigureLightboxProps) { + return ( + + + {label} +
+ {/* eslint-disable-next-line @next/next/no-img-element -- lightbox needs intrinsic image sizing */} + {alt} +
+ + + ) +} diff --git a/src/components/mdx/mdx-figure.tsx b/src/components/mdx/mdx-figure.tsx new file mode 100644 index 00000000..7549989a --- /dev/null +++ b/src/components/mdx/mdx-figure.tsx @@ -0,0 +1,81 @@ +"use client" + +import * as React from "react" +import dynamic from "next/dynamic" +import Image from "next/image" +import { cn } from "@/lib/utils" + +const MdxFigureLightbox = dynamic( + () => + import("./mdx-figure-lightbox").then((mod) => ({ + default: mod.MdxFigureLightbox, + })), + { ssr: false } +) + +type MdxFigureProps = React.ImgHTMLAttributes + +export function MdxFigure({ + src, + alt = "", + title, + className, + style, +}: MdxFigureProps) { + const [open, setOpen] = React.useState(false) + const [hasOpened, setHasOpened] = React.useState(false) + + if (!src || typeof src !== "string") { + return null + } + + const caption = title + const label = alt || (typeof caption === "string" ? caption : "") || "documentation image" + + const handleOpenChange = (next: boolean) => { + setOpen(next) + if (next) { + setHasOpened(true) + } + } + + const hasLayoutOverride = className != null || style != null + + return ( +
+ + {hasOpened ? ( + + ) : null} + {caption ? ( +
{caption}
+ ) : null} +
+ ) +} diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 00000000..1647513e --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,122 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { X } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx index e6a7555c..b354b17a 100644 --- a/src/mdx-components.tsx +++ b/src/mdx-components.tsx @@ -6,7 +6,7 @@ import SmartLink from "./components/mdx/smart-link"; import { CodeBlock } from "./components/mdx/code-block"; import { LabCTA } from "./components/mdx/lab-cta"; import { Aside } from "./components/mdx/aside"; -import Image from "next/image"; +import { MdxFigure } from "./components/mdx/mdx-figure"; import { generateAnchorId } from "@/lib/utils"; function YouTube ({ id } : { id : string }){ @@ -166,12 +166,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { {children} ), - img: ({ ...props }) => ( -
- {props.title} - {props.title &&
{props.title}
} -
- ), + img: (props) => , // Pre (for code blocks) pre: ({ children }) => <>{children}, PlatformTabs, @@ -181,6 +176,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { YouTube, LabCTA, Aside, + MdxFigure, ...components, }), [components]