From 82748a861c983f35e08653b43fbd57385c89d953 Mon Sep 17 00:00:00 2001 From: Novus Nota <68142933+novusnota@users.noreply.github.com> Date: Wed, 18 Mar 2026 10:47:40 +0100 Subject: [PATCH 1/2] feat(snippets): add `center` and `noZoom` properties to `` component --- contribute/snippets/image.mdx | 18 +++++++++++++++ snippets/image.jsx | 41 +++++++++++++++++++++++++++++++---- 2 files changed, 55 insertions(+), 4 deletions(-) diff --git a/contribute/snippets/image.mdx b/contribute/snippets/image.mdx index 47b567a7a..6adb2ba53 100644 --- a/contribute/snippets/image.mdx +++ b/contribute/snippets/image.mdx @@ -188,3 +188,21 @@ Examples: - `` — also the width of 100 pixels, but given as a number. See more: [`width` attribute on the `` image embed element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width). + +### `center` + +**type:** `boolean`
+**default:** `false` + +Whether to horizontally center the image. + +Usage: ``. + +### `noZoom` + +**type:** `boolean`
+**default:** `false` + +Whether to disable the image zoom. + +Usage: ``. diff --git a/snippets/image.jsx b/snippets/image.jsx index e9c928411..c84e820bb 100644 --- a/snippets/image.jsx +++ b/snippets/image.jsx @@ -8,9 +8,22 @@ * target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop', * height?: string | number, * width?: string | number, + * noZoom?: string | boolean, + * center?: string | boolean, * }} props */ -export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height = 342, width = 608 }) => { +export const Image = ({ + src, + darkSrc, + alt = '', + darkAlt, + href, + target, + height = 342, + width = 608, + noZoom = false, + center = false, +}) => { const isSVG = src.match(/\.svg(?:[#?].*?)?$/i) !== null; const shouldInvert = isSVG && !darkSrc; const shouldCreateLink = href !== undefined; @@ -75,6 +88,10 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height = const heightPx = Number(height); const widthPx = Number(width); + // Typecast string | boolean values to boolean-only + const shouldCenter = center === "true" || center === true ? true : false; + const shouldNotZoom = noZoom === "true" || noZoom === true ? true : false; + // Resulting images const images = ( <> @@ -85,7 +102,7 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height = {...(height && { height: heightPx })} {...(width && { width: widthPx })} // @ts-ignore - {...((shouldCreateLink || shouldInvert) && { noZoom: "true" })} + {...((shouldCreateLink || shouldInvert || shouldNotZoom) && { noZoom: "true" })} /> ); // Is a clickable link if (shouldCreateLink) { + // Centered horizontally + if (shouldCenter) { + return ( +
+ + {images} + +
+ ); + } + return ( {images} @@ -108,6 +136,11 @@ export const Image = ({ src, darkSrc, alt = "", darkAlt, href, target, height = ); } - // Not a link + // Not a link, centered horizontally + if (shouldCenter) { + return
{images}
; + } + + // Not a link, placed as is return images; }; From c4d873cfd26a95d243b5cb982aa913c53d8b5dfe Mon Sep 17 00:00:00 2001 From: Novus Nota <68142933+novusnota@users.noreply.github.com> Date: Wed, 18 Mar 2026 13:43:30 +0100 Subject: [PATCH 2/2] fix icons and text on the snippets overview page --- contribute/snippets/overview.mdx | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/contribute/snippets/overview.mdx b/contribute/snippets/overview.mdx index 6c3912907..4c477f2d5 100644 --- a/contribute/snippets/overview.mdx +++ b/contribute/snippets/overview.mdx @@ -48,8 +48,9 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri Display sequential instructions in a numbered format. @@ -58,6 +59,7 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri title="Code groups" icon="code" href="https://www.mintlify.com/docs/components/code-groups" + horizontal="true" > Display multiple code examples with a toggle. @@ -66,6 +68,7 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri title="Cards" icon="square" href="https://www.mintlify.com/docs/components/cards" + horizontal="true" > Highlight content with customizable containers and icons. Prefer regular ordered or unordered Markdown lists and resort to cards only when the relevant links and content should stand out. @@ -74,14 +77,16 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri title="Columns" icon="columns-3" href="https://www.mintlify.com/docs/components/columns" + horizontal="true" > - Arrange `` components in responsive layouts. + Arrange \ components in responsive layouts. Expandable sections for progressive disclosure of content. @@ -90,30 +95,34 @@ Keep formatting as simple as possible. Avoid components when a paragraph or seri title="Expandables" icon="chevrons-down" href="https://www.mintlify.com/docs/components/expandables" + horizontal="true" > - Show and hide detailed content on demand. Append the `expandable` keyword to the opening part of a code block to collapse large examples. + Show and hide detailed content on demand. Append the expandable keyword to the opening part of a code block to collapse large examples. Add inline labels and status indicators for outdated or deprecated items. Otherwise, avoid this component. Display additional information on hover without going too deep. Link to the [glossary](/foundations/glossary), a detailed explanation page, or a reference page instead. Display parameter and property definitions, configuration options, or object fields. @@ -122,28 +131,31 @@ Use either of the following components only on pages that document HTTP APIs. Be - Show `` that describes API response structures and fields. + Show \ that describes API response structures and fields. - Show `` and `` side by side. + Show \ and \ side by side. When explaining a complex topic or writing a tutorial, use concise diagrams to clarify behavior that text and code cannot. - Use code blocks with `mermaid` syntax to create flowcharts, sequence diagrams, and more. + Use code blocks with [Mermaid.js](https://mermaid.js.org/) syntax to create flowcharts, sequence diagrams, and more. ### Do not use